angular js

12
Athira Mukundan Solution Consultant @Sahaj [email protected]

Upload: athira-mukundan

Post on 11-Apr-2017

191 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: Angular js

Athira MukundanSolution Consultant @Sahaj

[email protected]

Page 2: Angular js

What’s the big deal? "What HTML would have been, had it been designed for building web-

apps"

Open Source, supported by Google

Extremely well documented && Vibrant community of users

Facilitate building single page applications. Page never reloads. No server-side page rendering

Provide solutions for:

Routing - handling updates to the URL hash fragment

Templating - dynamically creating and updating HTML based on templates and models

Data binding - synchronize the model and user interface

Page 3: Angular js

Angular is all about - Templates

Directives

Model, View, Controller

Scope

Expression

Compiler

Filter

Injector and Dependency Injector

Data Binding

Module

Service

Page 4: Angular js

AgendaDirectives, Filters and Data Binding

Views, Controllers, Scope,

Modules, Routes and Factories

Page 5: Angular js

Directives, Filters and Data BindingDirectives (ng-app, ng-controller, ng-init, ng-show…..!):

Lets you invent new tags for your application

Angular is bundled with numerous directives

Directives can add behaviours, bind data to scope, replace/extend existing html element

Filters (currency, uppercase, number…..!):

Used to formatting data.

Data Binding:

1 way binding: ng-bind

2 way binding: ng-model

Page 6: Angular js

Views, Controllers and Scope

Page 7: Angular js

Modules, Routes

Page 8: Angular js
Page 9: Angular js

RoutingUsed to bind the controller and a view without using the ng-controller

Could be done with ng-route or ui-router

The routing happens without reloading the page

Page 10: Angular js

Providers, Factory, Services, Value, ConstantAll the providers are instantiated only once. That means that they are

all singletons.

A constant is a value that can be injected everywhere. The value of a constant can never be changed.

A value is just a simple injectable value.

A service is an injectable constructor.

A factory is an injectable function.

A decorator can modify or encapsulate other providers except a constant.

A provider is a configurable factory.

Page 11: Angular js

….Providers, Factory, Services, Value, Constant

Page 12: Angular js