Wednesday 3 July 2013

Web Apps Development - Angular JS

the goal of Angular “is to augment browser-based applications with model–view–controller (MVC) capability” and it does just that, providing a binding/MVC framework. That’s two-way binding, mind you. Delicious. With a structure as simple as {{ my data }}, you bind data to your page. The $scope service detects changes to the model and modifies HTML expressions in the view by way of controllers. Working in the other direction, changes to the view are reflected in the model. This removes the need for the vast majority of data-centric DOM manipulations many of us, myself included, take for granted when working with a library like jQuery.

Angular has the $http service and powerful directives that make it almost always unnecessary.” One thing is for sure, if you stick to Angular, the jQuery loops and explicit back-and-forth with the server will be absent from your code, since Angular provides such a succinct and clean method of achieving the same things.

Directives
Angular uses directives to plug its action into the page. Directives, all prefaced with ng-, are placed in html attributes.
Some common directives that come pre-built with Angular are:
ng-app: this is essentially the initial entry point of Angular to the page. It tells Angular where it gets to act. <html ng-app> is all it takes to define a page as an Angular application.

ng-bind: changes the text of an element to the value of an expression.
<span ng:bind=”name”></span> will display the value of ‘name’ inside the span. Any changes to ‘name’ are reflected instantly in the DOM anywhere the variable is used.
ng-controller: specifies the JavaScript class for the given action. Controllers are typically kept in external .js files.
ng-repeat: creates the very clean loop structures in your page.
<ul>
<li ng-repeat="item in items">
{{item.description}}
</li>
</ul>

effortlessly loops through each item in the collection.

I haven’t used them yet myself, but I have read that creating custom directives can be a tricky issue, something that takes some time to wrap your head around. Angular offers a video to help clarify
 the concept.  Visit their website <a href="http://angularjs.org/"></a>

Get in touch with us for building your robust Web Apps Development Call Raghav 099020-35965 or mail raghav@ravinatechnologies.com today for customized solutions !!


No comments:

Post a Comment