angular 使用 ui-router 设计网页

转载 2016年06月02日 11:20:40

目录(?)[+]


文章作者:松阳

本文出自 阿修罗道,禁止用于商业用途,转载请注明出处。  

原文链接:http://blog.csdn.net/fansongy/article/details/44162685







这是个啥?

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. //in js  
  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.       
  18. //in html       
  19. <div class="container">  
  20.     <div ui-view="main1"></div>  
  21.     <div ui-view="main2"></div>  
  22. </div>     

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

添加触发器

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


[html] view plain copy
 print?在CODE上查看代码片派生到我的代码片
  1. <ul>  
  2.   <li ui-sref-active="active" class="item">  
  3.     <a href ui-sref="app.user({user: 'fansy'})">@fansy</a>  
  4.   </li>  
  5. </ul>  


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

配置路由

首先是 $urlRouterProvider

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

  1. $urlRouterProvider.when("","/home");  

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

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

  1. $urlRouterProvider.otherwise("/home");  

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

然后是 $stateProvider

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

  1. $state.go('home.state1');  

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


[javascript] view plain copy
 print?在CODE上查看代码片派生到我的代码片
  1. $stateProvider  
  2.     .state("home",{  
  3.         url:"/home",  
  4.         templateUrl:"tmpls/home.html",  
  5.         controller:function($scope,$state) {  
  6.             console.log("enter home");  
  7.         }  
  8.     })  


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

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

最后

其他详细可以看它的主页 ,另外有一篇 好文章 也值得借鉴.

相关文章推荐

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

AngularJS 路由:ng-route 与 ui-router

AngularJS的ng-route模块为控制器和视图提供了[Deep-Linking]URL。 通俗来讲,ng-route模块中的$routeService监测$location.url()的变...
  • yangjvn
  • yangjvn
  • 2015年08月16日 17:34
  • 26251

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

ui-router

通过AngularJS来创建SPA(single page application),要想让页面导航看起来跟一般Web页面一样的话,路由相当重要。AngularUI Router是AngularUI ...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

angular UI-Router示例一

一、选择angular-ui-router的好处 ui-router是一个社区库用来完善ng-route的诸多不足 UI-Router路由器允许嵌套视图(nested views)和多个命名视...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

angular 使用 ui-router 设计网页

这篇文章主要介绍了angular中如果使用ui-router使用,并总结了一些常见的用法
  • fansongy
  • fansongy
  • 2015年03月09日 23:06
  • 48363
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:angular 使用 ui-router 设计网页
举报原因:
原因补充:

(最多只允许输入30个字)