This document contains an agenda for an AngularJS training that covers: Introduction to AngularJS modules; Controllers; Filters and expressions; Directives; Factories; Services; Routing; and AngularJS unit testing. The training will provide an overview of AngularJS advantages and life cycle, and compare AngularJS to other frameworks such as Backbone and Ember.

1. AngularJS Training
Mahmoud shaaban
9/9/2015 AngularJS Training 1

2. About @Me
• Solution Architect at Mantrac Group
• Skype: Mahmoudfcis
• Twitter: @MahmoodTolba
9/9/2015 AngularJS Training 2

3. Agenda
Introduction to AngularJS
AngularJS modules
Controllers
Filters and expressions
Directives
Factories
Services
Routing
AngularJS unit testing
9/9/2015 AngularJS Training 3

4. Introduction to AngularJS
• JavaScript library developed by Google for building dynamics web
apps.
• MV* Framework
• Open source
• Client side
• AngularJS extends vocabulary of HTML
9/9/2015 AngularJS Training 4

5. AngularJS advantages
• Great framework for building dynamic, SPA web applications
• AngularJS allows you to control complete DOM structure show/hide,
changing everything with AngularJS properties
• Modularity, Support of design patterns, testable framework
• You can accomplish 80% of web application functionality using 20% of
AngularJS features
• AngularJS learning curve is high
• Extensive support and documentation, communities are expanding
• Visual Studio Support and Intellisense
9/9/2015 AngularJS Training 5

6. AngularJS vs. Other frameworks
• Backbone, Ember, React are another MV* frameworks
9/9/2015 AngularJS Training 6

7. AngularJS page life cycle
• Bootstrap phase: occurs when the AngularJS library is downloaded to
the browser when the AngularJS initializes its module and its
necessary components, in this phase the module is initialized.
• Compilation phase: occurs when the page is loaded , static form of
the DOM is replaced with dynamic DOM.
• Runtime data binding phase: any changes in the scope reflected in the
view and any changes in the view are reflected in the scope
9/9/2015 AngularJS Training 7

8. AngularJS Modules
• Is a global place for creating, registering and retrieving Angular
modules
• Is a collection of services, directives, controllers, filters, and
configuration information
• http://ngmodules.org/ custom AngularJS modules
9/9/2015 AngularJS Training 8

9. Controllers
• They are JS function that binds the view to the Model
• Takes at least one parameter: $scope
• Ng-controller is used to define a controller in a page
• Controllers can be nested with another controllers
• Example HTML:
• Defining the controller in JS
9/9/2015 AngularJS Training 9
<div ng-controller="GreetingController"> {{ greeting }} </div>
var myApp = angular.module('myApp',[]); myApp.controller('DoubleController', ['$scope', function($scope) { $scope.double = function(value) { return value * 2; }; }]);

10. Expressions
• Angular expressions are JavaScript-like code snippets that are usually
placed in bindings such as {{ expression }}
• Example {{1+2}}
• AngularJS expressions are similar to JavaScript expressions with
several differences; the context of AngularJS expressions is the scope
object whereas the context of JavaScript context window object.
• You cannot write control flow or loop expression inside AngularJS
expression
9/9/2015 AngularJS Training 10

11. Filters
• A filter formats the value of an expression for display to the user. They can
be used in view templates, controllers or services and it is easy to define
your own filter.
• Built-in AngularJS filters:
9/9/2015 AngularJS Training 11
Filter Description
currency Format a number to a currency format.
filter Select a subset of items from an array.
lowercase Format a string to lower case.
orderBy Orders an array by an expression.
uppercase Format a string to upper case.
• You can build your own filter using module.filter()

12. Directives
• They are markers on a DOM element (such as an attribute, element
name, comment or CSS class) that tell AngularJS's HTML compiler
($compile) to attach a specified behavior to that DOM element or
even transform the DOM element and its children.
• Add new vocabulary to HTML
• AngularJS comes with plenty of directives ng-app, ng-model, ng-
controller, ng-show, ng-repeat,ng-init
• You can build your custom directive using module.directive()
• Directives can be used for DOM manipulation
9/9/2015 AngularJS Training 12

13. Factories & Services
• They reusable components that share (business logic, data) across
controllers and directives.
• Angular Services are singletons, only one instance of the service per
injector
• Service syntax : module.service(‘ServiceName’,function); useful for
Shared Utilities
• Factory Syntax: module.factory(‘factoryName’,function);useful for
returning class functions that can be new’ed to create instances
9/9/2015 AngularJS Training 13

14. Routing
• Use different views for different URL fragments
• Mainly for creating single page applications
• Makes use of template partials
• Templates that are not a whole web page (i.e. part of a page)
• Used in conjunction with the ng-view directive
• ng-view determines where the partial will be placed
• Can only have one ng-view per page

15. AngularJS Unit Testing
• AngularJS comes with dependency injection built in which makes the
testing easy
• Separation of concerns is important for testing
• Karma and Jasmine are popular testing frameworks for AngularJS
9/9/2015 AngularJS Training 15