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

1. AngularJS

2. • 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

3. 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.

4. • 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.

5. Traditional Solution
HTML
<37% LOC
JavaScript
>63% LOC

6. AngularJS solution
HTML
<59% LOC
JavaScript
>41% LOC

7. Model
MVC
View
Controller

8. Template

9. Template -> View
Template
Compile
View - DOM

10. 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.

11. 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>

13. 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

14. 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.

15. Module

16. 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.

17. Controller

19. 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.

20. Controller
Model

22. Out of scope

23. Ng-controller alias

26. 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.

27. Angular Scope Inheritance

28. 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.

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

30. 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

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

32. 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)

33. 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:

34. 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.

35. $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

36. $scope.$watch

37. $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.

38. $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 more
Time
Baby!

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

40. Dirty Checking

41. $scope.$apply
• used to execute some code, and then
call $scope.$digest() after that.
• Called when an event is fire

43. 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

44. 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

46. 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)

47. DI in AngularJS

48. 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.

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

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

51. 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.

52. $provide.factory
• Short way to create Service.
• AngularJS is calling the exact same
code $provide.provider for us.

53. $provide.service
• $provide. service(name, constructor)

54. Common way

55. 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()

56. 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
});

57. The Injector ($injector)
• The injector is responsible for actually creating
instances of our services using the code we
provided via $provide
$injector
greetingProvider
$httpProvider
$routeProvider
I need “greeting” service
Create instance
“greeting” service instance
var greeting = $injector.get('greeting');

58. $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)

60. • Custom Directive.
• AngularJS bootstrap life cycle.