MatelliNight - AngularJs

Transcript

1. AngularJs Superheroic JavaScript MVW Framework
2. SPA Késako ? Single Page Application : Application web dont l’ensemble des éléments nécessaires (contenu, présentation : Html, CSS et partie applicative : JavaScript) se trouvent dans un unique fichier. Wikipédia
3. Dans Quel Etat J’Erre ? (étagère !!!!!!!!!!)
4. One Ring To Rule Them All… Où SammyJs Mustache JQuery Knockout Backbone …
5. It’s Alive, it’s Moving ! <html ng-app> <body> <p>Hello World !</p> <script src="angular.min.js"></script> <script> … </script> </body> </html>
6. Le Model, la View et le Controller <html ng-app='myApp'> <body ng-controller='FirstController'> <script src="angular.min.js"></script> <script> var myAppModule = angular.module('myApp', []); myAppModule.controller('FirstController', function($scope) { … }); </script> </body> </html>
7. Et Tu Bind Bind Bind Cette Donnée Qui Te Plait ! <html ng-app='myApp'> <body ng-controller='FirstController'> <p><input type='text' ng-model='someText'/></p> <p>{{someText}}</p> <p ng-bind='someText'></p> <script src="angular.min.js"></script> <script> var myAppModule = angular.module('myApp', []); myAppModule.controller('FirstController', function($scope) { $scope.someText = 'Hello World !'; }); </script> </body> </html>
8. Et Tu Cliques Cliques Cliques C’est Ta Façon D’Commander ! <html ng-app='myApp'> <body ng-controller='FirstController'> <button ng-click='someCommand()'>Click me!</button> <script src="angular.min.js"></script> <script> var myAppModule = angular.module('myApp', []); myAppModule.controller('FirstController', function($scope) { $scope.someCommand = function() { … } }); </script> </body> </html>
9. Maurice Tu Dépasse Les Bornes Des Limites ! <html ng-app='myApp'> <body ng-controller='FirstController'> <p>{{someTextLvl1}}</p> <div ng-controller='SecondController'> <p>{{someTextLvl1}}</p> <p>{{someTextLvl2}}</p> </div> </body> </html> $scope $scope $scope
10. Can You Repeat The Question? <html ng-app='myApp'> <body ng-controller='FirstController'> <div ng-repeat='item in tab'> <p>{{$index}}</p> <p>{{item.title}}</p> <p>{{item.desc}}</p> </div> <script src="angular.min.js"></script> <script> var myAppModule = angular.module('myApp', []); myAppModule.controller('FirstController', function($scope) { $scope.tab = [ {title: 'title1', desc:'desc1'}, …] }); </script> </body> </html>
11. I Like Your Style! <html ng-app='myApp'> <body ng-controller='FirstController'> <div ng-class='{MyStyle: applyStyle}'> <p>Do you like it?</p> </div> <script src="angular.min.js"></script> <script> var myAppModule = angular.module('myApp', []); myAppModule.controller('FirstController', function($scope) { $scope.applyStyle = true; }); </script> </body> </html>
12. Le Changement C’est Maintenant <html ng-app='myApp'> <body ng-controller='FirstController'> <input type='text' ng-model='search' /> <div ng-repeat='item in tab | filter: search | orderBy:title:true'> <p>{{$index}}</p> <p>{{item.title}}</p> <p>{{item.desc}}</p> </div> <script src="angular.min.js"></script> <script> var myAppModule = angular.module('myApp', []); myAppModule.controller('FirstController', function($scope) { $scope.tab = [ {title: 'title1', desc:'desc1'}, …] }); </script> </body> </html>
13. Accepte Moi ! <html ng-app='myApp'> <body ng-controller='FirstController'> <form name='myForm' novalidate> <input name='i1' ng-model='item.someText' type='text' required /> <p ng-show='myForm.i1.$error.required & myForm.i1.$dirty' >Missing!!</p> <button ng-disabled='$myForm.$invalid' ng-click='post(item)'>Post</button> </div> <script src="angular.min.js"></script> <script> var myAppModule = angular.module('myApp', []); myAppModule.controller('FirstController', function($scope) { $scope.post = function(item) { … }; }); </script> </body> </html>
14. Vers L‘Infini Et Au Delà !! <html ng-app='myApp'> <body> <a href='#/home'>Home</a> | <a href='#/about'>About</a> <div ng-view> </div> <script src="angular.min.js"></script> <script> var myAppModule = angular.module('myApp', []); myAppModule.config(function($routeProvider) { $routeProvider .when('/home', {controller:'homeCtrl', templateUrl:'partials/home.html'}) .when('/about', {controller:'AboutCtrl', templateUrl:'partials/about.html'}) .otherwise({redirect:'/home'}); }); </script> </body> </html>
15. You Talking To Me? <script src="angular.min.js"></script> <script> var myAppModule = angular.module('myApp', []); myAppModule.controller('FirstController', function($scope, $http) { $http.get('/api/items') .success(function(data, status, headers, config){ }) .error(function(data, status, headers, config){ }); $scope.add = function(data) { $http.post('/someUrl', data) .success(function(data, status, headers, config){ }) .error(function(data, status, headers, config){ }); } }); </script>
16. Et Bien Plus…. Internationalisation, Injection de dépendances, Tests, Promises, Custom Composant… et full JAVASCRIPT !!!