AngularJS - Part 1

gAngularJS

ByNishikant Taksande

NetPay Merchant Services

TemplateSERVICE

MODULE

Injector

Dependency Injection

CONTROLLERData Binding

View

Filter

Compiler

ExpressionsScope ModelDirectives

?

The Principles

Boilerplate

D.R.Y. Structure Testability

Source: google I/O

DatabaseRAM

<div>

<span> <ul>

<li><li><li>

Where does it fits in?

Source: google I/O

How it works?

AngularJS will initialize when DOM content is loaded

ng-app

Conceptual Overview

TEMPLATE

DIRECTIVES

MODEL

SCOPE

EXPRESSIONS COMPILER

VIEW FILTER

DATA BINDING CONTROLLER

MODULE SERVICE

Kick Start

DIRECTIVES FILTERS DATA BINDING

What are directives ?

They teach HTML new trick!

Using DirectivesDirective

Directive

Using Directives …

Using Filters

RAM

{{ databinding }}

Logic

<div>

<span> <ul>

<li><li><li>

ManagesNotifies

Observes

Logic / Controller(JS Classes)

UI / View(DOM) RAM Data / Model

<div>

<span> <ul>

<li>

Structure

Model

View

var firstName = “john”

<h1>john</h1>

controller, viewModel

MVC

View, Controller and Scope

VIEW CONTROLLER SCOPE

View, Controller and Scope…

VIEW CONTROLLER$scope

$scope is the glue between a controller and a view

View, Controller and Scope…

$scope injected dynamically

Module, Routes and Factories

MODULE ROUTES FACTORIES

MODULE

CONFIG

ROUTES

VIEW CONTROLLER$scope

*FACTORIESDIRECTIVES

Module and container<html ng-app="sampleApp">

MODULE

CONFIG FILTER DIRECTIVE FACTORY CONTROLLER

ROUTES

SERVICE

PROVIDER

Creating Module

var sampleApp = angular.module('sampleApp', []);

What it is for?This is where dependency

injection comes in

var sampleApp = angular.module('sampleApp', [‘helperApp’]);

sampleApp depends on helperApp module

Creating Controller in ModuleCreating Module

Creating Controller

Role of Routes

VIEW #1 VIEW #2

VIEW #3VIEW #4

/view1

/view2

/view3

/view4

Routes Dependency

Define Module Route

AngularJS

Software

AngularJS - Part 1