为了账号安全，请及时绑定邮箱和手机
点击这里，将文章分享到自己的动态
连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 放上去干什么？
传递路由参数是在模板中这样
&a [routerLink]=&['/item', item.id]&&{{item.id}}&/a&
或者在 JavaScript 中
goToDetail(item) {
this.router.navigate(['item'], {id: item.id});
接灰的电子产品，曾任职某上市公司技术总监，负责多个大型企业级项目的构建，也设计过多种类型的互联网项目。曾为中国移动、中国银联等大型机构做过企业内部管理项目，负责前端技术是个十足的技术咖，还出过《Angular 从零到一》一书，是个博学多才的牛人
若觉得本文不错，就分享一下吧！
评论加载中...
看过此文的用户，还看了以下文章
正在加载中
全栈工程师
作者相关文章&nbsp>&nbsp
&nbsp>&nbsp
&nbsp>&nbsp
angular.js4使用 RxJS 处理多个 Http 请求Script
摘要：有时候进入某个页面时,我们需要从多个API地址获取数据然后进行显示。管理多个异步数据请求会比较困难,但我们可以借助AngularHttp服务和RxJS库提供的功能来实现上述的功能。处理多个请求有多种方式,使用串行或并行的方式。基础知识mergeMapmergeMap操作符用于从内部的Observable对象中获取值,然后返回给父级流对象。合并Observable对象constsource=Rx.Observable.of('Hello');//maptoinnerobserv
有时候进入某个页面时,我们需要从多个 API 地址获取数据然后进行显示。管理多个异步数据请求会比较困难,但我们可以借助 Angular Http 服务和 RxJS 库提供的功能来实现上述的功能。处理多个请求有多种方式,使用串行或并行的方式。
mergeMap 操作符用于从内部的 Observable 对象中获取值,然后返回给父级流对象。
合并 Observable 对象
const source = Rx.Observable.of('Hello');//map to inner observable and flattenconst example = source.mergeMap(val =& Rx.Observable.of(`${val} World!`));const subscribe = example.subscribe(val =& console.log(val)); //output: 'Hello World!'
在上面示例中包含两种 Observable 类型:
源 Observable 对象 - 即 source 对象
内部 Observable 对象 - 即 Rx.Observable.of(`${val} World!`) 对象
仅当内部的 Observable 对象发出值后,才会合并源 Observable 对象输出的值,并最终输出合并的值。
forkJoin 是 Rx 版本的 Promise.all(),即表示等到所有的 Observable 都完成后,才一次性返回值。
合并多个 Observable 对象
const getPostOne$ = Rx.Observable.timer(1000).mapTo({id: 1});const getPostTwo$ = Rx.Observable.timer(2000).mapTo({id: 2});Rx.Observable.forkJoin(getPostOne$, getPostTwo$).subscribe( res =& console.log(res) // [{id: 1}, {id: 2}]);
处理 Http 请求
我们先来看一下 Angular Http 服务简单示例。 import { Component, OnInit } from '@angular/core';import { Http } from '@angular/http';import 'rxjs/add/operator/map';@Component({ selector: 'app-root', template: ` HttpModule Demo `})export class AppComponent implements OnInit { constructor(private http: Http) { } ngOnInit() { this.http.get('https://jsonplaceholder.typicode.com/users') .map(res =& res.json()) .subscribe(users =& console.log(users)); }}
上面示例中,我们通过依赖注入方式注入 http 服务,然后在 ngOnInit() 方法中调用 http 对象的 get() 方法来获取数据。这个例子很简单,它只处理一个请求,接下来我们来看一下如何处理两个请求。
Map 和 Subscribe
有些时候,当我们发送下一个请求时,需要依赖于上一个请求的数据。即我们在需要在上一个请求的回调函数中获取相应数据,然后在发起另一个 HTTP 请求。 import { Component, OnInit } from '@angular/core';import { Http } from '@angular/http';import 'rxjs/add/operator/map';@Component({ selector: 'app-root', template: ` {{username}} Detail Info {{user | json}} `})export class AppComponent implements OnInit { constructor(private http: Http) { } apiUrl = 'https://jsonplaceholder.typicode.com/users'; username: string = ''; user: ngOnInit() { this.http.get(this.apiUrl) .map(res =& res.json()) .subscribe(users =& { let username = users[6]. this.http.get(`${this.apiUrl}?username=${username}`) .map(res =& res.json()) .subscribe( user =& { this.username = this.user = }); }); }}
在上面示例中,我们先从 https://jsonplaceholder.typicode.com/users 地址获取所有用户的信息,然后再根据指定用户的 username 进一步获取用户的详细信息。虽然功能实现了,但有没有更好的解决方案呢?答案是有的,可以通过 RxJS 库中提供的 mergeMap 操作符来优化上述的流程。
mergeMap import { Component, OnInit } from '@angular/core';import { Http } from '@angular/http';import 'rxjs/add/operator/map';import 'rxjs/add/operator/mergeMap';@Component({ selector: 'app-root', template: ` {{username}} Detail Info {{user | json}} `})export class AppComponent implements OnInit { constructor(private http: Http) { } apiUrl = 'https://jsonplaceholder.typicode.com/users'; username: string = ''; user: ngOnInit() { this.http.get(this.apiUrl) .map(res =& res.json()) .mergeMap(users =& { this.username = users[6]. return this.http.get(`${this.apiUrl}?username=${this.username}`) .map(res =& res.json()) }) .subscribe(user =& this.user = user); }}
在上面示例中,我们通过 mergeMap 操作符,解决了嵌套订阅的问题。最后我们来看一下如何处理多个并行的 Http 请求。
接下来的示例,我们将使用 forkJoin 操作符。如果你熟悉 Promises 的话,该操作符与 Promise.all() 实现的功能类似。forkJoin 操作符接收一个 Observable 对象列表,然后并行地执行它们。一旦列表的 Observable 对象都发出值后,forkJoin 操作符返回的 Observable 对象会发出新的值,即包含所有 Observable 对象输出值的列表。具体示例如下: import { Component, OnInit } from '@angular/core';import { Http } from '@angular/http';import { Observable } from 'rxjs/Observable';import 'rxjs/add/operator/map';import 'rxjs/add/observable/forkJoin';@Component({ selector: 'app-root', template: ` Post Detail Info &ul& &li&{{post1 | json}}&/li& &li&{{post2 | json}}&/li& &/ul& `})export class AppComponent implements OnInit { constructor(private http: Http) { } apiUrl = 'https://jsonplaceholder.typicode.com/posts'; post1: post2: ngOnInit() { let post1 = this.http.get(`${this.apiUrl}/1`); let post2 = this.http.get(`${this.apiUrl}/2`); Observable.forkJoin([post1, post2]) .subscribe(results =& { this.post1 = results[0]; this.post2 = results[1]; }); }}
除了 mergeMap 外,RxJS 中的 switchMap 有什么用?
switchMap 操作符用于对源 Observable 对象发出的值,做映射处理。若有新的 Observable 对象出现,会在新的 Observable 对象发出新值后,退订前一个未处理完的 Observable 对象。
使用示例: var source = Rx.Observable.fromEvent(document.body, 'click');var example = source.switchMap(e =& Rx.Observable.interval(100).take(3));example.subscribe({ next: (value) =& { console.log(value); }, error: (err) =& { console.log('Error: ' + err); }, complete: () =& { console.log('complete'); }});
示例 marble 图: source : -----------c--c-----------------... concatMap(c =& Rx.Observable.interval(100).take(3))example: -------------0--0-1-2-----------...
以上代码运行后,控制台的输出结果:
而在实际使用 Http 服务的场景中,比如实现 AutoComplete 功能,我们可以利用 switchMap 操作符,来取消无用的 Http 请求。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
以上是的内容，更多
的内容，请您使用右上方搜索功能获取相关信息。
若你要投稿、删除文章请联系邮箱：zixun-group@service.aliyun.com,工作人员会在五个工作日内给你回复。
云服务器 ECS
可弹性伸缩、安全稳定、简单易用
&40.8元/月起
预测未发生的攻击
&24元/月起
邮箱低至5折
推荐购买再奖现金，最高25%
&200元/3月起
你可能还喜欢
你可能感兴趣
阿里云教程中心为您免费提供
angular.js4使用 RxJS 处理多个 Http 请求Script相关信息，包括
的信息，所有angular.js4使用 RxJS 处理多个 Http 请求Script相关内容均不代表阿里云的意见！投稿删除文章请联系邮箱：zixun-group@service.aliyun.com，工作人员会在五个工作日内答复
售前咨询热线
支持与服务
资源和社区
关注阿里云
International更多频道内容在这里查看
爱奇艺用户将能永久保存播放记录
过滤短视频
暂无长视频（电视剧、纪录片、动漫、综艺、电影）播放记录，
按住视频可进行拖动
&正在加载...
举报视频：
举报原因(必填)：
请说明举报原因(300字以内)：
请输入您的反馈
举报理由需要输入300字以内
感谢您的反馈～
请勿重复举报~
请刷新重试~
收藏成功，可进入
查看所有收藏列表
当前浏览器仅支持手动复制代码
视频地址：
flash地址：
html代码：
通用代码：
通用代码可同时支持电脑和移动设备的分享播放
用爱奇艺APP或微信扫一扫，在手机上继续观看
当前播放时间：
一键下载至手机
限爱奇艺安卓6.0以上版本
使用微信扫一扫，扫描左侧二维码，下载爱奇艺移动APP
其他安装方式：手机浏览器输入短链接http://71.am/udn
下载安装包到本机：
设备搜寻中...
请确保您要连接的设备（仅限安卓）登录了同一爱奇艺账号 且安装并开启不低于V6.0以上版本的爱奇艺客户端
连接失败！
请确保您要连接的设备（仅限安卓）登录了同一爱奇艺账号 且安装并开启不低于V6.0以上版本的爱奇艺客户端
部安卓（Android）设备，请点击进行选择
请您在手机端下载爱奇艺移动APP（仅支持安卓客户端）
使用微信扫一扫，下载爱奇艺移动APP
其他安装方式：手机浏览器输入短链接http://71.am/udn
下载安装包到本机：
爱奇艺云推送
请您在手机端登录爱奇艺移动APP（仅支持安卓客户端）
使用微信扫一扫，下载爱奇艺移动APP
180秒后更新
打开爱奇艺移动APP，点击“我的-扫一扫”，扫描左侧二维码进行登录
没有安装爱奇艺视频最新客户端？
正在检测客户端...
您尚未安装客户端，正在为您下载...安装完成后点击按钮即可下载
30秒后自动关闭
angular 4">angular 4
请选择打赏金额：
播放量12.7万
播放量数据：快去看看谁在和你一起看视频吧~
更多数据：
热门短视频推荐
Copyright (C) 2018 & All Rights Reserved
您使用浏览器不支持直接复制的功能，建议您使用Ctrl+C或右键全选进行地址复制
正在为您下载爱奇艺客户端安装后即可快速下载海量视频
正在为您下载爱奇艺客户端安装后即可免费观看1080P视频
&li data-elem="tabtitle" data-seq="{{seq}}"& &a href="javascript:void(0);"& &span>{{start}}-{{end}}&/span& &/a& &/li&
&li data-downloadSelect-elem="item" data-downloadSelect-selected="false" data-downloadSelect-tvid="{{tvid}}"& &a href="javascript:void(0);"&{{pd}}&/a&
选择您要下载的《
后才可以领取积分哦~
每观看视频30分钟
+{{data.viewScore}}分
{{data.viewCount}}/3
{{if data.viewCount && data.viewCount != "0" && data.viewCount != "1" && data.viewCount != "2" }}
访问泡泡首页
+{{data.rewardScore}}分
{{if data.rewardCount && data.rewardCount != 0 && data.getRewardDayCount != 0}}1{{else}}0{{/if}}/1
{{if data.rewardCount && data.rewardCount != 0 && data.getRewardDayCount != 0}}
+{{data.signScore}}分
{{data.signCount}}/1
{{if data.signCount && data.signCount != 0}}
色情低俗内容
血腥暴力内容
广告或欺诈内容
侵犯了我的权力
还可以输入
您使用浏览器不支持直接复制的功能，建议您使用Ctrl+C或右键全选进行地址复制活动 | node - party 第 22 期 - Angular／RxJs-Angular
开始时间： 13:00 周六
结束时间： 18:00 周六
举办地点：北京市朝阳区科技寺三里屯滚石店(工体北路四号机电院内80office三层)
主办方：Rockq 开发者社区
What is NodeParty?
每月组织Java/Node开发者聚会，关注热门的前端、后端框架，开发工具和方法。
＊ 学习新东西
＊ 认识新朋友
我们会为你准备： 咖啡，甜点，红酒，爆米花和动听的音乐，一起度过一个愉快的下午。
13:00-13:30
13:30-14:30
Angular实战经验分享 冯杨琦君
14:45-15:45
Angular 表单进阶 汪志诚（雪狼）
16:00-17:00
RxJs-Angular 的函数响应式编程 王子实
17:15-17:45
嘉宾及议题简介
冯杨琦君 Thoughtworks 咨询师
个人简介：Thoughtworks 咨询师，曾在先临三维、闪萌科技担任 NodeJs 后端工程师， Rockq 社区 Node Party 活动组织者之一，rebirth-ng 相关开源项目维护者之一。
演讲内容介绍：
Angular 优势，我们为什么要用 Angular
Starter 对比，选择一个合适的框架启动项目
前端层级架构设计 MVVM 及数据流导向
小技巧分享
推荐的开源库
汪志诚 Google 开发技术专家
个人简介：常用网名：雪狼、asnowwolf。从 1998 年开始做商业软件开发，至今已十九年，从未放下写代码。担任过从测试到 CTO 的各种开发类角色。
技术足迹：
angular.cn 发起者、主要译者及组织者
Angular 项目的 Contributor
ui-model.com 发起人及主要贡献者
ThoughtWorks 高级咨询师
Google 开发技术专家 - GDE（Web 方向）
原创书籍《AngularJS 深度剖析与最佳实践》
组织并翻译《Angular 权威教程》
演讲内容介绍：
表单,在商业软件中具有非常广泛的应用。特别是在某些信息系统中，表单可谓是系统的灵魂。表单是Angular的核心问题域之一。它有一个非常强大的表单体系，既能很简单的实现简单需求，也可以较简单的实现复杂需求。特别是对大表单的处理、对动态表单的处理，都是Angular的长项。
我在Angular表单方面具有丰富的实践经验，本讲座会由浅入深的为您展示Angular表单体系的方方面面。
FBIWarning：对于一些“重表单”的系统，本讲座可能会导致你删除90%的代码^_^
- 表单的关注点剖析
- 最简单的表单
表单验证（内置验证器）
- 实用表单（注册）
远程用户名检查
自定义编辑控件
- 中型表单
- 大型表单
如何抽取独立表单模型
基于装饰器的表单
- 动态表单
金数据的模型分析
根据服务端提供的元数据生成表单
- 学习资料
王子实 光辉城市 Web 全栈技术负责人
个人简介：光辉城市 Web 全栈技术负责人，曾任长城软件全栈工程师，《Angular 权威教程》译者之一。
演讲内容介绍：
介绍与对比
认识流 (Stream) 与可观察对象 （Observables）
函数式响应编程 （FRP）与RxJs
一些常用操作符
Angular 中的 RxJs
怎么学 RxJs
总结与一些其他内容
责任编辑：
声明：该文观点仅代表作者本人，搜狐号系信息发布平台，搜狐仅提供信息存储空间服务。
今日搜狐热点如何看待 Angular 2.0 引入 RxJS 的问题_百度知道
如何看待 Angular 2.0 引入 RxJS 的问题
我有更好的答案
觉得Angular 2 应该是更易学，更简单了。至于原有的系统需要升级到2.0，我觉得现在完全不必要担忧。1. 因为到Angular 2正式在项目中使用的时候，估计是1-2年以后，或者更久，那是很多现有的Angular1.x项目未必还在（哈哈，勿喷）；2. Angular1.3版本在Angular2出来后官方会一直维护修复到1-2年；3. 大多数产品和项目UI变化基本上一年一变或者多变（如果一致不变，基本上没有必要升级了），使用了Angular.js后业务逻辑的代码基本上不会和UI耦合太多，所以要升级也并不是完全不可能。4. 我相信到时候，Angular团队和社区一定会想尽一切办法让Angular1.x的朋友完美过度升级的，现在担心这个问题，太早，还是把眼前的BUG修复了再说吧！
中国IT职业教育领先品牌
主营：教育培训-JAVA培训-大数据培训-Html5培训-UI培训-python培训等
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。}