credit: https://www.amitavroy.com/justread/content/articles/working-xml-angular-js/
Why should we use Angular JS?
- Helps organize the javascript code
- Helps create responsive (as in fast) websites
- Plays well with jQuery
- Is easy to test
A client side javascript framework for adding interactivity to HTML.
We need to figure out when to trigger our Javascript.
Directives
A directive is a marker on a HTML tag that tells Angular to run or reference some Javascript code.
e.g. In the following code snippet, ng-crontroller is a marker on body tag
<body ng-crontroller='abcController'> </body>
And the referenced javascript code is:
function abcController(){ alert('hello Angular JS!'); }
The first step is to download the library from the official website
Modules
- Modules are where we write pieces of our Angular application to keep our code encapsulated to make our code more maintainable, testable and readable.
- Modules are where we define depencies for our application.
Let’s create a module:
var app = angular.module('abcApp',[]);
And use it:
<html ng-app='abcApp'> </html>
The above code does nothing as such, currently it is just saying that the entire HTML area is part of the Angular application. We can start using expressions at this point:
4
Expressions can also be used for string manipulation:
Hello
Controllers
Controllers are where we define our app’s behavior by defining functions and values.
Let’s have some data printed on the view using controller.
(function(){
var app = angular.module('abc', []);app.controller('abcController', function(){this.a = abc;});
var abc = {propertyA : 'A',propertyB: 'B'};})();
The view should look like this:
<div ng-controller='abcController as abc' > </div>
This works well with a single object but what if we have an array?
Inside a controller:
(function(){
var app = angular.module('abc', []);app.controller('abcController', function(){this.as = abc;});
var abc = [{propertyA : 'A',propertyB: 'B'}, {propertyA : 'C',propertyB: 'D'}, {propertyA : 'E',propertyB: 'F'}];})();
To show this in the view, we need to use ng-repeat:
<div ng-controller='abcController as abc' > <div ng-repeat='a in abc.as'> </div> </div>
There are a lot of build in directives like ng-app, ng-controller, ng-show, ng-hide, ng-repeat etc.
Filters
The basic formula of filters is as follows:
e.g.:
MM/dd/yyyy @ h:mm <!-- formats the date -->lowercase string <!-- uppercases the string -->a vvveeeerrrryy llooonnngggg strrrriiiinngggg <!-- limits the string to specified number 8 --><li ng-repeat='a in abcs | limitTo: 3'> <!-- limits the array elements to specified number 3 --><li ng-repeat='a in abcs | orderBy: -A'> <!-- sorts the array elements in descending order because of - charachter -->
The pipe charachter in the expression asks the expression to take the first parameter to the expression and pass it to the second part of the expression. Like in the following:
$2.695865
Currency is a filter in this case.
Originally published at xameeramir.github.io.