A tour of angular-brunch-seed-modularized

The code

Why Angular-seed?

It’s an easy way to have a starter app to build on in the Angular way

Why Angular-seed “modularized”?

The original seed has files broken up by type (directives, filters, etc.) but Misko and long-established best practices say it would be better to have the files broken up by feature (user profile, product display page, etc.).

Why use angular/ui-router instead of $routeProvider?

It allows output to multiple named views, nested views, etc. Routing and ng-view was mentioned by many online as pain points for larger apps so this arrangement should be much better.

Why Brunch?

It makes it very easy to get a complete development environment set up in seconds. For me, it was more mature, simple and reliable than Yeoman, though the reliability difference is hopefully gone by now.

Why base it on Angular-brunch-seed?

It has a great ready-to-roll JS development environment, with these features:

  • Coffeescript / Jade / Less / Stylus automatically compiled on save
  • auto-reload during development saves you from manually refreshing the page
  • Javascript / CSS minification for production
  • karma integration for unit tests
  • Twitter Bootstrap integration, with themes

Why Coffeescript / Jade / Less / Stylus?

Coding gets complex. I like to have the code look as simple and clean as possible, so problems and opportunities for better design are more visible. These compilers make the code syntax simple and clean.

  • Their downside, though, is that they add more syntax to learn and a compile step. If you want to simply not use them, it’s easy, see the docs.

What’s different, now that it’s “modularized”?

Check out the /app/sections folder, where you’ll find this structure that can easily be expanded upon to have directives and filers like /app/scripts does

/app/sections

/home

/partials

/scripts

/top

…etc.

What’s different now that it’s using angular/ui-router?

In index.jade, see the ui-view entry, which sets up the ui-router directive

div(ui-view=”main-content”)

In app.coffee, see the bottom where the states are specified.

That’s it, it’s that easy.

Advertisements
Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: