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

一、标题组件的设计思路:

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;

你可能感兴趣的:(angular1常用组件和服务的设计思路)