SlideShare a Scribd company logo

AngularJS

•Download as PPTX, PDF•
•
Mahmoud Tolba
Mahmoud Tolba

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.

Related slideshows

AngularJS Basics
AngularJS BasicsAngularJS Basics
AngularJS Basics
 
Gettings started with the superheroic JavaScript library AngularJS
Gettings started with the superheroic JavaScript library AngularJSGettings started with the superheroic JavaScript library AngularJS
Gettings started with the superheroic JavaScript library AngularJS
 
Angularjs Basics
Angularjs BasicsAngularjs Basics
Angularjs Basics
 
1 of 15
AngularJS Training Mahmoud shaaban 9/9/2015 AngularJS Training 1
About @Me • Solution Architect at Mantrac Group • Skype: Mahmoudfcis • Twitter: @MahmoodTolba 9/9/2015 AngularJS Training 2
Agenda Introduction to AngularJS AngularJS modules Controllers Filters and expressions Directives Factories Services Routing AngularJS unit testing 9/9/2015 AngularJS Training 3
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
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
AngularJS vs. Other frameworks • Backbone, Ember, React are another MV* frameworks 9/9/2015 AngularJS Training 6
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
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
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; }; }]);
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
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()
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
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
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
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

More Related Content

AngularJS

  • 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