Angular workshop - Full Development Guide

Workshop on angularjs - Nitin Giri

Architecture mostly Followed (example)
MVC framework (Symfony) + templating engine (Smarty) + jQuery
Symfony
● Separates the data model and business logic from the application code
Smarty
● Separates the presentation from the application code
jQuery
● Makes things like DOM traversal and manipulation, event handling,
animation, and Ajax simpler with multiple browser support

Scope of Improvement
● Frontend needs a MVC framework
● Improve our page load time
Header, footer common to all pages but still entire page is downloaded each
time
● Reduce development effort &
● Server load

Single Page Application
SPA Demo
http://www.myspa.com
View View
View View

What Is AngularJS
The official AngularJS introduction describes AngularJS as a:
Client-side technology, written entirely in JavaScript. It works with the long-
established technologies of the web (HTML, CSS, and JavaScript) to make the
development of web apps easier and faster than ever before.

ngularJS is a full-featured SPA framework
Data Binding MVC Routing
Templates
ViewModel Views
Controllers Dependency Injection
DirectivesControllers
jqLite
Validation
FactoriesHistory

Data Binding
In classic web frameworks, such as Rails, the controller combines data from
models and mashes them together with templates to deliver a view to the user.
This combination produces a single-way view. The view will only reflect the data
the model exposes at the time of the view rendering.
AngularJS takes a different approach. Instead of merging data into a template
and replacing a DOM element, AngularJS creates live templates as a view.
Individual components of the views are dynamically interpolated live.
For instance, if there is a variable named name and it is equal to “Ari”, string
interpolation on a view of "Hello {{ name }}" will return “Hello Ari”.

Bi-directional data binding
Bi-directional in this context means that if the view changes the value, the
model observes the change through dirty checking, and if the model changes the
value, the view update with the change.
Ex. http://jsbin.com/tebexanuwo/edit?html,js,output

Angular workshop - Full Development Guide

Modules
The module of an app is where we’ll contain all of our application code. An app
can contain several modules, each one containing code that pertains to specific
functionality.
Using modules gives us a lot of advantages, such as:
● Keeping our global namespace clean.
● Making tests easier to write and keeping them clean so as to more easily
target isolated functionality.
● Making it easy to share code between applications.
● Allowing our app to load different parts of the code in any order.

Declaring a module
The Angular module API allows us to declare a module using the angular.module()
API method.
angular.module('myApp', []);
● The first is the name of the module we are creating.
● The second is the list of dependencies, otherwise known as injectables.
We can always reference our module by using the same method with only one
parameter. For instance, we can reference the myApp module like so:
angular.module('myApp') // this method fetches the app

Scopes
● Scopes are a core fundamental of any Angular app.
● The scopes of the application refer to the application model.
● The $scope object is where we define the business functionality of the
application, the methods in our controllers, and properties in the views.
● $scopes in AngularJS are arranged in a hierarchical structure that mimics the
DOM and thus are nestable: We can reference properties on parent $scopes.
● Scopes provide the ability to watch for model changes.
● $rootScope is the parent of all $scope objects.
● All properties found on the $scope object are automatically accessible to the
view.

What Can Scopes Do?
● They provide observers to watch for model changes
● They provide the ability to propagate model changes through the application
as well as outside the system to other components
● They can be nested such that they can isolate functionality and model
properties
● They provide an execution environment in which expressions are evaluated
The majority of the work we’ll do in developing our Angular app is building out
the functionality of a scope.

$scope Lifecycle
Creation
When we create a controller or directive, Angular creates a new scope with the
$injector and passes this new scope for the controller or directive at runtime.
Linking
When the $scope is linked to the view, all directives that create $scopes will register
their watches on the parent scope. These watches watch for and propagate model
changes from the view to the directive.
Updating
During the $digest cycle, which executes on the $rootScope, all of the children scopes
will perform dirty digest checking. All of the watching expressions are checked for any
changes, and the scope calls the listener callback when they are changed.
Destruction
When a $scope is no longer needed, the child scope creator will need to call
scope.$destroy() to clean up the child scope.

View, Controllers and Scope
● $scope is the "glue" (ViewModel)
between a controller and a view
View Controller$scope

Creating a View and Controller
<div class="container“ ng-controller="SimpleController">
<h3>Adding a Simple Controller</h3>
<ul>
<li ng-repeat="cust in customers">
{{ cust.name }} - {{ cust.city }}
</li>
</ul>
</div>
<script>
function SimpleController($scope) {
$scope.customers = [
{ name: 'Dave Jones', city: 'Phoenix' },
{ name: 'Jamie Riley', city: 'Atlanta' },
{ name: 'Heedy Wahlin', city: 'Chandler' },
{ name: 'Thomas Winter', city: 'Seattle' }
];
}
</script>
Define the controller
to use
Access $scope
$scope injected
dynamically
Basic controller

Controller
● The controller in AngularJS is a function that adds additional functionality to
the scope of the view.
● When we create a new controller on a page, Angular passes it a new $scope.
function FirstController($scope) {
$scope.message = "hello";
}
● we created this function in the global scope. Doing so is usually poor form, as
we don’t want to dirty the global namespace. To create it more properly,
we’ll create a module and then create the controller atop our module, like
so:
var app = angular.module('app', []);
app.controller('FirstController', function($scope) {
$scope.message = "hello";
});

<div ng-controller="FirstController">
<h4>The simplest adding machine ever</h4>
<button ng-click="add(1)" class="button">Add</button>
<a ng-click="subtract(1)" class="button alert">Subtract</a>
<h4>Current count: {{ counter }}</h4>
</div>

Expressions
● Expressions are roughly similar to the result of an eval(javascript). Angular
processes them; therefore, they have these important, distinct properties:
● All expressions are executed in the context of the scope and have access to local
$scope variables.
● An expression doesn’t throw errors if it results in a TypeError or a ReferenceError.
● They do not allow for any control flow functions (conditionals; e.g., if/else).
● They can accept a filter and/or filter chains.
● Expressions all operate on the containing scope within which they are called.
This fact enables us to call variables bound to the containing scope inside of
an expression, which, in turn, enables us to loop over variables (we’ll see this
looping in action with ng-repeat), call a function, or use variables for math
expressions from the scope.
http://jsbin.com/oDeFuCAW/1/edit?html,js,output

Directives: Custom HTML Elements and
Attributes
● Given what we know about HTML elements, directives are Angular’s method of creating new HTML
elements that have their own custom functionality. For instance, we can create our own custom
element that implements the video tag and works across all browsers:
<my-directive my-href="/goofy-video.mp4">
Can even take text</my-directive>
angular.module('myApp', [])
.directive('myDirective', function() {
return {
restrict: 'E',
template: '<a href="http://google.com">
Click me to go to Google</a>'
}
});

Using Directives
<!DOCTYPE html>
<html ng-app>
<head>
<title></title>
</head>
<body>
<div class="container">
Name: <input type="text" ng-model="name" /> {{ name }}
</div>
<script src="Scripts/angular.js"></script>
</body>
</html>
Directive
Directive
Data Binding
Expression

<html data-ng-app="">
...
<div class="container"
data-ng-init="names=['Dave','Napur','Heedy','Shriva']">
<h3>Looping with the ng-repeat Directive</h3>
<ul>
<li data-ng-repeat="name in names">{{ name }}</li>
</ul>
</div>
...
</html>
Iterate through
names
Iterating with the ng-repeat Directive

Filters
● In AngularJS, a filter provides a way to format the data we display to the user.
● Angular gives us several built-in filters as well as an easy way to create our own.
● We invoke filters in our HTML with the | (pipe) character inside the template
binding characters {{ }}.
{{ name | uppercase }}
● We can also use filters from within JavaScript by using the $filter service.
● To pass an argument to a filter in the HTML form, we pass it with a colon after the
filter name (for multiple arguments, we can simply append a colon after each
argument)

{{ 123.456789 | number:2 }}

To use the lowercase JavaScript filter:
app.controller('DemoController', ['$scope', '$filter',
function($scope, $filter) {
$scope.name = $filter('lowercase')('Ari');
}]);

Built in filters
● Currency
The currency filter formats a number as currency. In other words, 123 as
currency looks like: {{ 123 | currency }}.
● Date
The date filter allows us to format a date based upon a requested format
style. The date formatter provides us several built-in options.
Here are the built-in localizable formats:
{{ today | date:'medium' }} 
{{ today | date:'short' }} 
{{ today | date:'fullDate' }} 
{{ today | date:'longDate' }} 
{{ today | date:'mediumDate' }} 
{{ today | date:'shortDate' }} 
{{ today | date:'mediumTime' }} 
{{ today | date:'shortTime' }}

● Filter
The filter filter selects a subset of items from an array of items and
returns a new array. This filter is generally used as a way to filter out items for
display.
In HTML Template Binding
{{ filter_expression | filter : expression}}
● Json
The json filter will take a JSON, or JavaScript object, and turn it into a
string. This transformation is very useful for debugging purposes:
{{ {'name': 'Ari', 'City': 'San Francisco'} | json }}
O/p : {
"name": "Ari",
"City": "San Francisco"
}

● Limit To
The limitTo filter creates a new array or string that contains only the specified
number of elements, either taken from the beginning or end, depending
on whether the value is positive or negative.
{{ San Francisco is very cloudy | limitTo:3 }}

Or we can take the last 6 characters of a string:
{{ San Francisco is very cloudy | limitTo:-6 }}

We can do the same with an array. Here we’ll return only the first element of the array:
{{ ['a', 'b', 'c', 'd', 'e', 'f'] | limitTo:1 }}

● Lowercase
The lowercase filter simply lowercases the entire string.
{{ "San Francisco is very cloudy" | lowercase }}

● Number
The number filter formats a number as text. It can take a second parameter
(optional) that will format the number to the specified number of decimal places
(rounded).
{{ 123456789 | number }} 
{{ 1.234567 | number:2 }} 
● Uppercase
The uppercase filter simply uppercases the entire string:
{{ "San Francisco is very cloudy" | uppercase }}

● Order By
The orderBy filter orders the specific array using an expression.
{{ [{
'name': 'Ari',
}, {
'name': 'Q',
}, {
'name': 'Nate',
}] | orderBy: 'name' }}
Ex: http://jsbin.com/nudopelafe/edit?html,js,output

Making Our Own Filter
● This is filter that capitalizes the first character of a string.
angular.module('myApp.filters', [])
.filter('capitalize', function() {
return function(input) {
if (input) return input[0].toUpperCase() + input.slice(1);
}
});
Now, if we want to capitalize the first letter of a sentence, we can first
lowercase the entire string and then capitalize the first letter with our filter:

{{ 'ginger loves dog treats' | lowercase | capitalize }}

Form Validation
● AngularJS supports form validation with a mix of the HTML5 form validation
inputs as well as with its own validation directives.
● AngularJS makes it pretty easy for us to handle client-side form validations
without adding a lot of extra effort.
● To use form validations, we first must ensure that the form has a name
associated with it.
● It is usually a great idea to use the novalidate flag on the form element, as it
prevents the browser from natively validating the form.

Let’s look at all the validation options we have that we can place on an input
field:
● Required
To validate that a form input has been filled out, we simply add the
HTML5 tag, required, to the input field:
● Minimum Length
To validate that a form input input is at least a certain {number} of characters, we add
the AngularJS directive ng-minlength="{number}" to the input field:
<input type="text" ng-minlength=5 />
● Maximum Length
To validate that a form input is equal to or less than a number of characters, we can
add the AngularJS directive ng-maxlength="{number}":
<input type="text" ng-maxlength=20 />

● Matches a Pattern
To ensure that an input matches a regex, we can use
ng-pattern = "/PATTERN/":
<input type="text" ng-pattern="/a-zA-Z/" />
● Email
To validate an email address in an input field, we simply set the input
type to email, like so:
<input type="email" name="email" ng-model="user.email" />
● Number
To validate an input field has a number, we set the input type to
number:
<input type="number" name="age" ng-model="user.age" />

Control Variables in Forms
● AngularJS makes properties available on the containing $scope object
available to us as a result of setting a form inside the DOM.
● These properties enable us to react to the form in real time.
● The properties that are available to us are:
(Note that these properties are made available to us in the format:)
formName.inputFieldName.property
● Unmodified Form
This property is a boolean that tells us whether the user has modified
the form.
formName.inputFieldName.$pristine;

● Modified Form
This property is a boolean that tells us if and only if the user has actually
modified the form.
formName.inputFieldName.$dirty
● Valid Form
This property is a boolean that tells us whether or not the form is valid.
formName.inputFieldName.$valid
● Invalid Form
This property is a boolean that tells us whether or not the form is invalid.
formName.inputFieldName.$invalid
● Errors
This property is another useful one that AngularJS makes available to us: the
$error object.
This object contains all of the validations on a particular form and a record
of whether they are valid or invalid.
formName.inputfieldName.$error
Putting all things together
Ex. http://jsbin.com/yawixehevu/edit?html,js,output

$parsers
● When our user interacts with the controller and the $setViewValue() method
has been called on the ngModelController, the array of $parsers functions are
called as a pipeline.
● The first $parser is called and passes its value to the next, and so on and so
forth.
● These functions have the opportunity to convert the value and change the
validity state of the control by using the $setValidity() functions.
● Using the $parsers array is one way we can create a custom validation.

$formatters
● When the bound ngModel value has changed and has been run through the
$parsers array, then the value will be passed through to the $formatters
pipeline.
● These functions have the opportunity to modify and format the value, as well
as change the validity state of the control similar to the $parsers array.
● We use these functions primarily to handle visual changes in the view, rather
than purely for validation purposes.
Ex. http://jsfiddle.net/ndxbxrme/mbj25yxv/

Custom Validations
AngularJS makes it very easy to add our own validations, as well, by using
directives.
Ex : http://jsfiddle.net/adamdbradley/Qdk5M/
Ex : http://jsfiddle.net/iladarsda/ys7mpoh6/light/

Built-in Directive
● Angular provides a suite of built-in directives.
● Built-in directives are clearly visible via their ng- namespace prefix
● some built-in directives do not have an HTML counterpart, such as the ng-controller
directive, which can be used as an attribute on any tag, but is most often found on
an element that has many children that should share the same scope.
● Our first set of directives are similarly named as standard HTML tags attributes and
are easy to remember because
● we simply add the ng prefix to each:
• ng-href
• ng-src
• ng-disabled
• ng-checked
• ng-readonly
• ng-selected
• ng-class
• ng-style

Boolean Attributes
● A boolean attribute is an attribute that represents a true/false value. When
the attribute is present, then the attribute’s value is assumed to be true
(regardless of its actual value). If absent, the attribute is assumed to be false.
● When working with dynamic data via data bindings in Angular, we cannot
simply set the value of the attribute to true or false, because by definition of
the spec, the attribute is false if it is not present.
● Thus Angular provides an ng-prefixed version of these attributes that will
evaluate the expression provided to insert or remove the corresponding
boolean attribute on the decorated element.

ng-disabled
● Use ng-disabled to bind the disabled attribute to form input fields:
• <input> (text, checkbox, radio, number, url, email, submit)
• <textarea>
• <select>
• <button>
● When writing normal HTML input fields, the presence of the disabled attribute
on an input field makes the field disabled. To bind the presence (or not) of this
attribute, use ng-disabled.
<input type="text" ng-model="someProperty" placeholder="Type to
Enable">
<button ng-model="button" ng-disabled="!someProperty">A
Button</button>

ng-readonly
● Similar to the other boolean attributes, the HTML spec only looks at the
presence of the attribute readonly, not its value.
<input type="text" ng-model="someProperty"><br/>
<input type="text“ ng-readonly="someProperty“ value="Some text
here"/>
Demo

ng-checked
● The standard checked HTML attribute is a boolean attribute, and as such, is
not required to take a value. In order for Angular to bind the presence of the
checked attribute to the value of an expression, use ng-checked.
● In the following example, we set the value of someProperty to true using the
ng-init directive.
● Binding the value of someProperty to ng-checked then tells Angular to output
the standard HTML checked attribute, which will check the box by default.
<label>someProperty = {{someProperty}}</label>
<input type="checkbox“ ng-checked="someProperty“ ng-
init="someProperty = true“ ng-model="someProperty">
Demo

ng-selected
● Use ng-selected to bind the presence (or not) of the selected attribute to the
option tag:
<label>Select Two Fish:</label>
<input type="checkbox“ ng-model="isTwoFish"><br/><select>
<option>One Fish</option>
<option ng-selected="isTwoFish">Two Fish</option>
</select>
Demo

ng-href and ng-src
● Both ng-href and ng-src are so likely to help improve refactoring and prevent
errors when changing code later in a project that it is recommended to use
them in place of href and src, respectively
● ng-href
● When dynamically creating a URL from a property on the current scope, always use
ng-href instead of href.
<a ng-href="{{myHref}}">I'm feeling lucky, when I load</a>
ng-src
● Angular will tell the browser to NOT fetch the image via the given URL until all
expressions provided to ng-src have been interpolated:
<h1>Wrong Way</h1>
<img src="{{imgSrc}}" />
<h1>Right way</h1>
<img ng-src="{{imgSrc}}" />

Directives with Child Scope
● The following directives create a child scope that prototypically inherits from its
parent.
● ng-app
● Placing ng-app on any DOM element marks that element as the beginning of
the $rootScope. $rootScope is the beginning of the scope chain, and all
directives nested under the ng-app in your HTML inherit from it.
● We can only use ng-app once per document. If we want to place multiple apps
in a page, we’ll need to manually bootstrap our applications. We will talk
more about manually bootstrapping apps in the under the hood chapter.
● ng-controller
● Instead of defining actions and models on $rootScope, use ng-controller,
which is a built-in directive whose purpose is to provide a child scopes for the
directives that are nested inside. We’ll use this directive to place a controller
on a DOM element.

● ng-include
● Use ng-include to fetch, compile, and include an external HTML fragment into your
current application. The URL of the template is restricted to the same domain and
protocol as the application document unless whitelisted or wrapped as trusted
values.
● <div ng-include=“/myTemplateName.html” ng-controller="MyController“
ng-init="name = 'World'"> Hello {{ name }}</div>
● ng-switch
● We use this directive in conjunction with ng-switch-when and on="propertyName"
to switch which directives render in our view when the given propertyName
changes.
● Demo for ng-switch
● ng-view
● The ng-view directive sets the view location in the HTML where the router will
manage and place the view elements for different routes. We will cover this in
depth in the routing chapter.

● ng-if
● Use ng-if to completely remove or recreate an element in the DOM based on
an expression. If the expression assigned to ng-if evaluates to a false value,
then the element is removed from the DOM, otherwise a clone of the element
is reinserted into the DOM.
● ng-if differs from ng-show and ng-hide in that it actually removes and
recreates DOM nodes, rather than just showing and hiding them via CSS.
● Demo ng-if

ng-repeat
● Use ng-repeat to iterate over a collection and instantiate a new template for
each item in the collection. Each item in the collection is given its own
template and therefore its own scope.
● Furthermore, there are a number of special properties exposed on the local
scope of each template instance:
• $index: iterator offset of the repeated element (0..length-1)
• $first: true if the repeated element is first in the iterator
• $middle: true if the repeated element is between the first and last in
the iterator
• $last: true if the repeated element is last in the iterator
• $even: true if the iterator position $index is even (otherwise false)
• $odd: true if the iterator position $index is odd (otherwise false)
demo for even and odd

Ng-init
● ng-init – used for initiatization
● The most common use case for using ng-init is when creating small examples
for educational purposes, like the examples -.
● For anything substantial, create a controller and set up state within a model
object.
<div ng-init="greeting='Hello'; person='World'">
{{greeting}} {{person}}
</div>

ng-bind
● Although we can use the {{ }} template syntax within our views (Angular
interpolates these), we can mimic this behavior with the ng-bind directive.
<body ng-init="greeting = 'Hello World'">
<p ng-bind="greeting"></p>
</body>
● When we use the {{ }} syntax, our HTML document loads the element and does
not render it immediately, causing a “flash of unrendered content” (FOUC,
for short). We can prevent this FOUC from being exposed by using ng-bind and
binding our content to the element. The content will then render as the child
text node of the element on which ng-bind is declared.

ng-model
● The ng-model directive binds an input, select, textarea, or custom form
control to a property on the surrounding scope.
● It binds to the property given by evaluating the expression on the current
scope. If the property doesn’t already exist on this scope, it will be created
implicitly and added to the scope.
● <input type="text"
● ng-model="modelName.someProperty" />

ng-show/ng-hide
● ng-show and ng-hide show or hide the given HTML element based on the
expression provided to the attribute. When the expression provided to the ng-
show attribute is false the element is hidden.
● Similarly, when the expression given to ng-hide is true, the element is
hidden.
● The element is shown or hidden by removing the ng-hide CSS class from, or
adding it to, the element.
● The .ng-hide CSS class is predefined in AngularJS and sets the display style to
none (using an !important flag).
● Demo ng-hide and ng-show

ng-change/ng-click
● ng-change
● This directive evaluates the given expression when the input changes. As
we’re dealing with input, we must use this directive in conjunction with
ngModel.
● <div ng-controller="EquationController">
● <input type="text“ ng-model="equation.x“ ng-change="change()" />
● <code>{{ equation.output }}</code>
● </div>

Directives in detail
● It is simply a function that we run on a particular DOM element. The function is
expected to provide extra functionality on the element.
● Ex - the ng-click directive gives an element the ability to listen for the click event and
run an Angular expression when it receives the event. Directives are what makes the
Angular framework so powerful, and, as we’ve seen, we can also create them.
● A directive is defined using the .directive() method, one of the many methods available
on our application’s Angular module.
angular.module('myApp')
.directive('myDirective', function()
// A directive definition object
return {
// directive definition is defined via options
// which we'll override here
};
});

● <div my-directive></div>
● To avoid collision with future HTML standards it’s best practice to prefix a
custom directive with a custom namespace. Angular itself has chosen the ng-
prefix, so use something other than that. In the examples that follow, we’ll
use the my- prefix (e.g., my-directive).
● When Angular encounters the named directive in the DOM, it will invoke the
directive definition we’ve registered, using the name to look up the object
we’ve registered.
● At this point, the directive lifecycle begins, starting with the $compile
method and ending with the ‘link method.

Options we can provide in Directive
Definition
● Restrict (string)
● restrict is an optional argument. It is responsible for telling Angular in which format our
directive will be declared in the DOM. By default, Angular expects that we will declare
a custom directive as an attribute, meaning the restrict option is set to A.
● The available options are as follows:
• E (an element) {lang=”html”}
• A (an attribute, default) {lang=”html”} <div my-
directive=”expression”></div>
• C (a class) {lang=”html”} <div class=”my-directive: expression;”></div>
• M (a comment) {lang=”html”} <– directive: my-directive expression –>

● Priority (number)
● The priority option can be set to a number. Most directives omit this option,
in which case it defaults to 0; however, there are cases where setting a high
priority is important and/or necessary.
● For example, ngRepeat sets this option at 1000 so that it always gets invoked
before other directives on the same element.
● Terminal (boolean)
● terminal is a boolean option; it can be set to true or false.
● We use the terminal option to tell Angular to stop invoking any further
directives on an element that have a higher priority. All directives with the
same priority will be executed, however.

● Template (string|function)
● template is optional. If provided, it must be set to either:
• a string of HTML
• a function that takes two arguments – tElement and tAttrs – and
returns a string value representing the template. The t in tElement and
tAttrs stands for template, as opposed to instance.
We’ll discuss the difference between a template element/attribute and
an instance element/attribute when we cover the link and compile options.
● templateUrl (string|function)
● templateUrl is optional. If provided, it must be set to either:
• the path to an HTML file, as a string
• a function that takes two arguments: tElement and tAttrs. The
function must return the path to an HTML file as a string.
● In either case, the template URL is passed through the built-in security layer
that Angular provides; specifically $getTrustedResourceUrl, which protects
our templates from being fetched from untrustworthy resources.

● replace (boolean)
● replace is optional. If provided, it must be set to true. It is set to false by
default. That means that the directive’s template will be appended as a child
node within the element where the directive was invoked:
● Demo for directive options

Directive Scope
● every directive invoked within our DOM will:
• directly use the Parents scope object,
• create a new object that inherits from parent scope object, or
• create an object that is isolated from the parent scope object

Scope Option (boolean|object)
● scope is optional. It can be set to true or to an object, {}. By default, it is set
to false.
● When scope is set to true, a new scope object is created that prototypically
inherits from its parent scope.
● When scope is set to {} i.e isolated scope, it will create its own scope.
● Demo for all scope option in directive
● Transclude
● transclude is optional. If provided, it must be set to true. It is set to false by
default.
● Transclusion is most often used for creating reusable widgets
● Transclude allows us to pass in an entire template, including its scope, to a
directive. Doing so gives us the opportunity to pass in arbitrary content and
arbitrary scope to a directive.

● Controller (string|function)
● The controller option takes a string or a function. When set to a string, the
name of the string is used to look up a controller constructor function
registered elsewhere in our application:
controller: function($scope, $element, $attrs, $transclude) {
// controller logic goes here
}
● ControllerAs (string)
● The controllerAs option enables us to set a controller alias, thus allowing us
to publish our controller under this name and giving the scope access to the
controllerAs name.
● This step allows us to reference the controller from inside the view and even
allows us to not need to inject $scope.

● require (string|array)
● The require option can be set to a string or an array of strings of names of other
directives
● require is used to inject the controller of the required directive as the fourth
parameter of the current directive’s linking function.
● The string(s) provided to the require option may optionally be prefixed with the
following options, which change the behavior when looking up a controller:
● ?
● If the required controller is not found on the directive provided, pass null to the 4th
argument of the link function.
● ˆ
● If we provide the prefix ˆ, then the directive will look upwards on its parent chain
for the controller in the require option.
● ?ˆ
● Combine the behavior of the prior two options where we optionally require the
directive and look up the parent chain for the directive.

Compile (object|function)
● The compile option can return an object or a function.
● The compile option by itself is not explicitly used very often;
however, the link function is used very often. Under the hood, when
we set the link option, we’re actually creating a function that will
define the post() link function so the compile() function can define
the link function.
● when we set the compile function, we’re interested in manipulating
the DOM before we place the directive on it with live data. Here, it is
safe to manipulate HTML, add and remove elements, etc.

Link Phase
● We use the link option to create a directive that manipulates the DOM.
● The link function is optional. If the compile function is defined, it returns the
link function; therefore, the compile function will overwrite the link function
when both are defined.
● If our directive is simple and doesn’t require setting any additional options,
we may return a function from the factory function (callback function)
instead of an object. When doing so, this function will be the link function.
● The link function has control over the live data-bound DOM, and, as such,
performance considerations should be taken into account.
require 'SomeController',
link: function (scope, element, attrs,SomeController) {
// manipulate the DOM in here
}

● angular.module('myApp' [])
.directive('myDirective', function() {
return {
pre: function(tElement, tAttrs, transclude) {
// executed before child elements are linked
// NOT safe to do DOM transformations here b/c the `link` function
// called afterward will fail to locate the elements for linking
},
post: function(scope, iElement, iAttrs, controller) {
// executed after the child elements are linked
// IS safe to do DOM transformations here
// same as the link function, if the compile option here we're
// omitted
}
}
});

Angular Module Loading
● Angular modules, themselves, have the opportunity to configure themselves before
the module actually bootstraps and starts to run. We can apply different sets of
logic during the bootstrap phase of the app.
● Configuration
Angular executes blocks of configuration during the provider registration and
configuration phases in the bootstrapping of the module.
.config(function($provide) {
});
The config() function takes a single argument:
configFunction (function) The function that Angular executes on module
load.

● We can inject only providers and constants into the .config() function.
● If we inject any old service into a .config() function, then we might
accidentally instantiate one before we actually configure it.
● We can only inject custom services that are built with the provider()
syntax.
● These .config() blocks are how we’ll custom configure our own
services, such as setting API keys and custom URLs.
● We can also define multiple configuration blocks, which are executed
in order and allow us to focus our configuration in the different
phases of the app.

Run Blocks
● Unlike the configuration blocks, run blocks are executed after the
injector is created and are the first methods that are executed in any
Angular app.
● Run blocks are the closest thing in Angular to the main method.
● Typically, these run blocks are places where we’ll set up event
listeners that should happen at the global scale of the app.

.run(function($rootScope, AuthService) {
$rootScope.$on('$routeChangeStart',
function(evt, next, current) {
// If the user is NOT logged in
if (!AuthService.userLoggedIn()) {
if (next.templateUrl === "login.html") {
// Already heading to the login route so no need to redirect
} else {
$location.path('/login');
}
}
});
});
The run() function takes a single argument:
initializeFn (function) Angular executes this function after it creates the injector.
Ex: http://jsfiddle.net/NimishChandola/e2yud2g2/

Multiple Views and Routing
● In a single-page app, navigating from one page view to another is crucial.
● When apps grow more and more complex, we need a way to manage the screens.
● We can already support such management by including template code in line in the
main HTML.
● AngularJs approach to this
● We can break out the view into a layout and template views and only show the view we
want to show based upon the URL the user is currently accessing.
● We’ll break partial templates into views to be composed inside of a layout template.
AngularJS allows us to do that by declaring routes on the $routeProvider, a provider of
the $route service.
● Using the $routeProvider, we can take advantage of the browser’s history navigation and
enable users to bookmark and share specific pages, as it uses the current URL location in
the browser.

Installation
● As of version 1.2.2, ngRoutes has been pulled out of the core of Angular into its own
module.
● In order to use routes in our Angular app, we need to install and reference it in our
app.
$ bower install --save angular-route
● We need to reference angular-route in our HTML after we reference Angular itself.
<script src="js/vendor/angular.js"></script>
<script src="js/vendor/angular-route.js"></script>
● Lastly, we need to reference the ngRoute module as a dependency in our app
module:
angular.module('myApp', ['ngRoute']);

Layout Template
● To make a layout template, we need to change the HTML in order to tell AngularJS where to render
the template.
● Using the ng-view directive in combination with the router, we can specify exactly where in the
DOM we want to place the rendered template of the current route.
● For instance, a layout template might look something like:
<header>
<h1>Header</h1>
</header>
<div class="content">
<div ng-view></div>
</div>
<footer>
<h5>Footer</h5>
</footer>
● In this case, we are placing all of the rendered content in the <div class="content">, whereas we’re
leaving the <header> and <footer> elements intact on route changes.

● The ng-view directive is a special directive that’s included with the ngRoute
module. Its specific responsibility is to stand as a placeholder for $route view
content.
● It creates its own scope and nests the template inside of it.
● It is a terminal directive at a 1000 priority. Angular will not run any directives on
the element at a lower priority, which is most directives (i.e., all other directives
on the <div ng-view></div> element are meaningless).
● The ngView directive follows these specific steps:
• Any time the $routeChangeSuccess event is fired, the view will update
• If there is a template associated with the current route:
– Create a new scope
– Remove the last view, which cleans up the last scope
– Link the new scope and the new template
– Link the controller to the scope, if specified in the routes
– Emits the $viewContentLoaded event
– Run the onload attribute function, if provided

Routes
● We use one of two methods to declare all application routes in AngularJS: the when method and the
otherwise method.
● To create a route on a specific module or app, we use the config function.
● To add a specific route, we can use the when method. This method takes two parameters
(when(path, route)).
● This block shows how can create a single route:
angular.module('myApp', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/home.html',
controller: 'HomeController'
});
}]);

● The first parameter is the route path, which is matched against the $location.path,
the path of the current URL.
● We can store parameters in the URL by starting off the name with a colon (for
instance, :name).
● The second parameter is the configuration object, which determines exactly what
to do if the route in the first parameter is matched.
● The configuration object properties that we can set are controller, template,
templateURL, resolve, redirectTo, and reloadOnSearch.
● Controller
● If we set the controller property on the configuration object, the controller given will be
associated with the new scope of the route.
● If we pass a string, it associates the registered controller on the module with the new route.
● If we pass a function, this function will be associated with the template as the controller for the
DOM element.
controller: 'MyController'
// or
controller: function($scope) {}

● template
● If we set the template property in the configuration object, Angular will render the HTML
template in the ng-view DOM element.
template: '<div><h2>Route</h2></div>‘
● templateUrl
● If the templateUrl property is set, then your app will attempt to fetch the view using XHR
(utilizing the $templateCache). If it finds the template and can load it, Angular will
render the template’s contents in the ng-view DOM element.
templateUrl: 'views/template_name.html‘
● resolve
● If we have set the resolve property, Angular will inject the elements of the map into the
controller.
● If these dependencies are promises, they will be resolved and set as a value before the
controller is loaded and before the $routeChangeSuccess event is fired.
● The map object can be a:
● key, where the key is the string name of a dependency that will be injected into the controller
● factory, where the factory can either be a string of the name of a service, a function whoseresult
is injected into the controller, or a promise that is to be resolved (whereupon the resultingvalue is
injected into the controller)

resolve: {
'data': ['$http', function($http) {
return $http.get('/api').then(
function success(resp) { return response.data; }
function error(reason) { return false; }
);
}]
}
In the example above, resolve sends the $http request off and fills the value of ‘data’
as the result of the request. The data key of the map above will be injected into our
controller, so it can be retrieved in the controller.
● redirectTo
● If the redirectTo property is set with a string, then the value will change the path and
trigger a route change to the new path.
● If the redirectTo property is set with a function, the result of the function will be set as
the value of the new path, triggering a route-change request.
redirectTo: '/home'

● reloadOnSearch
● If the reloadOnSearch option is set to true (by default), then reload the route when
$location.search() is changed.
● If you set this option to false, then the page won’t reload the route if the search part of
the URL changes.
Ex: http://jsfiddle.net/joshdmiller/NEuJ6/

● $routeParams
If we start a route param with a colon (:), AngularJS will parse it out
and pass it into the $routeParams. For instance, if we set up a route like so:
$routeProvider
.when('/inbox/:name', {
controller: 'InboxController',
templateUrl: 'views/inbox.html'
})
then Angular will populate the $routeParams with the key of :name, and
the value of key will be populated with the value of the loaded URL.
If the browser loads the URL /inbox/all, then the $routeParams object
will look like:
{ name: 'all' }
To get access to these variables in the controller, we need to inject the
$routeProvider in the controller

$location Service
● The $location service provides a nicer interface to the window.location
JavaScript object and integrates directly with our AngularJS apps.
● It is used whenever we need to provide a redirect internal to our app, such as
redirecting after a user signs up, changes settings, or logs in.
● The $location service does not provide access to refreshing the entire page.
● If we need to refresh the entire page, we need to use the $window.location
object (an interface to window.location).

● path()
● To get the current path, we can run the path() method:
$location.path(); // returns the current path
● To change the current path and redirect to another URL in the app:
$location.path('/'); // change the path to the '/' route
● The path method interacts directly with the HTML5 history API, so the user will be
able to press the back button and be returned to the previous page.
● replace()
● If you want to redirect completely without giving the user the ability to return
using the back button then AngularJS provides the replace() method:
$location.replace(); // or $location.path('/home').replace();
● absUrl()
● If you want to get full URL representation with all segments encoded, use the
absUrl() method:
$location.absUrl();

● hash()
● To get the hash fragment in the URL, we can use the hash() method:
$location.hash(); // return the current hash fragment
● To change the current hash fragment, we can pass a string parameter into the
method. Doing so returns the location object.
$location.hash('movies'); // returns $location
● host()
● We can get the host of the current URL by using the host() method:
$location.host(); // host of the current url
● port()
● The port of the current URL is available through the port() method:
$location.port(); // port of the current url
● protocol()
● The protocol of the current URL is available through the protocol() method:
● $location.protocol(); // protocol of the current url

● search()
● To get the search part of the current URL, we can use the search() function:
$location.search();
● We can pass in new search parameters, thus modifying the search portion of the
URL:
// Setting search with an object
$location.search({name: 'Ari', username: 'auser'});
// Setting search with a string
$location.search('name=Ari&username=auser');
● url()
● To get the URL of the current page, we can use the url() method:
$location.url(); // String of the url
// Set the new url
$location.url("/home?name=Ari#hashthing")
● Ex. http://jsbin.com/hemihaguca/edit?html,js,output

Routing Modes
● Hashbang Mode
● Hashbang mode is a trick that AngularJS uses to provide deep-linking capabilities
to your Angular apps.
● In hashbang mode URL paths take a prepended # character.
● They do not rewrite <a href=""></a> tags and do not require any server-side
support.
● Hashbang mode is the default mode that AngularJS uses if it’s not told otherwise.
http://yoursite.com/#!/inbox/all // hashbang url

● HTML5 Mode
● This mode makes your URLs look like regular URLs (except that in older browsers
they will look like the hashbang URL).
eg. http://yoursite.com/inbox/all
● The $location service uses HTML5’s history API, allowing for our app to use the
regular URL path.
● The $location service automatically falls back to using hashbang URLs if the
browser doesn’t support the HTML5 history API.
● If a modern browser that does support the HTML5 history API loads a hashbang
URL, it will rewrite the URL for our users.
● In HTML5 mode, Angular takes care of rewriting links when specified in the <a
href=""></a> tags.
● The back-end server will have to support URL rewriting on the server side.
● To support HTML5 mode, the server will have to make sure to deliver the
index.html page for all apps. That ensures that our Angular app will handle the
route.

Routing Events
● The $route service fires events at different stages of the routing flow. It’s possible
to set up event listeners for these different routing events and react.
● $routeChangeStart
● Angular broadcasts $routeChangeStart before the route changes.
● This step is where the route services begin to resolve all of the dependencies necessary
for the route change to happen and where templates and the resolve keys are resolved.
.run(['$rootScope', '$location', function($rootScope, $location) {
$rootScope.$on('$routeChangeStart',
function(evt, next, current) {
})
}])
The $routeChangeStart event fires with two parameters:
● The next URL to which we are attempting to navigate
● The URL that we are on before the route change

● $routeChangeSuccess
Angular broadcasts the $routeChangeSuccess event after the route dependencies have
been resolved.
$rootScope.$on('$routeChangeSuccess', function(evt,
next, previous) {
})
}])
The $routeChangeSuccess event fires with three parameters:
● The raw Angular evt object
● The route where the user currently is
● The previous route (or undefined if the current route is the first route)

● $routeChangeError
Angular broadcasts the $routeChangeError event if any of the promises are
rejected or fail.
$rootScope.$on('$routeChangeError', function(current,
previous, rejection) {
})
}])
The $routeChangeError event fires with three parameters:
● The current route information
● The previous route information
● The rejection promise error
● $routeUpdate
Angular broadcasts the $routeUpdate event if the reloadOnSearch property
has been set to false and we’re reusing the same instance of a controller.

Services
● Up until now, we’ve only concerned ourselves with how the view is tied to
$scope and how the controller manages the data.
● For memory and performance purposes, controllers are instantiated only
when they are needed and discarded when they are not. That means that
every time we switch a route or reload a view, the current controller gets
cleaned up by Angular.
● Services provide a method for us to keep data around for the lifetime of the
app and communicate across controllers in a consistent manner.
● Services are singleton objects that are instantiated only once per app (by
the $injector) and lazyloaded (created only when necessary).

Registering a Service
● There are several ways to create and register a service with the $injector
● The most common and flexible way to create a service uses the
angular.module API factory:
● angular.module('myApp.services', [])
.factory('githubService', function() {
var serviceInstance = {};
// Our first service
return serviceInstance;
});
● This service factory function is responsible for generating a single object or
function that becomes this service, which will exist for the lifetime of the
app.

Using Services
● To use a service, we need to identify it as a dependency for the component
where we’re using it: a controller, a directive, a filter, or another service.
At run time, Angular will take care of instantiating it and resolving
dependencies like normal.
● To inject the service in the controller, we pass the name as an argument to
the controller function. With the dependency listed in the controller, we can
execute any of the methods we define on the service object.

Options for Creating Services
● While the most common method for registering a service
with our Angular app is through the factory() method,
there are some other APIs we can take advantage of in
certain situations to shorten our code.
● The five different methods for creating services are:
• factory()
• service()
• provider()
• constant()
• value()

factory()
● The factory() function takes two arguments:
- name(string)
- getFn (function)
● This function runs when Angular creates the service.
● The getFn will be invoked once for the duration of the
app lifecycle, as the service is a singleton object.
● The getFn function can return anything from a primitive
value to a function to an object.

service()
● If we want to register an instance of a service using a constructor function,
we can use service(), which enables us to register a constructor function for
our service object.
● The service() method takes two arguments:
● name (string)
● constructor (function)
● Here is the constructor function that we’ll call to instantiate the instance.
● The service() function will instantiate the instance using the new keyword
when creating the instance.
● var Person = function($http) {
this.getName = function() {
return $http({
method: 'GET',url: '/api/user'
});
}};
● angular.service('personService', Person);

provider
● These factories are all created through the $provide service, which is
responsible for instantiating these providers at run time.
● A provider is an object with a $get() method
● The $injector calls the $get method to create a new instance of the service.
● At the root of all the methods for creating a service is the provider method.
The provider() method is responsible for registering services in the
$providerCache.
● If we want to be able to configure the service in the config() function, we
must use provider() to define our service.
● Creating a service in this way, we must return an object that has the $get()
function defined; otherwise, it will result in an error.

.factory('myService', function() {
return {
'username': 'auser'
}
})
// This is equivalent to the
// above use of factory
.provider('myService', {
$get: function() {
return {
'username': 'auser'
}
}
});

constant()
● It’s possible to register an existing value as a service that we can later inject
into other parts of our app as a service.
● For instance, let’s say we want to set an apiKey for a back-end service. We
can store that constant value using constant().
● The constant() function takes two arguments:
• name (string)
● This argument is the name with which to register the constant.
• value (constant value)
● This argument gives the value to register as the constant.
.constant('apiKey', '123123123')
● can inject this apiKey service inany controller and can use the key.

value()
● If the return value of the $get method in our service is a constant, we don’t
need to define a fullblown service with a more complex method. We can
simply use the value() function to register the service.
● The value() method accepts two arguments:
• name (string)
● Once again, this argument gives the name with which we want to register
the value.
• value (value)
● We’ll return this value as the injectable instance.
.value('apiKey', '123123123');

decorator()
● The $provide service gives us a way to intercept the service instance
creation. Decorating our services enables us to extend services or replace
them with something else entirely.
● Decorators, themselves, are very powerful in that we can not only provide
decorations for our own services, but we can intercept, interrupt, and even
replace functionality in the core Angular services
● Use-cases for decorating services might include extending a service to cache
external data requests to localStorage or wrapping a service in debugging or
tracing wrappers for development purposes.

The decorator() function takes two arguments:
• name (string)
Here we pass the name of the service to decorate.
• decoratorFn (function)
We give the function that we’ll invoke at the time of service instantiation. The
function is called with injector.invoke, which allows us to inject services into
it.
In order to decorate a service, we need to inject the $delegate, which is the
original service instance that we can decorate.

For instance, to add a decorator function to our above custom githubService to add a
timestamp to every call, we can add a decorator function like the following:
var githubDecorator = function($delegate, $log) {
var events = function(path) {
var startedAt = new Date();
var events = $delegate.events(path);
var result = $delegate.locate();
// Events is a promise
events.always(function() {
$log.info("Fetching events" +" took " +(new Date() - startedAt) + "ms");
});
return result;
}
return {
events: events
}};

.config(function($provide) {
$provide.decorator('githubService',
githubDecorator);
});

Angular workshop - Full Development Guide

More Related Content

What's hot (20)

Viewers also liked (17)

Similar to Angular workshop - Full Development Guide (20)

Recently uploaded (20)

Angular workshop - Full Development Guide