Gettings started with the superheroic JavaScript library AngularJS

20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)
Getting started with superheroic JavaScript library AngularJS
Getting started with the superheroic
JavaScript library

Armin Rüdiger Vieweg
PHP, TYPO3, JavaScript developer
About the author
❖ 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”
❖ Initially published in
2009
❖ Released under MIT
Licence
❖ Developed by Google
and community
❖ Website: angularjs.org
❖ Library file size (v1.2.17)
➢ 103 KiB production
➢ 749 KiB development
❖ Includes jqLite or uses
jQuery if existing

AngularJS Buzzwords
Dependency Injection
Two-way Data Binding
Scopes
Directives
Controllers
Filters
Providers
Services Factories Validators
ExpressionsModules

The very first steps (1/7)
❖ We need a blank HTML template
❖ And a clean folder structure:
■ app/
■ css/
■ js/
■ index.html

<!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 blank HTML template

❖ Container for AngularJS magic
❖ You may include other modules
➢ Don’t 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:
A module for the application
// declares a module
var app = angular.module('myFirstApp', []);
app.controller(‘MyFirstController’, ...);
// also declares a module
angular.module('mySecondApp', ['myFirstApp']);
angular.module('mySecondApp').controller(...);

❖ This happens with the directive ng-app:
Lets introduce the HTML to our new app
<body ng-app="myFirstApp">

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

❖ 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
Summary

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

AngularJS Buzzwords
Scopes
Directives
Controllers
Filters
Providers
ExpressionsModules ✓

Directives (1/7)
❖ 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
What the $%&!% are directives?!

Directives (2/7)
❖ AngularJS provides plenty of its own directives:
AngularJS provided directives
❖ ngApp
❖ ngBind
❖ ngBlur
❖ ngChange
❖ ngChecked
❖ ngClass
❖ ngClick
❖ ngInlcude
❖ ngModel
❖ ngPluralize
❖ ngRepeat
❖ ngShow
❖ ngSrc
❖ ...

Directives (3/7)
❖ Directive ngModel:
➢ <input ng-model="foo">
➢ <input data-ng:model="foo">
➢ <input data-ng-model="foo">
➢ <input ng:model="foo">
➢ <input ng_model="foo">
➢ <input x-ng-model="foo">
❖ Might be necessary for html/xhtml validation reasons
Different syntax available

Directives (4/7)
❖ Let’s take the HTML template we have prepared and add:
Simple example of Angular’s directives (1/2)
<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)
❖ We also add a button to set name:
Simple example of Angular’s directives (2/2)
<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)
❖ Allmost every DOM element may be a directive
❖ We have learned some of Angular’s 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}}
Summary

Directives (7/7)
❖ A dynamic application
without writing one line of
javascript code
Result

AngularJS Buzzwords
Scopes
Directives ✓
Controllers
Filters
Providers

The Big Picture (1/14)
1. Scopes
2. Controllers
3. Expressions
4. Two-Way Data Binding
or: Why AngularJS is superheroic!

$rootScope
Hello, {{name}}!
</h1>

</body>
RootScope

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

</body>
Scope inheritance

❖ 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
Controllers

❖ Create file app/Controllers/Superheroic.js with
content:
Create the first controller
app.controller('SuperheroicController', ['$scope', function($scope){
$scope.name = 'Tom';
}]);
❖ Expression {{name}} inside of controller’s scope will
always return “Tom”

❖ May also contain functions:
Controller’s $scope
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>

❖ Change events for scope variables
➢ Get fired when value of defined scope variable changes
Watches
$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)

❖ Double curley braces syntax
➢ Contains basically javascript
➢ Accesses scope variables and scope functions
Expressions
❖ Examples:
a. {{a+b}}
b. {{alert('Does this work?')}}
c. {{'Just outputs this string'}}
d. {{a ? a : '??'}}
e. {{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>

❖ Scope variables may also contain arrays of objects
❖ To work with them use the ng-repeat directive
Two-Way data binding example (with several users)
<div class="user">
<img ng-src="path/to/{{user.image}}">
<h2>{{user.name}}, {{user.firstName}}</h2>
</div>
<div class="entry" ng-repeat="user in users">
</div>
$scope.users = [
{
name: '...',
firstName: ''
},
{...}
];

❖ Very helpful extension for Google Chrome (Link)
❖ Shows and highlights scopes and its variables
Google Chrome: AngularJS Batarang

❖ 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
Summary

Result

AngularJS Buzzwords
Scopes ✓
Directives ✓
Controllers
Filters
Providers

AngularJS Buzzwords
Scopes ✓
Directives ✓
Controllers
Filters
Providers
Expressions ✓Modules ✓

AngularJS Buzzwords
Scopes ✓
Directives ✓
Controllers ✓
Filters
Providers

AngularJS Buzzwords
Two-way Data Binding ✓
Scopes ✓
Directives ✓
Controllers ✓
Filters
Providers

❖ Software Design Pattern
❖ Instantiates and caches used
components
How components get ahold of their dependencies

❖ From parameter names in functions:
Two notations to inject
app.controller('SuperheroicController', function($scope){
$scope.hello = 'world';
});
❖ Inline array notation:
app.controller('SuperheroicController', ['$scope', function(whatever)
{
whatever.hello = 'world';
}]);

AngularJS Buzzwords
Dependency Injection ✓
Scopes ✓
Directives ✓
Controllers ✓
Filters
Providers

Services & Factories
❖ 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
Substitutable objects that are wired together using DI

❖ $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.
Selection of useful services provided by Angular

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() {
// ...
};
return typo3ReleasesService;
}]);
Both have the same call:
Typo3Releases.get();

AngularJS Buzzwords
Scopes ✓
Directives ✓
Controllers ✓
Filters
Providers
Services ✓ Factories Validators

AngularJS Buzzwords
Scopes ✓
Directives ✓
Controllers ✓
Filters
Providers
Services ✓ Factories ✓ Validators

Filters
❖ Functions which modify expressions
❖ But does not touch the original data
❖ Using filters:
{{name | filter1 | filter2:option}}
Modify expressions

Filters
❖ AngularJS provides few of its own filters:
AngularJS provided filters
❖ currency
❖ date
❖ filter
❖ json
❖ limitTo
❖ lowercase
❖ number
❖ orderBy
❖ uppercase

Filters
❖ {{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}}
Usage examples

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
Scopes ✓
Directives ✓
Controllers ✓
Filters ✓
Providers
Services ✓ Factories ✓ Validators

Validators
❖ 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
You're not coming in

Validators
<form name="form" novalidate>
<input type="email" ng-model="mail" name="mail" required>
<button type="submit" ng-disabled="form.$invalid">Submit</button>
</form>
Example
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
❖ 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)
Your own validators/directives

AngularJS Buzzwords
Scopes ✓
Directives ✓
Controllers ✓
Filters ✓
Providers
Services ✓ Factories ✓ Validators ✓

Providers
❖ Five recipes for providers:
1. Value
2. Constant
3. Factory
4. Service
5. Provider
❖ Providers are bound to modules/applications
Almost every AngularJS buzzword is made by providers

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

AngularJS Buzzwords
Scopes ✓
Directives ✓
Controllers ✓
Filters ✓
Providers ✓
Services ✓ Factories ✓ Validators ✓

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 ✓
2. Live Coding Examples
3. Practicing AngularJS
15 minute break

Thanks for your ttention!

Gettings started with the superheroic JavaScript library AngularJS

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Gettings started with the superheroic JavaScript library AngularJS (20)

Recently uploaded (16)

Gettings started with the superheroic JavaScript library AngularJS