谈谈Angular试用装体验

目前流行的前端框架基本是三巨头:React,Vue,Angular,手头的项目用的是React,自己也对Vue有一定的了解。等到想要了解下Angular时候,发现已经是4.0版本。

虽说Angular中文版的页面包括翻译都很别致,但还是从英文版先上了手。回头再比较中英文,觉得中文官方修饰的较多,目录结构多少有点太正式,倒是英文官网直接上手先从做个hero英雄名单项目做起,分为6个小节依次展开:显示基本demo,增加功能,目录划分,后边再添加路由,http请求等功能,每个小节都有在线演示及如何正确打开项目,即使错过一些章节或隔一段时间再看,都能从每一小节找到正确的打开方式。可以说,官方的例子对新人来说,已经是穷尽所能了。

初入Angular,在有一些react,vue的基础,我也就整理一些第一阶段只通过示例的一些感受,简单评估下上手感言:

文档示例

基本上边都已经说到,很清楚明了,真*新手试炼项目

项目无需依赖webpack,就省去了**的配置工作。

模版

在阅读demo中,因为没有react一切皆为js的概念,所以ng的模版不需要套上一个无意义的div标签。嗯。

组件

vue作者提到自己早年是用angular开发项目的,后来因为繁琐庞大,就自己从做view层开始做起了vue。提到这里,是因为组件里边确实能看到vue学习ng的踪迹:单一组件文件可包含html布局层,style样式层,js交互层。

所有内容在一个文件是好是坏,每个人都有自己的想法。与我,一定程度上我是站在整合单文件的立场,这就是初期我对react不友善的态度原因,一个组件的代码还是需要从多个文件中查看,不能说是很方便。

ng的组件克通过单文件形式(template,styles)完成,也可以通过引入的形式添加(templateUrl,styleUrls),所以可以说满足了不同人的喜好。

但是有一点个人觉得不友善,app.module.ts,可以理解为整个页面的配置文件需要引入组件,组件名是需要用大驼峰写法(如HeroDetailComponent),但是在使用时插入页面标签时,需要另外定义selector,(如hero-detail),这样嵌入页面时的用法就是<hero-detail></hero-detail>,窃以为这样一个组件多套名字组合的写法,不会让初入门开发者舒服。

再有就是组件的引用,组件的引用是在配置文件app.module.ts中作全局引入的,这样单一的组件就不需要引入所依赖的组件。是好是坏?我觉得也不是太友好,毕竟使用哪个组件,在当前组件嵌套引入从使用到阅读,都是更好的方案。

依赖包

接着上边的组件来说,项目配置文件中包含了所有的组件依赖,也有一些依赖包通过imports引入,但是请注意是部分必须的,在各自的组件开发中,需要根据需要单独import自己的依赖包。

从使用来说,这就是说引入了两套标准:全局引入所有组件,但是不引入所有依赖包。单文件组件不需要引入依赖组件,单需要引入自己所需的依赖包。

函数的依赖,也是需要引入Injectable,组件如有需要,在providers中明确...

基本语法

在学习基本示例中,使用到了[(ngModel)],[class.selected],(click),{{hero.id}}。ng引入自身包后,使用起来也是带劲的选用了@Component,@NgModule,@Input(),*ngIf,*ngFor,花样秀语法,基本从使用上就带走了一波小白。

从上边这一点,vue语法多样性大概也是随了ng,react倒是用着顺手。

input传值

关于副组件传值给子组件

<hero-detail [hero]="selectedHero"></hero-detail>

子组件input使用值时,必须要声明绑定在input上,于是乎,引入import { Component, Input } from '@angular/core',在子组件中声明:

export class HeroDetailComponent {
  @Input() hero: Hero;
}

这个蹩脚的使用,感觉更像是一个polyfill

mock & http模拟

http模块使用了InMemoryWebApiModule,从示例来说,是和真实环境相一致的,👍。

入手难度

之所以放在最后,是因为ng使用了ts,这个对新手的压力,估计可能胜过上边的一些优缺点比重,所以诚惶诚恐放在最后。毕竟ts大家都说好用,是不是配合一起服用。

@2017-07-30 23:23