代码实现 原理讲完再简述一下实现吧 下载js文件，引入到index.html文件中。 在html中，添加注入位置: <div ui-view="">。它是当被触发注入时，填充的位置。 在html中，添加触发器：<ANY ui-sref="XXX">。XXX是$state，它遵循xxx.xxx的树形结构，渲染时从根节点开始渲染。 在app.js中，配置路由函数 .config(function($stateProvider,$urlRouterProvider) {}); scope是angularJS中的作用域(其实就是存储数据的地方)，很类似javascript的原型链 。搜索的时候，优先找自己的scope，如果没有找到就沿着作用域链向上搜索，直至到达根作用域rootScope。 　　$rootScope是由angularJS加载模块的时候自动创建的，每个模块只会有1个rootScope。rootScope创建好会以服务的形式加入到 $injector中。也就是说通过 $injector.get("$ rootScope ");能够获取到某个模块的根作用域。更准确的来说，$rootScope是由angularJS的核心模块ng创建的。 　　scope是html和单个controller之间的桥梁，数据绑定就靠他了。rootscope是各个controller中scope的桥梁。用rootscope定义的值，可以在各个controller中使用 1、event 这里可以有两种方式，一种是$scope.$emit，然后通过监听$rootScope的事件获取参数；另一种是$rootScope.$broadcast，通过监听$scope的事件获取参数。 这两种方法在最新版本的Angular中已经没有性能区别了，主要就是事件发送的方向不同，可以按实际情况选择。 2、service 可以创建一个专用的事件Service，也可以按照业务逻辑切分，将数据存储在相应的Service中，因为已经有人提过了就不赘述了。 3、$rootScope 这个方法可能会比较dirty一点，胜在方便，也就是把数据存在$rootScope中，这样各个子$scope都可以调用，不过需要注意一下生命周期 4、直接使用$$nextSibling及类似的属性 类似的还有$scope.$parent。这个方法的缺点就更多了，官方不推荐使用任何$$开头的属性，既增加了耦合，又需要处理异步的问题，而且scope的顺序也不是固定的。不推荐 这是个啥？ ui-router是一个web客户端的路由解决方案。我觉得它最大的作用是将web界面的设计分块了。 分块分层 最初的web访问模型，是这样的： 我们访问page1，然后访问page2.... 在新的模型中它变成了这个样子： 访问效果是一样的，但是从设计上已经有了变化。它变成了：只有一张网页，在网页中有不同的区域，每个区域都可擦写。仔细想想好像也挺常见的，不知道其他技术是不是也这样 代码实现 原理讲完再简述一下实现吧 下载js文件，引入到index.html文件中。 在html中，添加注入位置: <div ui-view="">。它是当被触发注入时，填充的位置。 在html中，添加触发器：<ANY ui-sref="XXX">。XXX是$state，它遵循xxx.xxx的树形结构，渲染时从根节点开始渲染。 在app.js中，配置路由函数 .config(function($stateProvider,$urlRouterProvider) {}); 细说一下： 引入代码 没啥要细说的，要说就是路径别写错吧 。 注入位置 对于多个分栏的结构，可以使用多个view的实现，然后反过来在config中使用bbb@AAA的声明指定本state中子view对应的模板，例如： //in js $stateProvider .state('index',{ url: '/index',views: { '': { templateUrl: 'tpls/index.html' },'main1@index': { templateUrl: 'tpls/form1.html' },'main2@index': { 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时，都输出一条日志。 最后，渲染是按层级来的。因此改变同级节点并不会重新渲染父节点。并且不改变状态就不会重新渲染。比如一直按同一个按钮，就不会重新渲染；没更改跟节点，点一个"刷新"按钮，也不会刷新整个页面