今天完成的事情：

1：小课堂如何使用ui-router？

2：article列表页面的新增，编辑功能；

3：修改公司列表页面搜索功能的省市区三级联动；

明天计划做的事情：

萝卜多复盘基本成型；功能应该都差不多了，明天整理下代码，再反复测试是否有bug；现在用的是之前的公用接

口等待后端接口写出来在做修改；

遇到的问题：article新增和编辑稍稍有点不同之处，新增时需要发送的数据中img的格式和编辑时获取的img不是一

种格式，做一些简单的赋值处理一下就好了；本来以为最简单的article页面还弄了好久，原因就在于自己没有仔细

阅读接口文档，也没那postman测试接口，导致白忙活好半天；

收获：动手做之前还是要做好准备工作，不然很可能会瞎忙活半天，不知道问题出在哪里/

如何使用ui-router？

1.背景介绍

2.知识剖析

首先，无论是使用哪种路由，作为框架额外的附加功能，它们都将以模块依赖的形式被引入，简而言之就是：在引入路由源文件之后，你的代码应该这样写(以ui.router为例)：

angular.module("myApp", ["ui.router"]);

// myApp为自定义模块，依赖第三方路由模块ui.router

其实ui.router和ngRoute大体的设计思路，对应的模块划分都是一致的(毕竟是同一个团队开发)，不同的地方在于功能点的实现和增强。

那么问题来了：ngRoute弱在哪些方面，ui.router怎么弥补了这些方面? 这里，列举两个最重要的方面：多视图、嵌套视图；

多视图

大多数的应用程序都可以分解为一个一个区块。最简单的情况，一个应用程序有头部（header）,主体内容（main content area），以及一个尾部（footer）。 通常一个应用程序会有一个额外的侧边栏（sidebar ）在页面的左边或者右边。

大多数用例中，这些区块将同时显示在页面上。Angular.js 的内置路由ngRoute只允许一个视图（ng-view）出现在页面上。这样限制的情况下，人们可以使用包含页面（ng-include）或者 其他的变通方法为应用创建一个布局（layout）或主页（master page）。UI-Router支持多样化视图，并且每一个视图都有自己相应的控制，所以每个区块都是封装好，可以复用到整个应用程序需要的地方

嵌入式试图

常见的例子中，一个应用的嵌入式页面一般是主页的详情页面，更具体的说，就是列表的详情页面。许多应用程序，都有列表页面，点击其中一个列表元素，可以进入到列表的详情页面。更进一步说，你点击列表中一个行的连接，进入一个 可查看 详情页面或是一个 可编辑 的表单；

如果列表页面和详情页面是单独分开的（或者他们被Angujar.js回调），使用Angular.js的内置路由ngRoute 是非常容易完成的。然而，如果你想要保持列表不变，而详情页面出现在列表的右边或者下面，这样就变得非常具有挑战性了

需要澄清的是，这样的要求可以使用ngRoute来完成。但是你需要让两个控制器（一个用于列表，一个用于显示和隐藏详情）共享一个视图。这样的结果不是理想的，因为我们想要列表和详情页面有各自的控制器和视图，并且职责单一（显示列表或者显示列表项目的详情）。封装这些用户接口模块到它们各自的视图，这样我们就有更多的“可组合UI”，允许我们将各个区块整合到一起，或者根据需求拆分。嵌入式视图，不仅能够让这些视图同时出现，还能让一个视图嵌入到另一个视图中

3.常见问题

如何使用ui.router

4.解决方案

UI-ROUTER的使用

a.引入两个文件，angular和angular-ui-router：

b.主页面中设置容器ui-view

c.然后在ng-app中注入ui-router

d.最后配置路由表

一个简单的ui.router结构示例

UI-Router 引进了状态机设计模式，抽象高于传统的路由。路由成了状态，URL就成了状态的一个简单属性

5.参考文献

菜鸟教程

UI-Router:为什么开发者都不喜欢Angular.js内置的路由

深入理解ANGULARUI路由_UI-ROUTER