一、标题组件的设计思路：
1、标签内属性传参
(1)标题内容
2、模板
(1)
(2) {{title}}
3、控制器（空），link（空）
二、局部加载组件的设计思路：
1、标签内属性传参
(1)图片名称
(2)是否旋转
(3)是否出现
2、模板
(1)
3、控制器（空），有link
(1)如果旋转，使用ele.addClass("")，也可以ele.css({})
三、全局加载组件的设计思路：
1、标签内属性传参（无）
2、模板
(1)根标签，是否显示（由请求结果赋值）、class（蒙版和蒙版下的图片）
(1)子标签，A、局部加载组件的标签，标签内有属性传参图片名称、旋转class，B、文字提示
3、控制器（空），link（空）
四、全局提示组件的设计思路和全局提示服务：
1、标签内属性传参（无）
2、模板
(1)根标签，class（蒙版和蒙版下的图片）
(2)子标签，遍历数组，绑定提示文字
3、控制器
(1)接收全局提示服务
4、全局提示服务
(1)定义空数组和提示对象
(2)定义设置函数，参数为提示内容，在函数内部把提示内容放进提示对象、把提示对象放进空数组、执行单次定时器(遍历数组，删除数组中的该提示对象)
五、开关组件的设计思路
1、标签内属性传参
（1）参数1为是否受其它开关控制的数据，此参数定义在控制开关里
(2)参数2为本条数据，包含控制本开关的参数，也可能有向后台发送请求的回调函数
2、模板
（1）可变化的图片名，图片名和参数2中控制开关的属性相关联，比如：ng-src="{{'./'+config[data.value]+'.png'}}"
(2)点击函数执行
3、控制器
（1）配置图片名，$scope.config = { 0: 'switch-off'}
(2)定义点击函数，内有$scope.data.value = 0
4、定义点击函数时，应考虑的因素
（1）是否受其它开关控制
(2)是否向后台发送请求、根据请求结果给控制开关的参数赋值；
(3)给控制开关的参数赋值
六、分页组件的设计思路和分页服务：
1、标签内属性传参
（1）参数1为对象，包含：基本数据，比如总条数、总页数、当前页、文字说明
(2)参数2为对象，包含：A、向后台发送请求的请求配置，B、请求成功后应执行的回调函数
2、模板
（1）左侧：上一页、页码、当前页、页码、下一页、跳转框、跳转按钮
(2)右侧：文字说明，如未读多少条、已读多少条
3、控制器
（1）定义请求函数
(2)定义显示页码框函数
(3)点击页码函数，内部执行请求函数、显示页码框函数
(4)勾选显示函数，翻页后各复选框是否显示勾选的函数，本函数需要当前页传进来的数据作为参数
4、分页服务（略）
七、弹窗组件的设计思路和弹窗服务：
1、标签内属性传参（无）
2、模板
(1)遮罩，点击函数
(2)弹窗，A、标题（a、文字，b、关闭），B、内容（a、文字，b、有作用域模板，c、无作用域模板），C、结尾行（a、取消按钮，b、确认按钮含回调）
3、控制器
(1)标题关闭函数
(2)结尾行关闭函数
4、弹窗服务
(1)初始化各种文字、是非、回调
(2)定义配置函数（更改弹窗的配置）并处理各种情形
5、弹窗组件和弹窗服务的逻辑
(1)弹窗的HTML部分作为body标签的一个子标签
(2)在控制器里，需要弹窗，注入弹窗服务
(3)调用弹窗服务的配置函数，配置弹窗
八、复选框服务：
1、各种初始化，比如单选状态初始化、当前页全选状态初始化、所有页全选状态初始化、被选中项数组初始化、被选中项取消选中数组初始化；
2、各种点击函数，比如点击单选函数、点击当前页全选函数、点击所有页全选函数、获取所有被选中项id函数；
九、请求服务
1、引进异步请求服务$q，获取“异步请求成功函数”
2、(如果有请求提醒弹窗，确认后)执行向后台“发送请求函数”
3、返回“异步请求成功实例”
4、定义“发送请求函数”。(1)参数处理(包含是否转圈)；(2)执行$http服务，A、在返回值里，根据下列条件之一(a)执行注入函数(b)提示登录过期(c)提示操作失败，来执行；B、取消转圈
附：项目总脉络，index.html=> main.js=> common-dir模块及其下标签=> ui-view => login
1、定义应用模块 angular.module('app', [])
2、在模块加载阶段执行，对模块进行自定义配置 angular.config(function ($urlRouterProvider) { $urlRouterProvider.otherwise('/login');})
(1)登陆成功后，根用户=返回的用户信息、sessionStorage.setItem(根用户,返回的用户信息)
(2)根据返回的用户信息，给左侧导航栏赋值
(3)状态go为导航栏第1栏第1个选项卡
3、angular应用最先执行的方法，只在启动的时候运行一次，定义全局的数据或逻辑
```javascript
angular.run(function ($rootScope) {
/*此处可以初始化全局变量*/
$rootScope.$on('$stateChangeStart',
function (event, toState) {
/*状态即将改变时，执行此函数
1、先检查用户名，如果用户名为空，则跳往登录页面
2、点击当前页的跳转，如果前往的状态不存在，则阻止默认事件并且给出弹窗提醒*/
}
);
$rootScope.$on('$stateChangeSuccess',
function (event, toState) {
/*状态改变完成时，执行此函数
1、当前状态=目标状态，在HTML页面，如果点击函数(item)中item.state===当前状态，那么改变item的样式
2、根选项卡=item.sub，在HTML页面，遍历根选项卡*/
}
);
})
```
4、页面右上方有退出登录按钮，
(1)退出成功后，根用户=null、sessionStorage.removeItem(根用户)
(2)状态go为登录
5、导航栏和选项卡关联
(1)遍历左侧导航栏，绑定文字内容、点击函数(item)、样式；
(2)点击函数(item)，根选项卡=item.sub；