连Angular都学不精，敢说自己做前端？

前端技术层出不穷，难免选择困难，如何选、怎么学便成了首要问题。那么，如何选择才能不被框架束缚，稳扎稳打？高效快速的掌握不易过时的知识技能又该怎么做呢？参与话题，与大牛老师共同探讨如何 Easy应对前端问题。

花式填坑活动是慕课网开展的大牛嘉宾在线互动交流会，目前仅限PC端用户参与，每周一期，可去官网网站猿问查看。

以下内容精选在花式填坑第15期。

---

Q：老师，在实际工作中，react 和 vue、angular 三大主流框架的优势分别是什么？

接灰的电子产品：应该说三个框架的目标不是很一致的，所以放在一起比较是不太合适的，因为 vue 和 react 是更想做一个 view 层，这也决定了它们会更轻。而 Angular 其实更想做一个类似 Android SDK 这种感觉的框架，也就是一个完整的、从 UI、路由、Http、Socket到依赖注入、编译、优化、测试的框架，这样一个框架是开箱即用的。而 react、vue 更多的是做好自己的 view 层，依赖社区力量发展周边。很难说哪个好哪个不好，但有选择恐惧症的学 Angular 就没错了。

从开发效率来说，vue 入门最容易、react 次之，angular 相对较难。但入门之后的生产效率，我感觉 Angular 就会有点优势，尤其是在比较复杂的、多团队合作的大型项目中，这种优势体现的非常明显，因为 Angular 是三个框架中工程化属性最强的。依赖注入的支持也让组件、服务比较松耦合，适合多团队并行开发。

坑嘛，vue 最大的『坑』其实是太容易上手了，为什么这么说呢？因为你不按最佳实践去做也可以做出一个像模像样的东西，但这个东西距离商用标准差的地方你可能看不出来，但实际工作中就会看出来。但这个和框架的关系倒是不大的。react 自己本身很容易上手，懂得函数式编程和 jsx 就可以上手了，但是后面的高阶函数啦、redux 啦、redux-thunk 啦就发现不是那么好懂了。Angular 的『坑』反倒是很明显的摆在那里，typescript、rxjs、组件化，这几个一旦迈过去，你就发现没什么难的了。

Q：我的项目是ionic3+angular4+cordova开发的，组件化应该怎么去做呢？

接灰的电子产品：按我的经验，组件首先要划分成 container 和 components，也就是聪明组件和笨组件。container 了解业务逻辑，而components 只负责显示输出。对于有些比较复杂的但又有关联的组件视情况应该有进一步的封装，这样可以降低外部复杂度。从位置来看，在全局可复用的可以划分到 sharedmodule，其他可以放到 featuremodule。

Q：angular版本更迭太快，哪个版本更适合多数项目的开发？

接灰的电子产品：只要 API 稳定，不用太在意版本号了。Angular 2 的 API 在 Angular 4 中基本可用，除了动画部分的 package 位置做了一些调整，其他都没变化。Angular 团队承诺向下兼容前两个主要版本的 API，也就是说 Angular 5 会兼容 Angular 2。

Q：我是完全不懂，请问Angular会在手机端用到吗？我说的是在Android和iOSApp的开发中？

接灰的电子产品：当然可以用了，Angular 作为一个一站式解决方案，是兼顾 PC 和 移动端的。Angular 框架本身是兼容性很好的，对于主流移动端浏览器都兼容的不错，做手机 web 应用时需要考虑的就是样式了，框架本身是没有问题的。而且不光移动 web 的开发，Angular 还支持 Android、iOS 的原生开发，可以复用 Angular 的技术栈。著名的 ionic 就是基于 Angular 技术开发的 Hybrid 移动 App 框架，而 NativeScript 是基于 Angular 的原生 App 框架。

Q：为什么angluar最近推广的这么厉害？大漠在知乎撕起来了？利益冲突？

接灰的电子产品：有围观撕逼的时间，为什么不去学习一下呢，两个框架都学学，分别做个小项目体会一下。你自己就会知道选什么了。

引用我自己另一个答案： 最近前端各种技术层出不穷，随之而来的就是各种阵营的骂战。其实这个状态和十年前的 Java MVC 框架的大辩论差不多了，因为技术发展的比较快，走在了标准之前，那自然就会有不同意见，基于不同意见就会发展出不同侧重的框架。骂战只是插曲，其实大家会在发展的过程中不断相互借鉴，相互学习。

比如原来主流框架只有 Angular 标配 TypeScript，当时也有观点说 TypeScript 没必要，但经过一段时间的体会，开发者还是感觉到类型约束在大项目当中的必要性了，所以呢，现在 React 和 Vue 也都用起来了。这种技术融合的趋势还会继续下去，优秀的实践最终会得到认可。 就 Angular 和 Vue 来说，vue 的目标就是做一个 view 层，所以轻巧灵活是它的特点，而 Angular 的目标是做一个全面的框架平台，所以在各个方面都要给开发者提供类库和工具，所以会重一些，但越大的团队越复杂的项目 Angular 的优势就越能体现出来。

Q：在校大学生，JavaScript学的差不多以后学JQ还是Angular，想做全栈，node和Angular怎么平衡

接灰的电子产品：想做全栈，就得前后端都得懂啊，node 和 Angular 有啥可平衡的？一个后端，一个前端，两个配合着搞呗，写个小应用，angular 前端，node 后端，不断自己优化，每天看到自己的进步。

Q：Angular移动端能用吗？

接灰的电子产品：当然可以用了，Angular 作为一个一站式解决方案，是兼顾 PC 和 移动端的。Angular 框架本身是兼容性很好的，对于主流移动端浏览器都兼容的不错，做手机 web 应用时需要考虑的就是样式了，框架本身是没有问题的。而且不光移动 web 的开发，Angular 还支持 Android、iOS 的原生开发，可以复用 Angular 的技术栈。著名的 ionic 就是基于 Angular 技术开发的 Hybrid 移动 App 框架，而 NativeScript 是基于 Angular 的原生 App 框架。

Q：老师，请问新手学习Angular好学吗？怎么上手快？

接灰的电子产品：看你的基础，学习 Angular 如果有 Java/C# 背景的话会非常容易。但对于没有这个背景的同学，可能有几个学习的门槛，除了前端的必要基础外，面向对象的语言基础对于理解 ts 是必要的。组件、模块、依赖注入等概念也是需要适应一下，响应式编程的门槛稍微高一些，但一开始不是必须的。但官方提供了 angular-cli ，配置方面倒是很简单。

Q：为什么ng2的url地址不能使用?号参数和文件名

我要打开的地址是：localhost:8080/index.html?token=123#/home
回车确定后为什么就变成：localhost:8080/#/home
我的文件名和query值都没了

难道我的写的路由有问题吗？项目是新建的，只创建了HOME组件和添加路由
const RouteConfig:Routes = [
{path: "home", component: HomeComponent},
{path: '**', redirectTo: '/home', pathMatch: 'full'}
];
imports: [
BrowserModule,
RouterModule.forRoot(RouteConfig, {useHash: true})
]

接灰的电子产品：你是没明白路由怎么回事吧，Angular 的路由就是 /blablabla ，把 index.html 放上去干什么？

传递路由参数是在模板中这样
1
<a [routerLink]="['/item', item.id]">{{item.id}}</a>

或者在 JavaScript 中
1
2
3
goToDetail(item) {
this.router.navigate(['item'], {id: item.id});
}

---

讲师 个人主页，点击可查看

接灰的电子产品，曾任职某上市公司技术总监，负责多个大型企业级项目的构建，也设计过多种类型的互联网项目。曾为中国移动、中国银联等大型机构做过企业内部管理项目，负责前端技术是个十足的技术咖，还出过《Angular 从零到一》一书，是个博学多才的牛人