本文介绍如何使用AngularJS及其路由模块Angular-Route.js来实现网页应用中的路由功能，并通过示例展示了如何配置不同路由地址对应的视图内容。
官网下载:AngularJS
路由视图需要：Angular-Route.js
基于zepto的轻量级的 JavaScript UI 库： App.js 用于开发跨平台的移动Web应用
<!DOCTYPE html>
<html ng-app='mainApp'>
<head>
<title>简单AngularJS使用</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scalable=1" name="viewport">
</head>
<body>
<ul>
<li><a href="#/">直接显示内容</a></li>
<li><a href="#templet">引用其他页面</a></li>
</ul>
<!-- ng-view 相当于thinkPHP里的 $this->display(); 用来实现页面渲染 -->
<div ng-view></div>
<!-- AngularJS -->
<script src="js/angular.min.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/app.js"></script>
<script>
/* mainApp route */
angular.module('mainApp', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
template: '<div class="container"><p><h4>默认根目录页面</h4></p></div>'
})
.when('/templet', { //templet为模板页面调用的ID
templateUrl: "templet.htm"
})
.otherwise({
template: '<div class="container"><p><h4>默认其他页面</h4></p></div>'
});
}]);
</script>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
