get angularjs started!

Get Angular JS

Started!

Introduction to AngularJS

Meetup Talk by Dmitry Ivashutin, april 2014

Presenters

What is not AngularJS?

➔ Not a JavaScript library, it’s a framework◆ it has no methods to call directly

➔ Not for DOM manipulation◆ but it has a limited jQuery stand-in inside (jqLite)

What is AngularJS?

➔ 100% JavaScript

➔ 100% Client side

➔ MVC || MVVM === MVW

Why is it ‘Angular’ and ‘ng’?

HTML has <> ‘ng’ sounds like ‘Angular’

Model-View-ViewModel

View

Model ViewModel

UI

Business Logic and Data

Presentation Logic

► user actions, commands► data bindings► notifications

► data access► update on change

Model-View-Controller

View

Model Controller

UI View:► renders model► sends User actions/events to controller

Controller:► defines app behaviors► maps actions/events to Model

Model:► represents data► handles Business Logic► notifies view on changes

User Interactions

Business Logic and Data

Key Features

Application

ng-app➔ auto-bootstrapping the application➔ one per page*➔ application scoping

<html data-ng-app></html>

Expressions

<body>1 + 2 = {{1 + 2}}

</body>1 + 2 = 3

HTML RESULT

http://jsfiddle.net/ae87/9uzkL/

Modules

You can think of a module as a container for the

different parts of your app – controllers, services, filters,

directives, etc.

var myApp =angular.module(‘myApp’, []);

Module configuring - Filter

// declare a module

var myAppModule =

angular.module(‘myApp’, []);

// configure the module. create a filter

myAppModule.filter(‘greet’, function() {

return function(name) {

return ‘Hello, ‘ + name + ‘!’;

};

});

<div>

{{ ‘World’ | greet }}

</div>

Hello, World!

HTMLJS

RESULT

http://jsfiddle.net/ae87/AXrxb/

Directives

<input data-ng-model=”name” />

At a high level, directives are markers on a DOM element (such as an

attribute, element name, or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a

specified behavior to that DOM element or

even transform the DOM element and its children.

http://docs.angularjs.org/api/ng/service/$compile

Controllers

// declare a module

var myApp =


// configure the module. add controller

myApp.controller(‘MeetupController’,

[‘$scope’, function($scope) {

$scope.greetings = ‘Welcome!’;

}]);

<div data-ng-controller=

”MeetupController”>

{{ greetings }}

</div>

Welcome!

JS HTML

RESULT

http://jsfiddle.net/ae87/R5z7p/

Use controllers to:

➔ Set up the initial state of the $scope object.

➔ Add behavior to the $scope object.

Do NOT use controllers to:

➔ Manipulate DOM

➔ Format input

➔ Filter output

➔ Share code or state across controllers

➔ Manage life-cycle of other components

Scope

// declare a module

var myApp =


// add value to $scope object




}]);

➔ Viewmodel like object (MVVM)

➔ Model presentation (MVC)

JS

What are scopes?

➔ mimics DOM structure*

◆ parent inheritance

◆ child isolation

➔ ‘$watch’s model mutations

➔ ‘$apply’ies model changes on view

Dependency Injection

// declare a module

var myApp =


// inject reference to $scope object




}]);

➔ inline array annotation

➔ $inject property annotation

➔ implicitly from the function parameters names

JS

Directives: ng-repeat

// adding array for iteration over it



$scope.attendees = [

{ name: ‘Alexey’, room: 521 },

{ name: ‘Olga’, room: 504 },

{ name: ‘Sergey’, room: 522 },

];

}]);

JS <ul>

<li data-ng-repeat=”a in attendees”>

{{ a.name }} ( {{ a.room }} )

</li>

</ul>

● Alexey ( 521 )● Olga ( 504 )● Sergey ( 522 )

HTML

RESULT

http://jsfiddle.net/ae87/q8X9g/

Directives: ng-class

<ul>

<li data-ng-repeat=”a in attendees”

data-ng-class=

”{red:a.room==504}”>

{{ a.name }}} ( {{ a.room }} )

</li>

</ul>

HTML.red {

color: DarkRed;

font-weight: bold;

}

● Alexey ( 521 )● Olga ( 504 )● Sergey ( 522 )

CSS

RESULT

http://jsfiddle.net/ae87/yW4mc/

Directives: ng-class

<ul>

<li data-ng-repeat="s in speakers"

data-ng-class=

"{true: 'blue', false: 'green'}

[s.room==522]">

{{ s.name }} ( {{ s.room }} )

</li>

</ul>

HTML .blue{

color: DarkBlue; font-weight: bold;

}

.green {

color: DarkGreen; font-weight: bold;

}

● Dmitry ( 522 )● Vladimir ( 521 )

CSS

RESULT

http://jsfiddle.net/ae87/cc8Q4/

Directives: ng-click



$scope.addAttendee = function(e){

$scope.attendees.push({

name: $scope.name,

room: $scope.room

});

};

}]);

JS<input data-ng-model=”name” type=”text”/>

<input data-ng-model=”room” type=”text”/>

<button data-ng-click=”addAttendee($event)”>

Add Attendee

</button>

● Alexey ( 521 )● Olga ( 504 )● Sergey ( 522 )● Denis ( 500 )

HTML

RESULT

http://jsfiddle.net/ae87/QNGq4/

Directives: ng-show

<input data-ng-show=”canEdit” />

The ngShow directive shows or hides the given HTML element

based on the expression provided to the ngShow

attribute. The element is shown or hidden by removing or adding the ng-hide CSS class onto the element. The .ng-hide CSS class is predefined in

AngularJS and sets the display style to none

using an !important flag.

Directives: ng-if

The ngIf directive

removes or recreates a portion of the DOM

tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is

reinserted into the DOM.

<div data-ng-if=”canView” />

Dependency Injection objects

➔ Services:◆ Value, Factory, Service, Provider, Constant,

Decorator*

➔ Special purpose objects:◆ Controller, Directive, Filter, Animation

Services

➔ Injectable objects

➔ Singletons

➔ Lazy instantiated

Factory Recipe

myApp.factory(‘alerter’, function () {

var alerter = {};

alerter.sayHello = function () {

alert(‘Hello!’);

}

alerter.sayGoodbye = function () {

alert(‘Goodbye!’);

}

return alerter;

});

JSmyApp.controller(‘MeetupController’,

[‘$scope’, ‘alerter’,

function($scope, alerter) {

$scope.alerter = alerter;

}]);

<button data-ng-click=”alerter.sayHello()”>

Say Hello

</button>

<button data-ng-click=”alerter.sayGoodbye()”>

Say Goodbye

</button>

JS

HTML

http://jsfiddle.net/ae87/9x7Aq/1/

Service Recipe

myApp.service(‘alerter’, function () {

this.sayHello = function(){

alert(‘Hello!’);

}

this.sayGoodbye = function(){

alert(‘Goodbye!’);

}

});





}]);


Say Hello

</button>


Say Goodbye

</button>

JS

HTML


Provider Recipe

myApp.provider(‘alerter’, function () {

var name = ‘Dear Guest’;

this.setGuestName = function(newName) {

name = newName;

};

this.$get = [/*you can DI in provider here*/

function(){

var alerter = {};

// your code using name variable

return alerter;

}];

});





}]);


Say Hello

</button>


Say Goodbye

</button>

JS

HTML


myApp.value(‘apiUserId’, ‘Af8as131A’);

myApp.controller(‘mapsController’, [

‘$scope’, ‘apiUserId’,

function($scope, apiUserId){

$scope.apiUserId = apiUserId;

}]);

Value Recipe

JS

➔ a string, a number, an array, an object or a function

➔ cannot be injected in config section

➔ can be overridden by decorator

myApp.constant(‘apiUserId’, ‘AWjd812’);

myApp.controller(‘mapsController’, [

‘$scope’, ‘apiUserId’,

function($scope, apiUserId){

$scope.apiUserId = apiUserId;

}]);

Constant Recipe

JS

➔ a string, a number, an array, an object or a function

➔ can be injected in config section

➔ cannot be overridden by decorator

Providers

Features / Recipe type Factory Service Value Constant Provider

can have dependencies yes yes no no yes

uses type friendly injection no yes yes* yes* no

object available in config phase

no no no yes yes**

can create functions/primitives

yes no yes yes yes

Demoable

http://jsfiddle.net/ae87/4rckY/

What else?

Forms and validation

Routing

Configuration

$http

$q and promises

Deeper about directives

$broadcast and $emit

and a large list of other interesting things is coming next time …

Questions?

get angularjs started!

Technology