angularjs

05/02/2023 AngularJS Training 1

AngularJS TrainingMahmoud shaaban


About @Me• Solution Architect at Mantrac Group• Skype: Mahmoudfcis• Twitter: @MahmoodTolba


AgendaIntroduction to AngularJS AngularJS modulesControllers Filters and expressions Directives Factories Services Routing AngularJS unit testing


Introduction to AngularJS• JavaScript library developed by Google for building dynamics web

apps.• MV* Framework• Open source• Client side• AngularJS extends vocabulary of HTML


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


AngularJS vs. Other frameworks• Backbone, Ember, React are another MV* frameworks


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


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

http://ngmodules.org/


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

<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


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:

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


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

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

https://karma-runner.github.io/0.13/index.html

http://jasmine.github.io/1.3/introduction.html

angularjs

Software