02 Setup

Angular-seed setup

Angular-seed is a bootstrapping project preconfigured to with a suite of tools to make it easy to manage dependencies—including Angular itself—with a directory structure that works well for Angular apps. You could always start a new Angular app from scratch, but using the official seed project is recommended.

Let's take a look at the generated application structure, and what all the pieces are for:

app/                    --> all of the source files for the application
  app.css               --> default stylesheet
  app.js                --> main application module
  index.html            --> app layout file (the main html template file of the app)
  index-async.html      --> just like index.html, but loads js files asynchronously
  components/           --> all app specific modules should go here
    version/              --> version related components
  view1/                --> the view1 view template and logic
    view1.html            --> the partial template
    view1.js              --> the controller logic
    view1_test.js         --> tests for the controller
  view2/                --> the view2 view template and logic
    view2.html            --> the partial template
    view2.js              --> the controller logic
    view2_test.js         --> tests for the controller
e2e-tests/            --> end-to-end tests
karma.conf.js         --> config file for running unit tests with Karma
bower.json            --> dependency information for `bower install` (which is run during `npm install`)
package.json          --> dependency management and configuration for `npm install`

package.json and bower.json are probably my favorite things about using the angular-seed. They work kind of like the Gemfile of a Ruby project, as well as the Rakefile.

Let's install those dependencies. Run this:

$ npm install

You'll see the node_modules and bower_components directories are added to your project with all the installed dependencies. Don't worry about it adding bloat to your repository. Just like the bundled gems in a Ruby project, node_modules and bower_components are in .gitignore.

Why do we need two package managers? Why can't we use either npm or bower, rather than both? npm is ideally suited for managing server-side Node packages, while Bower is designed for the client side.

The biggest technical difference is that npm handles nested dependencies, while Bower leaves that up to us (which is appropriate for the client side, where we don't want, for example, 5 different versions of jQuery sent to end users).

Dependencies are versioned, so if you were to change the version number, and run npm install again, bower will get the correct version of whatever dependency we need.

You should be able to start the built-in web server to see the application itself with:

$ npm start

And visit http://localhost:8000/app in your web browser.

Hopefully you see something like this:

view1 | view2 This is the partial for view 1.

Angular seed app: v0.1

If so, let's keep moving.

Next: Bootstrap and Bower