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

原创 前端工程师_钱成 随笔 Angular 114阅读 2018-11-09 21:47:29 举报

组件使用时的标签里,可以给组件模板根标签,设置属性。
一、标题组件的设计思路:
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(蒙版和蒙版下的图片)
(2)子标签,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)参数:ID名;
(2)固定数据:isSelected,allSavedId,allRemovedId;
(3)处理固定数据的方法(用到"ID名"):clickSingleItemCheckbox、clickSinglePageCheckbox、clickAllPagesCheckbox、turnPage;
2、分页可变数据注入服务(注入到页面后,注入到分页)
(1)在页面传入的参数:method、url、isSendKey、toServerPageKey、toServerParameterKey、currentPageKey、allPagesKey、totalItemsKey;
(2)处理参数的方法,来自服务自身;
(3)在页面给服务实例增加属性callback函数,在callback内部,添加3(1)中的数据,给1(3)中的turnPage传参并执行;
3、页面数据对象(在页面请求函数的返回里生成,注入到分页)
(1)可能有可能无:text、number、unit;
(2)一定有:currentPage、totalPage、totalItems;
4、分页控制器
(1)封装一个请求函数,在返回里,给3(2)赋值,调用2(3)中的callback;
(2)封装分页显示函数;
(3)封装分页点击函数;
5、相关代码如下

七、弹窗组件的设计思路和弹窗服务:
注意:所有的弹窗,框架都是一样的,有些内容没显示,是因为各自ng-show的值被设置为false。
1、代码
(1)html

(2)js

(3)服务

(4)应用

八、复选框服务:
1、各种初始化,比如单选状态初始化、当前页全选状态初始化、所有页全选状态初始化、被选中项数组初始化、被选中项取消选中数组初始化;
2、各种点击函数,比如点击单选函数、点击当前页全选函数、点击所有页全选函数、获取所有被选中项id函数;

九、请求服务设计思路(requestServer)
1、获取异步请求对象
(1)var deferred = $q.defer();
2、发送前确认
(1)点击"取消",仅弹窗消失,没有其他操作
(2)点击"确认",继续发送请求,实参为allParams和deferred
(3)如果没有发送前确认,则直接发送请求that.sendServer(allParams, deferred);
3、返回异步请求实例
(1) return deferred.promise;
4、封装sendServer函数
(1)this.http = function (allParams, deferred) {}
(2)allParams内有固定参数:method、url、toServerParams、stayLocalParams
(3)allParams内有可有参数:responseType、loading、其它可有参数
(4)调用$http服务,正式发送请求,定义返回函数
5、定义$http服务的返回函数
(1)根据stayLocalParams执行注入的成功函数
(2)根据返回值,判断过期,用弹窗弹出错误提示,2秒后跳往登录页面
(3)根据返回值,判断请求成功,用弹窗弹出成功提示,点击后,弹窗消失
(4)根据返回值,判断请求失败,执行注入的失败函数
(5)以上情形过后,再执行一次注入的成功函数
6、执行finally函数,取消4(3)中的loading
7、定义注入函数,由具体的使用场景提供

附:项目总脉络,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;

附:angular1.0的一个特殊情形的处理
1、情形描述
(1)“表格”最左列有图标向右,表示该项数据可以展开
(2)点击图标向右,则其他图标向下变为向右且下拉表格收起,同时该图标向右变为图标向下,向后台发送请求,返回的数据如果是空数组则该页面右下方出现提示,如果不是空数组则该行出现下拉表格
2、情形实现
(1)HTML:遍历原始数据为主表格每一项,通过name="li.id==id?'a.png':'b.png'"决定图片名称,通过ng-show="li.isMaster==='1'"决定是否显示图片
(2)HTML:在主表格每一项的下面,遍历返回的数据为下拉表格的每一项,通过ng-show="li.id==id"决定在主表格的哪项下面展开下拉表格
(3)JS:定义id
(4)JS:定义点击函数,依次清空返回的数据、如果id === li.id则置空id且阻断执行、id === li.id、向后台发送请求并获取返回值、如果返回空数组则给出提示(否则返回数据)

附2、登录页面交互思路:
1、登录页面有四项内容:登录名、密码、验证码、登录;
2、登录页面打开时,光标定位在登录名;
3、在前三项内容的任何一项触发“enter”键,则检验它前面及自身的项是否为空,如果为空则给出提示,并将光标聚焦在该处,如果不为空则将光标聚焦在下一项,如果下一项为“登录”,则执行登录函数;
4、点击“登录”时,也执行登录函数;
5、定义登录函数,(1)检查前三项四否有空项,(2)如果有空项则给出提示,并将光标聚焦在该项,(3)如果没有空项,则向后台发送请求;
6、如果后台返回1,则提示用户名不存在,光标定位到用户名;如果后台返回2,则提示密码错误,光标定位到密码;如果后台返回3,则提示验证码错误,光标定位到验证码;如果返回4,则登录成功。

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

赶紧努力消灭 0 回复