Angularified – My Sumary of AngularJS

AngularJS is a powerful Java script MVC framework created by Google to build Modular, Maintainable Java script applications. It helps to properly organize web application. Application can be defined with modules that can depend from one to the others. It enhances HTML by attaching directives to your pages with new attributes or tags and expressions in order to define very powerful templates directly in your HTML. It also encapsulates the behavior of your application in controllers which are instantiated via dependency injection. Due to DI it helps you structure and test your Java script code very easily. Reusable code can be factorized into services that can be injected in your controllers. Following are the features it provides

  • Expressions : <div>5+5={5+5}</div> This will render 5+5=10
  • Directives: It is most powerful feature it provides. It allows you to extend HTML. Itcomes with several directives which let you build your basic application, you can write your own directives in order to adapt your views to your needs and it gives very good extensibility for building your own templates. If you need to have Javascript code in order to manipulate the DOM, it should not be located in a controller but in your own custom directive.
  • Data Binding: You can achieve bidirectionnal binding using ngModdirective in your view.
  • Filters:  Filters can applied applied on the data which needs to be displayed.
  • Partial Views – For SPA AngularJS is perfect receipe. In SPA you define a index.html which acts as a container for your web application. In this page, you can bind part of your application to a specific AngularJS module with the directive “ngApp”, you can bind the whole page to a single AngularJS module if you want and post that you can use the directive “ngView” in order to load partial views.
  • Modules: In Angular world application is broken down via modules. A module can contain controllers, services, directives and filters
  • Dependency Injection : You can inject object in function as paramters.
  • Routes:  Using $routeProvider you can define the routes which includes defining the url, then which view needs to be loaded for that url using templateUrl and controller associated.
  • Controllers: This is where the behavior of your application is located. Controllers are used to populate the scope with all the necessary data for the view. Using proper separation of concerns, controllers should never contain anything related to the DOM. Controllers communicate with the view using a specific service named “$scope”. This service let the controller give objects and functions to the views that can later be manipulated with expressions and directives. In order to be easily tested, controllers are defined using dependency injection.
  • Scope: It is used to link the controllers and the views. A controller can add data and function in its scope and then they will be accessible in the view.
  • Services: Controllers contains the behavior of the application which is available to the view, we may have some code that you want to re-use or that you want to abstract from the controller which communicates directly with the view. For this, Angular let you define services that can be injected in your controllers or in other services to build your application.
  • REST communication: It provides 2 services $http and $resource $http is a small layer on top of XmlHttpRequest $resource let you communicate with a server using custom actions instead of relying on the default get, post, delete,
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s