Well, I have no idea. I searched the internet for 3 days and could not find any example on how to use Browserify in combination with AngularJS and Gulp. Yes, there are examples, but they all show that the simple structure of the hello world application will not be used anyway. They all write their little controllers in the main app.js. No modular configuration. And the modular settings I found, well .. they include all the files manually in the index.html file .. sigh (sorry for my tone).
What I'm trying to achieve is autoload of all my application files, but it just doesn't work. What do I need to do to include my controller files? Isn't that a browser? Why doesn't it work?
The first answer is likely to be this: you need require() files. But how? I tried require('myApp.mainController'); as well as require('src/features/main/main-controller.js') with the result:
Error: module not found.
If someone can point me in the right direction, please help me! :). Thanks in advance! The necessary information is below the line.
Project structure
|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' }) }]);
Core-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());
});