mini-training: angularjs
DESCRIPTION
Discover in a few slides what AngularJS is aboutTRANSCRIPT
AngularJS
Paris – 02/09/2013
Agenda
• Angular overview
• The Framework
• Scope
• Directive
• View
• Module
• Controller
• Service
• Routing
• Batarang
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
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
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
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
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
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>
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
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();
});
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;
}
Batarang
• Chrome plugin
• Highlight scopes, bindings and application
• Display performance, dependencies
Batarang
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.