AngularJS



Isolated Scope | Prototypical Inheritance | this | $scope | Controller | Service | Injector | 

2 way data binding
$scope


  • ng-bind vs ng-model - Bind is unidirectional and model is bi-directional.
  • $scope is a Service
  • is syntactic glue between the DOM and the Model
  • Every controller has an associated $scope object.
  • A controller (constructor) function is responsible for setting model properties and functions/behavior on its associated $scope.
  • Only methods defined on this $scope object (and parent scope objects, if prototypical inheritance is in play) are accessible from the HTML/view. E.g., from ng-click, filters, etc.
  • Methods on scope
    • $scope.$watch( beingWatched, function() )
    • $scope.$on ( 'event', function() )
$rootScope

  • is created on the DOM element where you setup ng-app


Isolated Scope 

  • Is used when creating "reusable component" directive
4 scopes in directives

  • scope = false - no new scope created.
  • scope = true - new scope created with prototypical inheritance
  • scope (...) isolated - new scope created that doesn't inherit from parent scope
    • can still access parent scope properties
    • = is used to access with two-way-binding
    • @ is used to access with one-way-binding
    • & is used to bind to parent scope expressions.
    • The parent property access cant be direct but has to be through an attribute. 


this
  • this is always a reference to $scope. Which scope ? is the question 
  • When the controller constructor function is called, this is the controller.
  • When a function defined on a $scope object is called, this is the "scope in effect when the function was called". This may (or may not!) be the $scope that the function is defined on. So, inside the function, this and $scope may not be the same.
  • If we need to refer to the object in the calling context we should use $scope in the constructor function ??
  •  


https://github.com/angular/angular.js/wiki/Understanding-Scopes

http://stackoverflow.com/questions/11605917/this-vs-scope-in-angularjs-controllers


Module

  • Top level object in AngularJS.


Controller

  • Maps to a (or more) View


Directive

  • Applied to DOM element
  • Can be represented as 
    • element name - <tabs> | <my-directive>
    • attributes - <div my-directive="value">
    • classname - <div class="my-directive:value;" > 
    • classname - <!--  directive: my-directive value -- > 
  • Within angular a directive is referred by its camelCase notation
  • Inside the DOM there are in multiple ways to refer to a directive
    •  ng-bind | ng:bind | ng_bind | data-ng-bind | x-ng-bind
  • While angular compiler processes the DOM and directives it normalises the directive names
    1. strip x- | data-
    2. remove - | _ | : and convert to camelCase
  • Angular examples - ngRepeat, ngClick, ngApp

Factory , Service , Provider - All are patterns to get Object instances that differ slightly from each other.

Factory



Service

  • Reusable functionality
  • sss
  • Creating Services
    • Service is defined by registering a name & factory function with an angular module.
    • Service factory function generates the single object or function representing the service
    • Registered using angular.Module.factory( 'serviceName', serviceFunction() )
    • We don't register Service Instance but Factory Function
    • The Factory Function can return an Object or a Function (which is object as well)
    • Can also be registered using a $provider

  • Angular examples - $http, $compile, $log, $rootScope, $timeOut, $window, $log, $location, $filter, $resource, $controller



Providers in Angular
  • $compileProvider, $httpProvider, $logProvider




Filter - ngFilter

  • Angular examples - currency, date, json, lowercase, orderBy


Config

Routes - To route the application to different views base on the URI path.
Mapping of View & Controller is maintained based on path. This generates the dynamic nature of the application where same view can be bound to different controllers.

Function




http://gruntjs.com/ - The JavaScript Task Runner - Like Ant
http://phantomjs.org/ - Headless Browser
http://karma-runner.github.io/0.12/index.html - Test Runner - JUnit

---
npm install - downloads dependencies
dependencies defined in package.json

No comments:

Post a Comment