superchris/router.html

## router.html
<!DOCTYPE html>
<html ng-app="fruit">
<head>
<meta name="description" content="Factory example" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
  <script src="http://code.angularjs.org/1.2.12/angular-route.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body ng-controller="FruitCtrl">
  <ul>
    <li ng-repeat="fruit in fruits"><a href="#/fruits/{{fruit.name}}">{{fruit.name}}</a></li>
  </ul>
  <ng-view />
</body>
  <script id="templates/recipe.html" type="text/ng-template">
    <dl>
      <dt>{{fruit.name}}</dt>
      <dd>{{fruit.description}}</dd>
    </dl>
  </script>
</html>

## router.js
fruit = angular.module("fruit", ["ngRoute"]);

fruit.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
      when('/fruits/:fruitName', {templateUrl: 'templates/recipe.html', controller: "ShowFruitCtrl"});
  }]);

fruit.factory("Fruit", function() {
  return {
    fruits: [
      {name: "Bananas", description: "Yellow and peely"},
      {name: "Canteloupe", description: "Tell if its ripe by smelling them"},
      {name: "Cherries", description: "Dont try to make jam out of sweet ones"},
      {name: "Strawberries", description: "Picking them is murder on your back"},
      {name: "Tomatoes", description: "People used to think they were poisonous" }
     ],
    getFruit: function(fruitName) {
      return _.findWhere(this.fruits, {name: fruitName});
    }
  };
});


fruit.controller("FruitCtrl", function($scope, Fruit) {
  $scope.fruits = Fruit.fruits;
});

fruit.controller("ShowFruitCtrl", function($scope, Fruit, $routeParams) {
  $scope.fruit = Fruit.getFruit($routeParams.fruitName);
});
	<!DOCTYPE html>
	<html ng-app="fruit">
	<head>
	<meta name="description" content="Factory example" />
	<script src="http://code.jquery.com/jquery.min.js"></script>
	<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
	<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
	<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
	<script src="http://code.angularjs.org/1.2.12/angular-route.js"></script>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body ng-controller="FruitCtrl">
	<ul>
	<li ng-repeat="fruit in fruits"><a href="#/fruits/{{fruit.name}}">{{fruit.name}}</a></li>
	</ul>
	<ng-view />
	</body>
	<script id="templates/recipe.html" type="text/ng-template">
	<dl>
	<dt>{{fruit.name}}</dt>
	<dd>{{fruit.description}}</dd>
	</dl>
	</script>
	</html>
	fruit = angular.module("fruit", ["ngRoute"]);

	fruit.config(['$routeProvider', function($routeProvider) {
	$routeProvider.
	when('/fruits/:fruitName', {templateUrl: 'templates/recipe.html', controller: "ShowFruitCtrl"});
	}]);

	fruit.factory("Fruit", function() {
	return {
	fruits: [
	{name: "Bananas", description: "Yellow and peely"},
	{name: "Canteloupe", description: "Tell if its ripe by smelling them"},
	{name: "Cherries", description: "Dont try to make jam out of sweet ones"},
	{name: "Strawberries", description: "Picking them is murder on your back"},
	{name: "Tomatoes", description: "People used to think they were poisonous" }
	],
	getFruit: function(fruitName) {
	return _.findWhere(this.fruits, {name: fruitName});
	}
	};
	});


	fruit.controller("FruitCtrl", function($scope, Fruit) {
	$scope.fruits = Fruit.fruits;
	});

	fruit.controller("ShowFruitCtrl", function($scope, Fruit, $routeParams) {
	$scope.fruit = Fruit.getFruit($routeParams.fruitName);
	});