angular 使用 ui-router 设计网页

前端之家收集整理的这篇文章主要介绍了angular 使用 ui-router 设计网页前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

这是个啥?

ui-router是一个web客户端的路由解决方案。我觉得它最大的作用是将web界面的设计分块了。

分块分层

最初的web访问模型,是这样的:


我们访问page1,然后访问page2....

在新的模型中它变成了这个样子:

访问效果是一样的,但是从设计上已经有了变化。它变成了:只有一张网页,在网页中有不同的区域,每个区域都可擦写。仔细想想好像也挺常见的,不知道其他技术是不是也这样

代码实现

原理讲完再简述一下实现吧

  1. 下载js文件,引入到index.html文件中。
  2. 在html中,添加注入位置:<div ui-view="">。它是当被触发注入时,填充的位置。
  3. 在html中,添加触发器:<ANY ui-sref="XXX">。XXX是$state,它遵循xxx.xxx的树形结构,渲染时从根节点开始渲染。
  4. 在app.js中,配置路由函数.config(function($stateProvider,$urlRouterProvider) {});

细说一下:

引入代码

没啥要细说的,要说就是路径别写错吧。

注入位置

对于多个分栏的结构,可以使用多个view的实现,然后反过来在config中使用bbb@AAA的声明指定本state中子view对应的模板,例如:

  1. //injs
  2. $stateProvider
  3. .state('index',{
  4. url:'/index',
  5. views:{
  6. '':{
  7. templateUrl:'tpls/index.html'
  8. },
  9. 'main1@index':{
  10. templateUrl:'tpls/form1.html'
  11. },
  12. 'main2@index':{
  13. templateUrl:'tpls/form2.html'
  14. }
  15. }
  16. })
  17. //inhtml
  18. <divclass="container">
  19. <divui-view="main1"></div>
  20. <divui-view="main2"></div>
  21. </div>

这个代码中将form1.html 和 form2.html 填充到了对应的的view中。

添加触发器

如果在标签添加ui-sref="xxx",未激活状态时,它是看不到的。具体描述可以看下官网. 通常我们都是激活状态,但有时总想自己控制一下。可以参考:

[html] copy
    <ul>
  1. liui-sref-active="active"class="item">
  2. ahrefui-sref="app.user({user:'fansy'})">@fansy</ali>

当user是fansy时,显示后面那行字。这个例子是官方的,我是没用明白这个功能,回头在研究吧。

配置路由

首先是$urlRouterProvider

它通常用来配置非$state的额外的路由.例如:

将默认页设置为/home的URL。注意哦,这里用的是URL,别写错成state了。

当然也可以写一个任何额外页面的定向:

这样访问其他阿猫阿狗的页面,就都跑到/home那去了。

然后是 $stateProvider

触发点是按层级来的,它遵守的路由规则可以从官网的,这个页面中找到。通过$state.go函数可以将状态位置强行切换,我们可以在任何一处写下面的js代码

另外,你也可以在$stateProvider 中对应的state里面配置controller,当这种state被激活,就会调用对应的函数了,例如:

[javascript] copy
    $stateProvider
  1. .state("home",{
  2. url:"/home",
  3. templateUrl:"tmpls/home.html",108); list-style:decimal-leading-zero outside; color:inherit; line-height:24px; margin:0px!important; padding:0px 3px 0px 10px!important"> controller:function($scope,$state){
  4. console.log("enterhome");
  5. @H_670_404@ })

每当状态变为home时,都输出一条日志。

最后,渲染是按层级来的。因此改变同级节点并不会重新渲染父节点。并且不改变状态就不会重新渲染。比如一直按同一个按钮,就不会重新渲染;没更改跟节点,点一个"刷新"按钮,也不会刷新整个页面

文章转载自:http://blog.csdn.net/fansongy/article/details/44162685

猜你在找的Angularjs相关文章