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() )
- is created on the DOM element where you setup ng-app
Isolated Scope
- Is used when creating "reusable component" directive
- 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
- strip x- | data-
- 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
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