angularjs-gulp-browserify-boilerplate

super simple seed project using angularjs with separate modules and gulp+browserify to put them together

Angular Core Dependency: ~1.3.15

Module License: MIT

Added by: Sam Deering

GitHub

Repository

grudelsud/angularjs-gulp-browserify-boilerplate

Stats

Stars: 10

Watchers: 10

Forks: 3

Author

Grudelsud
Grudelsud

Module Description

For the impatients

npm install -g gulp
npm install -g bower
npm install
bower install
gulp

How it works

I've read quite a few blog posts, tutorials, etc. and eventually - based on what I've learned - created an Angular boilerplate with a simple approach based on components that I'm happy to work with. It should easily scale to any size of project, from tiny single-directive apps as this boilerplate, to larger component-based mayhems.

Structure

App.js defines an angular app and requires all the external componentes, injecting them as requirements in the main app.

Components are defined through an index.js file, automagically recognized by browserify as the main entry point for the specific module.

A component definition is hence made through 3 main steps:

  1. creating the angular module and exporting it from index.js, e.g.

     // init module and export
     module.exports = angular.module('components.welcome', []);
    
  2. requiring all the elements needed for the module from index.js, e.g.

     // require here all the components imported by this module:
     require('./welcome.js');
    
  3. from the element itself, attach the angular service/directive/etc. by requiring the component export and attaching definitions, e.g.

     // require the angular module defined by this component
     var ngModule = require('./');
     // attach the directive/service/controller defined by this component
     ngModule.directive('welcomeMsg', [WelcomeMsg]);
    

the whole component is then required by the main app and injected into its dependencies, e.g.:

// require list of components
require('./components/welcome');

this way, adding additional components is as simple as dropping a new directory containing all the required scripts and importing it into the main app. Or, on the other hand, deleting a component only requires to delete its specific require and dependency injection.

Build

gulp defines the following tasks:

  • default via gulp: builds the app defined in scripts/app.js calling browserify on it.
  • watch via gulp watch: watches for changes and calls the main build task.
  • lint via gulp lint: this is called automatically by build + watch

Caveats

This app is just a simple boilerplate for an angularjs app compiled with gulp+browserify. If anyone comes with clever (and simple) suggestions to improve it, more than welcomed!

References

Module stats last updated: 2015-06-04 11:08:57

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!