Are you looking forward to develop a rich and complex web application that focuses more on functionality than presentation? Angular is the way to go. It may sound like yet another JavaScript library, but it’s much more than that. It’s more of a whole framework.
As the web applications are adapting more and more complex nature with time, MVC for web application is becoming more and more tempting which lead to development of AngularJS. In simple words MVC means separating concerns in an application. AungularJS embellish web applications with model—view—controller (MVC) capability. It does that well by separating Model(Data manipulation), View (HTML, CSS ) and Controller (event handling) very cleanly.
It’s a lightweight framework written entirely in JavaScript. So it’s completely compatible with desktop and mobile browsers, other JavaScript libraries and also with frameworks like PhoneGap.
Angular features to look for
- Ready baked MVVM/MVC/MVW architecture design pattern
- Provides powerful bidirectional data binding between model and view. This eliminates the need for wrappers, getters/setters or class declarations
- Some of the frequently used functionalities come by default with AngularJS. This includes REST and AJAX services, form validations, currency formatting, date formatting etc.
- Embraces reusability by allowing you to create custom components that can be used in other contexts
- Has an extraordinary in built end to end testing mechanism (i.e. Angular Scenario Runner) which can be used to simulate user interaction with your application
- Can be used as template engine
- Compatible with all desktop and mobile browser
- Reduces the amount of code required to manipulate DOM structure and nested pile of jQuery callbacks
- Less code, more fun. Less code leads to less code to debug and to manage and also leads to faster development and more productivity
- Well maintained and highly reliable
AngularJS provides higher level of abstraction and is composed of several components. Few of its components are explained below in brief:
Module
Module is an entry point for your application. A Module can be broken down into several different modules like service module, directive module, filter module and application level module and these modules can be loaded and executed in different order. For example, you may want to run directive module before your UI module so that DOM looks perfectly well on the browser.
Controller
Controller contains the business logic of your application. Each controller represents a specific action and is basically a JavaScript function. Controllers can be reused with different context and can be shared with several views.
Check out full example here: http://jsfiddle.net/nishant969/nV2Ub/
Filters
As the name suggests, it’s an operation that returns refined data. There are a few built-in filters you can use or you can always create your own.
Services
Services is a way of sharing distributing application logic across application. Angular provides few core services. Creating custom service for application is also allowed.
Check out full example here: http://jsfiddle.net/nishant969/84WWk/
Directives
Directives is a way to make browser do things for you. Directives are attached with HTML tags as attributes. During DOM compilation, Directives are executed which allows directives to plug any action, or transform the DOM. Angular has an in-built set of directive which can be used to aid functionalities like looping, binding etc. You can also create custom directive for the web application
Check out full example here: http://jsfiddle.net/nishant969/42gna/
AngularJS is quickly becoming the popular among the web developers for developing complex and rich client side web applications. However, if your application highly relies on the server for most of the heavy-lifting of views, AngularJS can be overkill.
Some of the developers may find a steep learning curve, but walking an extra mile is totally worth when the gain is high and appreciative.
For more details visit:
