angular1常用组件和服务的设计思路

一、标题组件的设计思路:
1、标签内属性传参
(1)标题内容
2、模板
(1)<img ng-src="{{'./title.png'}}">
(2) <span>{{title}}</span>
3、控制器(空),link(空)

二、局部加载组件的设计思路:
1、标签内属性传参
(1)图片名称
(2)是否旋转
(3)是否出现
2、模板
(1)<img ng-src="{{'./'+name+'.png'}}">
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应用最先执行的方法,只在启动的时候运行一次,定义全局的数据或逻辑

4、页面右上方有退出登录按钮,
(1)退出成功后,根用户=null、sessionStorage.removeItem(根用户)
(2)状态go为登录
5、导航栏和选项卡关联
(1)遍历左侧导航栏,绑定文字内容、点击函数(item)、样式;
(2)点击函数(item),根选项卡=item.sub;

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复