angular 路由跳转 route -

eminoda

浏览: 10232 次
性别:
来自: 上海

最近访客更多访客>>

massten

彩鸟飞

wujin_qq

newpear8794

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

angular 路由跳转 route

博客分类：

angular

1.目录结构

2.页面代码

<!DOCTYPE html>
<html lang="en" ng-app="routeApp">
<head>
	<meta charset="UTF-8">

	<script src="mylib/angular.js"></script>
	<script src="mylib/angular-route.js"></script>

	<script src="controller/app.js"></script>
	<script src="controller/main.js"></script>

	<title>Document</title>
</head>
<body>
	<h1>Route Demo index</h1>
	<div ng-view></div>
</body>
</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}}</td>
			<td>{{message.date}}</td>
		</tr>
	</table>

<hr>
<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 to message list</a>
</div>

1.app.js 模块

var routeApp = angular.module('routeApp', ['ngRoute']);
routeApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider
    //首次加载
        .when('/', {
            templateUrl: '6_list.html',
            controller: 'ListCtrl'
        })
        .when('/view/:id', {
            templateUrl: '6_detail.html',
            controller: 'DetailCtrl'
        })
        //其他情况
        .otherwise({
            redirectTo: '/list'
        });
}]);

messages = [{
    id: 0,
    sender: 'jean@somecompany.com',
    subject: 'Hi there, old friend',
    date: '1', 
    recipients: ['greg@ somecompany.com '], 
    message: '111 '
}, {
    id: 1,
    sender: 'maria@somecompany.com',
    subject: 'Where did you leave my laptop?',
    date: '2',
    recipients: ['greg@somecompany.com'],
    message: '222'
}, {
    id: 2,
    sender: 'bill@somecompany.com',
    subject: 'Lost python',
    date: '3',
    recipients: ['greg@somecompany.com'],   
    message: "333"
}];

1.main.js 控制层

routeApp.controller('ListCtrl',function($scope) {  
	$scope.messages = messages;
});  
routeApp.controller('DetailCtrl',function($scope, $routeParams) {  
    $scope.id = $routeParams.id;  
});