superchris/jsbin.pumuf.html

## jsbin.pumuf.html
<!DOCTYPE html>
<html ng-app="fruit">
<head>
<meta name="description" content="Camp NG Example 0" />
<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="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="RepeatCtrl">
  <ul>
    <li ng-repeat="fruit in fruits"><a href="#/fruits/{{fruit.name}}">{{fruit.name}}</a></li>
  </ul>
  <ng-view/>
  <ul>
    <li ng-repeat="(key, value) in details">{{key}} is {{value}}</li>
  </ul>
  <script id="templates/fruit.html" type="html">
  </script>
</body>
</html>

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

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

fruit.controller("RepeatCtrl", function($scope) {
  $scope.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" }
  ];

  $scope.details = { name: "Chris", age: 41, title: "Occupant" };
});

fruit.controller("ShowFruitCtrl", function($scope, $routeParams) {
});
	<!DOCTYPE html>
	<html ng-app="fruit">
	<head>
	<meta name="description" content="Camp NG Example 0" />
	<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="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="RepeatCtrl">
	<ul>
	<li ng-repeat="fruit in fruits"><a href="#/fruits/{{fruit.name}}">{{fruit.name}}</a></li>
	</ul>
	<ng-view/>
	<ul>
	<li ng-repeat="(key, value) in details">{{key}} is {{value}}</li>
	</ul>
	<script id="templates/fruit.html" type="html">
	</script>
	</body>
	</html>
	fruit = angular.module("fruit", ["ngRoute"]);

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

	fruit.controller("RepeatCtrl", function($scope) {
	$scope.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" }
	];

	$scope.details = { name: "Chris", age: 41, title: "Occupant" };
	});

	fruit.controller("ShowFruitCtrl", function($scope, $routeParams) {
	});