AngularJS通过ng-route实现基本的路由功能实例详解-前端开发

下面我将详细讲解“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实现基本的路由功能实例详解”的完整攻略。