First Begining AngularJS Tutorial
Posted in Tutorials
This is the first of a series of AngularJS Tutorials. See the whole series list here.
1. Because this is the beginning tutorial, we start from the very beginning with a basic standard HTML5 page. Create file index.html in an application folder called “shoppinglist”.
2. Type the following in index.html …
angular starting html
3. Put the shoppinglist folder and index.html on your webhost and you get a standard page and form on your browser…
starting html page
4. To turn on the angularJS magic, we need to include the angularJS script to the head of HTML.
Although most javascript should be placed at the footer so that we let the page load before hitting the script, AngularJS is an exception and should be placed at the head section for best results.
For performance, caching, and reliability, it is recommended to include the AngularJS script from a CDN (content delivery network) — such as “Google CDN” (just google that) or from http://code.angularjs.org/
For this tutorial, we’ll use the Google CDN shown here…
Angularjs on Google CDN
Copy the green code snippet to our HTML head section …
angularjs script in head
Note that the URL is missing the “http:” This will work if you have uploaded and run it from your webhost. The reason for the omission is so that it can either be “http:” or “https:” depending on your page. If you are trying run this without a server on your local development machine, then it may not work and in that case insert the “http:”
For performance reasons, we are referencing the minified version (with the angular.min.js) as opposed to angualr.js.
At the time of this tutorial, we are using Angular 1.0.7. Note that Angular versions 1.2.x will work with Internet Explorer 8.0. But AngularJS version 1.3.x will not work with Internet Explorer 8.0 — only IE 9 or higher.
5. We can tell angularJS to be active on the whole HTML page or just a part of it by including the “ng-app” directive to the HTML element that we want it to be active on. Typically, we put “ng-app” on the <body> element to let Angular be active over the whole page.
While it would work putting ng-app in the <html>, it is preferred to put it on the <body> tag because the <head> would be needing angular processing.
angular app directive
Directives starts with “ng” because “ng” sounds like angular. Angular is called Angular because its idea to be declarative HTML. And HTML has a lot of angular brackets.
While it is true that “ng-app” is not a valid HTML5 attribute, browsers will not mind. They will simply ignore it. However, the Angular Javascript that you had just included will be able to see it.
6. Now we will introduce some data-binding. We will bind our model to our view. We specify the input box to be our model by adding the “ng-model” directive as shown below. We are naming our model “itemToAdd”.
angular model view
7. Our view the the HTML. We add the template tag {{ itemToAdd }} somewhere on the HTML (as shown above) in order to demonstrate the data-binding.
8. Run in the browser and you as you type in the input box, the view changes…
angularjs tutorial1 example
As you type into the input box, the model changes. Whenever the model changes, the view changes — in real time. Test it out for yourself here. And then continue to the next tutorial where we learn about the Angular ng-submit directive.
Advanced topic:
Having an attribute like ng-app in HTML tags would not pass HTML validation because HTML does not have such an attribute. However, HTML5 does allow us to have custom attributes if we prefix it with “data-” as in “data-ng-app”. Angular lets us use “data-ng-app” in place of “ng-app” and it would work the same plus pass HTML validation. But most people use the shorter “ng-app” since it is less typing and less code for the browser to download.
Related Posts
Tags
Share This
