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

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

每个Angular“应用程序”ng-app都有一个 injector ,负责创建并查找依赖,当缓存中没有依赖key1时,记依赖对象为{key1:null,key2:value2,...},后来当key1出现时,key1修改依赖对象为{key1:value1,key2:value2,...},所有文件加载完毕以后,执行全局配置函数config和run,如果所有文件加载完毕,key1也没有出现,则会报错,不会执行全局配置函数。
一、标题组件的设计思路:
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)带参数跳转至本页面
(2)过滤条件
(3)本页需记录单选、全选、所有页全选
(4)含交互和分页的弹窗
(5)分页
(6)请求数据时,有局部转圈和全局转圈
(7)刷新时,有刷新成功或失败的提示
2、页面逻辑
(1)在分页服务里,配置本页面除初始化以外的路由,
(2)将全选服务、分页服务、二者的结合,放在一个服务里,注入本页面,把本页面的作用域传入该服务的方法里并执行,给本页面配置公用的属性和方法。
(3)页面初始化时先正常渲染,再根据是否有参数来决定:过滤条件是否展开、过滤条件的默认值、是否进行二次渲染。
(4)把本页面中与分页相关的属性通过属性传参的方式传给分页组件,在分页组件里定义请求函数,这个函数还可以在本页面和分页服务里被调用。
(5)在请求服务里,让转圈出现和消失;一个事件两次请求时,两个请求的结果都返回后,让转圈消失。
3、相关代码如下

七、弹窗组件的设计思路和弹窗服务:
注意:所有的弹窗,框架都是一样的,有些内容没显示,是因为各自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;

附:点击表格某一项,再出详情表格
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、向后台发送请求并获取返回值、如果返回空数组则给出提示(否则返回数据)
3、总逻辑
(1)把该“行”数据itemData传入点击函数,在函数内部,获取itemData.id并向后台发送请求,把获取的返回值作为itemData.itemDetail的属性值,这样就把返回值与具体的“行”相关联;
(2)在详情表格内遍历itemData.itemDetail;

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

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

赶紧努力消灭 0 回复