javascript - AngularJS routing for beginner -
i'm trying reproduce routing example in angularjs book pdf. having trouble make work, have copy/paste code in book avoid syntax error... don't understand what's wrong.
when load http://127.0.0.1:8080/routes/ should see content of "index.html" , content of list.html "inside".
but see blamk page "a-mail" (the content of index.html)
i have set breakpoints chrome debug tools, seems enter in "when('/routes/')" section of routeprovider, never in listcontroller function... don't have errors in console log
controllers.js
// creates module our core amail services var amailservices = angular.module('amail', []); // set our mappings between urls, templates, , controllers function emailrouteconfig($routeprovider,$locationprovider){ $routeprovider. when('/routes/', { controller: listcontroller, templateurl: 'list.html' }). // notice detail view, specify parameterized url component // placing colon in front of id when('/routes/view/:id', { controller: detailcontroller, templateurl: 'detail.html' }). otherwise({ redirectto: '/routes/' }); $locationprovider.html5mode(true).hashprefix('!'); } // set our route amail service can find amailservices.config(emailrouteconfig) // fake emails messages = [{ id: 0, sender: 'jean@somecompany.com', subject: 'hi there, old friend', date: 'dec 7, 2013 12:32:00', recipients: ['greg@somecompany.com'], message: 'hey, should lunch sometime , catch up.' +'there many things should collaborate on year.' } ]; // publish our messages list template function listcontroller($scope){ $scope.messages = messages; } // message id route (parsed url) , use // find right message object function detailcontroller($scope, $routeparams){ $scope.message = messages[$routeparams.id]; } index.html
<html ng-app="amail"> <head> <meta charset="utf-8"> <title>title...</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <script src="js/controllers.js"></script> </head> <body> <h1>a-mail</h1> <div ng-view></div> </body> </html> detail.html
<div><strong>subject: </strong>{{message.subject}}</div> <div><strong>sender: </strong>{{message.sender}}</div> <div><strong>date: </strong>{{message.date}}</div> <div> <strong>to:</strong> <span ng-repeat='recipient in message.recipients'>{{recipient}}</span> <div>{{message.message}}</div> <a href='#/'>back message list</a> </div> list.html
<table> <tr> <td><strong>sender</strong></td> <td><strong>subject</strong></td> <td><strong>date</strong></td> </tr> <tr ng-repeat="message in messages"> <td>{{message.sender}}</td> <td><a href="#/view/{{message.id}}">{{message.subject}}</a></td> <td>{{message.date}}</td> </tr> </table> thank you
as can see the offical document, think should use templateurl instead of templateurl.
Comments
Post a Comment