AngulerJS学习（三）路由

来源：互联网发布：复制目录 linux 编辑：程序博客网时间：2024/06/06 00:18

简介

AngularJS 路由允许我们通过不同的 URL 访问不同的内容。
通过 AngularJS 可以实现多视图的单页Web应用（single page web application，SPA）。
通常我们的URL形式为 http://runoob.com/first/page，但在单页Web应用中 AngularJS 通过 # + 标记实现，例如：
- http://runoob.com/#/first
- http://runoob.com/#/second
- http://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: '/'            });    }]);

补充:
上述讲述的路由方式是 ngRoute
下面讲述的路由方式是 uiRoute

原文：（UI-Router:为什么开发者都不喜欢Angular.js内置的路由）http://www.jianshu.com/p/35c0acdea86c

前言

Angular.js 是一个用来构建“富客户端”的神奇JavaScript框架。但是事实却是许多开发者却不使用其内置的路由模块。反而使用AngularUI项目的 UI-Router模块来代替之。
这是因为UI-Router有两个重要的特性：

多样化视图：
大多数的应用程序都可以分解为一个一个区块。最简单的情况，一个应用程序有头部（header）,主体内容（main content area），以及一个尾部（footer）。
通常一个应用程序会有一个额外的侧边栏（sidebar ）在页面的左边或者右边。

Angular.js 的内置路由 ngRoute 只允许一个视图（ng-view）出现在页面上。这样限制的情况下，人们可以使用包含页面（ng-include）或者其他的变通方法为应用创建一个布局（layout）或主页（master page）。UI-Router 支持多样化视图，并且每一个视图都有自己相应的控制，所以每个区块都是封装好，可以复用到整个应用程序需要的地方。
嵌入式视图：
常见的例子中，一个应用的嵌入式页面一般是主页的详情页面，更具体的说，就是列表的详情页面。许多应用程序，都有列表页面，点击其中一个列表元素，可以进入到列表的详情页面。更进一步说，你点击列表中一个行的连接，进入一个可查看详情页面或是一个可编辑的表单。

如果列表页面和详情页面是单独分开的（或者他们被Angujar.js回调），使用Angular.js的内置路由ngRoute 是非常容易完成的。然而，如果你想要保持列表不变，而详情页面出现在列表的右边或者下面，这样就变得非常具有挑战性了。
需要澄清的是，这样的要求可以使用ngRoute来完成。但是你需要让两个控制器（一个用于列表，一个用于显示和隐藏详情）共享一个视图。这样的结果不是理想的，因为我们想要列表和详情页面有各自的控制器和视图，并且职责单一（显示列表或者显示列表项目的详情）。封装这些用户接口模块到它们各自的视图，这样我们就有更多的“可组合UI”，允许我们将各个区块整合到一起，或者根据需求拆分。嵌入式视图，不仅能够让这些视图同时出现，还能让一个视图嵌入到另一个视图中。

使用

下载

下载源码文件，或者混淆压缩后版本：
src版本：http://angular-ui.github.io/ui-router/release/angular-ui-router.js
min版本：http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js

引入依赖

// 引入文件之后：var myApp = angular.module('myApp', ['ui.router']);

路由状态机

var app = angular.module('demo', ['ui.router']);app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {    $urlRouterProvider.otherwise('/');    $stateProvider        .state('home', {            url:'/',            templateUrl: 'templates/home.html',            controller: 'HomeController'        })        .state('about', {            url:'/about',            templateUrl: 'templates/about.html',            controller: 'AboutController'        })}]);

页面对应使用：

<!-- 使用，通过ui-sref创建一个链接，使用的是状态而不是URL --><a ui-sref="home">Home</a><!-- 放弃 --><a href="#/">Home</a>

stateProvider 替换 routeProvider
当使用UI-Router时，为 Angular.js 服务注入路由支持，就由 routeProvider 和 ngRoute 变成了 stateProvider。
urlRouterProvider
urlRouterProvider 在这里有两个主要目的。
一是建立一个默认路由，用于管理未知的URL（统一跳转到某处）。
二是监听浏览器地址栏URL的变化，重定向到路由定义的状态中。
urlRouterProvider 让我们处理状态机抽象的 stateProvider 没有检测到的情况。

app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {    $urlRouterProvider.otherwise('/');    ...}]);app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {    $urlRouterProvider        .when('/legacy-route', {            redirectTo: '/'        });}]);

控制器中使用

下面例子展示的是，如果在一个控制器中重定向一个状态。

$scope.redirectToAbout = function(){    $state.go('about'); }

ngRoute 和 ui.router 服务和指令

ngRoute
- routeProvider(服务提供者)：对应于下面的urlRouterProvider 和 stateProvider
- route(服务)：对应于下面的urlRouter和state
  -routeParams(服务)：对应于下面的stateParams
- ng-view(指令)：对应于下面的ui-view
ui.router
- urlRouterProvider(服务提供者)：用来配置路由重定向
- urlRouter(服务)
- stateProvider(服务提供者)：用来配置路由
- state(服务)：用来显示当前路由状态信息，以及一些路由方法（如：跳转）
- stateParams(服务)：用来存储路由匹配时的参数
- ui-view(指令)：路由模板渲染，对应的dom相关联
- ui-sref(指令)
- 。。。。。。

0 0

AngulerJS学习（三） 路由

简介

路由设置

使用

前言

使用

下载

引入依赖

路由状态机

控制器中使用

AngulerJS学习（三）路由