Everyone is asking for single page applications that provide a better user experience with minimum page load times. Although there are a lot of JavaScript frameworks available in the market that supports single page applications, we’re going to be looking at Angular JS in this post, which is a framework developed and managed by Google itself and is one of the most popular JavaScript frameworks available.

AngularJS is an open source framework that is designed to support the development of single page applications. It provides an extremely fluid user experience and provides the framework for creating RICH Internet Applications (RIAs). AngularJS provides comprehensive cross-browser support. Using AngularJS you can build large scale and high performance web applications that are also easy to maintain.

AngularJS extends the HTML DOM with additional attributes and makes it more responsive to user actions. It supports both design pattern MVC and MVVM and provides the developer with the option to choose the design they prefer to use in the application. As such, you could call AngularJS an MVW (Model View Whatever) framework, where the ‘Whatever’ stands for “whatever works for you”.

AngularJS – Core Features

Below are some of most important core features that AngularJS offers.

Two way Data-binding:　AngularJS provides two way data binding by connecting the HTML (views) to the JavaScript objects so that any change in the model is automatically reflected in the view without DOM manipulation.

Scope:　 In AngularJS the Scope is a special JavaScript object that connects the controller with the views. In the controllers, the model data is accessed via the $scope object. Scopes are arranged in a hierarchical structure which mimic the DOM structure of the application.

Controller:　These are the JavaScript objects (Functions) that control the data of AngularJS applications.

Services:　 AngularJS also provides services to support the “Separation of Concerns” concept. These ‘Services’ are JavaScript functions that are responsible for performing specific tasks. These are basically singleton objects which are instantiated only once in an application. AngularJS provides many built-in services for example, $http, $route, $window, $location etc. and also allows developers to create their own custom services as well.

Filters:　 Filters basically perform data transformation. In AngularJS, filters are used to modify the data. They can also be used in an expression or in directives using the pipe character. Developers can create their own custom filters as well.

Directives:　In AngularJS, directives are used to extend the HTML. Directives are basically markers on DOM elements (such as attributes, CSS and more).

Templates: Templates are essentially single html files (test.html) that consists of HTML, CSS, and Angular directives. These templates can be single files or may consist of multiple partial views.

Routing:　In AngularJS routing is used to configure the routes for different actions. It is the concept as switching views.

Deep Linking:　Deep linking allows you to save the state of an application in the URL so that it can be bookmarked. The application can then be restored from the URL to the same state. In addition, deep linking gives the user the option to return (through the back button) to the previously visited logical page.

Dependency Injection:　AngularJS also features a built-in dependency injection subsystem that helps developers by making the application easier to develop, understand, and test. It provides core components like value, service, factory, provider and constant that can be injected into each other as dependencies.

AngularJS Directives

Although AngularJS has many directives available that you can use, I’m only listing the most commonly used ones here.

ng-app: Defines and links an AngularJS application to HTML.

ng-model: Binds the values of AngularJS application data to HTML input controls.

ng-bind: Binds the AngularJS application data to HTML tags.

ng-controller: Specifies a JavaScript controller class that evaluates HTML expressions.

ng-repeat: Instantiates an element once per item, from a collection.

Wrapping-up

These are the basic core features and functionality that make AngularJS such a pleasure to work with. And although there are plenty of JavaScript frameworks available in the market, no framework provides such an extensive feature set as AngularJS. That’s what gives this framework an edge over the competition and also explains why it’s one of the most popular JavaScript frameworks today, and the top choice for the developers when it comes to building single page applications.

In my next post, I’ll show you to make a simple How To Write Custom Directive In AngularJS

Blog Post