Your SlideShare is downloading. ×
0
Mini-Training: AngularJS
Mini-Training: AngularJS
Mini-Training: AngularJS
Mini-Training: AngularJS
Mini-Training: AngularJS
Mini-Training: AngularJS
Mini-Training: AngularJS
Mini-Training: AngularJS
Mini-Training: AngularJS
Mini-Training: AngularJS
Mini-Training: AngularJS
Mini-Training: AngularJS
Mini-Training: AngularJS
Mini-Training: AngularJS
Mini-Training: AngularJS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mini-Training: AngularJS

1,305

Published on

Discover in a few slides what AngularJS is about

Discover in a few slides what AngularJS is about

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,305
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
55
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. AngularJS Paris – 02/09/2013
  • 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.

×