Mini-Training: AngularJS
•
5 gostaram•1,821 visualizações
Discover in a few slides what AngularJS is about
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Semelhante a Mini-Training: AngularJS
Semelhante a Mini-Training: AngularJS (20)
Mais de Betclic Everest Group Tech Team
Mais de Betclic Everest Group Tech Team (20)
Último
Último (20)
Mini-Training: AngularJS
- 2. Agenda • Angular overview • The Framework • Scope • Directive • View • Module • Controller • Service • Routing • Batarang
- 3. 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
- 4. 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
- 5. 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
- 6. 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
- 7. 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
- 8. 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>
- 9. 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
- 10. 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(); });
- 11. 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; }
- 12. Batarang • Chrome plugin • Highlight scopes, bindings and application • Display performance, dependencies
- 13. Batarang
- 14. Find out more • On https://techblog.betclicgroup.com/
- 15. 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.