Gettings started with the superheroic JavaScript library AngularJS
-
Upload
armin-vieweg -
Category
Internet
-
view
4.936 -
download
0
description
Transcript of 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
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
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
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
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
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
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
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
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
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(...);
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
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
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
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
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 ✓
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?!
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
❖ ...
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
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
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
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
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
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 ✓
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 ✓
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!
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
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
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
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”
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>
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)
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}}
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
The Big Picture (9/14)Two-Way Data Binding
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>
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: '' }, {...}];
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
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
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
The Big Picture (14/14)Result
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 ✓
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 ✓
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 ✓
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 ✓
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 ✓
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
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';}]);
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 ✓
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 ✓
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
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
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){// ...
});};
}]);
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;}]);
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){
// ...});
};}]);
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();
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 ✓
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 ✓
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 ✓
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
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
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
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...
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 ✓
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 ✓
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
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>
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
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 ✓
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 ✓
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
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
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 ✓
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 ✓
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
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
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
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
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS
Thanks for your ttention!
20th June 2014, Armin Rüdiger Vieweg (@ArminVieweg)Getting started with superheroic JavaScript library AngularJS