1 of 25

Angular 1.x

component based model

2 of 25

Why Angular?

File: home.jsp

<jsp:include src=”../header.jsp” />

<jsp:include src=”../content.jsp” />

<jsp:include src=”../footer.jsp” />

​

Every time rerenders or reloads a page for major changes in view.

3 of 25

SPA [ Single page application ]

4 of 25

Modules

5 of 25

6 of 25

Controller

Constructor function that defines:

→ sets the initial state of $scope object

→ adds behaviour to $scope object

7 of 25

Services / factories

There are the Object that can be used across the app injection.

→ Lazily instantiated

→ Singleton

​

​

8 of 25

Provider

Much more similar to services but allows us to configure on app configuration phase.

​

9 of 25

Service vs Factory

10 of 25

Config

Used to perform an action before angular module gets loaded.

→ Useful when we want to configure our provider before it returns a factory instance

11 of 25

Run

Used to perform an action after angular module gets loaded.

→ Useful when we want to do some initialization operation like fetching data from server before it renders view.

12 of 25

Scope

Is an object (model) that defines the execution context of angular expression

13 of 25

14 of 25

Scope lifecycle

  1. Creation ----------> $inject
  2. Watchers registration ----------> $watch()
  3. Model mutation ---------> $appy()
  4. Mutation observation ----------> $digest()
  5. Destruction ----------> $destroy()

15 of 25

Thing that create new scope

  1. Ng-app
  2. Ng-controller
  3. Ng-view
  4. Ng-repeat
  5. Ng-switch
  6. Ng-include
  7. Ng-if
  8. Component
  9. custome

16 of 25

Inherited scope

Scope inheritance works based on prototypical inheritance.

17 of 25

Child scope property aString hides access to parent scope

18 of 25

NgModel [ Binding ]

Model value

View value

Magic

19 of 25

NgModelController

  1. When want to set validation on ngModel
  2. When we want to underlying model value in different format from view value and vice versa
  3. When we want to know whether the changing value is dirty or clean

20 of 25

21 of 25

Component

  1. Separation of concerns
  2. Reusability

22 of 25

Example

File : todos.html → DOM structure

<input type=”text” ng-model=”todo” />

<todos>

<todo> </todo>

<todo> </todo>

</todos>

​

23 of 25

Dependency Injection

Dependency Injection (DI) is a software design pattern that deals with how components get hold of their dependencies.

There are only 3 ways a component can depends on other component:

1. Create dependency with new keyword

2. Referring a global variable

3. Passing dependency as argument

​

​

​

24 of 25

Injector

  1. Invoke
  2. Instantiate
  3. Get
  4. Has

​

25 of 25

Ways to define a dependency in Angular

→ Dependency Annotation

1. Inline

2. Using $inject property

3. As a function parameter