Architecture application Angular pour débutant

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 !

Personne ?

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

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 ?

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.

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 !