AngulerJS学习（三）路由

2024-04-27 15:19:32

字体：大中小

来源：转载

供稿：网友

简介

AngularJS 路由允许我们通过不同的 URL 访问不同的内容。通过 AngularJS 可以实现多视图的单页Web应用（single page web application，SPA）。通常我们的URL形式为 http://runoob.com/first/page，但在单页Web应用中 AngularJS 通过 # + 标记实现，例如： http://runoob.com/#/firsthttp://runoob.com/#/secondhttp://runoob.com/#/third当我们点击以上的任意一个链接时，向服务端请的地址都是一样的 (http://runoob.com/)。因为 # 号之后的内容在向服务端请求时会被浏览器忽略掉。所以我们就需要在客户端实现 # 号后面内容的功能实现。 AngularJS 路由就通过 # + 标记帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。

路由设置

路由功能主要是 $routePRovider 服务与 ng-view 实现。ng-view的实现原理，是根据路由的切换，动态编译html模板——compile(html)(scope)。语法规则：$routeProvider.when(url, { template: string, templateUrl: string, controller: string, function 或 array, controllerAs: string, redirectTo: string, function, resolve: object <key, function>}).otherwise();when()：配置路径和参数；otherwise：配置其他的路径跳转，可以想成default；template：如果我们只需要在 ng-view 中插入简单的 HTML 内容，则使用该参数；.when('/computers',{template:'这是电脑分类页面'})templateUrl：如果我们只需要在 ng-view 中插入 HTML 模板文件，则使用该参数；$routeProvider.when('/computers', { templateUrl: 'views/computers.html'});controller：对应路径的控制器函数，或者名称；controllerAs：string类型，为controller指定别名；redirectTo：重定向的地址；resolve：该属性会以键值对对象的形式，给路由相关的控制器绑定服务或者值。然后把执行的结果值或者对应的服务引用，注入到控制器中。如果resolve中是一个promise对象，那么会等它执行成功后，才注入到控制器中，此时控制器会等待resolve中的执行结果；reloadOnSearch：设置是否在只有地址改变时，才加载对应的模板；search和params改变都不会加载模板；caseInsensitiveMatch：路径区分大小写；

常用事件：

$ routeChangeStart：这个事件会在路由跳转前触发；$ routeChangeSuccess：这个事件在路由跳转成功后触发；$ routeChangeError：这个事件在路由跳转失败后触发；

使用

1、引入对应的js文件。

angular.js 和 angular-route.js，angular.js必须放在前边。因为 angular-route.js 会使用到 window.angular 这个参数，而这个参数只有在加载完 angular 才会出现。

2、HTML

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <script type="text/Javascript" src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-route.min.js"></script> <script type="text/javascript" src="index.js"></script></head><body ng-app="Demo"> <ul> <li><a href="#/">首页</a></li> <li><a href="#/computers">电脑</a></li> <li><a href="#/printers">打印机</a></li> <li><a href="#/blabla">其他</a></li> </ul> <div ng-view></div></body></html>

3、JS/Route

angular.module('Demo', ['ngRoute']) .config(['$routeProvider', function($routeProvider) { $routeProvider .when('/', { template: '这是首页页面' }) .when('/computers', { template: '这是电脑分类页面' }) .when('/printers', { template: '这是打印机页面' }) .otherwise({ redirectTo: '/' }); }]);

上一篇：MyBatis(九) resultType 和 resultMap 总结

下一篇：平时遇到的问题及其解决方案