Tweet
Tweet

Slide 1

Slide 1 text

AngularJs Superheroic JavaScript MVW Framework

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

It’s Alive, it’s Moving !

Hello World !

…

Slide 6

Slide 6 text

Le Model, la View et le Controller var myAppModule = angular.module('myApp', []); myAppModule.controller('FirstController', function($scope) { … });

Slide 7

Slide 7 text

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

{{someText}}

var myAppModule = angular.module('myApp', []); myAppModule.controller('FirstController', function($scope) { $scope.someText = 'Hello World !'; });

Slide 8

Slide 8 text

Et Tu Cliques Cliques Cliques C’est Ta Façon D’Commander ! Click me! var myAppModule = angular.module('myApp', []); myAppModule.controller('FirstController', function($scope) { $scope.someCommand = function() { … } });

Slide 9

Slide 9 text

Maurice Tu Dépasse Les Bornes Des Limites !

{{someTextLvl1}}

{{someTextLvl1}}

{{someTextLvl2}}

$scope $scope $scope

Slide 10

Slide 10 text

Can You Repeat The Question?

{{$index}}

{{item.title}}

{{item.desc}}

var myAppModule = angular.module('myApp', []); myAppModule.controller('FirstController', function($scope) { $scope.tab = [ {title: 'title1', desc:'desc1'}, …] });

Slide 11

Slide 11 text

I Like Your Style!

Do you like it?

var myAppModule = angular.module('myApp', []); myAppModule.controller('FirstController', function($scope) { $scope.applyStyle = true; });

Slide 12

Slide 12 text

Le Changement C’est Maintenant

{{$index}}

{{item.title}}

{{item.desc}}

var myAppModule = angular.module('myApp', []); myAppModule.controller('FirstController', function($scope) { $scope.tab = [ {title: 'title1', desc:'desc1'}, …] });

Slide 13

Slide 13 text

Accepte Moi !

Missing!!

Post var myAppModule = angular.module('myApp', []); myAppModule.controller('FirstController', function($scope) { $scope.post = function(item) { … }; });

Slide 14

Slide 14 text

Vers L‘Infini Et Au Delà !! Home | About
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'}); });

Slide 15

Slide 15 text

You Talking To Me? 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){ }); } });

Slide 16

Slide 16 text

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