A starter project for AngularJS using Brunch.io
** MAJOR UPDATES **
v0.4.0 Bring 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
- 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:
Open "app/app.coffee" and remove the dependency on 'partials' on the module App.
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
For more information on angular please check out http://angularjs.org