Developpez.com - Rubrique JavaScript

Le Club des Développeurs et IT Pro

Apprendre à bien organiser son projet Angular par les bonnes pratiques,

Un tutoriel de Nicolas Garin

Le 2017-01-02 19:15:02, par Community Management, Community Manager
Chers membres du club,

SOAT, société d'expertise et de conseil en informatique, et Nicolas GARIN, nous proposent une série de deux tutoriels pour nous apprendre à organiser nos projets Angular.

Cette première partie porte sur la structure du projet et se charge de nous apprendre à créer un projet modulaire, avec de bonnes pratiques, facile à maintenir et à comprendre.

Aujourd'hui, dans la plupart des cas, lorsque vous commencez un projet Angular (1.x) vous pensez à une architecture MVC. Il y a beaucoup de manières de coder en Angular, mais il y en a particulièrement une qui est, selon moi, plus claire. Dans cet article, je vais vous montrer comment monter un projet modulaire, avec de bonnes pratiques, facile à maintenir et à comprendre, puis nous verrons quels en sont les avantages.
Bonne lecture .

Retrouvez tous les tutoriels de la société Soat.
Retrouvez les meilleurs cours et tutoriels pour apprendre le Javascript.
  Discussion forum
10 commentaires
  • hotcryx
    Membre extrêmement actif
    "Si vous êtes débutant, utilisez AngularJS et pas angular 2 ! "

    Moi, je dirais que si tu débutes autant apprendre la version 2 car sinon tu ne vas pas profiter des prochaines versions.
    Tu seras bien obligé à un moment d'y passer (tout le reste va suivre Angular 2).
    Oui, j'ai mis 2 car c'est plus clair.
  • dukoid
    Membre expert
    ça serai bien que tout le monde respecte le nommage : AngularJS et Angular (pour angular 2)
  • dukoid
    Membre expert
    blablabla Google a choisis de nommer ses frameworks ainsi : AngularJS et Angular (pour Angular 2) ... il n'y a rien d'autre à dire !
  • dukoid
    Membre expert
    je suis d'accord Angular 2 c'est l'avenir.
    dans la vie faut évoluer
  • Community Management
    Community Manager
    Chers membres du club,

    J'ai le plaisir de vous présenter la deuxième partie de cette série de cours de Nicolas GARIN destinée à vous apprendre à créer un projet modulaire, avec de bonnes pratiques, facile à maintenir et à comprendre.

    Dans cette partie, nous expliquerons notre script puis nous listerons les tâches et détaillerons les plugins Gulp utilisés pour ce projet.


    Dans une époque où les applications évoluent rapidement et où les performances priment, ce script m'a permis de garder une organisation claire et facile à maintenir ou à faire évoluer, et de générer des applications légères et rapides à exécuter.

    Il n'y a pas de manière unique pour configurer ses tâches Gulp. Celle que je viens de présenter est la mienne et m'a fait gagner un temps précieux sur mes projets. Cependant, JavaScript évolue rapidement et ne nous a pas encore révélé tout son potentiel. D'autres tasks runner commencent à faire parler d'eux, je pense notamment à WebPack qui apporte une approche différente pour packager ses applications.
    Bonne lecture

    Retrouvez les meilleurs cours et tutoriels pour apprendre le Javascript.
    Retrouvez tous les cours de la société Soat.
  • Doksuri
    Expert confirmé
    Envoyé par dukoid
    ça serai bien que tout le monde respecte le nommage : AngularJS et Angular (pour angular 2)
    1ere phrase du tuto :
    Aujourd'hui, dans la plupart des cas, lorsque vous commencez un projet Angular (1.x) vous pensez à une architecture MVC
    Certes, il faut effectivement cliquer sur le lien, et lire la 1ere phrase pour savoir si on parle d'angular 1 ou 2 xD
  • Jarodd
    Membre expérimenté
    Bonjour,

    Partie 1-C :
    il est conseillé d'encapsuler vos composants dans une fonction anonyme
    Juste en dessous, partie 1-E "Déclaration des composants" :
    Que ce soit pour une directive, un controller ou un service, il est recommandé de les déclarer [les composants] avec une fonction nommée plutôt qu'anonyme.
    C'est moi ou ce sont deux conseils contradictoires ?
  • dk
    Membre actif
    Je trouve que cet article est une bonne entrée en matière pour les débutants, merci pour eux.
    J'ai quand même une remarque sur le titre du chapitre "I-A. Le pattern MVC" : il est vrai que sur beaucoup de projets les fichiers sont organisés de cette manière, oui c'est aberrant, mais ça n'a rien à voir avec le MVC. En Java par exemple, et par extension en J2EE, la norme a toujours été d'organiser les packages par fonctionnalité, peu importe le pattern de l'application
  • Désolé mais nous sommes des milliers de développeurs à préferer la notation $scope, dont tous les meilleurs qui développent les modules, dont les exemples stackoverflow.com utilisent tous les notation $scope, qui est géniale est reviens dans tous les posts et tous les problèmes abordés, et tous les exemples officiels angularJS.

    Lorsque l'on a un problème avec angularJs, on ne va pas en plus à chaque fois transcrire avec votre notation les problèmes résolus sur stackoverflow.com, c'est un casse tête freinant la collaborativité.

    Nous n'avons pas à utiliser this ni la syntaxe controller as.

    Par ailleurs les développeurs dans l'action réelle ne migrent pas sous angular 2, mais restent sous AngularJs, c'est ce framework qui a obtenu le succès international qu'on lui connait, pas angular2 qui est inutilisable pour un être humain, de par sa notation html alambiquée.

    on attends des exemples concrets d'applications de votre part plutôt que des citations du style 'si vous faites ceci', 'si vous faites cela' bla bla, mais merci quand même.

    Je vais sur votre site et il n'y a aucune application en démonstration, je refuse d'appliquer cette démonstration, tant que je ne verrais pas une micro application tourner avec cette technique .

    Longue vie à la notation $scope, aux ng-repeat, et n'utilisez pas la syntaxe controller as, ni angular 2 !

    Si vous êtes débutant, utilisez AngularJS et pas angular 2 !
  • Envoyé par hotcryx
    "Si vous êtes débutant, utilisez AngularJS et pas angular 2 ! "

    Moi, je dirais que si tu débutes autant apprendre la version 2 car sinon tu ne vas pas profiter des prochaines versions.
    Tu seras bien obligé à un moment d'y passer (tout le reste va suivre Angular 2).
    Oui, j'ai mis 2 car c'est plus clair.

    C'est ce que vous dites, mais c'est faux.