conf-angularjs-101

View Github Repository Open presentation in a new window

ocombe

See all presentation from ocombe

conf-angularjs-101

0 0

conf-angularjs-101

Présentation d'AngularJS

On Github ocombe / conf-angularjs-101

HTML enhanced for web apps!

Présenté par Olivier Combe / @OCombe / OCombe

Qu'est ce qu'AngularJS ?

Un framework javascript parmi d'autres:

  • Backbone.JS

  • AngularJS

  • EmberJS

  • MeteorJS

  • Knockout

Framework = pas une librairie, générique, détermine la façon d'écrire le code, spécialisable via des librairies

  • Développé par Google

  • 100% javascript et html (pas de précompilation)

  • ~MVC Front-end

  • IE8+ jusqu'à 1.2.x, IE9+ à partir de 1.3

Pourquoi choisir AngularJS ?

  • Permet d'étendre le HTML (directives)

  • Binding bi-directionnel

  • Inclut jquery lite

  • Testable (unitaire & e2e)

  • Injection de dépendances

  • Très complet

  • Très fun (en toute objectivité)

  • Très grosse communauté (> 800 000 developpeurs)

Des inconvénients ?

  • Une documentation inégale

  • Pas très copain avec le SEO (ça change!)

  • Une courbe d'apprentissage chaotique

Comment ça marche ?

<!DOCTYPE html>
<html ng-app>
    <head>
        <title>Mon application</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    </head>
    <body>
        <input ng-model="name" type="text" placeholder="Ton nom">
        <p>Hello {{ name }}</p>
    </body>
</html>

Bonjour

C'est bien, mais en vrai, il est où le MVC ?

  • On fait un module :
    • Isolé (équivalent d'un namespace)
    • Partageable
    • L'application est elle même un module 

<html ng-app="MyApp">
    ...
</html>

var myApp = angular.module('MyApp', []);

Et on ajoute un controlleur :

<html ng-app="MyApp">
    <div ng-controller="MyCtrl">
        Secondes: {{ seconds }}
    </div>
</html>
myApp.controller('MyCtrl', function($scope, $interval) {
    $scope.seconds = 0;

    $interval(function() {
        $scope.seconds++;
    }, 1000);
});
Secondes: 0

Qu'est ce que $scope ?

  • l'équivalent des modèles de l'application et utilisant un héritage réplicant la structure du DOM ($rootScope)

  • un moyen d'échanger des données entre vue et controlleur

  • le contexte d'exécution des expressions ($apply)
  • un moyen d'observer des expressions ($watch, dirty checking)
  • un moyen de propager/recevoir des events (de façon hierarchique, $emit / $broadcast / $on)
Utiliser ng-app inspector sur la slide 7 pour illustrer la hierarchie

Les expressions

  • Toute propriété ou méthode appelée dans une expression fait référence au $scope (et à ses parents)

  • {{ seconds }} équivaut à $scope.seconds

  • On peut utiliser

    • les opérateurs (=, ==, ===, !=, <, <=, +, -, *, %, && ...)
    • les mots clés (true, false, null, undefined)
    • les expressions ternaires (value ? res1 : res2)
    • les filtres (data | filterA) 

{{ today | date:'dd/mm/yyyy' }}

Injection de dépendances (DI)

  • Un design pattern permettant aux composants d'accéder à leur dépendances 

var myApp = angular.module('MyApp', ['ui.router']);

myApp.controller('MyCtrl', function($scope, $interval) {
    ...
});

Attention à la minification...

myApp.controller('MyCtrl', function($scope, $interval) {
    ...
});

a.controller('MyCtrl', function(b, c) {
    ...
});

myApp.controller('MyCtrl',
    ['$scope' , '$interval', function($scope, $interval) {
        ...
    }]
);

a.controller('MyCtrl', ['$scope' , '$interval', function(b, c) {
    ...
}]);

Les services

  • Gère tout ce qui est indépendant des vues

  • Est défini une fois puis injecté à la demande

  • Permet de partager des données entre controlleurs
Ex: $ngCookies, $http, $resource
var app = angular.module('myServiceModule', [])

app.controller('MyController',
    ['$scope','notify', function ($scope, notify) {
        $scope.callNotify = function(msg) {
            notify(msg);
        };
    }]
)

app.factory('notify', ['$window', function(win) {
    var msgs = [];
    return function(msg) {
        msgs.push(msg);
        if (msgs.length == 3) {
            win.alert(msgs.join("\n"));
            msgs = [];
        }
    };
}]);

Les directives

  • Sont appelées via un marqueur dans le DOM (attribut, élément, commentaire ou classe CSS)

  • Sont compilées lors de leur insertion dans le DOM

  • Peuvent attacher un comportement spécifique au DOM 

    <button ng-click="doSomething()"></button>

  • Peuvent modifier le DOM 

    <modal></modal>
    <div class="modal"></div>

  • Peuvent surcharger des éléments html existants

  • Peuvent accéder au $scope et le manipuler ou en créer un nouveau isolé

  • Peuvent accéder aux services

ng-repeat, ng-click, ng-model, ng-show/hide, ng-if
var docs = angular.module('docsSimpleDirective', [])

<div ng-controller="Controller">
    <div my-customer></div>
</div>

docs.controller('Controller', ['$scope', function($scope) {
    $scope.customer = {
        name: 'Naomi',
        address: '1600 Amphitheatre'
    };
}])

docs.directive('myCustomer', function() {
    return {
        template: 'Name: {{customer.name}}, Address: {{customer.address}}'
    };
});

<div ng-controller="Controller">
    <div my-customer>Name: Naomi, Address: 1600 Amphitheatre</div>
</div>

docs.directive('myCustomer', function() {
    return {
        template: 'Name: {{customer.name}}, Address: {{customer.address}}',

        link: function link($scope, $element, $attrs) {
            $scope.customer = {
                name: 'Naomi',
                address: '1600 Amphitheatre'
            };
        }
    };
});

AngularJS est

  • Riche
  • Novateur
  • Puissant
  • Simple à prendre en main, difficile à maîtriser

Quelques liens utiles

Quelques modules utiles