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());

});

The first thing to understand is that you can't mix up names from browserify (CommonJS) modules with angular modules. They are not the same thing. You may end up with some CommonJS modules that have the same name as angular modules, but they're still different things. When you use browserify with angular, you end up with 3 layers of dependency management: CommonJS modules, angular's modules, and then angular's dependency injection. This article does a great job of explaining things step by step with a modular set up: blog.codecentric.de/en/2014/08/angularjs-browserify — user2943490
– user2943490, Commented May 6, 2015 at 6:30
Ok, for me its working now. I put an index.js file in every 'module' i create. This file is apparently seen as an module. From here i 'require' the controllers, factories/services and add them to my angular app. — Nique
– Nique, Commented May 6, 2015 at 13:53
@Nique You should post your solution as an answer to make it easy for others to find who may have had a similar problem. Then you can also accept it as the correct answer. — Chic
– Chic, Commented Jan 15, 2016 at 1:18

Mogsdad · Accepted Answer · 2016-01-16 02:20:18Z

3

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.

edited Jan 16, 2016 at 2:20

Mogsdad

46k21 gold badges166 silver badges289 bronze badges

answered Jan 16, 2016 at 2:05

Nique

5817 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mtpultz Over a year ago

Hi, for the lost masses if they exist could you drop in an example. I'm having the same issue figuring browserify out, but I don't understand your answer.

Collectives™ on Stack Overflow

AngularJS, Browserify and module loading

Project structure

app.js

main-ctrl.js

gulpfile.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Project structure

app.js

main-ctrl.js

gulpfile.js

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related