2013-08-14 10 views
5

Mi chiedevo se ci sono le migliori pratiche per evitare file js monolitici in AngularJS.Convenzione AngularJS per più file

Vorrei evitare di avere file controlers.js/filters.js/services.js molto grandi. Invece, per ragioni di gestibilità, mi piacerebbe avere ogni controller/filtro/servizio nel proprio file.

Mi piacerebbe sapere se esiste una convenzione consigliata per questo approccio per quanto riguarda la struttura delle directory e la convenzione di denominazione.

Inoltre, quale potrebbe essere il modo migliore per evitare di aggiungere un tag script nella mia app/index.html per ogni nuovo file che creo?

+0

La seconda questione sarebbe usare require.js e bundle/minify al termine. –

+0

Ho risposto questo tempo fa, vediamo se è d'aiuto. http://stackoverflow.com/questions/17461242/angularjs-application-file-structure/17461438#17461438 – Chandermani

+0

Alla fine ho finito per utilizzare una combinazione dei 2 articoli evidenziati in questa domanda: http://stackoverflow.com/ questions/17461242/angularjs-application-file-structure – elewinso

risposta

2

Potete verificare questa app: https://github.com/angular-app/angular-app

E 'buon esempio per iniziare.

Inoltre, quale potrebbe essere il modo migliore per evitare l'aggiunta di un tag script nella mia app/index.html per ogni nuovo file creo?

Può essere automatizzato dal watcher grunt ad esempio. Uso una tale configurazione per questo compito:

grunt.initConfig({ 
    index: { 
     files: ['app/js/**/*.js'], 
     tasks: 'index:scripts' 
    } 
}) 

grunt.registerMultiTask('index', 'Create index.html', 
     function() {   
      var files = grunt._watch_changed_files || grunt.file.expand(this.data); 
      var now = new Date().getTime(); 
      var scripts_str = ''; 
      var tpl = grunt.file.read('app/index.html.tmpl'); 


      files.forEach(function(file) { 
       file = file.replace(/^app\//, ''); 
       scripts_str += '<script src="' + file + '?bust=' + now + '"></script>' + "\n"; 
      }); 

      grunt.file.write('app/index.html', grunt.template.process(tpl, { 
       data: { 
        scripts: scripts_str 
       } 
      })) 
      console.log('File "index.html" created.'); 

     }); 

index.html.tmpl:

<html> 
<body> 
    ... 
    <%=scripts%> 
</body> 
</html> 
0

Ci sono alcune convenzioni là fuori e non sembra che nessuna "buona pratica" sia ancora emersa.

Detto questo, le due convenzioni che mi piacciono mettono ogni controller/filtro/servizio/etc nella propria directory. Per quanto riguarda la struttura delle directory, per i progetti più piccoli ho visto una directory per ogni tipo di file. Per i progetti di grandi dimensioni, ho visto una directory per ogni modulo con tutti i controller/filtri/servizi per quel modulo in quella cartella. Questo ti costringe anche a dividere la tua app in moduli che è un bell'effetto collaterale.