Saturday, December 7, 2013

AngularJS: Basics

Single Page Application (SPA): SPA application is like Silverlight application, where all the pages are loaded at the beginning and later allow the users to navigate between the pages without calling the server.
SPA application loads all the pages on the client's browser at the beginning and use JavaScript in order to switch between the pages making parts of HTML visible and invisible depending on which page is chosen. It reduces the server round trip and makes application faster.
e.g. mymailbook.org - It's a single page application created using AngularJS

yweblearn.com - It is also a single page application created using AngularJS

Challenges with SPAs:
  • DOM Manipulation
  • History
  • Module loading
  • Routing
  • Caching
  • Object modelling
  • Data Binding
  • Ajax/ Promises
  • View loading
Angular is full-featured SPA framework. It provides following features:
  • Data binding
  • MVC
  • Routing
  • Testing
  • jqLite - similar to JQuery
  • Templates
  • History
  • Factories

Core features:
ViewModel
Controllers
Views
Directives
Services
Dependency Injection
Validation

Directives: Directives in AngularJS are used to make custom HTML elements and simplify DOM manipulation. let you structure your views. They can modify the behaviour of new and existing DOM elements, by adding custom functionality, like a datepicker or an autocomplete widget.
In short, Directives provides HTML tricks. All built in directives start with ng-. However, we can start with data-ng- as it's easier for validation.

Example:
ng-app: Use this directive to auto-bootstrap an AngularJS application (add this in html or body).
ng-model: The ngModel directive binds an input,select, textarea (or custom form control) to a property on the scope.
ng-init: Initialize the data.
ng-repeat: iterate for each element as per collection collection.
There are different filter, which apply different filtering operation.

Example:  filter, orderBy, lowercase and uppercase, json - converts javascript object to JSON, date, currency

MVC in AngularJS:
View does not contain logic. Logic are contained in Controllers and manages the data. The glue between View and Controllers is scope ($scope).
We can create SimpleController function and glue with view with help of scope. the we can access object and properties of Controller in view.
Modules, Route and factories:
Module -> Config -> Routes -> View  <--> Controllers
Controllers -> Factory
View -> Directives
Modules are containers, where we can create Config -> Routes, Filter, Directive, Factory -> Service -> Provider -> value, Controller.
It is defined using ng-app = "moduleName". angular object gives access to module function where you can refer other module.
var  demoApp = angular.module('demoApp', ['helperModule']);
We can create controllers in module using demoApp.
demoApp.controllers('ControllersName', function($scope) {} );

Routes: We need to load different views in SPAs. View could be embedded as script in actual shell page and we can load view using template id.
Second way is to backup on the server you might actually have all these views and I like to call them partials because they are part of page. We can create config and give a route ($routeProvider). We can define which Controller to load for which view. We need not to add code for Controllers in each page.
We can also add place holders using ng-view in page. Angular automatically manages history.

Factory: Once we define factory, we can inject as a parameter in Controller function and use the object returned in Factory. We can have different factory in application. It can return something using AJAX call and we can use it in controllers.
We can inject $http object in Factory to access REST API's.
Factory, Service and Provider have different way to return the data.

References: 
http://www.youtube.com/watch?v=i9MHigUZKEM
http://docs.angularjs.org/api/
http://egghead.io/

No comments:

Post a Comment