I wanted to write a simple beginner AngularJs Tutorial as I dive into learning it myself that may help others. The following posts will be my learning as well as views.
The first thing to do is to include AngularJs. You can do this 2 ways:
One being you reference it from your own server.
<script src="lib/angular/angular.js">Or you can reference Google’s CDN.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
Now that we have included the script the next thing we will do is include ng-app directive. AngularJs uses this concept of directives to mark a DOM element to get picked up by the Angular Compiler. For almost any application of using Angular you want to include the ng-app directive on the very outer div or even the body tag. This tells Angular to treat that element as the root or base element of the application. From there, you can use Angular within that element without having to use the directive again.
<body ng-app>
</body>Notice in the example above, since we included the ng-app in the body tag we can now use Angular within the body without using the directive again. Let’s take a look at using a simple expression with AngularJs within the body tag. I would assume the majority of developer know how to use the + operator to concatenate two strings together. Angular makes using expression like this inline pretty simple.
<body ng-app>
I am {{ 'trying '+ 'to ' + 'concat' }}
</body
This is a core feature of Angular’s templating capabilities, a binding, the double-curlie braces {{ }} as well as a simple expression 'trying '+ 'to ' + 'concat'. When this binding is executed it will do the concatenations and you will end up with an output of “I am trying to concat”. Try and run a simple math function and see if the outcome is what you would expect.
Some math: <p>4 + 6 = {{ 4 + 6 }}</p>
If you think the outcome is 10, then you are correct. The binding will execute and add 4 and 6 together.
Here is a fiddle with a working example of this AngularJs tutorial. Click Here For Fiddle
Recent Comments