Tuesday, October 22, 2013

Introduction to AngularJS

AngularJS is a pure JavaScript framework. It extends HTML attributes with Directives known as ng-directives. A very basic angular application looks like below,

Here we define the ng-app in which the angular code resides. We add ng-model directive to input for data binding and show it in curly brackets in mustache style in next line. (We usually define a model nested inside a controller. Since we have not done that here it resides in $rootScope). We'll look at some useful things comes in AngularJS next.

Directives (documentation)

These are markers on a DOM element that tells AngularJS's HTML Compiler ($compile) to attach specific behavior to that DOM element. Below are some directives which comes with AngularJS. There are quite a lot of directives comes with the library. You can also create custom directives.

ng-app : defines AngularJS application
ng-model : binds the value of HTML controls (input, select, textarea) to a property on the scope.

Binds view to a model
Provides validation behavior

ng-bind : binds application data to HTML view. Tells angular to replace text content inside a HTML element with expression's value

Model Binding (ng-model)
This directive binds an form element to a property on the scope using NgModelController, which is created and exposed by this directive.

Module

You can configure your module using this.
Constants in AngularJS. You can inject constants to a module.

Dependency Injection
https://docs.angularjs.org/guide/di

Controllers

AngularJS applications are controlled by controllers. Look at the below example,

Above MyApp is the name we gave to the ng-app attribute. We define the controller (SubController) and put it inside the module. After that we can reference it from the DOM. Without adding the controller into the module, we can also keep it global and reference from DOM. but it is not a good practice. Controllers should not have any logic.

See Rethinking AngularJS controllers.

http://artandlogic.com/2013/05/ive-been-doing-it-wrong-part-1-of-3/

Services

Service is a component that does a specific job like logging, timer etc. Services are wired using Dependency Injection. Services in AngularJS are,

Lazily initialized : Instantiated only when a component depends on it
Singleton: Components depends on the services gets a reference to the single instance of the service through a factory

To use a service you should add a dependency to that from your controller, service etc. Developers can also create there own custom services.

AngularJS provides services like $route, $window, $location etc.

Factory

You can create service using Factory as well. Factory and Services are kind of same.

http://stackoverflow.com/questions/13762228/confused-about-service-vs-factory

http://viralpatel.net/blogs/angularjs-service-factory-tutorial/

http://jsfiddle.net/k3phygpz/

Application Structure and Code organizing

AngularJS projects can be structured in many different ways. Each carries there own pros and cons. It solely depends on what is your requirements are. Following are some useful articles for you to make the decision.

https://www.airpair.com/angularjs/posts/top-10-mistakes-angularjs-developers-make

https://scotch.io/tutorials/angularjs-best-practices-directory-structure

http://stackoverflow.com/questions/17461242/angularjs-application-file-structure
http://cliffmeyers.com/blog/2013/4/21/code-organization-angularjs-javascript

Angular 1.4 and 2.0

Angular 2.0 is the rewritten version of Angular optimized for mobile and future browsers. It's yet to be released but you can take a look from https://angular.io/. See whats new in Angular 2.0 and this.

AngularJS 1.4 and 2.0 can exist within the same project. See how to do it.