Yeoman - Start a Site/App

Ref

Node.js: http://nodejs.org/

Yeoman.io: http://yeoman.io/

Yeoman Generator-Angular: https://github.com/yeoman/generator-angular

Prepare Yeoman and Angular Generator

1. Install Node.js (http://nodejs.org/)
2. Update npm: npm install npm -g
3. Install yo: npm install -g yo
4. Install generator: npm install -g generator-angular
5. Install Grunt:
   1. npm install -g grunt
   2. npm install -g grunt-cli
6. Install Bower: npm install -g bower

Scaffold Site

1. > yo angular mysitename
2. > grunt test
3. > grunt serve
4. Add node_modules/ to your .hgignore or .gitignore
5. Commit the site

Add Pages/Routes

1. > yo angular:route Links
2. > Update index.html nav to include /Links

Update Analytics

1. Prepare a new site in the Analytics dashboard: https://www.google.com/analytics
2. Obtain your tracking code
3. Update the tracking code in app/index.html

Update Build to Include Glyphicons

Ref: http://stackoverflow.com/questions/21932451/assets-missing-in-angular-application-built-using-grunt

Fix Nav Active State

Ref: http://stackoverflow.com/questions/16199418/how-do-i-implement-the-bootstrap-navbar-active-class-with-angular-js

1. Add HeaderCtrl to app.js

.controller('HeaderCtrl',

function ($scope, $location)

{

$scope.isActive = function (viewLocation) {

return viewLocation === $location.path();

};

})

2. Update index.html navbar

<div class="header" ng-controller="HeaderCtrl">

<div class="navbar navbar-default" role="navigation">

<div class="container">

<div class="navbar-header">

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<a class="navbar-brand" href="#/">isajohnson</a>

</div>

<div class="collapse navbar-collapse" id="js-navbar-collapse">

<ul class="nav navbar-nav">

<li ng-class="{ active: isActive('/')}"><a href="#/">Home</a></li>

<li ng-class="{ active: isActive('/about')}"><a ng-href="#/about">About</a></li>

</ul>

</div>

</div>

</div>

</div>