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对应的模板，例如：

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

添加触发器

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

大佬总结

以上是大佬教程为你收集整理的angular 使用 ui-router 设计网页全部内容，希望文章能够帮你解决angular 使用 ui-router 设计网页所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。