Scribd Logo
Importer

Bienvenue sur Scribd !

  • Into AngularJS

    Transféré par

    roma
    22 vues22 pages

    Titre original

    into-AngularJS

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    22 vues22 pages

    Into AngularJS

    Transféré par

    roma

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 22

    Presentation Technique

    Préparé par :
    • Mehdi FARAJ
    Plan
    1• JavaScript
    • C’est Quoi JavaScript

    • Insertion du JavaScript

    • Entrée et sortie de données avec JavaScript

    2• AngularJS
    • C’est quoi AngularJS

    • Organisation MVC

    • AngularJS – Exemple

    • AngularJS – Les attributs ng-*

    • AngularJS – Gestion de la vue

    • AngularJS – Les filtres

    • AngularJS – Les services

    • AngularJS – Les contrôleurs

    • AngularJS – Les directives

    • AngularJS – Le routeur

    •3 Conclusion

    •4 Questions
    C’est quoi JavaScript?

     JavaScript est un langage de programmation et un composant majeur de tous les sites web HTML <La Structure>
    CSS <La Décoration>
     JavaScript permet de rendre dynamique un site internet développé en HTML
     JavaScript n'est pas Java. Bien que ressemblants, ces deux noms désignent des technologies très
    différentes.
     JavaScript permet de développer de véritables applications fonctionnant exclusivement dans le cadre
    d'Internet
     JavaScript est un langage objet et événementiel. Le développeur peut créer des objets sur la page, avec
    des propriétés et des méthodes et leur associer des actions en fonction d'événements déclenchés par
    le visiteur (passage de souris, clic, saisie clavier, etc...).
     JavaScript est standardisé par un comité spécialisé, l'ECMA (European Computer Manufactures
    Association).
    Insertion du JavaScript

     Le code JavaScript s’intègre de deux manières avec le code HTML

    1. Insertion directe dans le code HTML


     Le code JavaScript s'insère le plus souvent dans la page HTML elle même.
     C'est la méthode la plus simple et la plus fréquemment utilisée par les
    développeurs de sites Internet.

    2. Insertion comme un module externe


    1. Insertion dans une page HTML
     Il existe 2 manières d'insérer du code JavaScript dans une page HTML

     Insertion pour exécution directe

    • Le code s'exécute automatiquement lors du chargement de la page HTML


    dans le navigateur en même temps que le contenu de la page HTML
    s'affiche à l'écran.
    • Le code JavaScript est placé dans le corps même de la page HTML,
    entre les balises <body> .......... Et ......... </body> <html>
    <head>
    <title>..... </title>
    </head>
    <body>
    <script
    language="JavaScript">
    alert(‘bonjour’);
    </script>
    </body>
    </html>
    Insertion comme un module externe

     On peut insérer du code JavaScript en faisant appel à un module externe se trouvant à


    n’importe quelle adresse (URI).

    <script src="URL du module externe">


    ............
    </script>

     Les deux balises de JavaScript doivent être placés entre les Tags <body> et </body>
    dans le cas d'une exécution directe ou entre les Tags <head> et </head> de la page
    HTML pour une exécution différée
     Stocké dans un fichier sur le serveur à son adresse d'appel sous forme de TEXTE SIMPLE
    portant l'extension .txt ou .js
     Simplifie la maintenance des sites faisant appel à des modules JavaScript communs à
    plusieurs pages HTML.
     Inconvénient : l'appel au code externe génère une requête supplémentaire vers le
    serveur, et encombre le réseau
    Entrée et sortie de données avec JavaScript
     3 types de boites de messages peuvent être affichés en utilisant JavaScript :
    Alerte, Confirmation et Invite

     Méthode alert()
     sert à afficher à l’utilisateur des informations simples de type texte. Une fois que
    ce dernier a lu le message, il doit cliquer sur OK pour faire disparaître la boîte

     Méthode confirm()
     permet à l’utilisateur de choisir entre les boutons OK et Annuler.

     Méthode prompt()
     La méthode prompt() permet à l’utilisateur de taper son propre message en
    réponse à la question posée

     La méthode document.write permet d ’écrire du code HTML dans la page WEB


    Entrée et sortie de données avec JavaScript
    <html>
    <head>
    <title> une page simple </title>
    </head>
    <body>
    Bonjour
    <script language='javascript'>
    alert('bonjour');
    document.write (
    prompt('quel est votre nom ?','Indiquer votre nom ici')
    );
    confirm('quel bouton allez-vous choisir ?');
    </script>
    </body>
    </html>
    C’est quoi AngularJS ?
     AngularJS est un Framework JavaScript open source, développé par Google.

     Il simplifie la création de SPA: Single Page Application.


     Une application Web accessible via une page Web unique.
     à pour but d’éviter le chargement d’une nouvelle page à chaque action demandé.

     Son objectif est de fournir tous les outils nécessaires pour créer ce type d’application.

     Il apporte également une structure permettant de développer une application robuste et évolutive.

     AngularJS repose sur le modèle de conception MVC: Modèle Vue Contrôleur aussi MVVM et MV*.
    Organisation MVC
     Il permet d’organiser une application en 3 parties : le Modèle, la Vue et le Contrôleur.

     Le Modèle contient les données à afficher, il ne possède pas de logique. Il s’agit simplement
    d’un conteneur.
     La Vue s’occupe d’afficher les données du modèle pour générer la page web visible par les
    utilisateurs. Elle transmet les actions effectuées au contrôleur, comme le clic sur le bouton.
     Le Contrôleur est l’élément central. Il est responsable de créer le modèle, en utilisant une API
    Web ou une base de données……., puis de transmettre certaines informations à la vue. Il gère
    également les actions utilisateurs, transmises par la vue, pour effectuer les traitements
    attendus.
    AngularJS - Exemple
    AngularJS - Exemple
    AngularJS - Les attributs ng-*

     Attributs dédiés à AngularJS

     Dynamisent le HTML

     Gestion des évènements

     Modifient le style des éléments

     Bref, il y en a pour tous les goûts


    AngularJS – Gestion de la vue

     Gestion du DOM facultative

     $scope

     Two-way data binding

     Très rapide (redraw minimisé)

     Syntaxe à base de {{ le code }}


    AngularJS – Gestion de la vue
     Simplification syntaxique

     Traitement ou filtrage des données

     Différents filtres pré-inclus


    AngularJS – Les filtres

     Ng-*: change, bind, init, style, mouseup, class, repeat


    AngularJS – Les services

     Évite la redondance du code

     Classes communes aux contrôleurs

     Singletons
     design patterns qui est utilisé pour s’assurer qu’une classe ne sera instancier qu’une seul fois

     Parties privée et publique distinctes

     Services prédéfinis par AngularJS ($http, $route, $log, etc.)


    AngularJS – Les contrôleurs

     Propre $scope

     Utilise des dépendances


    AngularJS – Les directives

     Balise HTML personnalisée

     Syntaxe complète, par attribut ou par classe

     Propre $scope, template, contrôleur

     Très pratique pour les composants graphiques


    AngularJS – Le routeur
    AngularJS – Conclusion
    Questions

    Merci pour votre attention

    Vous aimerez peut-être aussi