AngularJS 快速入门 - 视图和路由

目录

1. 什么是AngularJS和单页面应用✨
2. 视图和路由的简介✨
   • 2.1 视图的定义和作用
   • 2.2 单页面应用的背景和好处
   • 2.3 AngularJS实现单页面应用的原理
3. 设置多个视图✨
   • 3.1 新建视图文件夹和文件
   • 3.2 将视图添加到HTML文件
   • 3.3 定义视图中的内容
4. 设置路由✨
   • 4.1 引入AngularJS路由模块
   • 4.2 配置路由
     • 4.2.1 配置首页路由
     • 4.2.2 配置列表页路由
   • 4.3 其他页面路由重定向

视图和路由的简介

在之前的教程中，我们只有一个单一的视图，即"Ninjas列表"页面。然而，当应用程序变得更加复杂时，通常会包含多个视图，比如首页、联系人页面和关于页面等。在AngularJS中，我们可以通过使用路由来实现视图之间的切换。

视图的定义和作用

视图是用户界面的一部分，它用于展示特定的内容，并响应用户的交互。在AngularJS中，视图通常是HTML文件，用于展示数据和进行页面布局。

单页面应用的背景和好处

传统的网页应用程序通常是通过每次点击链接都加载一个新的页面来进行页面切换的。而单页面应用（Single Page Application，SPA）则不同，它在初次加载完页面后，通过动态加载和切换视图来改变页面内容，而不需要重新加载整个页面。这种方式有助于提高用户体验，因为页面切换更加流畅，不会造成页面的闪烁和重新布局。

AngularJS实现单页面应用的原理

AngularJS使用路由来实现单页面应用的功能。路由机制会根据URL的变化，自动加载对应的视图，并将其插入到页面的特定位置。这样，当用户点击导航链接时，可以实现页面的无刷新切换和局部更新，提供更加快速和流畅的用户体验。

设置多个视图

为了实现多个视图，我们需要创建不同的视图文件，并将其插入到HTML页面的合适位置。

新建视图文件夹和文件

首先，我们要在项目中创建一个名为"views"的文件夹，用于存放所有的视图文件。然后，我们创建两个视图文件：一个用于首页内容，一个用于"Ninjas列表"内容。

Directory视图

在"views"文件夹中创建一个名为"directory.html"的文件，并添加以下内容：

<h1>Directory视图</h1>
<p>这是Ninjas列表的视图内容。</p>

Home视图

在"views"文件夹中创建一个名为"home.html"的文件，并添加以下内容：

<h1>Home视图</h1>
<p>这是首页的视图内容。</p>

将视图添加到HTML文件

为了告诉AngularJS在哪个位置插入视图，我们需要在HTML文件中添加一个指令。

<main ng-view></main>

这个指令会告诉AngularJS将视图插入到<main>标签中。

定义视图中的内容

为了让AngularJS知道每个视图的具体内容和位置，我们需要在配置中进行设置。

设置路由

为了使用AngularJS的路由功能，我们需要在应用程序的配置中引入路由模块，并进行具体的路由配置。

引入AngularJS路由模块

首先，我们需要在HTML文件中引入AngularJS路由模块。

<script src="angular-route.min.js"></script>

配置路由

我们将路由的配置放在应用程序的config方法中。

myApp.config(['$routeProvider', function($routeProvider) {
  $routeProvider
    .when('/home', {
      templateUrl: 'views/home.html'
    })
    .when('/directory', {
      templateUrl: 'views/directory.html',
      controller: 'NinjaController'
    })
    .otherwise({
      redirectTo: '/home'
    });
}]);

在这里，我们使用$routeProvider.when方法配置不同URL对应的视图和控制器。对于首页，我们使用home.html作为模板。对于"Ninjas列表"页面，我们使用directory.html作为模板，并指定NinjaController作为控制器。最后，我们使用otherwise方法设置其他页面的重定向，默认为首页。

这样，我们就完成了路由的配置。

根据上面的设置，当用户访问/home时，将显示首页视图；而当用户访问/directory时，将显示"Ninjas列表"视图，并且使用NinjaController进行内容控制。

如果用户访问其他URL，将自动重定向到首页。

🌟 教程到此为止，如果你有任何问题，请随时在下方留言。希望本次教程对你有所帮助！