Download as PDF, PPTX
![Module
Module
Directives
Filters
Services ConstantsControllers
…
• 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>](https://image.slidesharecdn.com/betclicminitrainingangularjs-130902112045-phpapp01/85/Mini-Training-AngularJS-8-320.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();
});](https://image.slidesharecdn.com/betclicminitrainingangularjs-130902112045-phpapp01/85/Mini-Training-AngularJS-10-320.jpg)
Uploaded byBetclic Everest Group Tech Team
Mini-Training: AngularJS
This document provides an overview of AngularJS, including: - AngularJS is a JavaScript MVVM framework for building dynamic web apps, developed by Google. - It uses Scopes to bind models to views and directives to extend HTML syntax. - Key components include modules, controllers, services and routing to organize an app. - Batarang is a Chrome plugin that helps debug and inspect AngularJS apps.
More Related Content
Similar to Mini-Training: AngularJS
More from Betclic Everest Group Tech Team
Mini-Training: AngularJS
- 1.
- 2. Agenda • Angular overview •The Framework • Scope • Directive • View • Module • Controller • Service • Routing • Batarang
- 3. Angular overview • Whatis 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
- 4. Angular objectives • Havea 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
- 5. Scope • Scope: • applicationmodel • 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
- 6. Directive • New HTMLtricks: 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
- 7. View http://jsfiddle.net/rvFE8/ <!doctype html> <html> <head> <script src="angular.min.js"></script> </head> <bodyng-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
- 8. Module Module Directives Filters Services ConstantsControllers … • Declarehow 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>
- 9. Controller http://jsfiddle.net/rszmu/ <div ng-app ng-controller="MainCtrl"> <inputtype="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
- 10. Service • Angular servicesare 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(); });
- 11. Route • Defining viewsin 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; }
- 12. Batarang • Chrome plugin •Highlight scopes, bindings and application • Display performance, dependencies
- 13.
- 14. Find out more •On https://techblog.betclicgroup.com/
- 15. About Betclic • BetclicEverest 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.