萌新与大型angularjs项目 一周目

前言

本周,公司让我从已有项目入手,学习angularjs。
需要最终能找到一个页面做一个一样的出来,并实现相关功能。
下面我就简单讲述一下我的学习过程。

初识大项目

这是我第一次接触到一个别人写的完整的大项目,一开始还是很茫然的。

第一步:跑项目

先把项目跑起来,进行一个整体的了解。
我这次需要仿写的是计量平台-強检器具备案管理-综合查询页面

《萌新与大型angularjs项目 一周目》

第二步:查看源代码

之后,要找到别人写的代码在哪里才行。

得益于老师讲的前后台分离的概念,前台代码和后台是分开的。

《萌新与大型angularjs项目 一周目》

打开webapp的文件夹

《萌新与大型angularjs项目 一周目》

需要找的就是controllers(控制器/C层),service(服务/M层)和views(视图/V层)

但是当我打开C层打算看看代码的时候,一下子傻了

《萌新与大型angularjs项目 一周目》

这么一堆文件,要怎么才能找到我想要的页面呢

还好,这时候我想到了angularjs的路由配置
首先,我们截取这一部分网址
《萌新与大型angularjs项目 一周目》

然后进行以下步骤

《萌新与大型angularjs项目 一周目》

1.打开scripts文件下面的route.js文件,
2.用ctrl+F调出查询框,将刚才的网址粘贴进来,并将中间的“/”改为“.”
3.然后就可以找到相关的V层文件位置了
4.下面这个controller的名字虽然很长,但是可以用ctrl+P进行全文件查找

《萌新与大型angularjs项目 一周目》

这样就很轻松的找到了C层文件。

第三步:看注释

我个人的观点是:V层是写给用户看的,C层是写给V层的,只有注释是写给程序员的。
在此要特别感谢潘老师对于写注释重要性的一次次强调,让萌新能够清晰的了解各个模块的功能。

仿?仿!仿。。。还是抄吧。。

前面准备的文件全都找到了,也该开始试着写代码了

满怀着悲愤的心情,抱着一去不复返的态度,决定与这一堆代码奋战到底。
当然,基本流程还是比较简单的。
首先是先建立一个自己的test页面view以及controller和service

然后开始用$http.get从后台抓数据,用$scope和ng-model进行V层和C层的双向绑定,然后数据就在V层显示了

在然后。。。突然发现就没别的了?!

打开service文件,发现虽然很多行代码,但是通篇就讲一件事,按照我的要求给我数据,我找后台,后台给你全解决了,你就等着结果就行了。

《萌新与大型angularjs项目 一周目》

所以整个页面写下来,除了方法名自己起一个,剩下的完全就是抄下来的,也没有什么可改动的地方。
这时候,我突然就明白了什么是接口,以及前后台分离的概念。

不明白的问题

1.关于导航栏新增栏目
描述:新建一条导航栏,本来觉得只需要找到导航栏的V层加一个html链接,起个名字,然后在route.js里面绑一下就好了,结果发现找不到导航栏。后来去问别人,他告诉我说直接在数据库里面添加一条信息,然后在route.js里面绑上。。。
2.V层的自定义标签<yunzhi- >不知道怎么看属性

总结

这周看得还是比较简单的内容,个人感觉大项目与自己写的练习还是有区别的,更加注重规范。

    原文作者:户瑞彤
    原文地址: https://segmentfault.com/a/1190000018519428
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞