Angular JS – Part 1

• Angular JS is used for MV* (Controller, Presenter, ViewModel) frameworks.

• Can use JQuery/Zepto.
• Angular is comprehensive.
  • Partial Templates
  • Updating the data
  • Routing
• Testable
• Extends HTML vocabulary
• Forward Thinking
  • Web components
  • Object.Observe

Angular Architecture:

• Supports two-way binding
• Dirty Checking
• Dependency Injection

Angular Components:

• Controllers
• Views/Directives
  • Directive – Use to extend the HTML.
• Services

Basics:

• "ng_controller" attribute is used to specify the controller part in HTML.
• "$scope" is a special field using by Angular, which will pass the values to controller.
• "Angular Seed" is zip file, while will work as starting point of the application.[Skeleton of the angular application]. Download this for quick bootstrap.
• Controller create Scope(primary responsibility) which have two way communication with Views. Views use the values in scope and the events use the functions in the scope.
• Create "ng-app" in HTML and create a variable in JS with angular.module('eventsApp',[]); Add any dependent modules in here.
• Create "ng-controller" in HTML and in JS use evenysApp.controller('EventsController', function EventsController($scope) {});
• Use "ng-src" attribute in <img> tag to bind the image.
• Use "ng-repeat" attribute to repeat the item. Ie. <li>
• Use "ng-click" attribute to do click operation.
• Use "ng-change" for all operations. And this directive need "ng-model" directive.
• Other Directives: ngApp, ngBind, ngBindTemplate, ngBindHtml, ngBindHtmlUnsaf, ngHide, ngShow, ngCloak(ngCloak will've special class in CSS), ngStyle, ngClass, ngClassEven, ngClassOdd.
• ngDisabled, ngChecked, ngMultiple, ngReadOnly, ngSelected, ngForm, ngSubmit, ngHref, ngSrc, ngNonBindable.
• To support IE older version, don't use "ng" tag directive. Instead use class or attribute directive.
• Expressions - {{…}} have some restrictions. Ex. Cannot use Math inside expression.
• Filters – {{ expression | filter }}
  • Modifying Output
  • Formatting
  • Sorting Dataset
  • Filtering Dataset
• Built-in Filters : uppercase, lowercase, number, currency, date, json, orderBy, limitTo, filter.
• We can create custom filter by eventsApp.filter('filterName', function(){ return function(duration){ modifiedOutput;} });
• Can use "ngModel" directive in three area.1) input 2) Select 3) Textarea
• Validation – Required, ngPattern, Form Properties, CSS Classes
• Services -
  • Angular Services are not online service like RESTful service.
  • Create custom services using eventApp.factory('eventData' , function() { return {}; });. Do not use $ sign while creating services. Since the $sign names will override the angular services.
  • Built-in Services:
    • $http – used for Http services like to get web services.
    • $resource – since resource id different module[ngResource]. Need to include it Module. We can create custom actions by providing another object param. Default methods :get() ,save(). WE should use $q for call backs.
    • $q – It is a resolve and Promise approach used for web services in synchronous.(&q.deffer)
    • $anchorScroll – elements id will used with ## sign in url will scroll to the tag.
    • $cacheFactory – to generate cache with capacity. Have put(), get() methods.
    • $compile – compile the input strings and create elements (create html).
    • $parse – like $complie, it ll parse the expression. It have assign() function to set any value.
    • $locale – To change the format, language (like Date). Need to use localization files provided by angular.
    • $timeOut -similar to setTimeout() in Java script. Timeout return promise. So we can cancel timeout.
    • $exceptionHandler – Used to override the Angular exceptionHandler.
    • $filter - Can inject our own filter services.
    • $cookieStore – Different module[ngCookies]. Have put(), get(), remove() methods.
    • $interpolate – internally used by $compile. Can use this while the syntax is collating with other libraries.
    • $log- For diagnostic purpose. Methdos: log(), info(), error(), warn()
    • $rootScope – One rootscope per application.
    • $window – used for window operations. Can injectable for unit tests.
    • $document– used for document operations. Can injectable for unit tests.
    • $rootElement – directly manipulation DOM element.
    • $route
    • $routeParams
    • $location
    • $httpBackend – For testing
    • $controller – For Testing
• Passing data from view rather than accessing the objects inside the scope. Since in $q, the Scope value is only a promise object. Not the real object.
• Use "<ng-view>", for single page applications. In app.config(), insert @serviceProvider.