Angular项目小结

编程负责部分

本次项目主要内容是实现一个包含登录、注册、文章查看、评论等功能的简易博客。

在本次实验中主要负责使用Angular框架编写前端功能,包括评论的显示与发布、登录页与文章列表页的实现。

Angular学习感想

初次接触这类前端框架,刚开始是一头雾水的。因为平常写Web都是图方便拿PHP/HTML+CSS+JavaScript一次性搞定,Node.js以及它的npm倒是真的没怎么用过。。。

博客的数据图方便直接从写服务端dalao的博客去取。和服务端沟通好了要写的模块跟API之后,跟队友开始分任(hei)务(guo)。

关于CSS设计方面,刚开始是想使用Bootstrap作为CSS模板的(因为经常用),但做服务端的dalao跟我说那玩意拿来做博客很别扭,给我推荐了蚂蚁金服的ng-zorro。(定睛一看这不是隔壁Matrix正在用的那个么= =)

好吧从头开始学。。。

Angular这类前端框架相对于普通CSS+JS的优点就在于对页面信息的更新可以更加地简便,比如如果想弹出一个一段时间后自动消失的消息框(或者一个网页动画效果),单纯的JS可能要自己造轮子写个上百行代码吧(包括CSS编写、JS向HTML插入元素、渐变改Alpha值、到最后如何移除之类的),而且很可能到最后写得还不好。而使用Angular(嗯得算上它那些好用的modules)可以十分轻易地做到这些(比如ngAnimator)。

Angular的涉及到网页实现的文件主要在src/app这个文件夹中。按种类主要分为HTML/CSS/TypeScript三个部分。而按用途分工又大致可以分为module(模块)、component(组件)、service(服务)等。其中TypeScript(*.ts文件)大致可以看做JS的升华版。

module是将service与component组合起来构造一个类似接口(或者说包?)的东西供上一级或者同级的module使用。

component主要涉及实际网页的生成,CSS/HTML代码都必须在这里实现,component对应的ts则需要担起类似JS的责任,负责对网页事件、渲染等进行处理,不过值得一提的是,ts的编写方式与JS相比,它更依靠大量import包与少量逻辑性处理完成基本的功能实现,这也是Angular比起原生网页的一个优点(就是处理文件结构比较麻烦= =)。

而Service按我的看法,它主要是负责组件与组件甚至是模块与模块之间数据通信及保证数据统一的东西。如果说component是一个函数的话,那么service应当是全局变量或者静态函数般的存在,它不参与实际渲染,但可能大部分的动态获取的数据都要经过它来完成,比如它可以很方便地存储目前有没有成功登录、登录的用户ID是什么、提交ID与密码给服务端进行验证、将验证结果进行保存等,还可以实现路由守卫(如对未登录的用户强制跳转至登录界面等)

新框架、新写法,再加上协作开发,几乎是给本来看文档就比较头疼的我雪上加霜,只能硬着头皮用这个还不是很熟的框架。还好Angular的文档写得比较详细,大概照葫芦画瓢也能画出来。(不过现在想想用ng-zorro确实比bootstrap省事很多233)

项目总结

虽说这个项目时间紧任务重,但总归是顶着压力学到了不少的东西(但这种情况还是不想再经历一次了233)。感谢队友(包括写服务端的dalao)在学习和编程的过程中给我的不少帮助。对于框架开发的部分我仍旧是十分陌生,希望在空余时间里能多多了解。

未经允许不得转载:初音未来Alpha » Angular项目小结

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (选填)