Transcendez vos développements Web avec AngularJS

presenté par LAU Thierry / @laut3rry

front-end developer

Anime la page HTML5 * CSS3 - ʕ๏๏ʔ

et la communauté HTML5 * CSS3 [FR]

F

N

Framework Javascript

par Google

pour développer des applications Web

modernes

HTML5 Application Work Flow

Application Multi-Pages

Multi-Pages + Ajax

Single Page Application

Mouais ...

Moi coder en JS ? Jamais !

Bonjour

Javascript


<html>
    Bonjour <span id="name"></span>
    <input type="text"/>
</html>


window.onload = function(){
    var txt = 'le monde';

    var span = document.getElementById('name');
    var input = document.getElementsByTagName('input')[0];

    input.value = txt;
    if (span.textContent || span.textContent === "") {
        span.textContent = txt;
    } else if(span.innerText || span.innerText === "") { // IE
        span.innerText = txt;
    }

    input.onkeyup = function(){
        if (span.textContent || span.textContent === "") {
            span.textContent = input.value;
        } else if(span.innerText || span.innerText === "") { // IE
            span.innerText = input.value;
        }
    };
};

jQuery


<html>
    Bonjour <span id="name"></span>
    <input type="text"/>
</html>


$(document).ready(function() {
    var txt = 'le monde';

    var $input = $('input');
    var $span = $('#name');

    $input.val(txt);
    $span.text(txt);

    $input.keyup(function (event) {
        $span.text(event.target.value);
    });
});

Don't Repeat Yourself

Structure

Testabilité

"AngularJS est ce que le navigateur Web aurait du être s'il avait été conçu pour des applications Web"

Misko Hevery, créateur d'AngularJS

Déroulement

Simples pages HTML statiques

Application Web Moderne

Data Binding

{ DEMO }

Interaction avec un Back End

$http

service injectable


function myController($scope, $http){







};

$http

usage


function myController($scope, $http){
    $http.get(url, options)






};

$http

callbacks


function myController($scope, $http){
    $http.get(url, options)
        .success(function(data, status, headers, config){
            /* do something */
        })
        .error(function(data, status, headers, config){
            /* handle error */
        });
};

{ DEMO }

Navigation côté client

http://localhost:3001/#/home

http://localhost:3001/#/movies

http://localhost:3001/#/movies/edit/1

`$routeProvider`


$routeProvider
    .when('/route1', {
        templateUrl: 'path/to/view1.html',
        controller : 'view1Controller'
    })
    .when('/route2', {
        templateUrl: 'path/to/view2.html',
        controller : 'view2Controller'
    })
    .otherwise({
        redirectTo: '/route1'
    });

{ DEMO }

Récapitulatifs

Double Data Binding
- $scope : seule source de vérité
- Elimination du code de manipulation du DOM
  (60 à 80% de votre code applicatif)
Modèle Vue Contrôleur
- Modèle = simple object javascript
- Vue = HTML valide
- Contrôleur = fonction javascript
Single Page Application
- Navigation client side
- Agnostique au Back end

Vers des concepts plus avancées

Services & Injection de dépendances

Singleton qui fournit des tâches spécifiques à l'application

Exemple : $scope, $http

Créer ses propres services


myModuleApp.service("MonService", function ($http, dep1, dep2, ...) {
    /* utilisation de $http */
});


function myController($scope, MonService){
    MonService.faireUnTruc();
};

{ DEMO }

Filtres AngularJS

hello

HELLO

1368730200

Jeudi 16 mai 2013 20H50

1234.562342

1 234,56 €

[Thierry, David, Nelly, Alex, Claire]

[Alex, Claire, David, Nelly, Thierry]

[pommes, pâtes, farine, PQ]

[PQ]

Transformer la donnée pour l'afficher à l'utilisateur

formater, convertir, filtrer, trier, transformer


$scope.amount = 1234.56;


<div>{{amount}}</div>                     1234.56


<div>{{amount | currency}}</div>           $1,234.56


<div>{{amount | currency:"USD$"}}</div>    USD$1,234.56

Filtres AngularJS

currency
number
date
lowercase
uppercase
limitTo
filter
orderBy

{ DEMO }

Créer vos propres filtres


<html ng-app="myModule">
    <div>{{name | greet}}</div>             <!-- Yo Thierry -->
</html>


myModuleApp.filter('greet', function (dep1, dep2, ...) {









    });


<html ng-app="myModule">
    <div>{{name | greet}}</div>             <!-- Yo Thierry -->
</html>


myModuleApp.filter('greet', function (dep1, dep2, ...) {

        return function(value) {



            return 'Yo ' + value;

        };

    });


<html ng-app="myModule">
    <div>{{name | greet:true}}</div>   <!-- Bonjour Thierry -->
</html>


myModuleApp.filter('greet', function (dep1, dep2, ...) {

        return function(value, isPolite) {
            if(isPolite){
                return 'Bonjour ' + value;
            } else {
                return 'Yo ' + value;
            }
        };

    });

{ DEMO }

Directives

Etendre le langage HTML

Créer des composants réutilisables

Exemples

ng-model
ng-repeat
ng-click
ng-show
ng-switch

{ DEMO }

Plusieurs types d'invocations possibles


<div navbar ></div>


<navbar></navbar>


<div class="navbar" ></div>


<!-- directive : navbar -->


                <ul class="nav-tabs">
                    <li class="active">
                        <a href="#">Primary tab</a>
                    </li>
                    <li>
                        <a href="#">Primary tab</a>
                    </li>
                    <li>
                        <a href="#">Primary tab</a>
                    </li>
                </ul>


                <tabs>
                    <pane title="Primary tab" active>
                        <!-- contenu -->
                    </pane>
                    <pane title="Secondary tab">
                        <!-- contenu -->
                    </pane>
                    <pane title="some other tab">
                        <!-- contenu -->
                    </pane>
                </tabs>

Libérez votre imagination


                        <calendar></calendar>


                        <progress-bar></progress-bar>


                        <dialog></dialog>


                        <datepicker></datepicker>


                        <accordion></accordion>

Créer ses propres directives

Scope
Linking function
Compile
Restriction
Transclusion

Pourquoi AngularJS ?

Beaucoup moins de code à écrire grâce au data-binding bi-directionnel
Modularisation du code avec les modules et les services injectables : Pas de pollution de l'espace global
AngularJS peut être actif sur une portion de ta page HTML
Créer ses propres composants réutilisable grâce aux directives
Développement guidée
Framework qui promeut les tests unitaires
API bien documentée pour certains aspects
Excellent tutorial pour débuter

Difficultés

Documentation officielle pauvre sur certaines notions
Ecriture des directives pouvant être compliquée si on ne maîtrise pas son cycle de vie

Compilation
Link
Transclusion
Restriction

Difficultés

Le data-binding bi-directionnel ne fonctionne pas hors du "monde" AngularJS. Il faut utiliser $scope.$apply() pour notifier angularJS qu'une valeur a été mise à jour
Intégration librairies UI jQuery pouvant être problématique