路由时 AngularJS 忙

AngularJS 是一个强大的前端框架，它的路由系统可以让你轻松地构建单页应用程序。在 AngularJS 中，你可以通过定义不同的路由来控制页面的展示和行为，这非常适合构建复杂的 Web 应用程序。

安装 AngularJS 路由

在开始使用 AngularJS 路由之前，你需要在应用程序中安装 angular-route 库。你可以通过命令行工具安装：

npm install angular-route --save

在你的应用程序中引入 angular-route 库：

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

配置路由

在你的应用程序模块中，你需要引入 ngRoute 模块并配置路由。下面是一个简单的示例：

var app = angular.module('myApp', ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "index.html"
    })
    .when("/about", {
        templateUrl : "about.html"
    })
    .when("/contact", {
        templateUrl : "contact.html"
    });
});

在上面的示例中，我们定义了三个路由：首页、关于我们和联系我们。每个路由都有一个 templateUrl 属性，它指定了路由要展示的 HTML 模板。你也可以使用 template 属性来定义一个内联的 HTML 模板。

创建 HTML 模板

我们定义了路由的 HTML 模板之后，我们需要创建实际的 HTML 模板。下面是一个简单的示例：

<!-- index.html -->
<div ng-controller="myCtrl">
    <h1>{{message}}</h1>
</div>

<!-- about.html -->
<div ng-controller="myCtrl">
    <h1>About Us</h1>
    <p>This is the about us page.</p>
</div>

<!-- contact.html -->
<div ng-controller="myCtrl">
    <h1>Contact Us</h1>
    <p>Please contact us via email.</p>
</div>

在上面的示例中，我们使用了一个简单的 AngularJS 控制器，它可以让我们在页面中显示不同的数据。

创建控制器

控制器是 AngularJS 应用程序的核心，你可以使用它来配置页面的行为和显示数据。下面是一个简单的控制器示例：

app.controller('myCtrl', function($scope) {
    $scope.message = "Welcome to my app!";
});

在上面的示例中，我们定义了一个名为 myCtrl 的控制器，它有一个名为 $scope 的注入依赖。在控制器中，我们定义了一个名为 message 的变量，它会在 HTML 模板中进行显示。

总结

通过使用 AngularJS 路由，你可以轻松地构建单页应用程序。你可以使用 ngRoute 模块和 $routeProvider 服务来配置路由，然后创建 HTML 模板和控制器来实现页面的展示和行为。AngularJS 路由是非常强大的，它可以帮助你构建复杂的 Web 应用程序。