Angularjs

Getting started with the superheroic
JavaScript library
20th June 2014, Armin Rdiger Vieweg (@ArminVieweg)

Getting started with superheroic JavaScript library AngularJS
About the author

Armin Rdiger Vieweg
PHP, TYPO3, JavaScript developer
30 years old from Linz am Rhein (DE)

4.5 years experience with TYPO3
published 17 extensions in TER
Working with AngularJS for ~1 year

Workshop Schedule
1. Presentation
2. Live Coding Examples
3. Practicing AngularJS

AngularJS is made for...

Single page applications (SPA, like Twitter)
Weba pps (eg. with Cordova Framework)
More complex magic on your web project

AngularJS Facts
Also called just Angular Website: angularjs.org
Initially published in
2009
Released under MIT
Licence
Developed by Google
and community
Library file size (v1.2.17)
103 KiB production

749 KiB development
Includes jqLite or uses

jQuery if existing

AngularJS Buzzwords
Two-
Modules
way D
s
e
v
i
ect
Dir
ection
nj
I
y
c
n
de
n
e
p
e
D
Providers
Expressions
Scopes
Services
ata B
indin
llers
o
r
t
Con
Filters
s
e
i
r
o
t
Fac
Valid
ator

The very first steps (1/7)

We need a blank HTML template
And a clean folder structure:
app/
css/
js/
index.html


A blank HTML template
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJS Workshop</title>
<link media="all" rel="stylesheet" href="css/style.css">
</head>
<body>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/angularjs/angular.min.js"></script>

<script src="app/app.js"></script>
</body>
</html>

A module for the application
Container for AngularJS magic

You may include other modules
Dont invent the wheel twice
Just reuse other modules in your applications
A module is the beginning of all AngularJS projects


A module for the application
In app/app.js we declare our first module:

// declares a module
var app = angular.module('myFirstApp', []);
app.controller(MyFirstController, ...);
// also declares a module
angular.module('mySecondApp', ['myFirstApp']);
angular.module('mySecondApp').controller(...);


Lets introduce the HTML to our new app
This happens with the directive ng-app:

<body ng-app="myFirstApp">

<script src="app/app.js"></script>
</body>
It is possible to use several apps seperately on

one page


Summary
Created a blank HTML template

Included jQuery, AngularJS and our first module
Declared first module in app.js

Paired <body> with myFirstApp
by using ng-app directive


Result
An awesome blank site, ready for AngularJS magic ;-)

AngularJS Buzzwords
Two-
Modules
way D
s
e
v
i
ect
Dir
ection
nj
I
y
c
n
de
n
e
p
e
D
Providers
Expressions
Scopes
Services
ata B
indin
llers
o
r
t
Con
Filters
s
e
i
r
o
t
Fac
Valid
ator

AngularJS Buzzwords
Expressions
Modules Two-wa
y Dat
a Bin
ding
s
e
v
i
t
on
i
c
t
c
e
e
ers
j
l
r
l
n
i
I
o
r
y
t
D
nc
e
Con
d
n
e
Dep
Scopes
Filters
Providers
Services
s
e
i
r
o
t
Fac
Valid
ator

Directives (1/7)
What the $%&!% are directives?!
Everything in your DOM may be a directive:
Elements (<ng-include></ng-include)
Classes (class="ng-include: data;")
Attributes (<b ng-include="data">)
Comments ()
Directives attach custom behavior to those elements

or transform them
Directives (2/7)
AngularJS provided directives
AngularJS provides plenty of its own directives:

ngApp
ngClass
ngRepeat
ngBind
ngClick
ngShow
ngBlur
ngInlcude
ngSrc
ngChange
ngModel
...
ngChecked
ngPluralize
Directives (3/7)
Different syntax available
Directive ngModel:
<input
<input
<input
<input
<input
<input
ng-model="foo">
data-ng:model="foo">
data-ng-model="foo">
ng:model="foo">
ng_model="foo">
x-ng-model="foo">
Might be necessary for html/xhtml validation reasons

Directives (4/7)
Simple example of Angulars directives (1/2)
Lets take the HTML template we have prepared and add:

<input type="text" ng-model="name">
<h1 ng-show="name" ng-class="{red: name=='Armin'}">
Hello, {{name}}!
</h1>
name is a new scope variable

ng-model binds the value of <input> to this variable
{{name}} expression outputs the variable
Directives (5/7)
Simple example of Angulars directives (2/2)
We also add a button to set name:

<button ng-click="name='Penelope'">Click me</button>
Clicking the button will set the scope variable name to

Penelope. This affects:
The value of <input>, because it is two-way data bound
to variable name
And the {{name}} expression, which outputs the value
Directives (6/7)
Summary
Allmost every DOM element may be a directive

We have learned some of Angulars directives:
ng-model, ng-show, ng-class and ng-click
We have heard about scope variables

We know of double curley expressions to output
{{variables}}
Directives (7/7)
Result
A dynamic application
without writing one line of
javascript code

AngularJS Buzzwords
Expressions
Modules Two-wa
y Dat
a Bin
ding
s
e
v
i
t
on
i
c
t
c
e
e
ers
j
l
r
l
n
i
I
o
r
y
t
D
nc
e
Con
d
n
e
Dep
Scopes
Filters
Providers
Services
s
e
i
r
o
t
Fac
Valid
ator

AngularJS Buzzwords
Expressions
Modules Two-wa
y Dat
a Bin
ding
s
e
v
i
t
on
i
c
t
c
e
e
ers
j
l
r
l
n
i
I
o
r
y
t
D
nc
e
Con
d
n
e
Dep
Scopes
Filters
Providers
Services
s
e
i
r
o
t
Fac
Valid
ator

The Big Picture (1/14)

or: Why AngularJS is superheroic!
1. Scopes
2. Controllers
3. Expressions
4. Two-Way Data Binding


RootScope
Hello, {{name}}!
</h1>

</body>
$rootScope


Scope inheritance
$rootScope
<div ng-controller="SuperheroicController">
Hello, {{name}}!
</h1>
</div>

</body>
scope


Controllers
Controllers create new child scopes

May contain:
Scope variables
Scope functions
Should contain only business logic

Set up the initial state of $scope object
Add behavior to the $scope object

Create the first controller
Create file app/Controllers/Superheroic.js with

content:
app.controller('SuperheroicController', ['$scope', function($scope){
$scope.name = 'Tom';
}]);
Expression {{name}} inside of controllers scope will

always return Tom

Controllers $scope
May also contain functions:

app.controller('SuperheroicController', ['$scope', function($scope){
$scope.add = function(a, b) {
return a + b;
}
}]);
Expressions may also output functions and pass

parameters:
<h1>1 plus 2 equals <em>{{add(1,2)}}</em></h1>

Watches
Change events for scope variables

Get fired when value of defined scope variable changes
$scope.$watch('name', function(newValue, oldValue){
alert('New value: ' + newValue);
}, false);
Instead of 'name' you may also use a function

Can also watch deep objects (set third param to true)

Expressions
Double curley braces syntax

Contains basically javascript
Accesses scope variables and scope functions
Examples:
a.
b.
c.
d.
e.
{{a+b}}
{{alert('Does this work?')}}
{{'Just outputs this string'}}
{{a ? a : '??'}}
{{user.name}}

Two-Way Data Binding


Two-Way data binding example (with one user)
Model User
{
id: 1,
name: 'Vieweg',
firstName: 'Armin',
image: 'armin.png'
}
<div class="user">
<img ng-src="path/to/{{user.image}}">
<h2>
{{user.name}},
{{user.firstName}}
</h2>
</div>


Two-Way data binding example (with several users)
Scope variables may also contain arrays of objects

To work with them use the ng-repeat directive
$scope.users = [
{
name: '...',
firstName: ''
},
{...}
];
<div class="entry" ng-repeat="user in users">

<div class="user">
<img ng-src="path/to/{{user.image}}">
<h2>{{user.name}}, {{user.firstName}}</h2>
</div>
</div>


Google Chrome: AngularJS Batarang
Very helpful extension for Google Chrome (Link)

Shows and highlights scopes and its variables


Summary
AngularJS works with scopes

Scopes inherit their variables/functions to child-scopes
At the very top there exists one $rootScope
$scope.$watch allows us to react on changes of variables
Expressions work in scope context

They check all scopes up to $rootScope for requested
variable or function
Two-Way Data Binding does very much work for us


Result

AngularJS Buzzwords
Expressions
Modules Two-wa
y Dat
a Bin
ding
s
e
v
i
t
on
i
c
t
c
e
e
ers
j
l
r
l
n
i
I
o
r
y
t
D
nc
e
Con
d
n
e
Dep
Scopes
Filters
Providers
Services
s
e
i
r
o
t
Fac
Valid
ator

AngularJS Buzzwords
Expressions
Modules Two-wa
y Dat
a Bin
ding
s
e
v
i
t
on
i
c
t
c
e
e
ers
j
l
r
l
n
i
I
o
r
y
t
D
nc
e
Con
d
n
e
Dep
Scopes Filters
Providers
Services
s
e
i
r
o
t
Fac
Valid
ator

AngularJS Buzzwords
Expressions
Modules Two-wa
y Dat
a Bin
ding
s
e
v
i
t
on
i
c
t
c
e
e
ers
j
l
r
l
n
i
I
o
r
y
t
D
nc
e
Con
d
n
e
Dep
Scopes Filters
Providers
Services
s
e
i
r
o
t
Fac
Valid
ator

AngularJS Buzzwords
Expressions
Modules Two-wa
y Dat
a Bin
ding
s
e
v
i
t
on
i
c
t
c
rs
e
e
e
j
l
r
l
n
i
I
o
cy
D
n
ontr
e
C
d
n
Depe
Scopes Filters
Providers
Services
s
e
i
r
o
t
Fac
Valid
ator

AngularJS Buzzwords
Expressions
Modules Two-wa
y Dat
a Bin
ding
s
e
v
i
n
t
o
i
c
t
s
c
r
nje
I
olle
r
y
t
c
Dire
n
n
Co
de
n
e
p
e
D
Scopes Filters
Providers
Services
s
e
i
r
o
t
Fac
Valid
ator

Dependency Injection
How components get ahold of their dependencies
Software Design Pattern

Instantiates and caches used
components

Dependency Injection
Two notations to inject
From parameter names in functions:

app.controller('SuperheroicController', function($scope){
$scope.hello = 'world';
});
Inline array notation:

app.controller('SuperheroicController', ['$scope', function(whatever)
{
whatever.hello = 'world';
}]);
AngularJS Buzzwords
Expressions
Modules Two-wa
y Dat
a Bin
ding
s
e
v
i
n
t
o
i
c
t
s
c
r
nje
I
olle
r
y
t
c
Dire
n
n
Co
de
n
e
p
e
D
Scopes Filters
Providers
Services
s
e
i
r
o
t
Fac
Valid
ator

AngularJS Buzzwords
Expressions
Modules Two-wa
y Dat
a Bin
ding
s
e
i
n
t
o
i
c
t
s
c
r
nje
I
olle
r
y
t
c
Dire
n
n
Co
de
n
e
p
e
D
Scopes Filters
Providers
Services
s
e
i
r
o
t
Fac
Valid
ator

Services & Factories

Substitutable objects that are wired together using DI
Reuseable component
A service/factory in Angular is:
Lazy instantiated
Singleton
Angular offers several useful services

They are prepended with $
Do not use $ in your own services

Selection of useful services provided by Angular
$http - For ajax requests

$interval and $timeout - Repeats and delays
$rootScope - Very top scope of application
$location - URL and its parts of current site
$window - Wrapper of global window. Useful for tests.

Usage example (with Dependency Injection)
app.controller('SuperheroicController',
['$scope', '$http', function($scope, $http){
$scope.getTypo3Releases = function() {
$http({
method: 'GET',
url: 'http://get.typo3.org/json'
}).success(function(response){
// ...
});
};
}]);


Writing our first factory
app.factory('Typo3Releases', ['$http', function($http){
var getUrl = 'http://get.typo3.org/json';
var typo3ReleasesService = {};
typo3ReleasesService.get = function(callbackSuccess) {
$http({
method: 'GET',
url: getUrl
}).success(callbackSuccess);
};
return typo3ReleasesService;
}]);

Inject and call our first factory
app.controller('SuperheroicController',
['$scope', 'Typo3Releases', function($scope, Typo3Releases){
$scope.getTypo3Releases = function() {
Typo3Releases.get(function(response){
// ...
});
};
}]);


Service and factory syntax compared
app.service('Typo3Releases', ['$http', function($http){
this.get = function(){
// ...
}
}]);
app.factory('Typo3Releases', ['$http', function($http){
var typo3ReleasesService = {};
typo3ReleasesService.get = function() {
// ...
Both have the same call:
};
return typo3ReleasesService;
Typo3Releases.get();
}]);
AngularJS Buzzwords
Expressions
Modules Two-wa
y Dat
a Bin
ding
s
e
i
n
t
o
i
c
t
s
c
r
nje
I
olle
r
y
t
c
Dire
n
n
Co
de
n
e
p
e
D
Scopes Filters
Providers
Services
s
e
i
r
o
t
Fac
Valid
ator

AngularJS Buzzwords
Expressions
Modules Two-wa
y Dat
a Bin
ding
s
e
i
n
t
o
i
c
t
s
c
r
nje
I
olle
r
y
t
c
Dire
n
n
Co
de
n
e
p
e
D
Scopes Filters
Providers
Services
Fa
s
e
i
r
o
t
c
Valid
ator

AngularJS Buzzwords
Expressions
Modules Two-wa
y Dat
a Bin
ding
s
e
i
n
t
o
i
c
t
s
c
r
nje
I
olle
r
y
t
c
Dire
n
n
Co
de
n
e
p
e
D
Scopes Filters
Providers
Services
Fa
s
e
i
r
cto
Valid
ator

Filters
Modify expressions
Functions which modify expressions

But does not touch the original data
Using filters:
{{name | filter1 | filter2:option}}

Filters
AngularJS provided filters
AngularJS provides few of its own filters:

currency
lowercase
date
number
filter
orderBy
json
uppercase
limitTo
Filters
Usage examples
{{price | currency:''}} // 1,234.56

{{name | uppercase}} // ARMIN
{{created | date:'dd.MM.yyyy'}} // 20.06.2014
Options of filters may be filled by scope variable:
{{created | date:format}}

Filters
Writing your own filters
app.filter('replaceVowelsWith', function(){
return function(input, option){
if (option === undefined || input === undefined) return input;
return input.replace(/[aeiou]/gi, option);
}
});
{{'Drei Chinesen mit dem Kontrabass...' | 'e'}}
Dree Chenesen met dem Kentrebess...

AngularJS Buzzwords
Expressions
Modules Two-wa
y Dat
a Bin
ding
s
e
i
n
t
o
i
c
t
s
c
r
nje
I
olle
r
y
t
c
Dire
n
n
Co
de
n
e
p
e
D
Scopes Filters
Providers
Services
Fa
s
e
i
r
cto
Valid
ator

AngularJS Buzzwords
Expressions
Modules Two-wa
y Dat
a Bin
ding
s
e
i
n
t
o
i
c
t
s
c
r
nje
I
olle
r
y
t
c
Dire
n
n
Co
de
n
e
p
e
D
Scopes Filters
Providers
Services
Fa
s
e
i
r
cto
Valid
ator

Validators
You're not coming in
Forms and/or fields get validated

By HTML5 validation notation (eg. type="email")
Independent from browser validation, Angular:
Checks values on its own
Adds indicating classes to fields and forms (eg. ng-invalid)
Adds $invalid property to scope of form
You may write your own validators using directives

Validators
Example
<form name="form" novalidate>
<input type="email" ng-model="mail" name="mail" required>
<button type="submit" ng-disabled="form.$invalid">Submit</button>
</form>
Show error messages in case validators fail:

<span ng-if="form.mail.$error.required">Mail is required!</span>
<span ng-if="form.mail.$error.email">No valid mail!</span>

Validators
Your own validators/directives
Writing a validator means writing a directive

Usage example in template:
<input name="number" type="number" ng-model="number"

required even-number>
Input must be
any input (required)

a number (type="number")
an even number (directive even-number)
AngularJS Buzzwords
Expressions
Modules Two-wa
y Dat
a Bin
ding
s
e
i
n
t
o
i
c
t
s
c
r
nje
I
olle
r
y
t
c
Dire
n
n
Co
de
n
e
p
e
D
Scopes Filters
Providers
Services
Fa
s
e
i
r
cto
Valid
ator

AngularJS Buzzwords
Expressions
Modules Two-wa
y Dat
a Bin
ding
s
e
i
n
t
o
i
c
t
s
c
r
nje
I
olle
r
y
t
c
Dire
n
n
Co
de
n
e
p
e
D
Scopes Filters
Providers
Services
Fa
s
e
i
r
cto
Valid
a
tors

Providers
Almost every AngularJS buzzword is made by providers
Five recipes for providers:

1.
2.
3.
4.
5.
Value
Constant
Factory
Service
Provider
Providers are bound to modules/applications

Providers
Small example with value and constant provider
var app = angular.module('myFirstApp', []);
app.value('bestCmsEver', 'TYPO3');
app.controller('SuperheroicController', ['$scope', 'bestCmsEver',

function($scope, bestCmsEver){
this.bestCmsEver = bestCmsEver;
}]);

AngularJS Buzzwords
Expressions
Modules Two-wa
y Dat
a Bin
ding
s
e
i
n
t
o
i
c
t
s
c
r
nje
I
olle
r
y
t
c
Dire
n
n
Co
de
n
e
p
e
D
Scopes Filters
Providers
Services
Fa
s
e
i
r
cto
Valid
a
tors

AngularJS Buzzwords
Expressions
Modules Two-wa
y Dat
a Bin
ding
s
e
i
n
t
o
i
c
t
s
c
r
nje
I
olle
r
y
t
c
Dire
n
n
Co
de
n
e
p
e
D
Scopes Filters
Providers
Services
Fa
s
e
i
r
cto
Valid
a
tors

Advantages of AngularJS
Allows you to work clean using reuseable modules
Features of Angular
enables completely new possibilites (2-way data binding)
saves a lot of time for common tasks (like validation)
Components are unittestable

Further development of Angular, thanks to Google
AngularJS help
Guide: https://docs.angularjs.org/guide
API: https://docs.angularjs.org/api
Many many articles, videos and examples on
YouTube
StackOverflow
all over the web

Workshop Schedule
1. Presentation

Workshop Schedule
1. Presentation
15 minute break

Thanks for your
ttention!

Angularjs

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Angularjs

Загружено:

Авторское право:

Доступные форматы

Getting started with the superheroic

20th June 2014, Armin Rdiger Vieweg (@ArminVieweg)

About the author

30 years old from Linz am Rhein (DE)

Working with AngularJS for ~1 year

20th June 2014, Armin Rdiger Vieweg (@ArminVieweg)

AngularJS is made for...

20th June 2014, Armin Rdiger Vieweg (@ArminVieweg)

Library file size (v1.2.17)

103 KiB production

Includes jqLite or uses

20th June 2014, Armin Rdiger Vieweg (@ArminVieweg)

20th June 2014, Armin Rdiger Vieweg (@ArminVieweg)

The very first steps (1/7)

20th June 2014, Armin Rdiger Vieweg (@ArminVieweg)

The very first steps (2/7)

The very first steps (3/7)

Container for AngularJS magic

A module is the beginning of all AngularJS projects

20th June 2014, Armin Rdiger Vieweg (@ArminVieweg)

The very first steps (4/7)

In app/app.js we declare our first module:

20th June 2014, Armin Rdiger Vieweg (@ArminVieweg)

The very first steps (5/7)

This happens with the directive ng-app:

It is possible to use several apps seperately on

20th June 2014, Armin Rdiger Vieweg (@ArminVieweg)

The very first steps (6/7)

Created a blank HTML template

Declared first module in app.js

20th June 2014, Armin Rdiger Vieweg (@ArminVieweg)

The very first steps (7/7)

An awesome blank site, ready for AngularJS magic ;-)

20th June 2014, Armin Rdiger Vieweg (@ArminVieweg)

20th June 2014, Armin Rdiger Vieweg (@ArminVieweg)

20th June 2014, Armin Rdiger Vieweg (@ArminVieweg)

Everything in your DOM may be a directive:

Directives attach custom behavior to those elements

AngularJS provides plenty of its own directives:

Might be necessary for html/xhtml validation reasons

Lets take the HTML template we have prepared and add:

name is a new scope variable

We also add a button to set name:

Clicking the button will set the scope variable name to

Allmost every DOM element may be a directive

We have heard about scope variables

20th June 2014, Armin Rdiger Vieweg (@ArminVieweg)

20th June 2014, Armin Rdiger Vieweg (@ArminVieweg)

20th June 2014, Armin Rdiger Vieweg (@ArminVieweg)

The Big Picture (1/14)

20th June 2014, Armin Rdiger Vieweg (@ArminVieweg)

The Big Picture (2/14)

20th June 2014, Armin Rdiger Vieweg (@ArminVieweg)

The Big Picture (3/14)

20th June 2014, Armin Rdiger Vieweg (@ArminVieweg)

The Big Picture (4/14)

Controllers create new child scopes

Should contain only business logic

The Big Picture (5/14)

Create file app/Controllers/Superheroic.js with

Expression {{name}} inside of controllers scope will

The Big Picture (6/14)

May also contain functions: