AngularJS路由深入解析与实战指南

"这篇资料详细介绍了Angular路由的使用和原理，是学习Angular路由的好材料。" 在Angular框架中，路由是实现单页应用程序（Single Page Application, SPA）导航的关键组件。它允许用户在不刷新整个页面的情况下切换视图，提供流畅的用户体验。`angular-route`模块是AngularJS官方提供的路由解决方案。 1. 路由基本概念 - ng-view: 这是Angular路由的核心指令，用于在页面中插入与当前路由匹配的模板。当路由改变时，ng-view会根据配置更新显示的内容。 - $location: 这是AngularJS中的一个服务，用于处理和监控浏览器地址栏的URL。它允许应用通过编程方式访问和改变URL。 2. $locationService配置 - `html5Mode`: 设置为`true`启用HTML5模式，此时URL中不再包含`#`符号，更符合传统Web应用的URL结构。默认为`false`，即使用哈希bang（`#`）模式。 - `hashPrefix`: 在HTML5模式下或在不支持History API的老浏览器中使用，用于设置哈希bang URL的前缀，默认为`""`。 示例配置： ```javascript $locationProvider.html5Mode(true).hashPrefix('!'); ``` 3. 安装步骤 - 引入AngularJS库和`angular-route.js`库，这两个库是实现路由功能所必需的。 ```html <script src="angular.js"></script> <script src="angular-route.js"></script> ``` 4. 创建模块并配置路由 - 首先，创建一个Angular模块，并注入`ngRoute`依赖。 ```javascript var myApp = angular.module('myApp', ['ngRoute']); ``` - 然后，使用`$routeProvider`配置不同的路由，定义每个路由的模板、控制器或其他参数。 ```javascript myApp.config(function($routeProvider) { $routeProvider .when('/view2/:viewId', { templateUrl: '...', controller: '...' }) .otherwise({redirectTo: '/default'}); }); ``` 在上述代码中，`when`方法用于定义路由规则，`/view2/:viewId`表示一个动态路由，`:viewId`是一个占位符，可以在路由变化时传递参数。`otherwise`则用于配置没有匹配到任何路由时的默认行为。 5. 路由实例 - 在HTML中，`<a>`标签的`href`属性可以链接到指定的路由，如`href="#/news"`。 ```html <a href="#/news">新闻</a> ``` 6. 视图嵌套 - Angular路由还支持视图的嵌套，可以通过多个`ng-view`指令实现多级视图结构。 ```html <div ng-view> <!-- 主视图 --> <div ng-view> <!-- 子视图 --> </div> </div> ``` 7. 子路由与子视图 - 可以在某个路由配置中定义子路由，以便在同一个父视图内加载不同的子视图。 通过理解并熟练运用这些知识点，开发者可以构建出功能丰富的Angular单页应用，实现灵活的页面导航和数据绑定。在实际开发中，还要注意兼容性问题，确保在不支持HTML5 History API的旧版浏览器中也能正常工作。