top button
Flag Notify
    Connect to us
      Facebook Login
      Site Registration Why to Join

    Get Free Article Updates

Facebook Login
Site Registration
Print Preview

Key features of AngularJS?

0 votes
64 views

In this article I am trying to to cover important features of AngularJS, which are as follows - 

a. Scope: Scope is a JavaScript object that refers to the application model. It acts as a context for evaluating angular expressions. Basically, it acts as glue between controller and view. Scopes are hierarchical in nature and follow the DOM structure of your AngularJS app. AngularJS has two scope objects: $rootScope and $scope.

b. Controller: AngularJS application mainly relies on controllers to control the flow of data in the application. A controller is defined using ng-controller directive. A controller is a JavaScript object containing attributes/properties and functions. Each controller accepts $scope as a parameter which refers to the application/module that controller is to control.

c. Model: Models are plain old JavaScript objects that represent data used by your app. Models are also used to represent your app's current state.

d. View: The view is responsible for presenting your models data to end user. Typically it is the HTML markup which exists after AngularJS has parsed and compiled the HTML to include rendered markup and bindings.

e. Services: Services are singletons, which are objects that are instantiated only once per app (by the $injector). They provide an interface to keep together methods that relate to a specific function. AngularJS provides many inbuilt services for example, $http, $route, $window, $location etc. Each service is responsible for a specific task for example, $http is used to make ajax call to get the server data. $route is used to define the routing information and so on. Inbuilt services are always prefixed with $ symbol.

f. Data-binding: AngularJS data-binding is the most useful feature which saves you from writing boilerplate code (i.e. the sections of code which is included in many places with little or no alteration). Now, developers are not responsible for manually manipulating the DOM elements and attributes to reflect model changes. AngularJS provides two-way databinding to handle the synchronization of data between model and view.

g. Directives: Directives might just be the killer feature of AngularJS. Directives allow us to extend the grammar of the web through reusable HTML elements, attributes, and classes. AngularJS directives are extended HTML attributes with the prefix ng-.

h. Filters: Filters are used to change modify the data and can be clubbed in expression or directives using pipe character. AngularJS filters can be used to transform data:
1.currency -Format a number to a currency format.
2. filter - Select a subset of items from an array.
3. lowercase - Format a string to lower case.
4. orderBy - Orders an array by an expression.
5. uppercase - Format a string to upper case.

posted Oct 3 by Shivaranjini

  Promote This Article
Facebook Share Button Twitter Share Button Google+ Share Button LinkedIn Share Button Multiple Social Share Button


Related Articles

In this Article I am trying to cover the major differences between JQuery and Angular.js, comment and share this if you like.

Framework
If you compare jQuery and Angular, the former is a library and the latter is a framework. You can plug the library in your project and either use it fully, partially or not use it all. It’s like a plugin, a supplement to your JS project. With a framework – you have to play by its rules, either use it fully or don’t use it all. Angular.js is a MVC framework, it has model, view and controller which is one of the most popular software development architectures today. When developing with Angular, you have to start from the ground up with your architecture in mind. Although it’s possible to add Angular to your existing project, it’s just add more complexity in the long run.

Don’t use Angular the jQuery way
There are thousands of jQuery plugins out there, it’s very to just plug something in and forget about it. Angular has different structure, it’s recommended to use directives instead. Try to develop “the angular way” instead of just patching the code with old good plugins. It’s not even necessary to add jQuery to your project, Angular comes with jqLite (simplified version of jQuery for basic DOM manipulation).

Single page application
The architecture of the Angular app is different, most of them are single page applications (SPA). Instead of loading all the code at once like we do with jQuery and showing and hiding different parts of the DOM, we load templates on demand (using http requests). That way the application stays more modular and easier to maintain, debug or update. I like the approach where you create controller, module, HTML template and CSS file for every view in your app.

Data Binding
Data binding is one of the best features in Angular.js (one way or two way binding). This makes data completely independent from the presentation, unlike in jQuery where your model (data) is the DOM. For example, data comes from HTTP request (http module), it’s added to the scope ($scope.data) in controller and rendered in HTML template as {{ data }}.
This way you as a developer know where data is coming from and where you need to go to make any changes. In jQuery if you have something like $(‘#data’).render(); it may render a whole new page and you won’t event know what it is or where this content came from.

Summary
Angular doesn’t replace jQuery, it doesn’t compete with jQuery, they both can be used in the same application. jQuery for DOM manipulation, Angular – for structure. In fact there is nothing better to do DOM manipulation than jQuery.

READ MORE

Data binding is a very powerful feature of the software development technologies. Data binding is the connection bridge between view and business logic (view model) of the application. Data binding in AngularJs is the automatic synchronization between the model and view. When the model changes, the view is automatically updated and vice versa. AngularJs support one-way binding as well as two-way binding.

One-Way and Two-Way Data Binding
Figure 1: One-Way and Two-Way Data Binding

Binding Directives in AngularJs

  • ng-bind
  • ng-bind-html
  • ng-bind-template
  • ng-non-bindable
  • ng-model

ng-bind

This directive updates the text content of the specified HTML element with the value of the given expression and the text content is changing on expression changes. It is very similar to double curly markup ( {{expression }}) but less verbose.

Syntax

<ANY ELEMENT ng-bind="expression"> </ANY ELEMENT>   

Ng-bind-html

It (whatever it is) evaluates the expression and inserts the HTML content into the element in a secure way. It uses the $sanitize service, so to use this functionality, be sure that $sanitize is available.

Syntax

<ANY ELEMENT ng-bind-html=" expression "> </ANY ELEMENT>   

ng-bind-template

It (whatever it is) replaces the element text content with the interpolation of the template. It can contain multiple double curly markups.

Syntax

<ANY ELEMENT ng-bind-template=" {{expression1}} {{expression2}} … {{expressionn}} "> </ANY ELEMENT>   

ng-non-bindable 

This (whatever "this" is) directive informs AngularJs to not compile or bind the contents of the current DOM element This element is useful when we want to display the expression but it should not be executed by AngularJs.

Syntax

<ANY ELEMENT ng-non-bindable > </ANY ELEMENT> 

ng-model

This (whatever "this" is) directive can be bound with input, select, text area or any custom form control. It provides two-way binding. It also provides validation behavior. It also keeps the state of the control (valid/invalid, dirty/pristine, touched/untouched and so on).

Syntax

<input ng-bind="expression"/> 

READ MORE
Contact Us
+91 9880187415
sales@queryhome.net
support@queryhome.net
#280, 3rd floor, 5th Main
6th Sector, HSR Layout
Bangalore-560102
Karnataka INDIA.
QUERY HOME
...