MatelliNight - AngularJs

AngularJs Superheroic JavaScript MVW Framework

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

Dans Quel Etat J’Erre ? (étagère !!!!!!!!!!)

One Ring To Rule Them All… Où SammyJs Mustache JQuery
Knockout Backbone …

It’s Alive, it’s Moving ! <html ng-app> <body> <p>Hello World
!</p> <script src="angular.min.js"></script> <script> … </script> </body> </html>

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>

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>

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>

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

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>

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>

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>

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>

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>

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>

Et Bien Plus…. Internationalisation, Injection de dépendances, Tests, Promises, Custom
Composant… et full JAVASCRIPT !!!

MatelliNight - AngularJs

MatelliNight - AngularJs

Mickael Metesreau

More Decks by Mickael Metesreau

Other Decks in Programming

Featured

Transcript

AngularJs Superheroic JavaScript MVW Framework

SPA Késako ? Single Page Application : Application web dont

Dans Quel Etat J’Erre ? (étagère !!!!!!!!!!)

One Ring To Rule Them All… Où SammyJs Mustache JQuery

It’s Alive, it’s Moving ! <html ng-app> <body> <p>Hello World

Le Model, la View et le Controller <html ng-app='myApp'> <body

Et Tu Bind Bind Bind Cette Donnée Qui Te Plait

Et Tu Cliques Cliques Cliques C’est Ta Façon D’Commander !

Maurice Tu Dépasse Les Bornes Des Limites ! <html ng-app='myApp'>

Can You Repeat The Question? <html ng-app='myApp'> <body ng-controller='FirstController'> <div

I Like Your Style! <html ng-app='myApp'> <body ng-controller='FirstController'> <div ng-class='{MyStyle:

Le Changement C’est Maintenant <html ng-app='myApp'> <body ng-controller='FirstController'> <input type='text'

Accepte Moi ! <html ng-app='myApp'> <body ng-controller='FirstController'> <form name='myForm' novalidate>

Vers L‘Infini Et Au Delà !! <html ng-app='myApp'> <body> <a

You Talking To Me? <script src="angular.min.js"></script> <script> var myAppModule =

Et Bien Plus…. Internationalisation, Injection de dépendances, Tests, Promises, Custom