2
\$\begingroup\$

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');
require('./components/');

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

app.routes.js:

module.exports = function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/");
}

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';
require("./home/");
require("./other/");

app/components/home/index.js:

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

home.controller.js:

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

home.routes.js:

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

home.view.html:

<section>
    {{message}}
</section>

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

The structure is the same for the other folder.

\$\endgroup\$

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.