• 2) Change the file contents .
  • For CSS files, add the path to the VendorCSS workflow.
  • For JS files, add the path to the VendorJS workflow.
  • Each Module is self-contained and the js files are exported, combined, and minified through Browserify.
  • Production files are still sent to the /dist folder.

angular-gulp-browserify-starter – A base file structure for an AngularJS app using Gulp and Browserify

@prasantbharti: AngularJS-Gulp-Browserify Starter App


This Angular starter app is built with best practices in mind. The folder structure is intended to be different than the standard official AngularJS application. The application architecture follows modern design conventions from the proposal outlined here:

Files are grouped structurally (each section of the app being self contained with its own styles, views, controllers, and directives) instead of functionally (all views in one folder, all styles in one folder, etc). In practice, the basic file structure should look something like this:

/app — /assets —— /images —— /icons — /common —— /directives —— /constants —— /elements (common page elements like footer and header) —— /resources —— /services —— /styles —— common.js (common module requirements) —— common.less — /modules —— index.js —— MainController.js —— MainController.spec.js (controller unit tests) —— modules.less —— /module1 (ex: home) ——— index.js (module definition) ——— home.html (view) ——— home.less (styles) ——— HomeController.js (Controller inherits from MainController) ——— HomeController.spec.js ——— homeDirective.js (view definition) ——— homeRoutes.js (route definitions) —— /module2 ——— /sub-module1 ——— /sub-module2 ——— index.js (module definition – sub-modules are required in here) ——— module.html ——— module.less ——— ModuleController.js ——— ModuleController.spec.js ——— moduleDirective.js ——— moduleRoutes.js (route definitions and config options for nested sub-modules) — app.js — app.less — appConfig.js (main config file – no routes are defined here) — index.html /dist (this is the gulp pipeline file output destination) /libs (bower components install here) /node_modules (npm installations go here)

Each Module is self-contained and the js files are exported, combined, and minified through Browserify. Every LESS file from each module should be imported into the master

file in the root app directory. Likewise, each LESS file from a sub-module should be imported into the main


1) Node Modules and Bower Components are not included in this repository to keep it light weight. After cloning or pulling changes from this repository, make sure to run the following command in terminal:

Bower dependencies should install automatically at the end of the NPM install process. If the dependencies don’t install correctly you may need to manually run

as well.

(you can edit the port in the gulpFile). To speed up gulp times, the standard

task does not include copying over static files. Using the standard

folder (installed using bower).






task is run in terminal post-installation).

is clearly commented, defining each task that takes place during pipeline automation. Every file change is watched and new files are automatically pushed to the

folder. All files are concatenated into individual files for use on production servers.

folder, unit test files are included inside of each module alongside the files that they are testing. Each test file has a

file type (ex:

). To run the tests you can simply use

. It will run the development server as well as a karma server so you can develop your code and your tests at the same time. Karma will watch for code changes and run the tests each time a file is saved.

PROD: However, when you are ready for production, you can run

to run the production build pipeline, which will minify and concatenate your files. Production files are still sent to the

locally from the root directory to try it out.

NOTE: When creating controllers and services/factories, always follow the proper naming convention of starting with an uppercase letter. Everything else can use camelCase.

tag. Check out the official documentation for more details:

2) Due to the modularity of this application structure, standard routing parameters aren’t being used. In most examples, routes make use of

like so:

In this application, each module is set up as an injectible directive with its own controller. So instead of the above example, the home module has a directive called

that can be injected into the HTML like this:

(camelcased directives always have to be changed to dashed names when in the HTML). As such, our route config makes use of the

. So the routes look like this instead:

$stateProvider .state(‘home’, { url: ‘/’, template: ‘

‘ });

tag as a template and leaving everything else contained within the module. This way, if anything changes in the file structure, the routes won’t need to be updated.

As we add more options and configuration to each state, further changes to the $stateProvider function becomes necessary, so the current configuration looks like this:

With this approach, it’s very easy to keep every state object clean and easy to understand.

directory with the following files:

files as reference. Make sure to change the naming convention in each file.

file. For example:

file) and add a requirement for the new module. Make sure to require the entire module folder (browserify will look for the index.js file and use that file as the entry point for all other module dependencies).

Your end result should look something like this:

After those steps are complete, you should be able to see the contents of your new module at the URL you specified in step 3.

. It’s all up to you and how deep you want to go with the modularity.

NOTE: As of version 1.2 of this project, the behaviour of the

file has changed.

files using the Gulp pipeline. To add vendor files to your workflow, all you have to do is access the


directories) to the appropriate location in the “File Paths” section.


file is only for your application code. You aren’t necessarily required to use the

file provides.

file is largely static and unchanging (except when you update third party modules or add new ones). As such, your bundle.js file can remain signficiantly smaller in file size, and thus improves the speed of your browserify bundling.

This project is open source so collaboration is welcome. If you see a way to improve something in this project, please feel free to open a Pull Request to the develop branch so we can discuss your code.


You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.