AngularJS

• What is AngularJS• AngularJS main components– View / Controller / Module / Scope

• Scope Inheritance.• Two way data binding– $watch / $digest / $apply– Dirty Checking

• DI - Dependence Injection• $provider vs $factory vs $service

What is AngularJS

• Javascript Front-end Framework (100% Javascript & 100% client side)

• For building dynamic web apps.

• Angular is what HTML would have been, had it been designed for applications.

• HTML is a great declarative language for static documents.

• But It does not contain much in the way of creating applications.

• It lets you use HTML as template language.• It lets you extend HTML’s syntax to express

your application’s components clearly and succinctly.

• Angular's data binding and dependency injection eliminate much of the code you would otherwise have to write

• MVC design parttern to organize codes.

Traditional Solution

HTML<37% LOC

JavaScript>63% LOC

AngularJS solution

HTML<59% LOC

JavaScript>41% LOC

Model

MVCView

Controller

Template

Template -> View

TemplateCompile

View - DOM

Directive

• AngularJs is what HTML could have been if it had been designed for web application.

• HTML is a markup language for describing web document.

Directive

• A directive is a maker on a DOM element that tells Angular to run or reference some JS code to:– Attach a specified behaviors to that DOM.– Transform the DOM on the fly.

<map id="map_canvas" x="46.8765" y="-3.32910"></map>

Expression

• Allow you to insert dynamic values into your html.

I am number {{0 + 1}} -> I am number 1{{"hello" + " you"}} -> hello you{{“Hi," + user.name}} -> Hi, Tom

Modules

• A module is a collection of services, directives, controllers, filters, and configuration information

• Where we write pieces of our angular application.

• Makes our code more maintainable, testable and readable.

Module

Controller

• Controller is a JavaScript function.• Controller contains business logic behind the

application to decorate the scope with functions and data.

• The ngController directive specifies a Controller class.

Controller

Scope

• scope is an object that refers to the application model.

• Scope is the glue between application controller and the view.

• Scope provide $watch to observe model mutations.

Controller

Model

Out of scope

Ng-controller alias

Angular Scope Inheritance

• In AngularJS, a child scope normally prototypically inherits from its parent scope

• Child scope:– scope of child controller– Child of $rootscope– New child scope is created by build-in directive

(ng-repeat, ng-switch, ng-view and ng-include)• Isolate scope: no inherits from parent.

Angular Scope Inheritance

Hides/shadows property issue

• Six data types that are primitives:– Boolean– Null– Undefined– Number– String– Symbol (new in ECMAScript 6)

• Change a primitive value defined on the parent scope from inside the child scope.

childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'

childScope.aString = 'child string'

A new aString property is added to the childScope.

-> This new property hides/shadows the parentScope property with the same name

childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }

workarounds

• If you really want/need to use a primitive, there are two workarounds:– Use $parent.parentScopeProperty in the child

scope. This will prevent the child scope from creating its own property.

– Define a function on the parent scope, and call it from the child, passing the primitive value up to the parent (not always possible)

Data binding

• Changes to the model are NOT automatically reflected in the view.

• Any changes the view are NOT automatically reflected in the model.

After the merge occurs:

Two way data binding

1. The template is compiled on the browser. 2. The compilation step produces a live view. 3. Any changes to the view are immediately reflected in the model, 4. and any changes in the model are propagated to the view.

$scope.$watch

• When you create a data binding from somewhere in your view to a variable on the $scope object, AngularJS creates a "watch" internally.

• A watch means that AngularJS watches changes in the variable on the $scope object.

• Watches are created using the $scope.$watch()• Each $watch be inserted into $watch list

$scope.$watch

$scope.$digest

• Use to checks if there are any changes to all the variables watched by all the $scopes.

• If a watched variable has changed, a corresponding listener function is called.

• This listener function does what it need to do:• Example: changing an HTML text to reflect the

new value of the watched variable.

• => the $digest() function is what triggers the data binding to update.

$digest loop• Loop through $watch list and compare old vs new value:

– Hey $watch, what is your value?• It is 9

– Alright, has it changed?• No, sir.

– (nothing happens with this one, so it moves to the next)– You, what is your value?

• It is Foo.– Has it changed?

• Yes, it was Bar.– (good, we have a DOM to be updated)– This continues until every $watch has been checked.

• When the $digest loop finishes, the DOM makes the changes.

=> Dirty Checking

One moreTimeBaby!

Dirty checking

• if the loop runs more than 10 times, it will throw an exception to prevent infinite loops

Dirty Checking

$scope.$apply

• used to execute some code, and then call $scope.$digest() after that.

• Called when an event is fire

When angular doesn’t use $apply for us

• Native event that is not wrapped into $apply call.

• Use directly jQuery.ajax()

=> Whenever possible, use AngularJS services instead of native

Using $watch for our own stuff• $watch(watchExpression, listener);-> $watch will only shallow check the referenced value by default.

• $watch(watchExpression, listener, true);-> When deep-watching an object, angular will follow all references to other

objects.-> May be results in an infinite loop.

• $watchCollection(obj, listener);-> deep-watching array.

• Dirty checking can be done with three strategies: By reference, by collection contents, and by value

• ng-model does not do a deep watch

DI - Dependence Injection

• Dependency injection means giving an object its instance variables. Really. That's it.

• Instead of having it construct them itself.

• Dependencies can be injected into objects by many means (such as constructor injection or setter injection)

DI in AngularJS

The Provider ($provide)

• Injectable things - services• Services are defined by things called providers• Providers are created by $provide service.

• The $provide service is responsible for telling Angular how to create new services.

Defining a provider

• $provide. provider(name, provider);• $get : create a service – greeting service

Inject service

• Angular will call the greeting provider's $get function in order to return a new instance of the service.

Service in AngularJS

• Lazily instantiated – Angular only instantiates a service when an application component depends on it.

• Singletons – Each component dependent on a service gets a reference to the single instance generated by the service factory.

$provide.factory

• Short way to create Service.• AngularJS is calling the exact same

code $provide.provider for us.

$provide.service

• $provide. service(name, constructor)

Common way

Provider vs Factory vs Service

1. app.provider('c', fn); => new fn(); fn.$get()2. app.factory('a', fn); => fn() { return obj }3. app.service('b', fn); => new fn()

Config & Run phases

angular.module('myModule', []). config(function(injectables){ // provider / $provide and $injector// This is an example of config block. // You can have as many of these as you want. // You can only inject Providers (not instances) // into config blocks. })

. run(function(injectables) { // instance-injector // This is an example of a run block. // You can have as many of these as you want. // You can only inject instances (not Providers) into run blocks });

The Injector ($injector)

• The injector is responsible for actually creating instances of our services using the code we provided via $provide

$injector

greetingProvider

$httpProvider

$routeProviderI need “greeting” service

Create instance“greeting” service instance

var greeting = $injector.get('greeting');

$injector

• Each AngularJS application has a single $injector that gets created when the application first starts.

• You can inject services into any function that is called with$injector.invoke. This includes:– controller definition functions– directive definition functions– filter definition functions– the $get methods of providers (aka

the factory definition functions)

• Custom Directive.• AngularJS bootstrap life cycle.