AngularJS通过ng-route实现基本的路由功能实例详解
下面我将详细讲解“AngularJS通过ng-route实现基本的路由功能实例详解”的完整攻略。
1. 什么是AngularJS?
- AngularJS是一种优秀的前端JavaScript框架；
- 可以通过它快速构建Web应用；
- 品牌背后的公司是Google。
2. 什么是ng-route?
- AngularJS的ng-route是一种路由功能；
- 可以用它来使得不同的URL对应于不同的客户端页面、视图和控制器（controller）；
- ng-route的核心服务是$routeProvider。
3. 实现基本的路由功能（示例1）
下面我们通过示例来实现基本的路由功能：
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>AngularJS</title>
</head>
<body>
<h1>Welcome to my website!</h1>
<div ng-controller="HomeController">
<h2>{{title}}</h2>
<p>{{description}}</p>
</div>
<div ng-controller="AboutController">
<h2>{{title}}</h2>
<p>{{description}}</p>
</div>
<!-- AngularJS -->
<script src="https://cdn.bootcss.com/angular.js/1.6.5/angular.js"></script>
<script>
var app = angular.module("myApp", ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller: 'HomeController'
})
.when('/about', {
templateUrl: 'about.html',
controller: 'AboutController'
})
.otherwise({
redirectTo: '/'
});
});
app.controller('HomeController', function ($scope) {
$scope.title = 'Home Page';
$scope.description = 'This is the home page.';
});
app.controller('AboutController', function ($scope) {
$scope.title = 'About Page';
$scope.description = 'This is the about page.';
});
</script>
</body>
</html>
使用ng-route的最基本和主要的方式是使用$routeProvider来调用.when()方法。.when()的第二个参数为选项对象，它包含了templateURL（模板文件地址）和controller（控制器）属性。otherwise()方法指定了当用户试着通过打开不支持的、不存在于任何一个when表达式中，来访问网站时的默认重定向行为。
以上示例分别通过 / 和 /about 进行路由的切换，打开对应地址会显示Home Page和About Page对应的视图。
4. 多级嵌套路由（示例2）
当我们需要多级嵌套路由，我们可以使用ng-route的“嵌套路由”（nested routes）功能：
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>AngularJS</title>
</head>
<body>
<!-- navigation -->
<nav>
<ul>
<li><a href="#/">Home</a></li>
<li><a href="#/about">About</a></li>
<li><a href="#/contact">Contact</a></li>
</ul>
</nav>
<div ng-view></div>
<!-- AngularJS -->
<script src="https://cdn.bootcss.com/angular.js/1.6.5/angular.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.6.5/angular-route.js"></script>
<script>
var app = angular.module("myApp", ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller: 'HomeController'
})
.when('/about', {
templateUrl: 'about.html',
controller: 'AboutController'
})
.when('/contact', {
templateUrl: 'contact.html',
controller: 'ContactController'
})
.when('/contact/:id', {
templateUrl: 'contact-detail.html',
controller: 'ContactDetailController'
})
.otherwise({
redirectTo: '/'
});
});
app.controller('HomeController', function ($scope) {
$scope.title = 'Home Page';
$scope.description = 'This is the home page.';
});
app.controller('AboutController', function ($scope) {
$scope.title = 'About Us';
$scope.description = 'This is the about page.';
});
app.controller('ContactController', function ($scope) {
$scope.title = 'Contact Us';
$scope.description = 'This is the contact page.';
$scope.contacts = [
{id: 1, name: 'John Doe', phone: '555-777-1212', email: 'john.doe@example.com'},
{id: 2, name: 'Bob Smith', phone: '555-888-1212', email: 'bob.smith@example.com'},
{id: 3, name: 'Jane Smith', phone: '555-888-1212', email: 'jane.smith@example.com'}
];
});
app.controller('ContactDetailController', function ($scope, $routeParams) {
$scope.title = 'Contact Detail';
$scope.description = 'This is the contact detail page.';
var contacts = [
{id: 1, name: 'John Doe', phone: '555-777-1212', email: 'john.doe@example.com'},
{id: 2, name: 'Bob Smith', phone: '555-888-1212', email: 'bob.smith@example.com'},
{id: 3, name: 'Jane Smith', phone: '555-888-1212', email: 'jane.smith@example.com'}
];
$scope.contact = contacts.filter(function (obj) {
return obj.id == $routeParams.id;
})[0];
});
</script>
</body>
</html>
以上示例中的 /contact/:id 路由会加载一个名为 "contact-detail.html" 的嵌套视图，并将其控制器作为参数传递给创建的模块中的$routeProvider.when()方法。
由于我们使用了动态URL参数（如 /contact/:id），因此我们需要使用AngularJS自带的$routeParams对象和$filter服务来过滤掉未选取的数据。
以上是详细讲解“AngularJS通过ng-route实现基本的路由功能实例详解”的完整攻略。