萌新与大型angularjs项目 一周目

文件系统
• 阅读 1357

前言

本周,公司让我从已有项目入手,学习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- >不知道怎么看属性

总结

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

点赞
收藏
评论区
推荐文章
Easter79 Easter79
3年前
vue+ts打造一个酷炫的星空聊天室
😛闲暇时间想做一个聊天室复盘一下这些年学习到的技术,于是在2020年6月24号就开始了Genal聊天室的开发之旅。😈项目采用全typescript开发,这是为了以后的功能迭代打基础。当然,我本身也是很喜欢typescript的。项目界面 !(https://oscimg.o
Wesley13 Wesley13
3年前
SAP SD实施笔记
今年我作为SD顾问,参与了汽车行业某公司的SAP上线实施项目。这是我第一次作为乙方SD顾问参与这么大型的项目,在实施的过程中,我有很多感悟,但是因为项目周期赶、时间紧,没有时间记录下来。现在项目上线了,我也空出时间可以好好梳理一下心得和笔记,作为对自己过去这半年的收获之一。首先,以前我就职于一家甲方公司做SD运维,作为一名职场新人,参与
【实践篇】基于CAS的单点登录实践之路
上个月我负责的系统SSO升级,对接京东ERP系统,这也让我想起了之前我做过一个单点登录的项目。想来单点登录有很多实现方案,不过最主流的还是基于CAS的方案,所以我也就分享一下我的CAS实践之路。
kenx kenx
3年前
SpringBoot+Maven 多模块项目的构建、运行、打包实战
前言最近在做一个很复杂的会员综合线下线上商城大型项目,单模块项目无法满足多人开发和架构,很多模块都是重复的就想到了把模块提出来,做成公共模块,基于maven的多模块项目,也好分工开发,也便于后期微服务重构使用场景我刚开始创建项目的时候是基于单模块,开发的,我先开发的接口api项目结构是这样的core模块是公共模块,mallapi是小程序api,随然单体
Stella981 Stella981
3年前
Spring Cloud Feign的两种使用姿势
!Profile(http://uploadimages.jianshu.io/upload_images/982424770f0b0b083f196aa.jpg)概述最近结合一些别人的开源项目来学习SpringCloud,其中关于服务消费这方面的一个很便利的工具Feign让我记忆颇深。虽然网上的Demo和例子不胜枚举
Stella981 Stella981
3年前
Flutter 小说练手项目
一个简单的Flutter入门级项目。如果你已经学了Flutter一段时间,想写一个综合项目而又无从下手,苦于没有接口,那这个项目就很适合你。博主也是一个玄幻小说迷呀,所以这个项目是关于小说阅读的,但是这个项目除了Flutter练手的作用以外,并不具备其它实用性功能,所以....。但用来学习我觉得是很适合的,我稍微说一下项目所用到的框架技
Wesley13 Wesley13
3年前
iBase4J nginx配置
  iBase4J朋友推荐我看这个项目的。后台搭建还是比较容易的,但是到了前台就彻底懵逼了。因为对angularjs不熟悉。git上的nginx附件也下不下来。加qq群需要50块。那就自己动手吧。但是网上搜索“nginxangularjs"关键词并没有发现一些有价值的文章。  我首先用了在angularjs中添加全局变量varctx "h
Stella981 Stella981
3年前
AngularJS 指令实践
指令(Directives)是所有AngularJS应用最重要的部分。尽管AngularJS已经提供了非常丰富的指令,但还是经常需要创建应用特定的指令。这篇教程会为你讲述如何自定义指令,以及介绍如何在实际项目中使用。在这篇文章的最后,我会指导你如何使用Angular指令来创建一个简单的记事本应用。概述一个指令用来引入新的HTML语法。指令是DO
Stella981 Stella981
3年前
C语言Linix服务器网络爬虫项目(一)项目初衷和网络爬虫概述
一、项目初衷和爬虫概述1.项目初衷  本人的大学毕设就是linux上用c写的一个爬虫,现在我想把它完善起来,让他像一个企业级别的项目。为了重复发明轮子来学习轮子的原理,我们不使用第三方框架(这里是说的是指通常的linux系统编程教材以外的库和接口0,当初我也是在虚拟机上跑的ubuntuputtyvim来开发)来实现。  然而我们造轮
胖大海 胖大海
2年前
Redis都有哪些使用场景
聊聊Redis现状Redis作为一种内存型的非关系型的数据库,不管在互联网大厂,小厂,大项目和小项目中,几乎都会被使用。为什么Redis会受到如此青睐呢?关于这个问题,可能很多的程序员只是看着别人用而用,缺乏对Redis一个全面的了解。我在3A平台购
上海张律师 上海张律师
1个月前
The "paths[1]" argument must be of type string. Received undefined 错误的解决
​HarmonyOS应用开发这两天我准备把我写的一些库放到OpenHarmony三方库中,让其他人能够通过ohpm加入到自己的项目中去,整个过程实际上我觉得是比较复杂的,特别是第一次完成的时候很容易出问题,当然,完成一个以后再去上传新的就感觉简单很多了在我