Basics of AngularJS – Part 2

by Santhakumar Munuswamy

  Posted on  05 July 2015

  AngularJS


 

This article explains the basics of AngularJS, a JavaScript framework to build structured and dynamic web applications

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: 

What is AngularJS?

AngularJS is a javascript framework for created to build a structured and dynamic web application.

Why AngularJS? 

  • It is a lightweight platform and open source
  • We can use many ways to structure a web application at client side
  • Added attaching directives, custom tags, attributes, expressions, templates within HTML
  • It can support to test driven development (TDD)
  • It can support to 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

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 is automatic updating the changes of data between the model and view. When the model changes, the view reflect the changes and vice versa.  

Directive

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

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

MVC

Model: 

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

View: 

It is render the model data and send user request to controller.

Controller:  

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

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. Thank you for reading my articles. Please kindly share your valuable comments and suggestion with me. 

 


About the Author
Santhakumar Munuswamy is a seasoned Solution Architect and Most Valuable Professional in Cloud /AI solutions. He has been experienced around 14 years in Solution designing, Software Product Development, Technical Documentation, Project Management for Web and Cloud Applications. He has experience in the IT industry across different domains (Automotive, Telecommunications, Healthcare, Logistics & Warehouse Automation, etc.) with roles in Technical Architect, Genesys Consultant, Technical Lead, Team Lead, and Developer. He has experienced in mentorship and coaching high potential developers.

Follow Me: Facebook, Twitter, Google Plus, LinkedIn
blog comments powered by Disqus


Month List

Community Badges