angularjs basic training
DESCRIPTION
AngularJS Basic TrainingTRANSCRIPT
![Page 1: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/1.jpg)
$
ANGULARJSANGULAR BASICS
2014
![Page 2: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/2.jpg)
![Page 3: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/3.jpg)
FACTS100% Javascript and 100% Client SideIt is a framework not a libraryWon't make your application look betterAlternatives: EmberJS and BackboneMVC Pattern
![Page 4: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/4.jpg)
UNDER THE HOODRoutingCachingHistory*Dependency InjectionData BindingTemplatingTimingCompiling
![Page 5: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/5.jpg)
CONCEPTS
![Page 6: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/6.jpg)
MVC PATTERN IN ANGULARJS
![Page 7: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/7.jpg)
TERMINOLOGYModel - application data$scope - the bridge between application data, view andcontrollerView - what the user seesTemplate - blueprints for the viewController - application behaviorDirective - reusable componentModule - how the application is bootstrapped
![Page 8: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/8.jpg)
SAMPLETEMPLATE
<div ng-controller='nsp.Controller'><span>{{value}}</span></div>
CONTROLLER(function(ns) {ns.CompanyController = function($scope) {$scope.value = 'Text Value';}})(nsp)
OUTPUT<div ng-controller='nsp.Controller'><span>Text Value</span></div>
![Page 9: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/9.jpg)
SCOPEIN THE $SCOPE YOU STORE EVERYTHING THAT YOU NEED TO
DISPLAY ON THE VIEW OR YOU NEED TO CALL FROM THE VIEW
![Page 10: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/10.jpg)
SCOPE VIEWTHE SCOPE HAS A HIERARCHICAL STRUCTURE TO MIMIC THE DOM AND CAN INHERIT FROM
PARENT SCOPES. ALSO CAN PASS EVENTS TO PARENT OR CHILD SCOPES.
![Page 11: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/11.jpg)
BASIC APPLICATION
![Page 12: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/12.jpg)
CODE ORGANIZATIONroot-app-folder├── index.html├── scripts│ ├── controllers│ │ └── ...│ ├── directives│ │ └── ...│ ├── filters│ │ └── ...│ ├── services│ │ └── ...│ ├── vendor│ │ ├── angular.min.js│ └── app.js├── styles└── views || partials ├── main.html
![Page 13: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/13.jpg)
INDEX.HTM(L) FILE<html ng-app="demo"> <head> <link href="styles/basic.css" rel="stylesheet" /> </head> <body> <div ng-view>
</div> </body>
<!--Load scripts down here-->
</html>
![Page 14: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/14.jpg)
DEFINE FIRST PAGE - CONTROLLER(function(ns) { ns.MainController = function($scope) { $scope.message = 'Hello World'; }})(org.sample)
![Page 15: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/15.jpg)
DEFINE FIRST PAGE - VIEW (PARTIAL)<span> <p>Scope messsage value is {{message}}>/p></span>
![Page 16: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/16.jpg)
TIE EVERYTHING TOGETHER(function(ns) { var mainModule = angular.module('demo',['ngRoute']);
mainModule.config([ '$routeProvider', function($routeProvider) { $routeProvider.when('/main', { templateUrl : 'partials/main.html', controller : ns.MainController }).otherwise({ redirectTo : '/main' });
} ]);
})(org.sample);
![Page 17: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/17.jpg)
BINDINGSTHE DECLARATIVE WAY
![Page 18: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/18.jpg)
![Page 19: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/19.jpg)
TWO WAY DATA BINDING<span>{{variableName}}</span>
<input ng-model="variableName" />
![Page 20: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/20.jpg)
INTERNALS
![Page 21: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/21.jpg)
WATCHERSFor each binding a $watcher is storedEach digest cycle is checking all the watchersIf the value was changed then the watcher callback is executedThe digest is executed multiple times *
![Page 22: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/22.jpg)
MANUAL INVOKATIONSOMETIMES WE NEED TO APPLY THE SCOPE MANUALLY
WHY?
![Page 23: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/23.jpg)
TOOLS
![Page 24: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/24.jpg)
CONTROLLERSPROVIDES A WORKBENCH WHERE YOU CAN DEFINE
PROPERTIES OR FUNCTIONS ACESSIBLE FROM THE VIEWHAS ACESS TO $SCOPE, AND INJECTABLES
![Page 25: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/25.jpg)
DIRECTIVESDEFINES THE BEHAVIOR FOR REUSABLE COMPONENTS
A DIRECTIVE IS NEEDED ONCE YOU NEED TO ACESS THE DOMELEMENT
![Page 26: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/26.jpg)
SERVICESSINGLETON OBJECTS THAT CARRY OUT SPECIFIC TASKS
SERVICE OBJECTS ARE INJECTABLE IN THE CONSTRUCTORPERSISTED STATE BETWEEN PAGE NAVIGATION
![Page 27: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/27.jpg)
FILTERSCOMPONENT PROVIDERS USED TO FORMAT DATA
USED IN VIEWS IN ORDER NOT TO INCLUDE LOGIC IN THECONTROLLER
EXAMPLE: DATE FORMATTER, CURRENCY ETC.
![Page 28: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/28.jpg)
OUT OF THE BOX
![Page 29: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/29.jpg)
NG-REPEAT
![Page 30: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/30.jpg)
NG-HIDE, NG-SHOW, NG-IF
![Page 31: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/31.jpg)
NG-MODEL
![Page 32: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/32.jpg)
NG-CHANGE
![Page 33: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/33.jpg)
NG-CLICK
![Page 34: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/34.jpg)
http://amitgharat.wordpress.com/2013/06/08/the-hitchhikers-guide-to-the-directive/
DIRECTIVE
![Page 35: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/35.jpg)
myModule.directive('directiveName', function (injectables) { return { restrict: 'A', template: '<div></div>', templateUrl: 'directive.html', replace: false, priority: 0, transclude: false, scope: false, terminal: false, require: false, controller: function($scope, $element, $attrs, $transclude, otherInjectables) { ... }, compile: function compile(tElement, tAttrs, transclude) { return { pre: function preLink(scope, iElement, iAttrs, controller) { ... }, post: function postLink(scope, iElement, iAttrs, controller) { ... } } }, link: function postLink(scope, iElement, iAttrs) { ... } };});
![Page 36: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/36.jpg)
RESTRICTThis simply restricts the way you can define a directive. As we’ve
seen before, we can restrict it as:
E: elementsA: attributesC: class names (CSS)M: comments
![Page 37: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/37.jpg)
This basically replaces the existing contents of an element
TEMPLATE
![Page 38: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/38.jpg)
Loads a template url and replaces the existing contents of anelement
TEMPLATEURL
![Page 39: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/39.jpg)
Replaces the element where the directive was defined
REPLACE
![Page 40: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/40.jpg)
Prevents from replacing element contents and inserts thecontent where ng-transclude directive can be found
TRANSCLUDE
![Page 41: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/41.jpg)
SCOPEfalse - Is the default option which does not create a new scopefor a directive but shares the scope with its parent.true - Creates a new scope but prototypically inherits from theparent scope.'isolate' - Creates an isolated scope which does notprototypically inherit from the parent
@ – binds the value of parent scope property (which alwaysa string) to the local scope. So the value you want to pass inshould be wrapped in {{}}. Remember `a` in braces.= – binds parent scope property directly which will beevaluated before being passed in.& – binds an expression or method which will be executed inthe context of the scope it belongs.
![Page 42: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/42.jpg)
This can be treated as a control room for a directive. You caneither bind properties/methods to $scope available or this
keyword.
CONTROLLER
![Page 43: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/43.jpg)
This is the place where you can do the DOM manipulation.
COMPILE
![Page 44: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/44.jpg)
Its job is to bind a scope with a DOM resulted in a 2-way databinding. You have access to scope here unlike compile functionso that you can create custom listeners using $watch method.
LINK
![Page 45: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/45.jpg)
LINKShttp://www.cheatography.com/proloser/cheat-sheets/angularjs/
![Page 46: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/46.jpg)
THE END
![Page 47: AngularJS Basic Training](https://reader033.vdocuments.net/reader033/viewer/2022052904/557cf475d8b42a98158b4791/html5/thumbnails/47.jpg)