Angular2入坑指南

时间:2022-03-15 18:30:24

对后端开发来说,前端是神秘的,眼花缭乱的技术,繁多的框架,出名的不出名的好几百种,看是“繁荣”,其实显得杂乱无章,但是我们在做开发的时候,技术选型还是主流的那么几个:浅析angular,react,vue.js Node.js。

node

官网:https://nodejs.org/

nodejs不是一个js框架,千万不要认为是类似jquery的框架,nodejs是js运行时,运行环境,类比java中jvm。做前端的没用过nodejs都不好意思说自己是前端。nodejs是和jvm同等地位的js运行环境,打开了前端人员走向后端的道路。

react.js

官网:http://facebook.github.io/react/

react是facebook前不久出的一款框架,众前端膜拜之。类比Java中freemarker的宏。reactjs最大的作用就是用来开发ui组件,比如用它开发移动端页面,也是今年移动端前端化的推动者。

angular.js

官网:http://www.apjs.net/

angular是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。因为背靠google也收到了开发者的推崇。

概念与区别

本人也在React与Angular两大体系里纠结了好久,还使用React Native做了几个UI,彷徨于两大前端框架之前。

React缺点:

1. Web Componet的MVC分离不够彻底。 JSX描述的页面模板与JS代码没有办法完全分开。

无法接受代码的同时还夹个HTML代码这样原始的方式。

2. 对UI的描述自成一体,而不是采用CSS或者SCSS。

3. 数据的传递不够直接还有一堆乱七八槽的属性

4. Android与IOS的代码不够一致

5. 核心太小,一堆补充的库

Angular2的优点:

1、推荐TypeScript而不是原生的Javascript

2、类库特别多,概念也是特别多

3、体量大

4、成熟度相对偏低,版本2才刚发布

5、不兼容1.x

6、Router还不成熟

综合以上我最终决定选择Angular2作为我前端开发的首选框架。

同时还有以下几个Bonus:

1. 配置nativescript写原生应用,并且nativescript支持css子集,这一点比react要强一些,可以更小的降低学习成本与维护成本。

2. 有官方的UI方案Material Design供选择

3. 官工具链相对于React要成熟 有angular-cli这个便利化的工具,并提供E2E的测试,用以方便测试,并保证项目的质量。

4. 维护团队强大

来看一张图:

Angular2入坑指南

Angular2快速安装与入门

安装angular-cli

npm install -g angular-cli

创建项目

ng new PROJECT_NAMEcd PROJECT_NAMEng serve

就这么 简单,这时候你的项目已经运行起来了。

Angular2入坑指南

我们看一下项目结构

Angular2入坑指南

然后打开localhost:4200就可以查看效果了。

附:angular-cli的教程与源码地址