AngularJS, Browserify e modulo di caricamento

Question

OK, non ne ho idea. Ho cercato su internet per circa 3 giorni e non sono riuscito a trovare alcun esempio su come utilizzare Browserify in combinazione con AngularJS e Gulp. Sì, ci sono degli esempi ma tutti mostrano che la semplice struttura dell'app "ciao mondo" non verrà usata da nessuno alla fine. Tutti scrivono i loro piccoli controller all'interno del file app.js principale. Nessuna configurazione modulare. E le configurazioni modulari che ho trovato, beh .. includono tutti i file a mano nel file index.html .. sigh (mi dispiace per il mio tono).

Quello che cerco di ottenere è di caricare automaticamente tutti i miei file di applicazione ma non funziona. Cosa devo fare per includere i file del mio controller? Non è per cosa serve browserify? Perché non funziona?

La prima risposta sarà probabilmente: è necessario require() i file. Ma come? Ho provato require('myApp.mainController'); nonché require('src/features/main/main-controller.js') con il risultato di:

Error: No Module found.

Se qualcuno mi può puntare nella giusta direzione, ti prego, aiutami! :). Grazie in anticipo! Le informazioni necessarie sono sotto la linea.

---

Struttura del progetto

|project 
|-builds 
| |-development 
| |-production 
|-src 
| |-components 
| |-features 
| | |-main 
| | | |-main-ctrl.js 
| | | |-main.html 
| | |-dashboard 
| | | |-dashboard-ctrl.js 
| | | |-dashboard.html 
| |-app.js 
| |-app.scss 
| |-index.html 

app.js

require('angular'); 
require('angular-ui-router'); 

var app = angular.module('myApp', [ 
    'ui.router', 
    'myApp.mainController' 
]).config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { 
    $urlRouterProvider.otherwise('/'); 

    $stateProvider 
    .state('main', { 
     url: '/', 
     templateUrl: 'src/features/main/main.html', 
     controller: 'mainController' 
    }) 
    .state('dashboard', { 
     url: '/dashboard', 
     templateUrl: 'src/features/dashboard/dashboard.html', 
     controller: 'dashboardController' 
    }) 
}]); 

principali-ctrl.js

angular.module('myApp.mainController', []) 

    .controller('mainController', ['$scope', 'Main', function($scope, Main) { 
    $scope.message = Main.message; 
}]); 

gulpfile.js

gulp.task('js', function() { 
    return browserify({ 
    entries: 'src/app.js', 
    debug: true 
    }) 
    .bundle() 
    .pipe(gulp.dest('builds/development')) 
    .pipe(connect.reload()); 

});

Answer 1

Ecco come ho risolto questo problema.

• Ho inserito un file index.js in ogni "modulo" che ho creato. Questo file apparentemente è visto come un modulo.
• Da qui I require i controller, le fabbriche/i servizi e li aggiungo alla mia app AngularJS.