Angular Workflow with Yeoman, Grunt and Bower

/**
 * @ngdoc overview
 * @name hackathonAngApp
 * @description
 * # hackathonAngApp
 *
 * Main module of the application.
 */

angular.module('hackathonAngApp', [
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'ui.router'
  ])
.config(function ($stateProvider, $urlRouterProvider) {
  
    $urlRouterProvider.otherwise('/home');
  
    $stateProvider
      .state('home', {
        templateUrl: 'home.html',
        controller: 'HomeCtrl',
        url: '/home'
      }) 
      .state('addressbook', {
        templateUrl: 'addressbook.html',
        controller: 'AddressbookCtrl',
        url: '/addressbook'
      })
      .state('view', {
        templateUrl:'view.html',
        url:'/view/:id',
        controller: 'AddressbookCtrl'
      })
      .state('contact', {
        templateUrl: 'contact.html',
        controller: 'ContactCtrl',
        url: '/contact'
      })
      .state("otherwise", { 
        templateUrl: 'home.html',
        controller: 'HomeCtrl',
        url: '/home'
      });
  });

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>hackathonAngApp</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">
  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
  <link rel="stylesheet" href="style.css" />
  
</head>

<body ng-app="hackathonAngApp">
  <!--[if lt IE 7]>
      <p class="browsehappy">You are using a very old and very very bad<strong>Microshaft</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->
    
  <!-- Add your site or application content here -->
  <div class="container">
    <div class="header">
      <ul class="nav nav-pills pull-right">
        <li>
          <a ui-sref="home">Home</a>
        </li>
        <li>
          <a ui-sref="addressbook">Addressbook</a>
        </li>
        <li>
          <a ui-sref="contact">Contact</a>
        </li>
      </ul>
      <h3 class="text-muted">hackathon.2014</h3>
    </div>
    <div ui-view=""></div>
    <div class="footer">
      <p>
        <span class="glyphicon glyphicon-heart"></span>
        brought to you by meshfields.de</p>
    </div>
  </div>
  
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
  <script src="https://code.angularjs.org/1.3.5/angular-resource.js"></script>
  <script src="https://code.angularjs.org/1.3.5/angular-cookies.js"></script>
  <script src="https://code.angularjs.org/1.3.5/angular-sanitize.js"></script>
  <script src="https://code.angularjs.org/1.3.5/angular-touch.js"></script>
  <script src="https://code.angularjs.org/1.3.5/angular-route.js"></script>
  <script src="https://angular-ui.github.io/ui-router/release/angular-ui-router.min.js"></script>
  
  <script src="app.js"></script>
  <script src="HomeCtrl.js"></script>
  <script src="AddressbookCtrl.js"></script>
  
  </body>
</html>

/* Space out content a bit */
body {
  padding-top: 20px;
  padding-bottom: 20px;
}

/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer {
  padding-left: 15px;
  padding-right: 15px;
}

/* Custom page header */
.header {
  border-bottom: 1px solid #e5e5e5;
}
/* Make the masthead heading the same height as the navigation */
.header h3 {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 40px;
  padding-bottom: 19px;
}

/* Custom page footer */
.footer {
  padding-top: 19px;
  color: #777;
  border-top: 1px solid #e5e5e5;
}

/* Customize container */
@media (min-width: 768px) {
  .container {
    max-width: 730px;
  }
}
.container-narrow > hr {
  margin: 30px 0;
}

/* Main marketing message and sign up button */
.jumbotron {
  text-align: center;
  border-bottom: 1px solid #e5e5e5;
}
.jumbotron .btn {
  font-size: 21px;
  padding: 14px 24px;
}

/* Supporting marketing content */
.marketing {
  margin: 40px 0;
}
.marketing p + h4 {
  margin-top: 28px;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
  /* Remove the padding we set earlier */
  .header,
  .marketing,
  .footer {
    padding-left: 0;
    padding-right: 0;
  }
  /* Space out the masthead */
  .header {
    margin-bottom: 30px;
  }
  /* Remove the bottom border on the jumbotron for visual effect */
  .jumbotron {
    border-bottom: 0;
  }
}

/**
 * @ngdoc function
 * @name hackathonAngApp.controller:AddressbookCtrl
 * @description
 * # AddressbookCtrl
 * Controller of the hackathonAngApp
 */
 
angular.module('hackathonAngApp')
 
  .controller('AddressbookCtrl', function ($scope, $http, $stateParams) {
    
  	$http.jsonp('http://www.filltext.com/?rows=30&state={usState|abbr}&address={streetAddress}&zip={zip}&tel={phone|format}&id={index}&fname={firstName}&lname={lastName}&city={city}&callback=JSON_CALLBACK')
  		.success(function(data){
  			$scope.people=data;
        $scope.person=$scope.people[$stateParams.id];  
  		});

  }).filter('initials', function(){
  	return function(text) {
  		var names = text.split(' ');
  		var holder = [];
  		angular.forEach(names, function(item){
  			holder.push(item.substring(0,1) + '.');
  		});
  		return holder.join('');
  	};
  });

/**
 * @ngdoc function
 * @name hackathonAngApp.controller:HomeCtrl
 * @description
 * # HomeCtrl
 * Controller of the hackathonAngApp
 */

angular.module('hackathonAngApp')

.controller('HomeCtrl', function($scope) {

  $scope.awesomeThings = [
    'HTML5 Boilerplate',
    'AngularJS',
    'Karma'
  ];

});

<div class="container">
	<table class="table table-striped table-bordered">
		<thead>
			<th>Initials</th>
			<th>Full Name</th>
			<th>City</th>
		</thead>
		<tbody>
			<tr ng-repeat="person in people">
				<td>
					<a ui-sref="view({id:{{person.id}}})">{{person.fname + ' ' + person.lname}}</a>
				</td>
				<td>{{person.fname + ' ' + person.lname | initials}}</td>
				<td>{{person.city}}</td>
			</tr>
		</tbody>
	</table> 
</div>

<div class="jumbotron">
  <h1>'Allo, 'Allo!</h1>
  <p class="lead">
    <img src="http://res.cloudinary.com/meshfields/image/upload/v1418348883/yeoman_lyfli7.png" alt="I'm Yeoman"><br>
    Always a pleasure scaffolding your apps.
  </p>
  <p><a class="btn btn-lg btn-success" ng-href="#">Splendid!<span class="glyphicon glyphicon-ok"></span></a></p>
</div>

<div class="row marketing">
  <h4>HTML5 Boilerplate</h4>
  <p>
    HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.
  </p>

  <h4>Angular</h4>
  <p>
    AngularJS is a toolset for building the framework most suited to your application development.
  </p>

  <h4>Karma</h4>
  <p>Spectacular Test Runner for JavaScript.</p>
</div>

<a ui-sref="addressbook" class="btn btn-primary">Back to People</a>
<hr>
<h1>{{person.fname}} {{person.lname}}</h1>
<b>{{person.tel}}</b>
<hr>
<address>
	{{person.address}}<br />
	{{person.city}}, {{person.state}} {{person.zip}}
</address>

<hr>






<hr>
<h1>Stephan Kristyn</h1>
<b>nottinhill -at- ecomail -dot- at</b>
<hr>
<address>
   Munich, Germany<br />
	<a href="http://meshfields.de">meshfields.de</a>
</address>

'use strict';

/**
 * @ngdoc function
 * @name hackathonAngApp.controller:ContactCtrl
 * @description
 * # ContactCtrl
 * Controller of the hackathonAngApp
 */

angular.module('hackathonAngApp')
 
  .controller('ContactCtrl', function ($scope) {
   
    $scope.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];

  });