Ionic和AngularJS实现移动端APP前端

    下图是众多伙伴打造的学生给教师评分的任务界面





Ionic和AngularJS实现移动端APP前端_第1张图片







   

页面逻辑:


1.点击右上角的三条杠按钮,将显示黑底白字菜单,点击页面其他地方,菜单隐藏

2.点击"切换账号",将回退到登录页

3.点击"退出系统"APP关闭

4.点击每一门课程,进入评教详情页,也就是一些评估试题

5.页面可滑动

6.每评完一门课,将隐藏这门课,同时"尚未评估"任务数减一

7.圆图标的颜色是随机的

8.所有的数据从接口读出






源代码:



Ionic和AngularJS实现移动端APP前端_第2张图片






Ionic和AngularJS实现移动端APP前端_第3张图片











Ionic和AngularJS实现移动端APP前端_第4张图片








写这个页面遇到了下面这些问题,

 

1.黑底菜单如何实现,,,选用card list  设置大小和位置

2.点击屏幕其他地方,黑底菜单消失,,,在div里注册单击事件,本层div注册不起作用,就再外套一个div

3.button的单击事件只能对同级的div起作用,,,重新设置页面div层次,让button和它要控制的div在同级

4.设置div分层,也就是页面上的菜单覆盖在页面上方,,,设置Z-index,absolute和relative属性

5.controller里方法调用

6.安卓平台如何退出APP,,,加了个qq群,得到热心网友相助,乐意给在真机上做demo测试

 





我的感受:


    它和其他语言没什么两样,同样有自己内部封装的东西,用MVC样式,前台页面和控制器分离,数据调用service层,前台是html代码,不过更简洁,比如sytle样式,你可以直接写absolute,而不需要在前面加上float。控制器controller层的代码也很简洁,只是代码样式格式的改了改,但换汤不换药,掌握一个,照葫芦画瓢就成





    希望能给遇到问题的朋友一点儿帮助,欢迎交流分享


你可能感兴趣的:(AngularJS,前端,APP,移动)