Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.
AngularJS is picking up the pace in the arena of web application development, especially the development of the Single Page Applications (SPA). AngularJS is more of a client framework than a simple library due to the fact that it takes care of building or manipulating the DOM elements based on the user declarations. AngularJS is an open source project created and maintained by Google.
To use AngularJS in your ASP.NET web application, first download it from here and add it as a script tag on the web page. In this article I will introduce you to AngularJS and provide a few sample codes, which will allow you to understand it better.
AngularJS Directives
In AngularJS, directives are used as declarative syntaxes, which will be processed by the compiler on the response to the browser resulting in a specific behavior, changes to the DOM elements, etc. Basically this is a way in AngularJS for extending the HTML declarations.
There are many inbuilt directives that AngularJS provides and the following are few among them.
- ng-app
- ng-controller
- ng-repeat
- ng-model
- ng-click
The directives can be used as attributes, class names, HTML tags, etc. The inbuilt directives are prefixed with ng and they can also be written with “:” and ”_” like ng:app for example.
AngularJS also allows you to create user defined directives.
Organized and Structured – Modules
One of the main advantages of using AngularJS is that your client code will be more organized and structured. It allows you to create separate modules and in the HTML the scope can be clearly defined.
<%--declaring the module for the page--%> <html ng-app="MyFirstModule"> <head> <script src="Scripts/angular.min.js" type="text/javascript"></script> <script type="text/javascript"> //Creating alert module in script var myModule = angular.module('MyFirstModule', []); </script> </head> <body> <%--Body goes here--%> </body> </html>
The module specific codes can be moved into separate script files and then referred onto the page from there. All the other functions, events, models can be associated to respective modules.
In short, modules are the ones that are responsible for bootstrapping the application.
MVC in AngularJS
AngularJS works through the MVC pattern, which is Model-View-Controller. Even if you are aware of the standard MVC pattern it definitely makes sense to understand about MVC pattern with respect to AngularJS.
Model – These are the properties that are available in the $scope object. The models are initialized in the controller. Whatever updates that happen on the DOM element value will reflect back to the model itself and also onto other DOM elements to which it is bound.
Controller – It is the place where the application behaviors are defined. The scope will get injected into each controller.
View – View is nothing but the client HTML to which the behaviors and data are applied.
Following is a sample code illustrating the MVC in AngularJS.
<%--declaring the module for the page--%> <html ng-app="MyFirstModule"> <head> <title></title> <script src="Scripts/angular.min.js" type="text/javascript"></script> <script type="text/javascript"> //Creating alert module in script var myModule = angular.module('MyFirstModule', []); myModule.controller('MyController', ['$scope', function ($scope) { $scope.cars = [{ carnumber: 1, company: 'Audi', color: 'Black' }, { carnumber: 2, company: 'BMW', color: 'Blue' }]; $scope.ShowColor = function (color) { alert(color); }; } ]); </script> </head> <body> <div ng-controller="MyController"> <div ng-repeat="car in cars"> <h3>{{car.carnumber}}</h3> <label>{{car.company}}</label> <br /> <textarea ng-model="car.color"></textarea><br /> <input type="button" ng-click="ShowColor(car.color)" value="What is the current color of the car?"></button> </div> </div> </body> </html>
Fig 1.0 shows the screenshot of the resulting webpage along with the modified color alert.
Fig 1.0 – Modified Color Alert
Other Interesting Features
In this section I will list other interesting features that can be achieved in AngularJS. Following are some of them.
- Filters – Filters are used for performing data transformations at the time of binding. You can associate the filters at the module level.
- Expressions – Expressions are the code that are placed in the binding places and get evaluated at runtime.
- AngularJS services – Services are used to maintain the code that will be required across the application. Mostly the methods like webservice calls and utility methods will go into the services.
- Events & change notification – AngularJS has a sophisticated event handling, notification of the change to the models and event broadcasting mechanism.
- Two way binding – The model binding that are done to the HTML elements are two way. It means any change to the element value will be reflected in the model.
- Dependency Injection – Injector object in AngularJS can be used to perform dependency injections.
- Easy unit testing – Since the layers are cleanly decoupled by using MVC and dependency injections, the unit testing of the client code becomes easy with AngularJS.
I hope this article provided a nice introduction for programming with AngularJS. Once you start using AngularJS in your application, the client code you will be writing will be reduced, cleaner and more structured.
Happy reading!
