Trying to write (copy) a test Angular project in eclipse. Have the the three files from Angular website https://docs.angularjs.org/api/ng/directive/ngController in my eclipse project(which I created as static web project then converted to Angular project). Does not display values correctly. Clear works. Alert etc don't.
Can someone please advise?!
Just copy this link into your head tag:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
also may I ask you why you are using Eclipse and not a more simple editor like notepad++ or sublime? I never heard of an angular.js programmer who uses Eclipse.
Just go the link here and follow the steps in your eclipse. But in my eclipse given CDN in this link does not work. So I changed the CDN server to <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> .It is work well. May be OK.
Related
I created a js plugin using jQuery which I already used in my web application. Now I want use it on my IONIC 3 mobile app.
I installed typings and jquery in my project those are working well there then how I can use my own custom jquery plugin in my IONIC 3 project.
Please give me a best possible solution.
It is possible to include your plugin in the index.html file and that's exactly what you have to do.
Just copy your plugin to the src/assets/ folder and then include it in your index.html like you would on any webapp:
<script src="assets/plugin.js"></script> (The path might be incorrect, you have to try which one works)
I'm a newbie in web development in Google Apps Script and I'm having a hard time trying to run a simple webapp which is supposed to set up a menu example by using SlickNav jQuery Plugin. I successfully set it up as a GAS library (you can see the source code here). That plugin requires jQuery 1.7 onwards, so I've also set up jQuery (v2.1.0) as a GAS library (click here to see the code).
After importing both of them as libraries:
in my webapp, it works like a charm in dev. mode:
but in production mode, it throws
"ReferenceError: undefined "jQuery". (line 1, file "slicknav.js", project "slicknav")"
I've spent 3 days trying to make this example running. Am I missing something on this example? What could it be wrong? Can somebody here point me in the right direction?
Thanks in advance.
You cannot use JQuery inside of Apps Script as Apps Script since GAS does not have a DOM to manipulate.
If you wish to use JQuery, or any other JavaScript library inside your web app you need to add it with a <script> tag. Such as adding <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> inside your <head> or below your <body> tags.
Google even has a set of hosted libraries that you can include in your web app: https://developers.google.com/speed/libraries/
If you don't want to use a CDN service (like the google hosted libraries) you can copy/paste the source into a new GAS html file, and include that in your web app.
Example:
jquery.html
<script>
//Paste jquery.min.js here
</script>
index.html
<html>
<head>
<?!= HtmlService.createHtmlOutputFromFile('jquery').getContent(); ?>
</head>
</html>
After Clarification:
JQuery needs to be loaded before slicknav, since it requires it. It looks like you are, but that's the error it's throwing. I would start by simplifying your process and using script tags with CDN hosted libraries and see if that works. Then try including the files in your current project and see if that works...etc Try and isolate the problem in that manner.
It's also good to note than when deploying, you HAVE to update the version to apply and development changes.
I have some experience using AngularJS 1.x in .Net MVC application. In that project, we basically downloaded all required Angularjs min files and included them in project. We did not use npm or bower. It worked fine.
Now my next project is on Java Web application. This is an existing application with plain servlet/jsp. I want to use Angularjs 2 on new pages that I'm developing. But I'm not able to make progress on how to include Angularjs in this existing project.
Angular team recommends to use Typescript along with npm/gulp. But I want to stick to javascript and not introduce complications with TypeScript in existing project. I was expecting to download angular min files and include in my JSP and get going. Apparently I cannot even find link do download min files. New Angular website doesn't even have link to download them. I also looked up angular github but couldn't find min files.
I would appreciate if someone can guide me in right direction. At this point, I'm thinking to stick to 1.x instead of 2.0. Thank you.
Wow, that is so annoying.
You could try creating a test project using NPM, add the dependencies you need, and then build the project. From there, you could copy paste out the javascript files you need.
Hope that helps.
You can find angular2 versions prior to release here : https://code.angularjs.org but if you want the latest ones you will have to try Samuel's answer.
Besides, if you're doing this project at school and it asks you to use servlet / jsp, you should stick with it and use something like bootstrap for easier html/css.
Doing the frontend with angular might be considered a cheat or a workaround ( speaking from experience )
I have installed webstorm and trying to create a simple angular js program.
I have created an empty project in webstorm, then added the angular.js file in libs directory. Then when I try to write code for angular js the auto completion is not working.
Here is the screenshot of the issue.
Please help me how to create angular js programs in webstorm?
Update:
Now I have added Angular JS as a dependency by following the steps Installing AngularJS Manually in JetBrains Doc. Also removed the angular js file from my project which was present as part of my 1st image in this post.
Even then I am not able to see the auto-completion working. I have verified that the angular js plugin is enabled in my webstorm. Please let me know what could be the issue?
Update:
I have plugin for Angular JS already enabled in my webstorm, please check below image:
Not really an answer (have you saved your HTML, why not put your JS code into external files)... but why not create a project with a generator using Yeoman - http://yeoman.io/ That will give you a better app structure, build tools, package managers, unit tests... and your IDE should be better equipped for this.
This may help too: http://blog.jetbrains.com/webstorm/2014/07/how-webstorm-works-completion-for-javascript-libraries/
There is a AngularJs plugin for Webstorm. This will give you autocomletion in html files. See this tutorial how to install it:
youtube tutorial
There is even a documentation page form JetBrains which explains how to creat a AngularJs Project:
JetBrains Doc
Found in WebStorm doc
Configure AngularJS as a WebStorm JavaScript library, to let WebStorm recognize AngularJS-specific structures and provide full coding assistance:
Open the Settings dialog box, and click JavaScript Libraries.
In the Libraries area, click the Add button.
In the New Library dialog box that opens, specify the name of the library.
Click the Add button add next to the list of library files and choose Attach Files or Attach Directory on the context menu, depending of whether you need separate files or an entire folder.
Select the Angular.js or Angular.min.js, or an entire directory in the dialog box that opens. WebStorm returns to the New Library dialog box where the Name read-only field shows the name of the selected files or folder.
In the Type field, specify which version you have downloaded and are going to add.
If you added Angular.js, choose Debug. This version is helpful in the development environment, especially for debugging.
If you added the minified Angular.min.js, choose Release. This version is helpful in the production environment because the file size is significantly smaller.
Or check out this blog post
I've been playing around with AngularJS - which is a kick-ass front end framework by the way.
Today I tried to incorporate the angular-seed starter app (found here: https://github.com/angular/angular-seed) into a currently existing Rails 3.1.3 application.
Had a few issues getting the demo code - here: http://docs.angularjs.org/#!/tutorial - to work in the asset pipeline, so just for testing purposes I put them into the public folder - old school style.
I followed the tutorial and had all of my views, controllers, services set up correctly. However, when I included the js files at the bottom of my index page:
<script src="angular/app/lib/angular/angular.js" ng:autobind></script>
<script src="angular/app/js/services.js"></script>
<script src="angular/app/js/controllers.js"></script>
... none of the controllers would work. I would get the {{ model.property }} tags within my templates instead of the actual output.
No Javascript errors in Chrome's dev tools - and network and resources showed all expected files loaded properly.
I thought that maybe I had overlooked something in my code, but when I looked at the developers guide, there is a link to angular's cdn:
<script src="http://code.angularjs.org/angular-0.9.19.min.js" ng:autobind></script>
Just for the heck of it, I replaced my local angular.js script call with the cdn, and suddenly everything was working as expected.
I double checked, to make sure that I was loading the local copy from the proper directory, and I was - it's the standard directory that comes with the angular-seed file. This file was also showing as a resource that was downloaded properly.
Anyone have ideas on why the cdn worked but the local copy would not?
The angular-seed uses AngularJS 1.0.0rc5 (currently) which is incompatible with 0.9.19. Check out how the seed app is wired. (e.g. remove ng:autobind and add ng:app or ng-app to the html tag in your layout template).
Looks like you are using an old version: You want to read this: http://docs.angularjs.org/#!/guide/dev_guide.bootstrap.auto_bootstrap
What you should be doing is using the new version, and the docs are here: http://docs-next.angularjs.org/guide/dev_guide.bootstrap.auto_bootstrap
For one thing, you're missing a double-quote in your first script reference.