What is AngularJS?
In the first part, we discussed about evolution of Angular framework. If you haven’t read that post, click here to read the previous post.
Let’s start to explore the AngularJS 1.x.
DOM manipulation was cumbersome to developers and it was error prone as well. AngularJS freed the developer for DOM manipulation and make it easier using its
Using AngularJS, developer can make the
CRUD operation very efficiently and in a less timeframe. As application data is in
JSON format, the flow of data from client to server is easier without any data object mappings. Client side validations using
HTML5 saves the server roundtrips and make the application robust.
AngularJS is based on
Dependency Injection (DI) software design pattern. Using dependency injection, we can easily inject any modules, controllers, services, factory etc.
Now, let’s move forward and discuss the various components of AngularJS 1.x.
Components of AngularJS
- Custom Directives
AngularJS extends the HTML with ng-directive. All the AngularJS directives have ng prefix. There are various AngularJS directives, few of them are:
ng-appdirective is the main module level directive. It defines the AngularJS application. It must be the first directive to create any AngularJS application.
ng-controlleris the main part of AngularJS framework. It controls the application data. It interacts with html views and factory/services to get and set the data. All the application level logic must be written here. All the controllers are attached to the AngularJS module.
ng-modelbinds the value of HTML controls to the application data. Controllers and views both can access ng-model object and manipulate its value.
ng-repeatis used to repeat the rendering of HTML elements. This directive is perfect for displaying the tabular data.
AngularJS module is the starting point of any AngularJS application. First of all, you have to define AngularJS module using
ng-app. All the AngularJS controllers are attached to this module. You can inject any third party module in your application from here. The following example demonstrate how to define AngularJS module.
AngularJS controllers are used to write application data as mentioned above. It is denoted by
ng-controller, and it has its own scope object (
$scope). Controllers can have any numbers of properties and methods, which are attached to its scope object. The following example demonstrate how to define controllers.
AngularJS scope object represents the application model. It acts as a glue between the view and controller. We can bind properties and method of scope. Each controller has its own scope, which is represented by
$scope. All the controller’s scopes are associated with root level scope, which is
$rootScope. In the above code,
$scope.Message is the scope of the controller.
I will cover rest of the topics in the next part.
In this blog, we learned about 2 components (Module, Controller) of AngularJS. In the next blog, we will learn about remaining components of AngularJS.
I hope you enjoyed this blog.