AngularJS has been attracting a lot of attention for all the good reasons , this article is to look at angular features and compare it to other frameworks .
Example
Example
- specifies where angular is work on the view
Two-Way Binding
Let's look at the best and the dominating factor on why you should look at AngularJS . Its the two way binding . Most Javascript frameworks adapt the Model-View paradigm and the View is rendered from the model when the page is rendered . But what happens after that when the model changes or view gets updates? there are callbacks that the UI developers have to work with to make sure that the View is in sync with the model and the model gets updated with changes in View . But AngularJS provides this capability by default without any callbacks the Two-way binding is provided by default ( for Code - Have a look at the example provided under Directive )
Simple JS
All the code for angular js doesn't require you to understand any new syntax or framework . Its all fully Javascript. So you will already understand most of the code even without knowing angularEasy to adapt and get Started
Requires simple js include angular.js , angular-animation.jsExample
<html ng-app>
<body>
<h1>Hello {{1 + 2}}</h1>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js">
</script>
</body>
</html>
Advantages
- Reduce boilerplate
- Use default structure that is self explanatory
- Easy to test
Directive
Directives are the AngularJS way of dealing with DOM manipulation and providing the two-way binding , they are also responsible for rendering and providing reusable UI widgets. They can be used for simple things like reusing HTML snippets or to more complex things like modifying the behavior of existing elements (like ng-show, ng-class) or integrating with third-party components like charts . Let's look at an example of ng-repeatExample
<div ng-repeat=‘item in cart.items’>
<span ng-bind=‘item.name’></span>
<button ng-click=‘cart.delete($index)’>delete</button>
</div>
javascript
var myApp = angular.module(‘coolApp’,[]);
myApp.controller(‘CartCtrl’ , function () {
this.items =[{ name:’Choclate’},
{ name:’bread’},
{ name:’Cofee’}];
this.delete = function(index) {
this.items.splice(index,1);
};
});
The delete function just changes the model without any updates to the View, why ? because there is no need to do this , the view is automatically updated based on changes to the model . This is the power of two-way binding
Databinding
Databinding is achieved in javascript by using the double curly brackets - {{}} .
Best way to understand this is by an example
Example
hello.js
this.greeting =‘Hello!’;
hello.html
{{greeter.greetings}}
<input ng-model=‘greeter.greetings'>
ng-cloak can be used to avoid unset values on load , can also be done by ng-bind
Controller (ng-controller)
Controller is a specialized Directive ng-controller and does the following
- Expose model to View
- Expose functions to handle UX
- Update model to change the view
- Instantiate once per use in templates
- Can request $scope
$scope - can be nested , without proper $scope read can be propagated to the nested levels however write is always local to the method . To avoid this use $scope
myapp.Controller(‘GreetCtrl’ , function ( $scope ) {
$scope.greeter = { greeting:’Hi’}
});
$watch(expression,callback ) - executes callback when expression changes
$apply - used when the model changes outside the angular control
Filters
Mainly used for formatting the output and the built in filters for currency and date
Example
{{invoice.total | currency}}
custom filters can be added using
myApp.filter( ‘myfilter’ , function() { …});
Server Interaction
basically done by using $http or by $resource (for REST) , there are also other options- Restangular
- Angular Fire
- Breeze JS
Example
$http.get(‘/someurl’);
$http.get(‘/someurl’).success( function ( data,status,header,config) { ….})
.error( function ( data,status,header,config) { ….}).
$routeProvider for configuration specific to url , following can be configured
- Controller
- Template
- URL
- custom values
No comments:
Post a Comment