I am trying to create a basic angular template where all files are sorted into a modular structure and referenced using the browserify require method.

I am very new to browserify and the CommonJS-type import system.

Here is a look at the initial structure before I go into details of the file contents:

enter image description here

So to start I have the app folder which contains all the Angular JS files.

"bundle.js" is the output from browserify. This is what will be referenced from the index.html file.

In this I have the app.module.js file which is the main angular app file. This is the file which browserify uses as the start point.

So far "app.module.js" contains the following:

'use strict';

var angular = require('angular');

var app = angular.module('app', [require('ui-router'), 'app.home', 'app.other']);
app.constant('VERSION', require('../../package.json').version);


module.exports = function ($stateProvider, $urlRouterProvider) {

Then in each sub folder I have an index.js which is used by browserify when the require is called for that folder.

app/components/index.js just references all the components:

'use strict';


module.exports = require("angular")
    .module("app.home", [])
    .controller("homeController", require("./home.controller"));


module.exports = function($scope)
    $scope.message = "Loaded home controller!";


module.exports = function ($stateProvider, $urlRouterProvider) {
    .state('home', {
        url: "/",
        views: {
            "": {
                templateUrl: "app/components/home/home.view.html",
                controller: "homeController"



"home.service.js" is empty and not used, but you get the idea.

The structure is the same for the other folder.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.