A starter project for AngularJS using Brunch.io
** MAJOR UPDATES **
v0.4.1 Brings with it some major changes. If you're upgrading from a previous release,
./scripts/init.sh and remove any bower components from
now uses the
- Coffeescript / Jade / Less / Stylus automatically compiled on save
- auto-reload during development saves you from manually refreshing the page
- karma integration for unit tests
- Bootstrap integration with themes.
- Source map support
- Modularized code, see /app/sections
- angular/ui-router for more flexible routing
This "modularized" version is intended to be as simple as possible while laying down patterns that, if followed, will create an easily-maintained complex application. The original Angular-Seed entices one down the path of code segregated by type (controllers, views, etc.) rather than by feature (todo, view1, view2). Misko recommends organizing code around features (see this 10/27/13 presentation).
Modularized code is better for
- unit testing
- working with larger teams (to not step on each others’ work)
- preparing for the future because modules will be able to be lazy-loaded and so this structure will be either required or firmly recommended
What, exactly, is different in the modularized code?
- Instead of one controller, one partials folder, one module, there are several
- top level ones under /app
- lower-level ones under /app/sections
- (to make that work, karma.conf.js and config.coffee had to be changed, to pick up and integrate the files from more locations)
- Instead of using the $routeProvider, it uses angular-ui-router to allow output to multiple named views, nested views, etc. Routing and ng-view was mentioned by many online as pain points for larger apps. This arrangement should be much better.
- Livescript by @clkao - Uses Livescript instead of Coffeescript
- True North by @scoarescoare - Uses SASS instead of LESS
- brunch-on-asteroids by @exlee - A minimalistic version that adds Generators, Bootswatch themes, D3, and more.
- angular-brunch-seed-modularized by @sanfordredlich - Demonstrates a modular design, consistent with best practices and better suited for larger projects
How to use angular-brunch-seed
git clone https://github.com/scotch/angular-brunch-seed.gitto clone the angular-brunch-seed repository
./scripts/init.shto install node packages
Or if you have Brunch installed run:
brunch new https://github.com/scotch/angular-brunch-seed myapp
You must also install packages using bower. Either
NOTE: Depending upon your connection and processor speed the build can take a substantial amount of time (3 - 15 minutes). The bower step is particularly slow, because it downloads the complete git history. If you think that there might be a problems, check you network traffic. If the build is still downloading then it's still working.
You will find the jade files in the
Upon save the Jade files will be recompiled to HTML and added to the
$templateCache. When reverencing a partial use the path should begin with
partial/ and end with
.html. For example the
NOTE: Behind the scenes Angular-brunch-seed uses
to compile and serve partials.
works by creating an Angular module named
'partials' that adds the HTML
string of the partials to the
$templateCache. For this to work you must add
partials to yours apps required modules list and include the
file in your
If you are interested in the compiled HTML view the contents
By default angular-brunch-seed uses jade templates. If you would prefer to use HTML run the command:
All Jade file will be compiled to HTML and be placed in the
*.jade files will be removed from the project. Any changes
that you make to the
app/assets/**/*.html files will now appear in the browser.
Running the app during development
./scripts/server.shto serve using Brunch
Then navigate your browser to http://localhost:3333
NOTE: Occasionally the scripts will not load properly on the initial load. If this occurs, refresh the page. Subsequent refresh will render correctly. Also, the initial load will take longer then subsequent loads, some where around 20 seconds is normal.
Running the app in production
Please be aware of the caveats regarding Angular JS and minification, take a look at Dependency Injection for information.
Angular-brunch-seed uses Bower for package
management. To add or update dependencies, modify the
bower install. The component will be added to the
Running unit tests
./scripts/test.shto run unit tests with karma
- Karma will run tests on save. To insure that changes are saved be sure
./script/development.shrunning in the console.
- Set the browsers that you would like to target in the
browser = ["ChromeCanary", "Firefox"]
End to end testing
- run the app in development mode as described above using a separate terminal
./scripts/test-e2e.shto run e2e tests with karma using Angular's scenario runner
Initial load does not render correctly; scripts are not loading.
- Occasionally the scripts will not load properly on the initial load. If this occurs, refresh the page. Subsequent refresh will render correctly.
- EMFILE means there are too many open files. Brunch watches all your project
files and it's usually a pretty big number. You can fix this error with
setting max opened file count to bigger number with command
ulimit -n 10000.
The complete Brunch FAQ
Receiving updates from upstream
When we upgrade Angular-brunch-seed's repo with newer angular or testing library code, you can just fetch the changes and merge them into your project with git.
git pull origin master
bower.json --> Bower component config config.coffee --> Brunch config package.json --> node modules config
For more information on angular please check out http://angularjs.org