I am trying to create my first angular application (using some dummy data). I have a partial one that displays a list of users, and a partial view of information about an individual user. Routing for an individual user is based on an identifier. My problem is that when I click on an individual user, this user id is not passed to the url. Can someone tell me how to do this?
app.js
'use strict'; // Declare app level module which depends on filters, and services angular.module('App', [ 'ngRoute', 'App.filters', 'App.services', 'App.directives', 'App.controllers' ]). config(['$routeProvider', function($routeProvider) { $routeProvider. when('/users', {templateUrl: 'partials/users/user-list.html', controller: 'UsersCtrl'}). when('/users/new', {templateUrl: 'partials/users/user-new.html', controller: 'UserNewCtrl'}). when('/users/:userId', {templateUrl: 'partials/users/user-detail.html', controller: 'UserDetailCtrl'}). when('/users/:userId/edit', {templateUrl: 'partials/users/user-edit.html', controller: 'UserEditCtrl'}). otherwise({redirectTo: '/home'}); }]);
controllers.js:
'use strict'; angular.module('App.controllers', []). controller('UsersCtrl', [function() { }]) .controller('UserDetailCtrl', [function() { }]) .controller('UserEditCtrl', [function() { }]) .controller('UserNewCtrl', [function() { }]);
by list.html
<body ng-controller="UserListCtrl"> <div class="container-fluid"> <div class="row-fluid"> <div class="span2"> </div> <div class="span10"> <ul class="list-group"> <h4>Users</h4> <div ng-init="users = [ {id: 1, firstName:'John', lastName: 'Doe', email: ' johnd@gmail.com '}, {id: 3, firstName:'Jane', lastName: 'Doe', email: ' janed@gmail.com '}, {id: 4, firstName:'Donald', lastName: 'Duck', email: ' dd@disney.com '}, {id: 2, firstName:'Mary', lastName: 'Smith', email: ' ms@smiths.com '} ]"> <li class="list-group-item" ng-repeat="user in users"> <a href="#/users/:userId">{{user.firstName}} {{user.lastName}}</a> </li> </ul> </div> </div> </div> </body>