Basics of AngularJS: Part 2

I have provided an introduction to AngularJs in my previous article and now we will explain the basic concepts of AngularJs and why we need to use AngularJs and its features. Here are the links:

Introduction to AngularJs

Basics of AngularJs: Part 2

AngularJs

AngularJs is a JavaScript framework to build a structured and dynamic web application.

The following are the reasons why to AngularJs:

• It is a lightweight platform and open source.
• We can use many ways to structure a web application at the client side.
• Added attaching directives, custom tags, attributes, expressions, templates within HTML.
• It can support to Test Driven Development (TDD)
• It can support MVC and MVVM design pattern.
• We can easily do maintainability and extensibility.
• We can easily code reuse in application.
• We can develop for Single Page Application.

The following are the features of AngularJs:

• Data Binding: Two-Way Data Binding
• Directives
• MVC design pattern
• Dependency Injection
• Testing
• Routing
• Templates
• Models
• Controllers
• Validation
• Filters

Data Binding

Data binding automatically updates the changes of data between the model and view. When the model changes, the view reflects the changes and vice versa.

 

Figure 1: Two-Way Data Binding Diagram  

 

Directive

A Directive can be used in an element name, attributes, class name as well as comments.

<div class="container">
        Name:  <input id="Text1" type="text" ng-model="name"/> {{name}}
    </div>

MVC

Model: It contains a business logic with an application functionality and notify view changes. 

View: It renders the model data and sends user requests to the controller. 

Controller: It contains an application behaviour and maps the user action to the model, select view for response. 

Figure 2: MVC Design Pattern  

Dependency Injection

Dependency Injection (DI) is a software design pattern that deals with how components get hold of their dependencies.

Filters

We can use filter format data for display to the user.

{{expression | filter_name}}

{{expression | filter1 | filter2 | ...}}

Conclusion

This article helps you to understand the basics of AngularJs and its features.