angular-ui-router

ui-router和同属性的AngularJS框架一部分的ng-route一样强大。ui-router提供了让我们可以做路由嵌套和视图命名的特征。

实战

一般针对需求，我们可以使用AngularJS框架来创建简单的html和JavaScript页面。下面我们将创建3个HTML页面和一个JavaScript脚本文件
   一开始我们创建一个空的web应用程序，并加入三个HTML页面。如下所示，这些页面都是片段视图。它们会在导航过程中展示。我们还要为能展示应用程序的Tab，创建另外一个叫做PageTab.html的页面
  因此我们先创建以下文件：
1，Page1.html
2，Page2.html
3，Page3.html
4，PageTab.html

Page1.html

创建如下的html页面：

  

    我踏遍轮回，只为与你相遇
  

Page2.html

创建如下的html页面：

  

    我要这天再也遮不住我的眼
  

Page3.html

创建如下的html页面：

  

    要这地再也埋不住我的身
  

PageTab.html

创建如下的html页面：

  

    Page-1
    Page-2
    Page-3
  

这将会使页面文本处在侧边，并添加当用户鼠标悬停在文本上的时候的超链接。
  我们没有指向任何超链接，只是为了把链接放在href中，实际上这是一种获取url的解决方式
  到目前为止，我们还没有插入任何AngularJS路由或者其它任何框架。目前我们只是创建了一些页面片段，我们需要一个占位或者说父页面来装下这些东西，我们可以将这个页面起名为Main.html

Main.html

用如下内容创建这个html页面

  
  
  
  


  AngularJS Home Page (Ui-router Demostration)
  

我们需要在主页上做一些事情，（1）我们需要引入AngularJS框架（2）需要引入ui-router框架（3）引入AngularJS文件App.js（4）让主页内容展示出来，然后显示出它里面的页面
  而App.js文件的内容，我们声明了AngularJS模块和路由配置。当页面加载的时候我们会在Main.html中显示PageTab.html的内容。代码如下

App.js

var myApp=angular.module("myApp",['ui.router']);
myApp.config(function($stateProvider,$urlRouterProvider){
  $urlRouterProvider.when("","/PageTab");
  $stateProvide

.state("PageTab",{
      url:"/PageTab",
      templateUrl:"PageTab.html"
    })
    .state("PageTab.Page1",{
      url:"/Page1",
      templateUrl:"Page-1.html"
    })
    .state("PageTab.Page2",{
      url:"/Page2",
      templateUrl:"Page-2.html"
    })
    .state("PageTab.Page3",{
      url:"/Page3",
      templateUrl:"Page-3.html"
    });
});

现在来解释这些步骤都是干啥的

代码行

1，第一行，声明AngularJS模块，并把ui-router传入AngularJS主模块，所有的结合起来我们就得到了Angular模块

var myApp=angular.module("myApp",['ui.router']);

这里叫做App模块，这将告诉HTML页面这是一个AgularJS作用的页面，它的内容有AngularJS引擎来解释
2，这一行声明了把$stateProvider和$urlRouterProvider路由引擎作为函数参数传入，这样我们就可易为这个应用程序配置路由了

myApp.config(function($stateProvider,$urlRouterProvider){

3，下面一行的意思是：如果没有路由引擎能匹配当前的导航状态，那它就会默认将路径路由至PageTab.html，这个页面就是状态名称被声明的地方。只要理解了这个，那么它就像switch case语句中的default选项

$urlRouterProvider.when("","/PageTab");

语句块

1，这一行定义了会在Main.html页面第一个显示出来的状态，作为页面被加载好以后第一个被使用的路由

$stateProvide
    .state("PageTab",{
      url:"/PageTab",
      templateUrl:"PageTab.html"
    })

这就是向母版页的子页面，应用程序会首先加载这个main.html页面
2，现在，就由这一行来定义页面，但是，这里又有点不同，我们之前为上面的状态名称加上了前缀，并且使用点"."号进行了分隔，这里很关键，它会告诉路由引擎我们在这里定义的是子页面/嵌入页面/嵌入状态的page/route.

.state("PageTab.Page2",{
      url:"/Page2",
      templateUrl:"Page-2.html"
    })

它将会在"PageTab.html"页面显示出来，它的意思是：当我们想要在母版页中管理所有的页面时，我们就会想要一个叫做"ui-view"的占位标记。因此我们现在把PageTab.html佳作一个母版页，因为它会把我们需要在PageTab.html中用"ui-view"声明好的其它页面都管理起来。现在我们再来修改这段代码

PageTab.html

  

    Page-1
    Page-2
    Page-3
  

  

    

  

下面一行：

也就是说PageTab.html将对装下所有的子页面
现在一切就绪，但是页面应该显示哪个页面呢。这就是我们要在路由引擎里面配置的东西，如下所示

.state("PageTab.Page2",{
      url:"/Page2",
      templateUrl:"Page-2.html"
    })

Page2.html将会在被叫做PageTab的状态中显示，它就是PageTab.html
  但是我们还落下啥事没做，这事就是当我们在 Page-1 或者 Page-2 再或者 Page-3 菜单上点击的时候需要页面在占位标记那里显示出来，是不 ?
  还真是把那一块给忘啦，我们还没有为路由和这种逻辑建立起联系, 想象一下如果那是href的话，就意味着我们可以指定将会锚向页面里面的ID名称, 如果它是简单的html本地引用就是这样，但我们则需要按照需求显示不同的页面.
关键的地方在这里. (ui-sref) 我们需要再一次修改 PageTab.html，如下所示.,

  

    Page-1
    Page-2
    Page-3
  

  

    

  

注意，只是上面高亮的部分发生了改变 , 这里我们只是简单的将App.js中定义的状态同tab中定义的对应文本进行了关联. 当我们使用点符号对它进行了声明，程序就会认为页面时ui-view中的子页面或者说嵌入页面，它们就是路由配置中需要被展示的页面.

AngularJS ui-router-组件：

$state/$stateProvider:管理状态定义，当前状态和状态的转换。包含触发状态转换的事件和回调函数，异步解决目标状态的任何依赖项，更新$location到当前状态。由于状态包含关联的url，通过$urlRouterProvider生成一个路由规则来执行转换的状态。
ui-view指示器：渲染状态中定义的视图，是状态中定义的视图的一个占位符。
$urlRouter/$urlRouterProvider：管理了一套路由规则列表来处理当$location发生变化时，如何跳转。最低级的方式是，规则可以是任意函数，来检查$location，并在处理完成时返回true。支持正则表达式规则和通过$urlMatcherFactory编译的UrlMatcher对象的url占位符规则。
$urlMatcherFactory：将url和占位符编译为UrlMatcher对象。除了$routeProvider支持的占位符语法之外，它还支持扩展语言，允许一个正则表达式指定占位符，并且能够提取命名参数和查询url的一部分。$templateFactory-通过$http/$templateCache来加载模块，供状态配置中使用

关于嵌套路由

所谓嵌套路由，就是视图里还可以再嵌套视图，路由里还可以在嵌套路由，并且通过ui-router，可以实现不同视图之间的参数传递

关于ui-router的简单使用

ui-router定义路由的时候，与ngRouter不一样，它是使用.来进行定义的，并且在html标签中，不使用ng-view，而是使用ui-view，比如:

ui-router提供了$stateProvider,$urlRouterProvider来定义路由，具体使用如下：

/* 使用ui-router来进行路由定义，需要注入ui.router模块 */
var myApp = angular.module('myApp', ['ui.router']);

/* 注入$stateProvider，$urlRouterProvider */
myApp.config(['$stateProvider', '$urlRouterProvider', function ( $stateProvider, $urlRouterProvider ) {

/* 使用when来对一些不合法的路由进行重定向 */
$urlRouterProvider.when('', '/main');

/* 通过$stateProvider的state()函数来进行路由定义 */
$stateProvider.state('main', {
    url: '/main',
    templateUrl: 'views/main.html',
    controller: 'MainCtrl'
}).state('detail', {
    url: '/main/detail/store',
    templateUrl: 'views/detail.html',
    controller: 'DetailCtrl'
})

$stateProvider.state('404', {
    url: '/404',
    templateUrl: '404.html'
})

}]);

ui-router-路由控制$stateProvider

在我们的应用中大多数状态都有与其相关联的url，路由控制不是设计完成state之后的事后想法，而是在开始开发时就应该考虑的问题
如何设置一个基本的url：

$stateProvider
.state('contacts',{
url:"/contacts",
templateUrl:'contacts.html'
})

当我们访问index.html/contacts时，‘contacts’状态将被激活，同时index.html中的ui-view将被‘contacts.html’填充。或者，通过transitionTo('contacts')方法将状态转变到‘contacts’状态，同时url将更新为index.html/contacts。
状态被激活时，它的模板会自动插入到父状态对应的模块中包含ui-view属性的元素内部。如果是顶层的状态，那么它的父模板就是index.html

激活状态

有三种方法来激活状态：
1调用$state.go()方法，这是一个高级的遍历方法
2点击包含ui-sref指令链接
3导航到与状态相关连的url

Templates模块

可以通过下面几种方式来配置一个状态的模块

方法一

配置template属性，指定一段HTML字符串，这是设置模块的最简单打方式

$stateProvider.state('contact',{
template:'

my contacts

'
})

方法二

配置templateUrl属性，来加载到指定位置的模块，这就是设置模块的常用方法

$stateProvider.state('contacts',{
templateUrl:'contacts.html'
})