AngularJS 避繁就简的路由是构建现代单页Web应用（SPA）的核心组件之一，它简化了URL管理，使得用户可以通过不同的URL路径浏览不同的内容而无需刷新整个页面。在AngularJS中，路由功能主要由`$routeProvider`服务提供，该服务允许开发者定义和配置路由规则。
首先，理解`$routeProvider`的配置对象及其属性方法至关重要。这个对象用于配置URL模式（`when()`方法）和与之关联的行为。其主要属性和方法包括：
1. `when(url, config)`：
- `url`：路由匹配的URL模式，如 '/home'、'/computer'。
- `config` 是一个对象，包含以下键值对：
- `template` 或 ` templateUrl`：分别表示HTML模板字符串或模板文件的URL。这是实际展示的视图内容。
- `controller`：可以是字符串（指向一个已经存在的控制器），函数（创建一个新的控制器实例），或者数组，表示控制器的名称和依赖关系。
- `controllerAs`：如果设置了，控制器将以指定的别名暴露给视图。
- `redirectTo`：如果设置，当路由匹配时，会自动重定向到这个URL或执行提供的函数。
- `resolve`：一个对象，其中的键是依赖的模块名称，值是对应的工厂函数。这些工厂函数会在控制器实例化之前异步加载数据。
实现AngularJS路由的基本步骤如下：
1. **导入ngRoute模块**：确保在应用中引入AngularJS的路由模块，通常是在`<script>`标签中引用`angular-route.min.js`。
2. **启用ngRoute在应用模块中**：在Angular应用初始化时，通过`angular.module()`注册并依赖`ngRoute`模块，如`angular.module('routeApp', ['ngRoute'])`。
3. **使用ng-view指令**：在HTML结构中添加`<div ng-view>`标签，作为内容区域，它会在匹配到的路由规则下显示对应的视图内容。同时，可以指定一个默认的控制器，如`ng-controller='defaultCtrl'`。
4. **配置路由规则**：在`.config()`方法中调用`$routeProvider.when()`方法，为每个路由路径定义具体的模板、控制器等配置。例如：
```javascript
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home.tpl.html',
controller: 'HomeCtrl',
})
.when('/computer', {
templateUrl: 'computer.html',
})
// 添加其他路由规则...
}])
```
通过以上步骤，AngularJS路由允许开发者轻松地管理应用的视图和导航逻辑，提高了用户体验和代码的可维护性。在实际开发中，可能还会涉及嵌套路由、参数绑定、状态管理等高级功能，但基本的配置流程和理解`$routeProvider`的配置对象是入门的关键。
我的内容管理
展开
