angularjs ui-router

ngRoute是Angular自带的路由。ui-router是Angular的第三方路由。他们之间的区别：主要的就是ngRoute针对于单视图<div ng-view></div>，而ui-router可用于多视图,一个页面可以用多个<div ui-view></div>。

一：下面是ui-route的例子，index.html：

index.html

这个是首页index.html。想实现点击类似于导航一样的跳转。默认显示hello的内容，点击world以后，hello内容隐藏，world内容显示。如图：

当点击welcome或者beijing的时候，welcome或者beijing的内容显示：如图：

这是点击beijing显示的

二：下面是ui-route的例子，world.html

world.html

注意：welcome的ui-sref =" .welcome"， 而beijing的ui-sref ="beijing".一个有点一个没点。

三：下面是ui-route的例子，app.js:

app.js

1:结合上面的html，首先说下ui-sref：

ui-sref 是一种将链接（标签）绑定到一个状态的指令，点击这个链接将触发一个可以带参数的状态转换。

所以：.state('hello-world',{...}

这里面的state就是ui-sref里面的名称，也就是：请求的地址。如果不是用ui-sref呢，这个state的值是和点击的时候触发的请求链接地址是一样的，可以产生链接。

其次：

.state('world',{

url:'/worlda',

templateUrl:'/ui-route/world.html'

})

这里面的url其实就是在链接地址里面显示给别人看的，也就是#后面显示的地址，他和state可以不一样。

再说下.state('world.welcome',{...}  这意思是说welcome的父级是world，所以welcome的模板要放到world模板中的ui-view中。这时的url是在world页面的url后的url。所以：如图：

we

所以，点击welcome的时候显示了welcome to .......这个welcome  to .......其实占用的是index.html中的ui-view的位置，而不是world.html中的ui-view的位置。当点击beijing的时候显示的内容才是world.html里的ui-view的位置。

四：ui-sref 带参数的跳转

ui-sref可以传多个参数，传参用（{id:yourId}）这种方式传。如下：

view

比如，路由里面设置了3个参数，view只有两个参数可传，第三个参数不传，那么，第三个参数可以不写。如果参数为一个变量，则用"{{}}" 来写。

那么，路由里面怎么设置参数名称呢？如下：

路由里面设置参数

用问号开始参数设置，：参数名：参数名 ，或者 &参数名&参数名这种形式。

最后controller里面接收参数，跟ng-router不一样，ui-sref的接收参数在controller里面是用$stateParams接收。如下：

controller接收参数

要引进全局变量$stateParams,才可以接收参数。如果其中某个参数没有传，则打印出来的该参数为：undefind。