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:
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.