本文实例讲述了AngularJS通过ng-route实现基本的路由功能。分享给大家供大家参考，具体如下：
为什么需要前端路由~
（1）AJAX不会留下History历史记录
（2）用户无法通过URL进入应用指定的页面（书签或者分享等）
（3）AJAX对于SEO是一个灾难
1.一般情况下，我们访问网页的时候，是通过url地址。
比如我们访问一个网页:https://www.baidu.com/index/fix.html
在AngularJS中通过“#”来进行不同页面的路由，比如：
https://www.baidu.com/#/first，这个请求在向网页端传输的时候，服务器会自动忽略#之后的
AngularJS 是一款强大的前端JavaScript框架，它通过引入MVC（模型-视图-控制器）模式，使得构建动态单页应用程序（SPA，Single Page Applications）变得更加容易。在AngularJS中，`ngRoute` 模块提供了前端路由功能，使得我们可以根据URL的不同部分来决定显示哪个视图或执行哪个控制器。下面我们将深入探讨如何使用`ngRoute`实现基本的路由功能。
前端路由的必要性主要体现在以下几个方面：
1. **History历史记录**：传统的AJAX请求不会在浏览器的历史记录中留下痕迹，这使得用户无法通过前进和后退按钮在页面间导航。
2. **URL直接访问**：用户无法通过直接输入URL或者书签来访问特定的应用页面。
3. **SEO搜索引擎优化**：对于搜索引擎来说，AJAX加载的内容是不可见的，这对网站的搜索引擎排名极为不利。
接下来，我们将分步骤解析如何在AngularJS中使用`ngRoute`实现路由：
### 1. 引入ng-route模块
在开始之前，确保已经下载并引入了AngularJS的ng-route库。这个库包含了一个额外的JS文件，例如 `angular-route.js`。将其链接到HTML文件中，以便在应用中使用。
```html
<script src="path/to/angular.js"></script>
<script src="path/to/angular-route.js"></script>
```
### 2. 定义应用模块并依赖注入ngRoute
创建一个新的AngularJS应用模块，并将`ngRoute`作为依赖注入其中。
```javascript
angular.module('myapp', ['ngRoute']);
```
### 3. 使用ng-view指令
在HTML模板中，添加`ng-view`指令，这个指令将会根据路由配置显示不同的视图。
```html
<body>
<ul>
<li><a href="#/">首页</a></li>
<li><a href="#/first">第一页面</a></li>
<li><a href="#/second">第二页面</a></li>
<li><a href="#/third">第三页面</a></li>
</ul>
<div ng-view></div>
</body>
```
### 4. 配置路由
在应用模块的配置阶段，使用`$routeProvider`来定义路由规则。每个`when`方法定义一个URL及其对应的视图内容。
```javascript
angular.module('myapp').config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', { template: '这是首页页面' })
.when('/first', { template: '这是第一个页面' })
.when('/second', { template: '这是第二个页面' })
.when('/third', { template: '这是第三个页面' })
.otherwise({ redirectTo: '/' });
}]);
```
### 5. 路由配置对象
路由配置对象允许我们自定义多种属性来控制路由行为：
- **template**: 直接在配置对象中写入HTML字符串作为视图内容。
- **templateUrl**: 如果视图内容来自外部HTML文件，可以指定文件路径。
- **controller**: 指定与当前视图关联的控制器，可以是函数、字符串或数组。
- **controllerAs**: 指定控制器的作用域变量名。
- **redirectTo**: 当匹配到当前路由时，自动重定向到其他URL。
- **resolve**: 在进入路由之前，先执行的依赖注入，确保所有依赖项都已准备就绪。
### 6. 路由效果
通过上述配置，当用户点击链接时，URL中的`#`后部分会被改变，但页面不会进行完整的刷新。相反，`ng-view`中的内容会被相应路由配置的模板替换，从而实现了页面的动态切换。
在实际开发中，我们可能需要更复杂的路由配置，如传递参数、处理动态路由、嵌套路由等。`ngRoute`模块提供了这些高级功能，使得AngularJS应用能够灵活地管理多个视图和控制器，提供丰富的用户体验。通过掌握`ngRoute`，开发者可以更好地构建交互式的单页应用程序，同时解决SEO问题，提升用户体验。
