angularjs ngRoute demo
浏览数：46 /
时间：2015年06月09日
<!doctype html> <html lang="en" ng-app="AMail"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="lib/angular.js"></script> <script src="lib/angular-route.js"></script> </head> <body> <h1>A - Mail</h1> <div ng-view></div> <script type="text/ng-template" id="detail.html"> <div><strong>Subject:</strong>{{message.subject}}</div> <div><strong>Sender:{{message.sender}}</strong></div> <div><strong>Date:</strong>{{message.date}}</div> <div> <strong>To:</strong> <span ng-repeat="recipient in message.recipients">{{recipient}}</span> </div> <div>{{message.message}}</div> <a href="#/">Back to message list</a> </script> <script type="text/ng-template" id="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> </script> <script> var aMailServices = angular.module(‘AMail‘, [‘ngRoute‘]); function emailRouteConfig($routeProvider) { $routeProvider. when(‘/‘, { controller: ListController, templateUrl: ‘list.html‘ }). when(‘/view/:id‘, { controller: DetailController, templateUrl: ‘detail.html‘ }). otherwise({ redirectTo: ‘/‘ }); } aMailServices.config(emailRouteConfig); messages = [{id: 0, sender: ‘[email protected]‘, subject: ‘Hi there, old friend‘,date: ‘Dec 7, 2013 12:32:00‘, recipients: [‘[email protected]‘],message: ‘Hey, we should get together for lunch ‘}, { id: 1, sender: ‘[email protected]‘,subject: ‘Where did you leave my laptop?‘,date: ‘Dec 7, 2013 8:15:12‘, recipients: [‘[email protected]‘],message: ‘I thought you were going to put it in my desk drawer.‘+‘But it does not seem to be there.‘}, {id: 2, sender: ‘[email protected]‘, subject: ‘Lost python‘,date: ‘Dec 6, 2013 20:35:02‘, recipients: [‘[email protected]‘],message: "Nobody panic, but my pet python is missing from her cage.‘+‘She doesn‘t move too fast, so just call me if you see her."}]; function ListController($scope) { $scope.messages = messages; } function DetailController($scope, $routeParams) { $scope.message = messages[$routeParams.id]; } </script> </body> </html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
