Architecture application Angular pour débutant

Quelle architecture utiliser et comment la mettre en place ?

L'auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

Bonjour à tous !

Je débute avec angular js (J'apprends en particulier avec ce livre ) et j'ai uniquement réalisé de petites applications mobiles avec Ionic. Par petites applications j'entends que tout mon code tenais dans un ou deux fichiers js.

Je souhaite me lancer dans un nouveau projet utilisant angular et je cherche à adopter les bonnes pratiques en terme d'organisation des fichiers. Cet article préconise une architecture via modules qui me semble pertinente et que je voudrais adopter.

Le problème est que je ne sais pas comment faire pour découper correctement mes fichiers et modules et les intégrer tous ensembles. Mon application pour l'instant se composerait de deux modules : un module "home" qui serait la page d'accueil de l'application et un module "welcome" qui afficherait une page de présentation de l'application et permettrait de s'inscrire.

Je voudrais utiliser une organisation de ce genre :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
app/
-----home
----------homeCtrl.js
----------homeView.html
-----welcome
----------welcomeCtrl.js
----------welcomeView.html
-----assets
----------img
----------css
----------js
-----app.module.js
-----app.routes.js
----------angular-min.js
----------angular-route.js

Mon code actuel (tout dans un seul ficher app.js) ressemble à ceci :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var app = angular.module("monApplication",['ngRoute']);


app.config(['$routeProvider',
            function($routeProvider) {
                $routeProvider.
                when('/', {
                    templateUrl: 'app/templates/home.html',
                    controller:'home-ctrl as home'
                }).
                when('/welcome', {
                    templateUrl: 'app/templates/welcome.html',
                    controller:'welcome-ctrl as welcome'
                }).
                otherwise({
                    redirectTo: '/'
                });
            }]); 


app.controller("home-ctrl",function($scope,$location){  
    // faire des trucs ici
});



app.controller("welcome-ctrl",function($scope){
        // faire des trucs ici
});

Mon problème est de savoir comment transformer ce code pour utiliser la nouvelle architecture ! Que dois-je mettre dans le fichier "app.module.js" ? Comment dire a ce fichier qu'il doit charger le routeur a partir du fichier app.routes.js ?

Merci d'avance pour votre aide et bonnes fêtes de fin d'années à tous !

Édité par Demandred

"Il est vraiment regrettable que tous les gens qui savent parfaitement comment diriger un pays soient trop occupés à conduire des taxis et à couper des cheveux"

+0 -0
Staff

Pas moi, désolé… Mais je peux peut-être quand même t'aider. Pourquoi apprendre AngularJS fin 2015 ?

Angular est assez populaire mais mal foutu. Plus mal foutu que la concurrence (Ember, Backbone, React, …). Angular va rapidement mourir à cause d'Angular 2, qui est mieux foutu, très différent, et pas compatible avec Angular.

Bref, apprendre Angular maintenant, je vois pas trop l'intérêt. Même si t'as déjà acheté le bouquin. Et ne te dis pas "Oui mais ça vaut la peine d'apprendre Angular quand même parce que je pourrai réutiliser ces connaissances et concepts ailleurs". C'est pas vraiment le cas.

Un peu de lecture à propos d'Angular : https://medium.com/este-js-framework/whats-wrong-with-angular-js-97b0a787f903

Je parle de JavaScript et d'autres trucs sur mon blog : https://draft.li/blog

+1 -0
Auteur du sujet

Merci pour ta réponse !

Personnellement je ne penses pas qu'angular vas rapidement mourir : pour 90% des besoins et sites web il fait le travail correctement… En temps qu'amateur je ne ferai jamais parti des 10% des projets qui auront besoin de quelque chose de vraiment poussé. Après ce n'est que mon point de vue personnel.

Si j'utilise angular (alors qu'Angular 2.0 va sortir) c'est que comme je le dis dans mon cas d'amateur les avantages d'angular sont 1000 fois supérieurs aux inconvénients. A commencer par la communauté et la facilité à trouver des ressources sur le sujet par rapport à des technos plus récentes. A terme je passerai pe sous angular 2 mais pour l'instant ça me convient très bien !

A priori en regardant un peu angular2/react etc il semblerait qu'ils adoptent tous la même logique un peu étrange (pour moi) d'avoir le html directement dans le js via la définition de composants… J'imagine que ça va remplacer les directives d'angular…

J'ai lu un article expliquant en quoi react.js est cool pour résoudre les problèmes d'angular (performance+référencement) et je comprends bien l’intérêt, mais j'avoue que ne me sens pas d'essayer d'apprendre autre chose maintenant… Surtout que la majorité des tutos sont en anglais et pour des gens qui maitrisent très bien le js et non pour les débutants/amateurs.

Sinon pour revenir au sujet, la solution ne serait-elle pas d'utiliser un builder comme Gulp ou Brunch qui aurait simplement à concaténer mes fichiers ? Ou je raconte des bêtises ?

"Il est vraiment regrettable que tous les gens qui savent parfaitement comment diriger un pays soient trop occupés à conduire des taxis et à couper des cheveux"

+0 -0

Hello Demandred,

Ton architecture de dossiers ne me semble pas correct. Le mieux serait un répertoire "controllers" pour les contrôleurs, "views" pour les vues, etc… simple observation par rapport au générateur de projets Yeoman (que je te conseille d'utiliser au passage…) qui utilise ce genre de classement.

HTTP/1.1 418 I'm a teapot

+0 -0
Auteur du sujet

Salut !

J'utilisais cette architecture avant (avec un module controlleurs, un services etc), mais j'essaye d'améliorer ma façon de faire car j'ai été convaincu que ce n'était pas une super pratique :

Le problème avec ce genre d'architecture c'est que c'est difficile à maintenir : si tu veux éditer un composant tu dois aller chercher sa vue dans "views", son contrôleur dans "controllers" etc.. et si tu as pas mal de composants ça devient vite ingérable.

Cet article explique tout ça mieux que moi et trouve cette approche pertinente !

D'ailleurs je trouve cette architecture plus proche d'une approche par composants comme ce que propose react.js : ici chaque composant/module de l'application est associé à un dossier ce qui rends sa maintenance plus facile !

Je crois qu'en fait il faut simplement que j'utilise un outil qui va concaténer mes fichiers .js et c'est tout !

"Il est vraiment regrettable que tous les gens qui savent parfaitement comment diriger un pays soient trop occupés à conduire des taxis et à couper des cheveux"

+0 -0

Cette réponse a aidé l'auteur du sujet

+1 avec victor.

T'es en plein dans la "js-fatigue", c'est-à-dire que t'es en train de passer de "c'est cool Angular ça marche bien pour de petites app" à "dès que j'ai un projet important c'est merdique y'a pas de convention". Donc oui, tu peux utiliser yeoman ou autre producteur de template. Mais franchement, c'est du temps perdu.

Soit tu pars sur un framework très dogmatique (Ember, Meteor, Angular2 par exemple) et tu sauras parfaitement comment architecturer ton application puisque c'est l'énorme point fort de ce genre de projets.

Soit tu prends l'approche orthogonale : utiliser un framework non dogmatique (React), et soit attendre que des conventions émergent, soit architecturer ton application comme bon te semble, éventuellement en demandant des conseils. Du coup pas de "bonne façon", y'en a autant que de projets. Tu préfères gulp ? Utilise gulp. Plutôt webpack ? Alors utilise webpack.

Avec angular (v1) tu as le cul entre deux chaises. Énormément de gens ont foncé dessus parce que c'était séduisant (moi y compris) et que c'était ce qui se faisait de mieux. Force est de constater, maintenant que j'ai écrit des applications assez énormes en production, qu'à maintenir c'est un véritable enfer. Y'en a absolument partout. Et de ce que je lis sur le web, les gens commencent un peu à penser pareil, certains ont utilisé des directives dans tous les sens, certains ont un "app.js" de 3000 lignes. Deux mauvaises pratiques.

A côté de ça, t'as forcément besoin d'un requirejs ou autre si tu veux éviter de référencer tous tes scripts dans ta page. Autant passer par un bundler (webpack, browserify, ou n'importe quoi) et tu build un seul fichier par app. Et pour ça, autant passer en ES6 avec des import plutôt que requirejs justement.

Tout ça pour dire que t'as "mis le doigt dans l'engrenage", et que du coup, rester sur angular c'est mettre un bout de ferraille dans l'engrenage. Ouais tu vas stopper la machine, mais c'est pas une solution pérenne.

Happiness is a warm puppy

+2 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte