AngularJS 路由

在 AngularJS 中，路由是指将不同的视图链接到不同的 URL，并根据用户的导航来显示不同的视图。通过使用 AngularJS 路由，可以创建一个单页应用程序（SPA），其中所有的视图都是在单个 HTML 页面中动态切换显示的。

安装和配置

首先，需要在 HTML 页面中添加 AngularJS 和 ngRoute 库。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.min.js"></script>

接下来，需要在 AngularJS 应用程序中注入 ngRoute 模块。

var app = angular.module('myApp', ['ngRoute']);

在配置阶段，需要使用 $routeProvider 提供路由规则。

app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "main.html"
    })
    .when("/about", {
        templateUrl : "about.html"
    })
    .when("/contact", {
        templateUrl : "contact.html"
    })
    .otherwise({
        redirectTo: "/"
    });
});

上面的代码定义了三个路由规则：主页链接到 main.html、关于链接到 about.html、联系链接到 contact.html。如果用户使用未定义的 URL，则将其重定向到主页。

使用

在 HTML 页面中，可以使用 ng-view 指令来定义将要插入视图的区域。

<div ng-app="myApp">
    <div ng-view></div>
</div>

通过 ng-href 指令添加路由链接。

<ul>
    <li><a ng-href="#!/">主页</a></li>
    <li><a ng-href="#!/about">关于</a></li>
    <li><a ng-href="#!/contact">联系</a></li>
</ul>

控制器与服务

在视图中，可以为路由规则指定控制器和服务，以便更好地处理视图数据和行为。

.when("/", {
    templateUrl : "main.html",
    controller : "mainCtrl"
})

app.controller('mainCtrl', function($scope, $http) {
    $scope.message = "欢迎来到主页！";

    $http.get("data.json")
    .then(function(response) {
        $scope.data = response.data;
    });
});

在上面的代码中，mainCtrl 控制器从 data.json 文件中获取数据，并将其绑定到 $scope.data 变量。在 main.html 视图中，可以使用 ng-repeat 指令显示数据。

<h1>{{ message }}</h1>
<ul>
    <li ng-repeat="item in data">{{ item.title }}</li>
</ul>

结论

通过使用 AngularJS 路由，可以方便地创建单页应用程序，提高用户体验和性能。在开发过程中，控制器和服务可以帮助处理视图数据和行为，使应用程序更加灵活和富有表现力。