AngularJS routes with parameters

by johnoscott

HTML

<title>App</title>
<body ng-controller="MainCtrl">
​
<h1 ng-cloak>{{pageTitle}}</h1>
​
<p> <a href="#/home">Home</a> |
    <a href="#/list">List</a> |
    <a href="#/settings">Settings</a>
</p>
​
<hr>
    <ng-view>Loading...</ng-view>
​
<hr>
Footer
​
<!--<script src="https://github.com/tigbro/jquery-mobile-angular-adapter/raw/master/compiled/jquery-mobile-angular-adapter-standalone-1.1.0.js"-->
        <!--type="text/javascript">-->
<!--</script>-->
​
<!-- Inline Templates (Partials) -->
<script type=text/ng-template id=home.html>
    <!-- Home -->
    <ul>
        <li><a href="#/list">Show Items</a></li>
        <li><a href="#/settings">Settings</a></li>
    </ul>
</script>
​
<script type=text/ng-template id=list.html>
    <!-- List -->
    <p>Choose an Item</p>
    <ul>
        <li ng-repeat="item in items"><a href="#/detail/{{item.id}}">{{item.title}}</a></li>
    </ul>
</script>
​
<script type=text/ng-template id=detail.html>
    <!-- Detail -->
    <h2>{{item.title}}</h2>
    <p>{{item.detail}}</p>
    <hr>
    <p>{{item.id}}</p>
</script>
​
<script type=text/ng-template id=add.html>
    <!-- Add Item -->
    <p><input type="text" ng-model="name"> </p>
    <hr>
</script>
​
​
<script type=text/ng-template id=settings.html>
    <!-- Settings -->
    <p>Settings go here ...</p>
</script>
​
<!-------------------------------------------------------------------------------------------------------- -->
​
<!-- APPLICATION -->
<script type='text/javascript'>//<![CDATA[
​
'use strict';
​
// , ['appServices']
​
angular.module('app', ['appServices'])
    .config(['$routeProvider', function($routeProvider) {
        $routeProvider.
                when('/home', {templateUrl: 'home.html',   controller: HomeCtrl}).
                when('/list', {templateUrl: 'list.html',   controller: ListCtrl}).
                when('/detail/:itemId', {templateUrl: 'detail.html',   controller: DetailCtrl}).
                when('/settings', {templateUrl: 'settings.html',   controller:...