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, is a on body tag ng-crontroller marker <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 area is part of the Angular application. We can start using expressions at this point: HTML 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 like , , , , etc. build in directives ng-app ng-controller ng-show ng-hide ng-repeat 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. source Originally published at xameeramir.github.io .
