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.

AngularJS is a structural Javascript framework. It is developed to create Single Page Application (SPA). In Ajax application, 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 Directive components.

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

• Directives
• Modules
• Controllers
• Scope
• Factory/Service
• Filters
• Custom Directives

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-app directive is the main module level directive. It defines the AngularJS application. It must be the first directive to create any AngularJS application.

• ng-controller is 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-model binds the value of HTML controls to the application data. Controllers and views both can access ng-model object and manipulate its value.

• ng-repeat is used to repeat the rendering of HTML elements. This directive is perfect for displaying the tabular data.

  Module

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.

Index.html

MyApp.js

var app=angular.module("myapp",[]);

Controllers

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.

Index.html

MyController.js

Scope

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.

Summary

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.

Cheers!

Read more:

Evolution of Angular 1.x to Angular 6