Gettings started with the superheroic JavaScript library AngularJS
-
Upload
armin-vieweg -
Category
Internet
-
view
4.944 -
download
0
description
Transcript of Gettings started with the superheroic JavaScript library AngularJS
![Page 1: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/1.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
Getting started with the superheroic JavaScript library
![Page 2: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/2.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
Armin Rüdiger ViewegPHP, 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
![Page 3: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/3.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
Workshop Schedule
1. Presentation
2. Live Coding Examples
3. Practicing AngularJS
![Page 4: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/4.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
AngularJS is made for...
❖ Single page applications (SPA, like Twitter)
❖ Weba pps (eg. with Cordova Framework)
❖ More complex magic on your web project
![Page 5: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/5.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
AngularJS Facts
❖ Also called just “Angular”
❖ Initially published in 2009
❖ Released under MIT Licence
❖ Developed by Googleand community
❖ Website: angularjs.org
❖ Library file size (v1.2.17)
➢ 103 KiB production➢ 749 KiB development
❖ Includes jqLite or uses jQuery if existing
![Page 6: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/6.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
AngularJS Buzzwords
Dependency Injection
Two-way Data Binding
ScopesDirectives
Controllers
FiltersProviders
Services Factories Validators
ExpressionsModules
![Page 7: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/7.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
The very first steps (1/7)
❖ We need a blank HTML template
❖ And a clean folder structure:■ app/■ css/■ js/■ index.html
![Page 8: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/8.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
The very first steps (2/7)
<!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>
<!-- AngularJS App --><script src="app/app.js"></script>
</body></html>
A blank HTML template
![Page 9: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/9.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
The very first steps (3/7)
❖ 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
![Page 10: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/10.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
The very first steps (4/7)
❖ In app/app.js we declare our first module:
A module for the application
// declares a modulevar app = angular.module('myFirstApp', []);app.controller(‘MyFirstController’, ...);
// also declares a moduleangular.module('mySecondApp', ['myFirstApp']);angular.module('mySecondApp').controller(...);
![Page 11: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/11.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
The very first steps (5/7)
❖ This happens with the directive ng-app:
Lets introduce the HTML to our new app
<body ng-app="myFirstApp"><!-- Script includes ... --><script src="app/app.js"></script>
</body>
❖ It is possible to use several apps seperately on one page
![Page 12: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/12.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
The very first steps (6/7)
❖ 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
![Page 13: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/13.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
The very first steps (7/7)
❖ An awesome blank site, ready for AngularJS magic ;-)
Result
![Page 14: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/14.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
AngularJS Buzzwords
Dependency Injection
Two-way Data Binding
ScopesDirectives
Controllers
FiltersProviders
Services Factories Validators
ExpressionsModules
![Page 15: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/15.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
AngularJS Buzzwords
Dependency Injection
Two-way Data Binding
ScopesDirectives
Controllers
FiltersProviders
Services Factories Validators
ExpressionsModules ✓
![Page 16: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/16.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
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 (<!-- directive: ng-include data -->)
❖ Directives attach custom behavior to those elements or transform them
What the $%&!% are directives?!
![Page 17: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/17.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
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
❖ ...
![Page 18: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/18.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
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
![Page 19: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/19.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
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
![Page 20: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/20.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
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
![Page 21: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/21.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
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
![Page 22: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/22.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
Directives (7/7)
❖ A dynamic application without writing one line of javascript code
Result
![Page 23: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/23.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
AngularJS Buzzwords
Dependency Injection
Two-way Data Binding
ScopesDirectives
Controllers
FiltersProviders
Services Factories Validators
ExpressionsModules ✓
![Page 24: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/24.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
AngularJS Buzzwords
Dependency Injection
Two-way Data Binding
ScopesDirectives ✓
Controllers
FiltersProviders
Services Factories Validators
ExpressionsModules ✓
![Page 25: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/25.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
The Big Picture (1/14)
1. Scopes
2. Controllers
3. Expressions
4. Two-Way Data Binding
or: Why AngularJS is superheroic!
![Page 26: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/26.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
$rootScope
The Big Picture (2/14)
<body ng-app="myFirstApp"><input type="text" ng-model="name"><button ng-click="name='Penelope'">Click me</button><h1 ng-show="name" ng-class="{red: name=='Armin'}">
Hello, {{name}}!</h1><!-- ... -->
</body>
RootScope
![Page 27: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/27.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
$rootScope
The Big Picture (3/14)
scope
<body ng-app="myFirstApp"><input type="text" ng-model="name"><button ng-click="name='Penelope'">Click me</button><div ng-controller="SuperheroicController">
<h1 ng-show="name" ng-class="{red: name=='Armin'}">Hello, {{name}}!
</h1></div><!-- ... -->
</body>
Scope inheritance
![Page 28: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/28.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
The Big Picture (4/14)
❖ 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
![Page 29: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/29.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
The Big Picture (5/14)
❖ 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”
![Page 30: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/30.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
The Big Picture (6/14)
❖ 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>
![Page 31: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/31.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
The Big Picture (7/14)
❖ 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)
![Page 32: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/32.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
The Big Picture (8/14)
❖ 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}}
![Page 33: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/33.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
The Big Picture (9/14)Two-Way Data Binding
![Page 34: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/34.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
The Big Picture (10/14)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>
![Page 35: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/35.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
The Big Picture (11/14)
❖ 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: '' }, {...}];
![Page 36: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/36.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
The Big Picture (12/14)
❖ Very helpful extension for Google Chrome (Link)
❖ Shows and highlights scopes and its variables
Google Chrome: AngularJS Batarang
![Page 37: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/37.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
The Big Picture (13/14)
❖ 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
![Page 38: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/38.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
The Big Picture (14/14)Result
![Page 39: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/39.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
AngularJS Buzzwords
Dependency Injection
Two-way Data Binding
ScopesDirectives ✓
Controllers
FiltersProviders
Services Factories Validators
ExpressionsModules ✓
![Page 40: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/40.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
AngularJS Buzzwords
Dependency Injection
Two-way Data Binding
Scopes ✓Directives ✓
Controllers
FiltersProviders
Services Factories Validators
ExpressionsModules ✓
![Page 41: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/41.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
AngularJS Buzzwords
Dependency Injection
Two-way Data Binding
Scopes ✓Directives ✓
Controllers
FiltersProviders
Services Factories Validators
Expressions ✓Modules ✓
![Page 42: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/42.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
AngularJS Buzzwords
Dependency Injection
Two-way Data Binding
Scopes ✓Directives ✓
Controllers ✓
FiltersProviders
Services Factories Validators
Expressions ✓Modules ✓
![Page 43: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/43.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
AngularJS Buzzwords
Dependency Injection
Two-way Data Binding ✓
Scopes ✓Directives ✓
Controllers ✓
FiltersProviders
Services Factories Validators
Expressions ✓Modules ✓
![Page 44: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/44.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
Dependency Injection
❖ Software Design Pattern❖ Instantiates and caches used
components
How components get ahold of their dependencies
![Page 45: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/45.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
Dependency Injection
❖ 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';}]);
![Page 46: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/46.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
AngularJS Buzzwords
Dependency Injection
Two-way Data Binding ✓
Scopes ✓Directives ✓
Controllers ✓
FiltersProviders
Services Factories Validators
Expressions ✓Modules ✓
![Page 47: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/47.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
AngularJS Buzzwords
Dependency Injection ✓
Two-way Data Binding ✓
Scopes ✓Directives ✓
Controllers ✓
FiltersProviders
Services Factories Validators
Expressions ✓Modules ✓
![Page 48: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/48.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
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
![Page 49: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/49.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
Services & Factories
❖ $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
![Page 50: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/50.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
Services & FactoriesUsage 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){// ...
});};
}]);
![Page 51: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/51.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
Services & FactoriesWriting 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;}]);
![Page 52: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/52.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
Services & FactoriesInject and call our first factory
app.controller('SuperheroicController',['$scope', 'Typo3Releases', function($scope, Typo3Releases){
$scope.getTypo3Releases = function() {Typo3Releases.get(function(response){
// ...});
};}]);
![Page 53: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/53.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
Services & FactoriesService 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();
![Page 54: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/54.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
AngularJS Buzzwords
Dependency Injection ✓
Two-way Data Binding ✓
Scopes ✓Directives ✓
Controllers ✓
FiltersProviders
Services Factories Validators
Expressions ✓Modules ✓
![Page 55: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/55.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
AngularJS Buzzwords
Dependency Injection ✓
Two-way Data Binding ✓
Scopes ✓Directives ✓
Controllers ✓
FiltersProviders
Services ✓ Factories Validators
Expressions ✓Modules ✓
![Page 56: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/56.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
AngularJS Buzzwords
Dependency Injection ✓
Two-way Data Binding ✓
Scopes ✓Directives ✓
Controllers ✓
FiltersProviders
Services ✓ Factories ✓ Validators
Expressions ✓Modules ✓
![Page 57: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/57.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
Filters
❖ Functions which modify expressions
❖ But does not touch the original data
❖ Using filters:{{name | filter1 | filter2:option}}
Modify expressions
![Page 58: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/58.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
Filters
❖ AngularJS provides few of its own filters:
AngularJS provided filters
❖ currency
❖ date
❖ filter
❖ json
❖ limitTo
❖ lowercase
❖ number
❖ orderBy
❖ uppercase
![Page 59: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/59.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
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
![Page 60: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/60.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
FiltersWriting 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...
![Page 61: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/61.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
AngularJS Buzzwords
Dependency Injection ✓
Two-way Data Binding ✓
Scopes ✓Directives ✓
Controllers ✓
FiltersProviders
Services ✓ Factories ✓ Validators
Expressions ✓Modules ✓
![Page 62: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/62.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
AngularJS Buzzwords
Dependency Injection ✓
Two-way Data Binding ✓
Scopes ✓Directives ✓
Controllers ✓
Filters ✓Providers
Services ✓ Factories ✓ Validators
Expressions ✓Modules ✓
![Page 63: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/63.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
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
![Page 64: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/64.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
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>
![Page 65: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/65.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
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
![Page 66: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/66.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
AngularJS Buzzwords
Dependency Injection ✓
Two-way Data Binding ✓
Scopes ✓Directives ✓
Controllers ✓
Filters ✓Providers
Services ✓ Factories ✓ Validators
Expressions ✓Modules ✓
![Page 67: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/67.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
AngularJS Buzzwords
Dependency Injection ✓
Two-way Data Binding ✓
Scopes ✓Directives ✓
Controllers ✓
Filters ✓Providers
Services ✓ Factories ✓ Validators ✓
Expressions ✓Modules ✓
![Page 68: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/68.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
Providers
❖ Five recipes for providers:
1. Value2. Constant3. Factory4. Service5. Provider
❖ Providers are bound to modules/applications
Almost every AngularJS buzzword is made by providers
![Page 69: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/69.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
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
![Page 70: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/70.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
AngularJS Buzzwords
Dependency Injection ✓
Two-way Data Binding ✓
Scopes ✓Directives ✓
Controllers ✓
Filters ✓Providers
Services ✓ Factories ✓ Validators ✓
Expressions ✓Modules ✓
![Page 71: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/71.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
AngularJS Buzzwords
Dependency Injection ✓
Two-way Data Binding ✓
Scopes ✓Directives ✓
Controllers ✓
Filters ✓Providers ✓
Services ✓ Factories ✓ Validators ✓
Expressions ✓Modules ✓
![Page 72: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/72.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
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
![Page 73: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/73.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
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
![Page 74: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/74.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
Workshop Schedule
1. Presentation
2. Live Coding Examples
3. Practicing AngularJS
![Page 75: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/75.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
Workshop Schedule
1. Presentation ✓
2. Live Coding Examples
3. Practicing AngularJS
15 minute break
![Page 76: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/76.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
Thanks for your ttention!
![Page 77: Gettings started with the superheroic JavaScript library AngularJS](https://reader033.fdocuments.net/reader033/viewer/2022052821/55498ce5b4c905b96a8b517d/html5/thumbnails/77.jpg)
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS