Dot Net Stuff

Introduction of AngularJS


As par official definition, AngularJS is a structural framework for dynamic web apps. AngularJS allow us to use HTML as your template language and lets us to extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.

AngularJS is an open-source web application framework. It was originally developed in 2009 by Misko Hevery and Adam Abrons. It is now maintained by Google. Its latest version is 1.2.21.

There are a few core ideas that you’ll use throughout an Angular app. As it turns out, we didn’t invent any of these. Instead, we’ve borrowed heavily from successful idioms in other development environments and implemented them in a way that embraces HTML, browsers, and many other familiar web standards.

Why AngularJS

Angular is exactly design for HTML. HTML is a very good declarative language for static documents. It does not contain much in the way of creating applications, and as a result building web applications is not easy with only HTML.

There are two approaches to solve the impedance mismatch between dynamic applications and static documents is often solved with:

  • a library a collection of functions which are useful when writing web apps. Your code is in charge and it calls into the library when it sees fit. E.g., jQuery.
  • frameworks a particular implementation of a web application, where your code fills in the details. The framework is in charge and it calls into your code when it needs something app specific. E.g., durandal, ember, etc.

AngularJS takes another approach. It attempts to minimize the impedance mismatch between document centric HTML and what an application needs by creating new HTML constructs. Angular teaches the browser new syntax through a construct we call directives. Examples include:

  • Data binding, as in {{}}.
  • DOM control structures for repeating/hiding DOM fragments.
  • Support for forms and form validation.
  • Attaching new behavior to DOM elements, such as DOM event handling.
  • Grouping of HTML into reusable components.

Features of AngularJS

The features of AngularJS are as follows:

  • AngularJS is open source, completely free, and now uses in various applications across the world. It is licensed under the Apache license version 2.0.
  • AngularJS support cross browser. Applications written in AngularJS are cross-browser compliant.
  • AngularJS is a very efficient framework that can be used to create Rich Internet Applications
  • AngularJS allows developers an options to write client side applications using JavaScript in a clean Model View Controller (MVC) way.

Concepts of AngularJS

The advance concepts of AngularJS are as follows:

  • Data-binding: It supports MVVP (Model View View Presentation). It is the automatic synchronization of data between model and view components.
  • Scope: These are objects that refer to the model. They act as a glue between controller and view.
  • Controller: These are JavaScript functions bound to a particular scope.
  • Services: AngularJS comes with several built-in services such as $http to make a XMLHttpRequests. These are singleton objects which are instantiated only once in app.
  • Filters: These select a subset of items from an array and returns a new array.
  • Directives: Directives are markers on DOM elements such as elements, attributes, css, and more. These can be used to create custom HTML tags that serve as new, custom widgets. AngularJS has built-in directives such as ngBind, ngModel, etc.
  • Templates: These are the rendered view with information from the controller and model. These can be a single file (such as index.html) or multiple views in one page using partials.
  • Routing: It is concept of switching views. MVC developers should be familiar with this concept.
  • Model View Whatever: MVW is a design pattern for dividing an application into different parts called Model, View, and Controller, each with distinct responsibilities. AngularJS does not implement MVC in the traditional sense, but rather something closer to MVVM (Model-View-ViewModel). The Angular JS team refers it humorously as Model View Whatever.
  • Deep Linking: Deep linking allows to encode the state of application in the URL so that it can be bookmarked. The application can then be restored from the URL to the same state.
  • Dependency Injection: This is one of the most important features of AngularJS. AngularJS has a built-in dependency injection subsystem that helps the developer to create, understand, and test the applications easily.

Advantages of AngularJS:

The advantages of AngularJS are:

  • It provides the capability to create Single Page Application in a very clean and maintainable way.
  • It provides data binding capability to HTML. Thus, it gives user a rich and responsive experience.
  • AngularJS code is unit testable.
  • AngularJS uses dependency injection and make use of separation of concerns.
  • AngularJS provides reusable components.
  • With AngularJS, the developers can achieve more functionality with short code..
  • In AngularJS, views are pure html pages, and controllers written in JavaScript do the business processing.

Summary: This article covers the basic and the advance features of AngularJS with some idea about its uses. We will discuss each of AngularJS’s features in details. I hope you will find it useful these article.


Keen to hear from you...!

If you have any questions related to what's mentioned in the article or need help with any issue, ask it, I would love to here from you. Please MakeUseOf Contact and i will be more than happy to help.

About the author

Anil Sharma is Chief Editor of dotnet-stuff.com. He's a software professional and loves to work with Microsoft .Net. He's usually writes articles about .Net related technologies and here to shares his experiences, personal notes, Tutorials, Examples, Problems & Solutions, Code Snippets, Reference Manual and Resources with C#, Asp.Net, Linq , Ajax, MVC, Entity Framework, WCF, SQL Server, jQuery, Visual Studio and much more...!!!

blog comments powered by Disqus