Mini-Training: AngularJS

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: 

• 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

http://docs.angularjs.org/api


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

http://jsfiddle.net/rvFE8/

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>

http://jsfiddle.net/7fnj2/

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();

});



http://jsfiddle.net/F4NSn/

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

Find out more

• On https://techblog.betclicgroup.com/

https://techblog.betclicgroup.com/

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.

http://betcliceverestgroup.com/

https://techblog.betclicgroup.com/our-brands/

http://www.betclic.com/

http://www.everestpoker.com/

http://www.expekt.com/

http://www.bet-at-home.com/

Mini-Training: AngularJS

Technology

Transcript of Mini-Training: AngularJS