An simple frontend kickstarter based on AngularJS, Grunt and LESS for online store.
- ngBoilerplate was taken as skeleton project.
- Heroku is using for production demo
- It is just a fork of A-Shopping-Cart-Application-Built-with-AngularJS
Install Node.js and then:
$ git clone git@github.com:bu-bu/angular-shopping-cart.git
$ cd angular-shopping-cart
$ sudo npm -g install grunt-cli karma bower
$ npm install
$ bower install
$ gruntgruntorgrunt watch- build developer project (build dir)grunt prod- build production project (prod dir)grunt test- run tests
- AngularJS - Base framework
- Grunt - Build tool
- LESS - CSS, but smth more
- Animate.css - Animation library, use with ng-animate
- Numeral.js - Work with numbers, use with filter
At a high level, the structure looks roughly like this:
angular-shopping-cart/
|- karma/
|- src/
| |- app/
| | |- <app logic>
| |- assets/
| | |- <static files>
| |- common/
| | |- <reusable code>
| |- less/
| | |- main.less
|- vendor/
| |- angular/
| |- bootstrap/
| |- etc ..
|- .bowerrc
|- bower.json
|- build.config.js
|- Gruntfile.js
|- module.prefix
|- module.suffix
|- package.json
What follows is a brief description of each entry, but most directories contain
their own README.md file with additional documentation, so browse around to
learn more.
karma/- test configuration.src/- our application sources. Read more »vendor/- third-party libraries. Bower will install packages here. Anything added to this directory will need to be manually added tobuild.config.jsandkarma/karma-unit.jsto be picked up by the build system..bowerrc- the Bower configuration file. This tells Bower to install components into thevendor/directory.bower.json- this is our project configuration for Bower and it contains the list of Bower dependencies we need.build.config.js- our customizable build settings; see "The Build System" below.Gruntfile.js- our build script; see "The Build System" below.module.prefixandmodule.suffix- our compiled application script is wrapped in these, which by default are used to place the application inside a self-executing anonymous function to ensure no clashes with other libraries.package.json- metadata about the app, used by NPM and our build script. Our NPM dependencies are listed here.
The best way to learn about the build system is by familiarizing yourself with
Grunt and then reading through the heavily documented build script,
Gruntfile.js. But you don't need to do that to be very productive with
ngBoilerplate. What follows in this section is a quick introduction to the
tasks provided and should be plenty to get you started.
The driver of the process is the delta multi-task, which watches for file
changes using grunt-contrib-watch and executes one of nine tasks when a file
changes:
delta:gruntfile- WhenGruntfile.jschanges, this task runs the linter (jshint) on that one file and reloads the configuration.delta:assets- When any file withinsrc/assets/changes, all asset files are copied tobuild/assets/.delta:html- Whensrc/index.htmlchanges, it is compiled as a Grunt template, so script names, etc., are dynamically replaced with the correct values configured dynamically by Grunt.delta:less- When any*.lessfile withinsrc/changes, thesrc/less/main.lessfile is linted and copied intobuild/assets/ng-boilerplate.css.delta:jssrc- When any JavaScript file withinsrc/that does not end in.spec.jschanges, all JavaScript sources are linted, all unit tests are run, and the all source files are re-copied tobuild/src.delta:coffeesrc- When any*.coffeefile insrc/that doesn't match*.spec.coffeechanges, the Coffee scripts are compiled independently intobuild/srcin a structure mirroring where they were insrc/so it's easy to locate problems. For example, the filesrc/common/titleService/titleService.coffeeis compiled tobuild/src/common/titleService/titleService.js.delta:tpls- When any*.tpl.htmlfile withinsrc/changes, all templates are put into strings in a JavaScript file (technically two, one forsrc/common/and another forsrc/app/) that will add the template to AngularJS's$templateCacheso template files are part of the initial JavaScript payload and do not require any future XHR. The template cache files arebuild/template-app.jsandbuild/template-common.js.delta:jsunit- When any*.spec.jsfile insrc/changes, the test files are linted and the unit tests are executed.delta:coffeeunit- When any*.spec.coffeefile insrc/changes, the test files are linted, compiled their tests executed.
As covered in the previous section, grunt watch will execute a full build
up-front and then run any of the aforementioned delta:* tasks as needed to
ensure the fastest possible build. So whenever you're working on your project,
start with:
$ gruntAnd everything will be done automatically!
When you're ready to push your app into production, just run the prod
command:
$ grunt prodThis will concatenate and minify your sources and place them by default into the
prod/ directory. There will only be three files: index.html,
your-app-name.js, and your-app-name.css. All of the vendor dependencies like
Bootstrap styles and AngularJS itself have been added to them for super-easy
deploying. If you use any assets (src/assets/) then they will be copied to
prod/ as is.