AngularJS, Browserify and module loading

Question

Alright, I have no clue. I searched the internet for like 3 days now and couldn't find any example on how to use Browserify in combination with AngularJS and Gulp. Yes there are examples but they all show that simple 'hello world' app structure nobody will use in the end anyway. They all write their little controllers inside the main app.js file. No modular setup. And the modular setups I found, well .. they include all the files by hand in the index.html file.. sigh (sorry for my tone).

What i try to achieve is to autoload all my application files but it just doesn't work. What do i need to do to include my controller files? Isn't that what browserify is for? Why isn't it working?

The first answer will probably be: you need to require() the files. But how? I tried require('myApp.mainController'); as well as require('src/features/main/main-controller.js') with the result of:

Error: No Module found.

If someone can point me in the right direction, please help me! :). Thanks in advance! The necessary info 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'
    })
}]);

main-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

This is how I resolved this problem.

• I put an index.js file in every 'module' I created. This file is apparently seen as a module.
• From here I require the controllers, factories/services and add them to my AngularJS app.