AngularJS Basic Training

$
ANGULARJS
ANGULAR BASICS
2014

FACTS
100% Javascript and 100% Client Side
It is a framework not a library
Won't make your application look better
Alternatives: EmberJS and Backbone
MVC Pattern

UNDER THE HOOD
Routing
Caching
History
*Dependency Injection
Data Binding
Templating
Timing
Compiling

TERMINOLOGY
Model - application data
$scope - the bridge between application data, view and
controller
View - what the user sees
Template - blueprints for the view
Controller - application behavior
Directive - reusable component
Module - how the application is bootstrapped

SAMPLE
TEMPLATE
<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>

SCOPE
IN THE $SCOPE YOU STORE EVERYTHING THAT YOU NEED TO
DISPLAY ON THE VIEW OR YOU NEED TO CALL FROM THE VIEW

SCOPE VIEW
THE SCOPE HAS A HIERARCHICAL STRUCTURE TO MIMIC THE DOM AND CAN INHERIT FROM
PARENT SCOPES. ALSO CAN PASS EVENTS TO PARENT OR CHILD SCOPES.

CODE ORGANIZATION
root-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>

</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);

TWO WAY DATA BINDING
<span>{{variableName}}</span>
<input ng-model="variableName" />

WATCHERS
For each binding a $watcher is stored
Each digest cycle is checking all the watchers
If the value was changed then the watcher callback is executed
The digest is executed multiple times *

MANUAL INVOKATION
SOMETIMES WE NEED TO APPLY THE SCOPE MANUALLY
WHY?

CONTROLLERS
PROVIDES A WORKBENCH WHERE YOU CAN DEFINE
PROPERTIES OR FUNCTIONS ACESSIBLE FROM THE VIEW
HAS ACESS TO $SCOPE, AND INJECTABLES

DIRECTIVES
DEFINES THE BEHAVIOR FOR REUSABLE COMPONENTS
A DIRECTIVE IS NEEDED ONCE YOU NEED TO ACESS THE DOM
ELEMENT

SERVICES
SINGLETON OBJECTS THAT CARRY OUT SPECIFIC TASKS
SERVICE OBJECTS ARE INJECTABLE IN THE CONSTRUCTOR
PERSISTED STATE BETWEEN PAGE NAVIGATION

FILTERS
COMPONENT PROVIDERS USED TO FORMAT DATA
USED IN VIEWS IN ORDER NOT TO INCLUDE LOGIC IN THE
CONTROLLER
EXAMPLE: DATE FORMATTER, CURRENCY ETC.

DIRECTIVE
http://amitgharat.wordpress.com/2013/06/08/the-hitchhikers-guide-
to-the-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) { ... }
};
});

RESTRICT
This simply restricts the way you can define a directive. As we’ve
seen before, we can restrict it as:
E: elements
A: attributes
C: class names (CSS)
M: comments

TEMPLATE
This basically replaces the existing contents of an element

TEMPLATEURL
Loads a template url and replaces the existing contents of an
element

REPLACE
Replaces the element where the directive was defined

TRANSCLUDE
Prevents from replacing element contents and inserts the
content where ng-transclude directive can be found

SCOPE
false - Is the default option which does not create a new scope
for a directive but shares the scope with its parent.
true - Creates a new scope but prototypically inherits from the
parent scope.
'isolate' - Creates an isolated scope which does not
prototypically inherit from the parent
@ – binds the value of parent scope property (which always
a string) to the local scope. So the value you want to pass in
should be wrapped in {{}}. Remember `a` in braces.
= – binds parent scope property directly which will be
evaluated before being passed in.
& – binds an expression or method which will be executed in
the context of the scope it belongs.

CONTROLLER
This can be treated as a control room for a directive. You can
either bind properties/methods to $scope available or this
keyword.

COMPILE
This is the place where you can do the DOM manipulation.

LINK
Its job is to bind a scope with a DOM resulted in a 2-way data
binding. You have access to scope here unlike compile function
so that you can create custom listeners using $watch method.

LINKS
http://www.cheatography.com/proloser/cheat-sheets/
angularjs/

AngularJS Basic Training

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to AngularJS Basic Training

Similar to AngularJS Basic Training (20)

Recently uploaded

Recently uploaded (20)

AngularJS Basic Training