Download - Mini-Training: AngularJS
![Page 1: Mini-Training: AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042700/554be4d1b4c9055a368b4843/html5/thumbnails/1.jpg)
AngularJS
Paris – 02/09/2013
![Page 2: Mini-Training: AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042700/554be4d1b4c9055a368b4843/html5/thumbnails/2.jpg)
Agenda
• Angular overview
• The Framework
• Scope
• Directive
• View
• Module
• Controller
• Service
• Routing
• Batarang
![Page 3: Mini-Training: AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042700/554be4d1b4c9055a368b4843/html5/thumbnails/3.jpg)
Angular overview
• What is it?
• Javascript MVVM framework for dynamic web app
(mostly SPA)
• Extends HTML’s syntax
• Who is developing it?
• Started in 2009 by Misko Hevery and Adam Abrons at
GetAngular.com
• Now maintain by Google
• First stable version: June 2012
• Who is using it?
• Youtube app on PS3
• GitHub Contributors
• Reddit Reader
• Washington DC Metro NextBus
• DoubleClick
![Page 4: Mini-Training: AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042700/554be4d1b4c9055a368b4843/html5/thumbnails/4.jpg)
Angular objectives
• Have a framework to:
• Avoid repetitive task
• Dom manipulation
• Data-binding View-Model
• Build interface in a more declarative way
jQuery
<div id="chart"></div>
$('#chart').pieChart({ ... });
Angular <pie-chart width="400" height="400" data="data"/>
• Make testing easy
![Page 5: Mini-Training: AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042700/554be4d1b4c9055a368b4843/html5/thumbnails/5.jpg)
Scope
• Scope:
• application model
• execution context for expressions
• Glue which marshals the model to the view
• Root scope creation on application bootstrap
• Child scopes creation within directives
• Arranged in hierarchical structure
View
Scope Model
Controller
![Page 6: Mini-Training: AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042700/554be4d1b4c9055a368b4843/html5/thumbnails/6.jpg)
Directive
• New HTML tricks:
Attributes: <span my-dir="exp"></span>
Class name: <span class="my-dir: exp;"></span>
Element name: <my-dir></my-dir>
Comment: <!-- directive: my-dir exp -->
• Angular parse and compile directives and produces “standard HTML”
• Built-in directives:
• ngClick
• ngMouseOver
• ngRepeat
• ngShow
• …
• (http://docs.angularjs.org/api)
• Create custom directives: http://docs.angularjs.org/guide/directive
![Page 7: Mini-Training: AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042700/554be4d1b4c9055a368b4843/html5/thumbnails/7.jpg)
View
http://jsfiddle.net/rvFE8/
<!doctype html>
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body ng-app>
<span>Insert your name:</span>
<input type="text" ng-model="userName" />
<h3>Hello {{userName}}</h3>
</body>
</html>
ng-app: Designates the root of the application
ng-model: Add property to the model and tells Angular to do two-way data
binding
{{userName}}: Angular interpolation, display the model property
![Page 8: Mini-Training: AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042700/554be4d1b4c9055a368b4843/html5/thumbnails/8.jpg)
Module
Module
Directives
Filters
Services Constants Controllers
…
• Declare how an application should be bootstrapped
• Creation (http://jsfiddle.net/7fnj2/): var app = angular.module('MyMod', [‘Dep1', ‘Dep2'])
.controller(ctrl1', function () {…});
.constant(‘key', ‘value');
<div ng-app="MyMod" >…</div>
![Page 9: Mini-Training: AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042700/554be4d1b4c9055a368b4843/html5/thumbnails/9.jpg)
Controller
http://jsfiddle.net/rszmu/
<div ng-app ng-controller="MainCtrl">
<input type="text" ng-model="userName" />
<button ng-click="greet()">Click here!</button>
<h3>{{message}}</h3>
</div>
function MainCtrl($scope) {
$scope.userName = 'toto';
$scope.greet = function() {
$scope.userName = $scope.userName.toUpperCase();
$scope.message = "Hello " + $scope.userName;
}
}
• Function executed on view initialization
• Set up the initial state
• Add behavior to the scope
![Page 10: Mini-Training: AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042700/554be4d1b4c9055a368b4843/html5/thumbnails/10.jpg)
Service
• Angular services are singletons and instantiated lazily
• Built-in services: $http, $window, $location, $exceptionHandler…
(http://docs.angularjs.org/api)
• Dependency injection
• Used in controllers, factory methods and services
• Injection by constructor or property
• Example (http://jsfiddle.net/F4NSn/):
var myModule = angular.module('myModule', [])
.factory('greetingService', function() {
return function() { return "hello world"; }
})
.controller('Ctrl', function($scope, greetingService)
{
$scope.message = greetingService();
});
![Page 11: Mini-Training: AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042700/554be4d1b4c9055a368b4843/html5/thumbnails/11.jpg)
Route
• Defining views in several HTML files
• Layout template with ngView directive: <div ng-view></div>
• Routes are defined with the $routeProvider service: $routeProvider
.when('/phones', {templateUrl: 'partials/phone-list.html',
controller: PhoneListCtrl})
.when('/phones/:phoneId',
{templateUrl: 'partials/phone-detail.html', controller:
PhoneDetailCtrl})
.otherwise({redirectTo: '/phones'});
• Get route parameters in the controller: function PhoneDetailCtrl($scope, $routeParams) {
$scope.phoneId = $routeParams.phoneId;
}
![Page 12: Mini-Training: AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042700/554be4d1b4c9055a368b4843/html5/thumbnails/12.jpg)
Batarang
• Chrome plugin
• Highlight scopes, bindings and application
• Display performance, dependencies
![Page 13: Mini-Training: AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042700/554be4d1b4c9055a368b4843/html5/thumbnails/13.jpg)
Batarang
![Page 15: Mini-Training: AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042700/554be4d1b4c9055a368b4843/html5/thumbnails/15.jpg)
About Betclic • Betclic Everest Group, one of the world leaders in online gaming, has a unique
portfolio comprising various complementary international brands: Betclic, Everest Gaming, bet-at-home.com, Expekt…
• Active in 100 countries with more than 12 million customers worldwide, the Group is committed to promoting secure and responsible gaming and is a member of several international professional associations including the EGBA (European Gaming and Betting Association) and the ESSA (European Sports Security Association).
• Through our brands, Betclic Everest Group places expertise, technological know-how and security at the heart of our strategy to deliver an on-line gaming offer attuned to the passion of our players.