angular 使用 ui-router 设计网页

div#cpmenu {height:200px;float:left;}
div#cpcontent {height:200px;width:150px;float:left;}

文章作者:松阳

原文链接: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中使用[email protected]的声明指定本state中子view对应的模板,例如:

//in js
$stateProvider
    .state(‘index‘, {
        url: ‘/index‘,
        views: {
            ‘‘: {
                templateUrl: ‘tpls/index.html‘
            },
            ‘[email protected]‘: {
                templateUrl: ‘tpls/form1.html‘
            },
             ‘[email protected]‘: {
                templateUrl: ‘tpls/form2.html‘
            }
        }
    })

//in html
<div class="container">
    <div ui-view="main1"></div>
    <div ui-view="main2"></div>
</div>   

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

添加触发器

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

	<ul>
	  <li ui-sref-active="active" class="item">
	    <a href ui-sref="app.user({user: ‘fansy‘})">@fansy</a>
	  </li>
	</ul>

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

配置路由

首先是 $urlRouterProvider

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

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

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

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

$urlRouterProvider.otherwise("/home");

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

然后是 $stateProvider

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

$state.go(‘home.state1‘);

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

	$stateProvider
		.state("home",{
			url:"/home",
			templateUrl:"tmpls/home.html",
			controller:function($scope,$state) {
				console.log("enter home");
			}
		})

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

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

最后

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

如果你觉得这篇文章对你有帮助,可以顺手点个顶,不但不会喜当爹,还能让更多人能看到它... 

时间: 2024-10-23 16:32:40

angular 使用 ui-router 设计网页的相关文章

angular 的ui.router 定义不同的state 对应相同的url

Angular UI Router: Different states with same URL? The landing page of my app has two states: home-public, home-logged-in. Now I want to show both states on the same URL, but let the controller and template depend on the user session (is the user log

angular : $location &amp; $state(UI router)的关系

次序:angular 的 location会先跑 $rootScope.$on("$locationChangeStart", function (scope, newUrl, oldUrl) { log("$locationChangeStart from " + oldUrl) log("$locationChangeStart to " + newUrl) }); 接着是 ui router $state $rootScope.$on(&q

[转]AngularJS 使用 UI Router 实现表单向导

本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的UI Router以及Angular ngAnimate module创建一个带动画的多步表单.这项技术可以用在你想要简化用户操作的大表单上. 我们看到这项技术已经应用在了许多的网页上.比如购物车,注册表单,入职流程以及许多多步表单,让用户更容易在线填写表单. 下面我们将构建它: 使用UI Rout

国内外人气UX/UI/PD设计社区推荐,纯干货

对于很多人尤其新手而言,要把握最新的设计动态及发展趋势,似乎不是一件轻松的事情.如果你也像我一样是个设计小白,而且正在担心自己设计的作品是否符合客户需求.烦恼找不到设计解决方案.得不到有效的用户反馈,那么你可以看看这里推荐的UX/UI/PD设计社区及论坛,也许可以得到一些启发. 1.Dribbble Dribbble是国外一个很出名的社区以及社交网络平台,它致力于帮助设计师建立团队和品牌.你可以从它的首页捕捉到当下流行的设计作品,但不是任何人都可以发布在线作品的.这里有很多网页设计师.平面达人.

转载:21个免费的UI界面设计工具、资源及网站

我们刚刚介绍了移动设计初探:触屏网页设计.本文将介绍一些UI界面与设计使用的元素.软件和网站.内容很丰富,适合用户体验设计师.界面设计师.产品设计师.JS前段开发.手机产品设计以及iPad和平板电脑产品设计等使用. Lumzy 官方地址:http://www.lumzy.com/ Lumzy是一个网站应用和原型界面制作工具.使用Lumzy,您可以轻松创建UI模型并即时发送到客户电脑中. Lumzy还具有团队协作编辑工具. Mockingbird 官方地址:https://gomockingbir

ui的设计原则

部分网页设计原则  规划目录结构时应当遵循的几个原则:  1.不要将所有文件都存放在根目录下;  2.按栏目内容分别建立子目录;  3.在每个主目录下都建立独立的images目录;  4.目录的层次不要太深;  5.切忌使用中文目录;  6.不要使用过长的目录;  7.尽量使用意义明确的目录.  除创意之外,在网站设计时还需要考虑以下基本原则:  1.网页内容要便于阅读;  2.站点内容要精.专和及时更新;  3.注重色彩搭配;  4.考虑带宽;  5.要适当考虑不同游览器.不同分辨率的情况; 

Angularjs中UI Router全攻略

摘自:Angularjs中UI Router全攻略 温馨提示:想要了解 angular-ui-router的同学,从上往下读一遍,能带随着coding那就更好了,保证你对angular-ui-router基本全部掌握. 如何引用依赖angular-ui-router angular.module('app',["ui.router"]) .config(function($stateProvider){ $stateProvider.state(stateName, stateCofi

UI产品设计流程中的14个要点

http://www.sj33.cn/digital/wyll/201404/38318.html 自从我在 Dribbble 上贴了一幅我的产品设计成果,受到了大家伙热烈的反馈,对此我深受鼓励,我决定写下这篇文章,用来记录我这两年里作为产品设计师,所学到的东西.说起来有点惭愧,这几年我一直都在使用同一套产品设计的流程,但是我觉得这套流程最适合我,对我来说是最理想的,所以就很少去更换.我的这套工作流程我觉得有 4 个地方可以和大家分享一下--前期工作.具体设计.后期工作以及一些提高效率的小细节

ngRoute 和 ui.router 的使用方法和区别

在单页面应用中要把各个分散的视图给组织起来是通过路由机制来实现的.本文主要对 AngularJS 原生的 ngRoute 路由模块和第三方路由模块 ui.router 的用法进行简单介绍,并做一个对比. ngRoute 使用方法 1) 引入 angular-route lib 无论是 ngRoute 还是 ui.router ,作为框架额外的附加功能,都必须以 模块依赖 的形式被引入. 1 <script src="lib/angular-route.js"></sc

不容错过!2016年度优秀UI/UX设计文章

本文整理了一些2016年度最受欢迎的文章,例如有关UI / UX设计的理论知识,书籍和工具,如何做出更好的设计的方法和建议,以及新的设计趋势. 1. 2017年用户体验设计趋势 我们期待着2017年用户体验设计将如何发展.同时,我们对用户体验的过去,现在,以及对将来的预测都有一些看法. 2. 设计是为什么? 某些方面来讲,这种知识是苦乐参半的. 没有什么是永恒的.你想做一个改变世界的东西,但是在很久以前,世界就已经改变了. 它不再激发同样的奇迹. 考虑到时间问题,我们总是要求得更多. 3. 设计