angular 路由跳转 route

最新推荐文章于 2021-04-14 13:01:31 发布

诗小雨

最新推荐文章于 2021-04-14 13:01:31 发布

阅读量341

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/eminodaa/article/details/84740054

本文展示了如何使用Angular创建路由应用，包括目录结构、页面代码、关键模块和控制器的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[size=x-large]1.目录结构[/size]

[img]http://dl2.iteye.com/upload/attachment/0111/4124/12712017-7a43-3860-b147-0a3aa40c91f0.png[/img]

[size=x-large]2.页面代码[/size]


<!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>

[size=x-large]1.app.js 模块[/size]


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"
}];

[size=x-large]1.main.js 控制层[/size]


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