angularjs basic training
DESCRIPTION
AngularJS Basic TrainingTRANSCRIPT
$
ANGULARJSANGULAR BASICS
2014
FACTS100% Javascript and 100% Client SideIt is a framework not a libraryWon't make your application look betterAlternatives: EmberJS and BackboneMVC Pattern
UNDER THE HOODRoutingCachingHistory*Dependency InjectionData BindingTemplatingTimingCompiling
CONCEPTS
MVC PATTERN IN ANGULARJS
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
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>
SCOPEIN THE $SCOPE YOU STORE EVERYTHING THAT YOU NEED TO
DISPLAY ON THE VIEW OR YOU NEED TO CALL FROM THE VIEW
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.
BASIC APPLICATION
CODE ORGANIZATIONroot-app-folder├── index.html├── scripts│ ├── controllers│ │ └── ...│ ├── directives│ │ └── ...│ ├── filters│ │ └── ...│ ├── services│ │ └── ...│ ├── vendor│ │ ├── angular.min.js│ └── app.js├── styles└── views || partials ├── main.html
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>
DEFINE FIRST PAGE - CONTROLLER(function(ns) { ns.MainController = function($scope) { $scope.message = 'Hello World'; }})(org.sample)
DEFINE FIRST PAGE - VIEW (PARTIAL)<span> <p>Scope messsage value is {{message}}>/p></span>
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);
BINDINGSTHE DECLARATIVE WAY
TWO WAY DATA BINDING<span>{{variableName}}</span>
<input ng-model="variableName" />
INTERNALS
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 *
MANUAL INVOKATIONSOMETIMES WE NEED TO APPLY THE SCOPE MANUALLY
WHY?
TOOLS
CONTROLLERSPROVIDES A WORKBENCH WHERE YOU CAN DEFINE
PROPERTIES OR FUNCTIONS ACESSIBLE FROM THE VIEWHAS ACESS TO $SCOPE, AND INJECTABLES
DIRECTIVESDEFINES THE BEHAVIOR FOR REUSABLE COMPONENTS
A DIRECTIVE IS NEEDED ONCE YOU NEED TO ACESS THE DOMELEMENT
SERVICESSINGLETON OBJECTS THAT CARRY OUT SPECIFIC TASKS
SERVICE OBJECTS ARE INJECTABLE IN THE CONSTRUCTORPERSISTED STATE BETWEEN PAGE NAVIGATION
FILTERSCOMPONENT PROVIDERS USED TO FORMAT DATA
USED IN VIEWS IN ORDER NOT TO INCLUDE LOGIC IN THECONTROLLER
EXAMPLE: DATE FORMATTER, CURRENCY ETC.
OUT OF THE BOX
NG-REPEAT
NG-HIDE, NG-SHOW, NG-IF
NG-MODEL
NG-CHANGE
NG-CLICK
http://amitgharat.wordpress.com/2013/06/08/the-hitchhikers-guide-to-the-directive/
DIRECTIVE
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) { ... } };});
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
This basically replaces the existing contents of an element
TEMPLATE
Loads a template url and replaces the existing contents of anelement
TEMPLATEURL
Replaces the element where the directive was defined
REPLACE
Prevents from replacing element contents and inserts thecontent where ng-transclude directive can be found
TRANSCLUDE
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.
This can be treated as a control room for a directive. You caneither bind properties/methods to $scope available or this
keyword.
CONTROLLER
This is the place where you can do the DOM manipulation.
COMPILE
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
LINKShttp://www.cheatography.com/proloser/cheat-sheets/angularjs/
THE END
