angularjs 类似2 有没有类似jszip
点击联系发帖人
时间：2018-01-29 02:35
angular1.0的这些繁杂的api，还有它的执行速度，运行效率，学习曲线，都被人吐槽，最近一直在用ng1，实在很想吐槽。
最近写ng2的项目，写了一些ng2基础的应用（包括angular-cli，路由，表单验证，组件通信，ajax，服务／指令，lazyload）demo，地址在-&
学了一下angular2，看它有什么区别呢？
我就不复述网上一堆的对比言论了，我仅仅对我项目里用到的一个点来进行阐述。
有个需求就是一个radio对应一个input标签，比如有两对。
我需要选中1的时候传输1的value，选中2的时候传2的vaule。当选中1,2的input必须置空，选中2的时候1可以有值。还需要拿到数据以后还能显示回这个页面。
ng1做的时候要radio俩ngModel，input俩ngModel，你需要判断radio是不是被选中。input的ngModel就不用管了。（好的办法是用事件代理，这样在传输数据没问题，很简单，数据回显的时候就要根据数据推radio的选中情况了，不操作dom的情况下还需要加ngModel，不过也是没办法的事，不然改交互好了）
重要的一点是你必须$watch radio对应ngModel，如果没被选中，那2框置空。。坑的是如果我有好几个表单，我需要循环表单$watch！！！！坑死了。性能超差。（因为可能在代码里修改radio对应的ngModel来手动完成radio的唯一性，不然也不需要watch，事件代理也一样坑，回显的时候也必须手动维护一个数组来模拟radio的原生特性，但是可以避免$watch，因为发送请求数据不需要radio的状态，所以正在强烈建议重构这个页面）
开始ng2-----------------------------------------------------------------
ng2一个好的点就是ngModel的转变，它做的很棒的一点是单项绑定和双向绑定的选择，ngModel也是。（）是数据到模板的绑定，[ngModel]是模板到数据的绑定。
ng2有Attribute, Class, and Style 绑定，Event Binding。而且都是可以拼接字符串或者在binding里面写表达式，甚至是函数，比如：
& ckass(){& & & return " abc dec"& }
&input type="text" &#spy1 [ngClass]="'hahaha'+ckass()" /&
想用的心已经蠢蠢欲动了。。
普通的双向绑定如ng1是这样写
&input type="text" [(ngModel)]="input" /&
重要的是它可以拆开：
&input type="checkbox" [ngModel]="input" (ngModelChange)="handleChange()"/&
{{ input }}
（ngModelChange）是啥，它里面可以随便写吗？
答案是不能。借用雪狼大叔的翻译：安利一下
ngModelChange并不是&input&元素的事件。 它实际上是一个来自ngModel指令的事件属性。 当Angular在表单中看到一个[(x)]的绑定目标时， 它会期待这个x指令有一个名为x的输入属性，和一个名为xChange的输出属性。
双向绑定的指令都会有一个xxChange的属性，它可以修改绑定。比如我们给它加个条件，如果radio选中了，就可以绑定啦， 不然你就是空吧。
&button class="batton" (click)="handleClick($event)"& click me&/button&
&input type="checkbox" [ngModel]="input" (ngModelChange)="handleChange()"/&
&input type="text" [(ngModel)]="input" [disabled]="!check" /&
{{ input }}
export class AppComponent {
check = false;
handleChange(){
this.check = !this.
if(!this.check) {
this.input = "";
handleClick(e: any) {
this.check = false;
这里留一个button来解决程序修改radio状态的问题。可以看到，我们的handleChange其实就做了一个手动绑定的工作。如果没选中给置空。
运行你会发现，点击click me，input的内容并木有置空，因为radio的修改不是模板到数据的过程，是数据到模板的过程。
没关系，[ngModel]的单项绑定仍然可以自己控制，比如：
@Component({
selector: 'my-app',
template: `
&button class="batton" (click)="handleClick($event)"& click me&/button&
&input type="checkbox" [ngModel]="handleCheck()" (ngModelChange)="handleChange()"/&
&input type="text" [(ngModel)]="input" [disabled]="!check" /&
{{ input }}
styles: [``]
又来了个handleCheck，这是ng1的ngModel不能搞定的。反正不支持处理函数。
那ng2咋写：
export class AppComponent {
check = false;
handleCheck(){
if (!this.check) {
this.input = "";
handleChange(){
this.check = !this.
if(!this.check) {
this.input = "";
handleClick(e: any) {
this.check = false;
我们在数据到模板的绑定只需要判断是否选中就可以了，这样就避免了$watch。
还有一些表达方式的不一样，主要是因为都换成ts了，一些类似es6的语法都开始发挥作用。
1.模块注入
&因为es6的语法，去掉了ng1的依赖注入，改为模块化的注入，import语法
import { Component } from '@angular/core';
export class AppModule { }
由于ng2的模块化，原本模块化不那么明显的ng1的语法要改变很多，模块都作类，新增了注解语法，
@Component({
selector: 'hero',
templateUrl: 'component.html'
export class HeroFormComponent {
Component注解规定了这个模块的selector，和模板template，然后把这个类做控制器。
3.数据展示
基本类似ng1，双花括号的展示方式
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
&h1&{{title}}&/h1&
&h2&My favorite hero is: {{myHero}}&/h2&
export class AppComponent {
title = 'Tour of Heroes';
myHero = 'Windstorm';
只是模板选择器写在了注解里，控制器为此类。
然后这个类就可以做为一个模块使用，其实就是ng1的组件型指令
&my-app&loading...&/my-app&
另外，template里的一些自带指令也是类似ng1，只是写法不同，除了上面写的绑定意外，再说一个ngFor
template: `
&h1&{{title}}&/h1&
&h2&My favorite hero is: {{myHero}}&/h2&
&p&Heroes:&/p&
&li *ngFor="let hero of heroes"&
{{ hero }}
就是类似ng-repeat的作用了。只是换了个语法，看文档就好了。
为了使键盘事件比较方便，然后自己封装进了ng2，vue已做此工作
&input #box
(keyup.enter)="update(box.value)"
(blur)="update(box.value)"&
其余的事件都是类似的，带有（）括号的单向绑定。
服务也有点差距，注入和声明有点不同，此为声明
import { Injectable } from '@angular/core';
@Injectable()
export class HeroService {
当 TypeScript 看到@Injectable()装饰器时，就会记下本服务的元数据。 如果 Angular 需要往这个服务中注入其它依赖，就会使用这些元数据。
使用服务首先引入服务
import { HeroService } from './hero.service';
然后需要在注解里注册一下
providers: [HeroService]
然后在这个类中就可以使用这个服务了
export class AppComponent implements OnInit {
title = 'Tour of Heroes';
heroes: Hero[];
constructor(private heroService: HeroService) { }
getHeroes(): void {
this.heroService.getHeroes().then(heroes =& this.heroes = heroes);
ngOnInit(): void {
this.getHeroes();
6，生命周期
ng2增加了很多生命周期，如上面的ngOnInit等等，都是ng1没有的，就不介绍了
跟ng1类似ng2也是封装了ajax到http，不同的是现在的ng2可以用rxjs了。。rxjs好像贵族的东西，用的人很少，学习成本不低，但是好用。ng2的http不是封装的promise了，而是简化的rx的Observable，需要subscribe来执行他的请求。也可以引入rx的toPromise，然后then下去就可以了。有点强破推销的意思。
其实就是ng1的filter。
import { Pipe, PipeTransform } from '@angular/core';
* Raise the value exponentially
* Takes an exponent argument that defaults to 1.
value | exponentialStrength:exponent
* Example:
exponentialStrength:10}}
formats to: 1024
@Pipe({name: 'exponentialStrength'})
export class ExponentialStrengthPipe implements PipeTransform {
transform(value: number, exponent: string): number {
let exp = parseFloat(exponent);
return Math.pow(value, isNaN(exp) ? 1 : exp);
@Pipe装饰器告诉Angular：这是一个管道，管道类实现了PipeTransform接口的transform方法，该方法接受一个输入值和一些可选参数，并返回转换后的值。transform方法返回就处理后的值。
路由配置没什么说的，跟着文档一步步来就好了，由于是import的引入，不存在ng1包含路由很大的情况，根据配置来就好了。这种框架的路由都是类似的。
10. 组件交互
ng1现在都忘记了，主要说一下ng2的组件交互。
父传子的交互方式是靠props来传递的，这点跟react一样了，子组件的状态是纯靠输入，这是material的分页组件，在子组件里需要用装饰器来取，@input。下面例子就有
&md-paginator #paginator
[length]="xxx"
[pageIndex]="0"
[pageSize]="10"
[pageSizeOptions]="[10]"&
&/md-paginator&
&子传父组件是不建议的，但也有很多需求，比如打开一个子组件做modal，然后modal关闭的时候回传给父组件数据，对于react的方案一个是redux，另一个包括ng1也在用的就是事件系统。都有各自的事件系统，
但是ng2的事件系统最为强大，因为它是rxjs。
这里给一个例子：subject就是rxjs的对象。关于rxjs的介绍另有博文：
@Component({
selector: 'wap',
template: '&app-add-warp [subject]="subject" &&/app-add-warp&'
export class addWarpComponent {
subject = new Subject();
constructor() {
this.subject.subscribe({
next: (v) =& console.log(v)
@Component({
selector: 'app-add',
templateUrl: './add.component.html',
styleUrls: ['./add.component.scss']
export class AddComponent implements OnInit {
@Input('subject') cbSubject:Subject&any&;
constructor() {
ngOnInit() {
this.cbSubject.next(this.user);
subscribe就是触发事件要执行的东西，next方法就是触发事件的点。
阅读(...) 评论()前端丨浅显的介绍一下Angular2的“八大件”a year ago114收藏分享举报文章被以下专栏收录来自硅谷的终身学习平台{&debug&:false,&apiRoot&:&&,&paySDK&:&https:\u002F\u002Fpay.zhihu.com\u002Fapi\u002Fjs&,&wechatConfigAPI&:&\u002Fapi\u002Fwechat\u002Fjssdkconfig&,&name&:&production&,&instance&:&column&,&tokens&:{&X-XSRF-TOKEN&:null,&X-UDID&:null,&Authorization&:&oauth c3cef7c66aa9e6a1e3160e20&}}{&database&:{&Post&:{&&:{&isPending&:false,&contributes&:[{&sourceColumn&:{&lastUpdated&:,&description&:&http:\u002F\u002Fwww.bittiger.io\u002F&,&permission&:&COLUMN_PUBLIC&,&memberId&:,&contributePermission&:&COLUMN_PUBLIC&,&translatedCommentPermission&:&all&,&canManage&:true,&intro&:&来自硅谷的终身学习平台&,&urlToken&:&bittiger&,&id&:5688,&imagePath&:&b65fc4ce1d7b4c4509f44.jpeg&,&slug&:&bittiger&,&applyReason&:&&,&name&:&BitTiger.io&,&title&:&BitTiger.io&,&url&:&https:\u002F\u002Fzhuanlan.zhihu.com\u002Fbittiger&,&commentPermission&:&COLUMN_ALL_CAN_COMMENT&,&canPost&:true,&created&:,&state&:&COLUMN_NORMAL&,&followers&:18687,&avatar&:{&id&:&b65fc4ce1d7b4c4509f44&,&template&:&https:\u002F\u002Fpic6.zhimg.com\u002F{id}_{size}.jpg&},&activateAuthorRequested&:false,&following&:false,&imageUrl&:&https:\u002F\u002Fpic6.zhimg.com\u002Fb65fc4ce1d7b4c4509f44_l.jpg&,&articlesCount&:376},&state&:&accepted&,&targetPost&:{&titleImage&:&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-0c33ccf9f13f8e8de66f32ea41e4f2b9_r.jpg&,&lastUpdated&:,&imagePath&:&v2-0c33ccf9f13f8e8de66f32ea41e4f2b9.jpg&,&permission&:&ARTICLE_PUBLIC&,&topics&:[,7912],&summary&:&\u003Cb\u003E本文作者：Payson，现在职Microsoft\u003C\u002Fb\u003E Angular 是用来做客户端应用的框架，只需要HTML和能编译成JavaScript的语言，比如Dart啦，比如TypeScript啦，或者直接用JavaScript也凑合事儿。官方推荐的是和TypeScript配合着用。那有些同学就要问了，\u003Cstrong\u003E这框架神奇在哪里…\u003C\u002Fstrong\u003E&,©Permission&:&ARTICLE_COPYABLE&,&translatedCommentPermission&:&all&,&likes&:0,&origAuthorId&:0,&publishedTime&:&T09:57:23+08:00&,&sourceUrl&:&&,&urlToken&:,&id&:1907747,&withContent&:false,&slug&:,&bigTitleImage&:false,&title&:&前端丨浅显的介绍一下Angular2的“八大件”&,&url&:&\u002Fp\u002F&,&commentPermission&:&ARTICLE_ALL_CAN_COMMENT&,&snapshotUrl&:&&,&created&:,&comments&:0,&columnId&:5688,&content&:&&,&parentId&:0,&state&:&ARTICLE_PUBLISHED&,&imageUrl&:&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-0c33ccf9f13f8e8de66f32ea41e4f2b9_r.jpg&,&author&:{&bio&:&MS in Marketing & MBA\u002FGrowth Hacker&,&isFollowing&:false,&hash&:&af83f53a8cfe128c23f25d&,&uid&:80,&isOrg&:false,&slug&:&xi-lan-hua-66&,&isFollowed&:false,&description&:&在硅谷的非码农。&,&name&:&Ray Cao&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fxi-lan-hua-66&,&avatar&:{&id&:&v2-4bea69cc17e730da91b3e9&,&template&:&https:\u002F\u002Fpic1.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&memberId&:2014720,&excerptTitle&:&&,&voteType&:&ARTICLE_VOTE_CLEAR&},&id&:492908}],&title&:&前端丨浅显的介绍一下Angular2的“八大件”&,&author&:&xi-lan-hua-66&,&content&:&\u003Cp\u003E\u003Cb\u003E本文作者：Payson，现在职Microsoft\u003C\u002Fb\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003EAngular 是用来做客户端应用的框架，只需要HTML和能编译成JavaScript的语言，比如Dart啦，比如TypeScript啦，或者直接用JavaScript也凑合事儿。官方推荐的是和TypeScript配合着用。那有些同学就要问了，\u003Cstrong\u003E这框架神奇在哪里啊？为何就能做客户端应用了？框架里面都有什么啊？\u003C\u002Fstrong\u003EAngular主要有8个东西构成，包括：\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003E模块 (module)\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003E组件 (component)\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003E模板 (template)\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003E元数据 (metadata)\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003E数据绑定
(data binding)\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003E指令 (directive)\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003E服务 (service)\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003E依赖注入 (dependency injection)\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E这八大件就好比孙悟空身上的毛，拔下来一吹，能变出各种东西来。所以啊，只要你吃透了这老北京八大件，那做一个客户端应用简直就是分分钟的事儿。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E模板\u003C\u002Fstrong\u003E基本定义了你的应用长啥样，长得好不好看得有人看着，\u003Cstrong\u003E组件\u003C\u002Fstrong\u003E就负责管理这些模板。长得好看没用那不就成了花瓶了么，所以还需要\u003Cstrong\u003E服务\u003C\u002Fstrong\u003E来给应用添加一些逻辑，这些东西东一块西一块的乱七八糟还真不行，我们还需要\u003Cstrong\u003E模块\u003C\u002Fstrong\u003E来打包所有的组件、服务等等。所以说，模块就是用来打包的。一个应用程序有很多模块打的包，一层一层的，最开始那个就叫做根模块。我们通过引诱（其实是引导吧）根模块来启动程序。\u003C\u002Fp\u003E\u003Cp\u003E我偷偷从官网偷了一张照片来给大家感受一下这八大件是怎么互相配合的。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-19fbd5fb7aff_b.jpg\& data-rawwidth=\&1330\& data-rawheight=\&650\& class=\&origin_image zh-lightbox-thumb\& width=\&1330\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-19fbd5fb7aff_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1330'%20height='650'&&\u002Fsvg&\& data-rawwidth=\&1330\& data-rawheight=\&650\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1330\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-19fbd5fb7aff_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-19fbd5fb7aff_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E那下面就浅显地介绍一下这八大件。\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cstrong\u003E模块 （Module）\u003C\u002Fstrong\u003E\u003C\u002Fh2\u003E\u003Cp\u003E刚才提到了根模块，是用来启动程序的。没有根模块，再好的程序也跑不起来。所以模块很重要很重要。Angular的应用，都是模块化的。每个feature特性都有自己的子模块，无论是子模块还是根模块定义的结构都差不多。我们可以把模块看成一个行李箱，里面装满了各种东西。包括declaration、imports、providers等。declaration用来放各种小零件，包括组件、指令、管道等。imports是导入其他的模块。providers用来盛放各种service。for一个example，一个module大概长这个样子。\u003Cstrong\u003E关于Module的细节，下一篇Angular的文章我会详细说哒。\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-402e40ce5ac037d1cfe1784_b.jpg\& data-rawwidth=\&972\& data-rawheight=\&464\& class=\&origin_image zh-lightbox-thumb\& width=\&972\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-402e40ce5ac037d1cfe1784_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='972'%20height='464'&&\u002Fsvg&\& data-rawwidth=\&972\& data-rawheight=\&464\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&972\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-402e40ce5ac037d1cfe1784_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-402e40ce5ac037d1cfe1784_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Ch2\u003E\u003Cstrong\u003E组件 (Component) 元数据 (Metadata) 模板 (Template)\u003C\u002Fstrong\u003E\u003C\u002Fh2\u003E\u003Cp\u003E这仨可以一起说。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E模板\u003C\u002Fstrong\u003E就是HTML，就是你告诉Angular，喂喂喂，这儿你给我加个按钮，那儿你给我来个日历就是这样。除了&h1& &p&等等这些常见的html元素，我们还可以加自定义的元素在模板里面。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E组件\u003C\u002Fstrong\u003E负责让模板看起来没那么无聊。比如你在模板里面定义了一个按钮，那你按了之后发生了什么啊？或者你定义了一个input box，你输入你的名字后会发生什么啊？这就需要Component来定义。\u003C\u002Fp\u003E\u003Cp\u003E那每个Component都不一样，我们怎么区分呢？其实应该说Angular怎么识别呢？就是靠这个叫做\u003Cstrong\u003E元数据\u003C\u002Fstrong\u003E的东西。元数据会定义一些配置细节，告诉Angular：嘿Angular，如果你想把这个东西给大家看，那你得先去做ABCDEFG这几件事儿。Angular按照元数据的指示，根据Template的样子最后创建视图。\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cstrong\u003E数据绑定 (Data Binding)\u003C\u002Fstrong\u003E\u003C\u002Fh2\u003E\u003Cp\u003E如果没有任何框架，我们自己写数据绑定，那简直就是人间地狱啊，噩梦啊。之前我们可怜的前端程序员都是用jQuery，我们要纯手工打造各种数据更新，UI更新，经常犯错，bug一堆堆，debug简直就是家常便饭。后来越来越多的框架都有数据绑定了，无论是单向的双向的还是五花板门乱七八糟项的，都帮我们可怜的前端程序员省去了很多时间。这样我们就可以早早下班回家老婆孩子热炕头了。\u003C\u002Fp\u003E\u003Cp\u003EAngular2比Angular1更好滴实现了数据绑定。一共有四种吧：\u003C\u002Fp\u003E\u003Col\u003E\u003Cli\u003E\u003Cp\u003E {{someString}}这个叫插值绑定，从Component到DOM，之前在Angular1里面也有\u003Cbr\u003E\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E[someThing] 这个叫属性绑定，也是从Component到DOM\u003Cbr\u003E\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E（event）这个是事件绑定，从DOM到Component\u003Cbr\u003E\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E最后一个就是把上面这两个结合在一起[(ng...)] 双向绑定\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-06feecb0d15c751c9781d_b.jpg\& data-rawwidth=\&1018\& data-rawheight=\&634\& class=\&origin_image zh-lightbox-thumb\& width=\&1018\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-06feecb0d15c751c9781d_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1018'%20height='634'&&\u002Fsvg&\& data-rawwidth=\&1018\& data-rawheight=\&634\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1018\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-06feecb0d15c751c9781d_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-06feecb0d15c751c9781d_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003C\u002Fol\u003E\u003Cp\u003E除了这四种现在在各大框架中都十分普遍的绑定方式外，Angular2里面还有一种爸爸对儿子的@input绑定和儿子对爸爸的@output绑定。这种方式让爸爸跟儿子毫无代沟，交流起来丝毫不费力。\u003Cbr\u003E\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cstrong\u003E指令 (directive)\u003C\u002Fstrong\u003E\u003C\u002Fh2\u003E\u003Cp\u003E指令跟组件(Component)非常类似，其实组件就相当于一个指令。指令地位崇高，包括结构型指令和属性指令。\u003C\u002Fp\u003E\u003Cp\u003E结构型我们在Angular1里面也经常用啊，就是现在语法不太一样了，比如ngfor, ngIf等等，都是结构型指令。这些一般是不会改变任何元素的行为啦，外观啦等等。相反，属性型就非要改外观或者行为。\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cstrong\u003E服务（Service）\u003C\u002Fstrong\u003E\u003C\u002Fh2\u003E\u003Cp\u003E以前呐，总听说中国服务业不发达，我回家一看，这挺发达的啊，到处灯红酒绿的。人想活的好啊，还得靠服务业，不是大保健那种服务啦。\u003C\u002Fp\u003E\u003Cp\u003E应用程序中的服务无处不在无孔不入，哪儿都有它。上面介绍的组件里面有一些变量，有些用户输入的变量啦，用户的选择啦，这些数据都乖乖地待在前端呢，不直接跟服务器对话。要不你用户爱输入什么输入什么，爱上传什么上传什么，服务器不就炸裂了么？组件要与服务(service)直接沟通。这样服务里面就可以加一些验证逻辑，比如你想下载小黄片什么的，服务可以阻止你（其实没有这种服务）。服务就像大宅子里面的大管家，所有的琐事儿都是服务来管。大管家希望每一个组件尽量精简，其余的细节内容都交给服务托管。那组件中如何使用这些服务呢？就靠下面要介绍的依赖注入。\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003E依赖注入（Dependency Injection）\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003EAngular通过依赖注入让组件可以使用服务。Angular创建一个组件的时候，首先你得跟上级领导请求，喂，领导啊，我这个组件需要这些服务，领导说，那好吧，那给你个注射器（injector）你用去吧。就像这样：\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003Econstructor( private service: MyService)\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E这个注射器啊会存放以前创建的那个服务，上面这行代码就是用service来存放之前创建好的MyService。那有些同学就要问了，你啥时候创建MyService的，我咋不知道？哦对，那如果这个服务还没有被创建的话，聪明的注射器同学就会先创建一个MyService服务实例，然后把这个服务跟Angular讲。这就是依赖注入啦。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-b8af580d645d221ea4ac1b_b.jpg\& data-rawwidth=\&1318\& data-rawheight=\&628\& class=\&origin_image zh-lightbox-thumb\& width=\&1318\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-b8af580d645d221ea4ac1b_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1318'%20height='628'&&\u002Fsvg&\& data-rawwidth=\&1318\& data-rawheight=\&628\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1318\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-b8af580d645d221ea4ac1b_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-b8af580d645d221ea4ac1b_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cstrong\u003E总结\u003C\u002Fstrong\u003E\u003C\u002Fh2\u003E\u003Cp\u003E今天浅显地介绍了一下Angular的八大件，这八大件是Angular应用程序的最基础的东西，读完这篇文章你就算了解Angular的基本元素了，也就上了道了。当然啦，还有很多其他东西需要学习。\u003C\u002Fp\u003E\u003Cp\u003E最后的最后我想说，以上所有的名词，包括组件、模板、模块、指令等等都不是我翻译的，都是官方翻译的。吐个槽，翻译的真难听啊。想象一下我跟爷爷奶奶们讲模块指令什么的，他们肯定一脚把我踹飞。\u003C\u002Fp\u003E\u003Cbr\u003E\u003Ch2\u003E\u003Cb\u003E福利\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003E最后，再提一个小小的福利，现在关注公众号“论码农的自我修养”或搜索“\u003Cb\u003Ebit_tiger\u003C\u002Fb\u003E”并回复“\u003Cb\u003E\u003Cu\u003ECareer\u003C\u002Fu\u003E\u003C\u002Fb\u003E”即可下载我们的\u003Cb\u003E原创求职手册\u003C\u002Fb\u003E。这本手册由Mike Kehoe所写。作为BitTiger的Co-founder之一， 他曾就职于德勤，并在中国交流学习过。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-87f0ccf8fac114cc2f7d9_b.jpg\& data-rawwidth=\&778\& data-rawheight=\&866\& class=\&origin_image zh-lightbox-thumb\& width=\&778\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-87f0ccf8fac114cc2f7d9_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='778'%20height='866'&&\u002Fsvg&\& data-rawwidth=\&778\& data-rawheight=\&866\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&778\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-87f0ccf8fac114cc2f7d9_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-87f0ccf8fac114cc2f7d9_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E另外，我们特别反感诱导分享，所以无需拉群无需分享。回复即可下载。\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-046f4a972d1f1598bb08_b.jpg\& data-rawwidth=\&720\& data-rawheight=\&1280\& class=\&origin_image zh-lightbox-thumb\& width=\&720\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-046f4a972d1f1598bb08_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='720'%20height='1280'&&\u002Fsvg&\& data-rawwidth=\&720\& data-rawheight=\&1280\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&720\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-046f4a972d1f1598bb08_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-046f4a972d1f1598bb08_b.jpg\&\u003E\u003C\u002Ffigure\u003E&,&updated&:new Date(&T01:57:23.000Z&),&canComment&:false,&commentPermission&:&anyone&,&commentCount&:9,&collapsedCount&:0,&likeCount&:114,&state&:&published&,&isLiked&:false,&slug&:&&,&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-0c33ccf9f13f8e8de66f32ea41e4f2b9_r.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&reviewers&:[],&topics&:[{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&Angular&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&前端开发&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&前端工程师&}],&adminClosedComment&:false,&titleImageSize&:{&width&:750,&height&:422},&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&column&:{&slug&:&bittiger&,&name&:&BitTiger.io&},&tipjarState&:&inactivated&,&annotationAction&:[],&sourceUrl&:&&,&pageCommentsCount&:9,&hasPublishingDraft&:false,&snapshotUrl&:&&,&publishedTime&:&T09:57:23+08:00&,&url&:&\u002Fp\u002F&,&lastestLikers&:[{&bio&:&刷个知乎静一静...&,&isFollowing&:false,&hash&:&f81c870a4ad0d7&,&uid&:24,&isOrg&:false,&slug&:&xu-hui-min&,&isFollowed&:false,&description&:&通信狗&,&name&:&徐慧敏&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fxu-hui-min&,&avatar&:{&id&:&943cadf0e46eef53e54ef7&,&template&:&https:\u002F\u002Fpic2.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&计算机学生-- 纯素，爱法斗&,&isFollowing&:false,&hash&:&c8f0343b24dadb4866dd&,&uid&:56,&isOrg&:false,&slug&:&yix-leng&,&isFollowed&:false,&description&:&&,&name&:&Yix Leng&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fyix-leng&,&avatar&:{&id&:&13b5e56a3aa1fe9a9f59e0dd&,&template&:&https:\u002F\u002Fpic4.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&一层不变的世界是那样的枯燥，换个花样来提升自己对生活的热爱&,&isFollowing&:false,&hash&:&ef9fc25b1ceeba420c08ae&,&uid&:228400,&isOrg&:false,&slug&:&chris-71-53&,&isFollowed&:false,&description&:&University of Waterloo - 2A Computer Science&,&name&:&Chris&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fchris-71-53&,&avatar&:{&id&:&v2-f452a6ebcd843551bba3c&,&template&:&https:\u002F\u002Fpic1.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&智人永不为奴！&,&isFollowing&:false,&hash&:&a60d66de248a1ecff0f46&,&uid&:72,&isOrg&:false,&slug&:&xia-zhi-chen&,&isFollowed&:false,&description&:&&,&name&:&夏之晨&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fxia-zhi-chen&,&avatar&:{&id&:&da8e974dc&,&template&:&https:\u002F\u002Fpic4.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&软件工程师&,&isFollowing&:false,&hash&:&2c5ee726c1570516afcfb4&,&uid&:772700,&isOrg&:false,&slug&:&roceleylaw&,&isFollowed&:false,&description&:&巧笑嫣然，顾盼生姿&,&name&:&RoceleyLaw&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Froceleylaw&,&avatar&:{&id&:&fec7e4edd65de60d74fb5&,&template&:&https:\u002F\u002Fpic4.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false}],&summary&:&\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-402e40ce5ac037d1cfe.jpg\& data-rawwidth=\&972\& data-rawheight=\&464\& class=\&origin_image inline-img zh-lightbox-thumb\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-402e40ce5ac037d1cfe1784_r.jpg\&\u003E\u003Cb\u003E本文作者：Payson，现在职Microsoft\u003C\u002Fb\u003E Angular 是用来做客户端应用的框架，只需要HTML和能编译成JavaScript的语言，比如Dart啦，比如TypeScript啦，或者直接用JavaScript也凑合事儿。官方推荐的是和TypeScript配合着用。那有些同学就要问了，\u003Cstrong\u003E这框架神奇在哪里…\u003C\u002Fstrong\u003E&,&reviewingCommentsCount&:0,&meta&:{&previous&:{&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\u002Fpic1.zhimg.com\u002F50\u002Fv2-64f1d4bf9bd5e022a7cf95_xl.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&topics&:[{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&程序员&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&面试&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&微软（Microsoft）&}],&adminClosedComment&:false,&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&author&:{&bio&:&MS in Marketing & MBA\u002FGrowth Hacker&,&isFollowing&:false,&hash&:&af83f53a8cfe128c23f25d&,&uid&:80,&isOrg&:false,&slug&:&xi-lan-hua-66&,&isFollowed&:false,&description&:&在硅谷的非码农。&,&name&:&Ray Cao&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fxi-lan-hua-66&,&avatar&:{&id&:&v2-4bea69cc17e730da91b3e9&,&template&:&https:\u002F\u002Fpic1.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&column&:{&slug&:&bittiger&,&name&:&BitTiger.io&},&content&:&\u003Cp\u003E\u003Cb\u003E本文作者：Payson，现在职Microsoft\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E我参加过很多面试，也当过多次面试官，今天就自己以往的经验谈谈在北美面试IT公司的时候，口语能力的重要性。\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E我们这些勤劳勇敢善良的计算机学生，在准备面试之前，都刻苦勤奋的努力刷题，努力掌握各种科学知识，努力在白板写代码，写到手酸头痛。\u003Cstrong\u003E但往往我们都忽略了面试中更重要的一点，就是自己的表达能力。\u003C\u002Fstrong\u003E北美面试基本通用语言是英语，也有比如你去加拿大的魁北克省，可能面试要求是法语。无论哪种语言吧，对我们大部分华人来说，都是第二语言。而我们大部分华人都不善于表达，导致我们在面试准备中忽视了口语的练习，与大offer擦肩而过，\u003Cstrong\u003E最后都让那些口吐莲花眉飞色舞的印度人把大offer抢走了。\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-406cfb1b3cabc_b.jpg\& data-rawwidth=\&600\& data-rawheight=\&377\& class=\&origin_image zh-lightbox-thumb\& width=\&600\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-406cfb1b3cabc_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E今天结合几个小故事，来说说就程序员来说不同面试阶段口语的重要性，以及面试中的\u003Cstrong\u003E几个大坑\u003C\u002Fstrong\u003E。\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cstrong\u003E电话面试阶段：背个百用段子\u003C\u002Fstrong\u003E\u003C\u002Fh2\u003E\u003Cp\u003E你能进入这阶段面试，说明你的简历已经被面试官们集体传阅一遍了。即使这样，一般电话一响，俩人首先要寒暄一发。面试官不能上来就问问题，不然显得太不礼貌了。于是为了打破尴尬的局面，面试官往往就会说：“introduce yourself\&。你一拍大腿，这我会啊，这太简单了。于是开始说自己在哪里上学，学了什么，在哪里实习，做了什么，在哪里上班，做了什么等等。\u003C\u002Fp\u003E\u003Cp\u003E这就是程序员面试中的一个大坑。\u003Cstrong\u003E我的意见就是千万不要按照简历介绍自己。\u003C\u002Fstrong\u003E我们面试的时候都很紧张，难免磕磕巴巴的，说错话。如果完全按照简历介绍自己，再加上紧张的时候说错几个词，磕磕巴巴的，就会给人一种印象：“\u003Cstrong\u003E怎么你连简历都念不明白？ 这样能跟团队合作愉快么？\u003C\u002Fstrong\u003E”\u003C\u002Fp\u003E\u003Cp\u003E几年以前我和一个英语是母语的同事W一起电面过一个人，她的简历我看得清清楚楚，以前她还是中国某985的计算机老师。我其实是一种膜拜的心情去面试她的。我和W都是那种坑人的面试官，就让她自我介绍。她说的特别不流利，以至于W根本不知道她在说什么。然后W就友善地跟她说：thanks for your time。问题都没问就走了。\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-a034a40b905b2ee458efa40_b.jpg\& data-rawwidth=\&640\& data-rawheight=\&484\& class=\&origin_image zh-lightbox-thumb\& width=\&640\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-a034a40b905b2ee458efa40_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E电面的时候面试官看不到你的脸，看不到你手舞足蹈，看不到你眉飞色舞，唯一能判断的就是你的语言。如果想过这一关，除了技术过硬，一定要保证自己的自我介绍不要给自己减分。\u003Cstrong\u003E我的建议是给自己起个名号。\u003C\u002Fstrong\u003E行走江湖谁没个名号。名号呢要听起来貌似是个小缺点，仔细想想还是个蛮有意思的特点，但是回家一琢磨，貌似是个可爱可敬的优点。举个小例子，比如说你跟面试官说：啊，大家给我起了个外号叫Hello World，为啥呢？因为我总是喜欢尝试不同的新技术，每次出现了新的东西，我总是勇于尝试，喜欢搞个“Hello World”版本的小实验，然后跟大家讨论。这种小外号说完一般你都会讲讲为什么你会有这种外号。同时背一个百用的自我介绍段子，跟你要做的工作技术不要有任何关系，也不要出现在简历上。这个段子可以是个小故事，越细节越好。给把这个段子背熟了。\u003C\u002Fp\u003E\u003Cp\u003E当你听到“introduce yourself”的时候就条件反射一样滴说出来这个段子。然后马上甩包给面试官“how about you, what are you working on\& 等等，这样能马上结束寒暄阶段，正式进入我们计算机学生最擅长的技术阶段。\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cstrong\u003EOnsite面试阶段：边说边写\u003C\u002Fstrong\u003E\u003C\u002Fh2\u003E\u003Cp\u003E\u003Cstrong\u003E算法题以及设计题面试\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E这个阶段很多人都是埋头苦干，在白板上面努力写代码，恨不得听到问题的一半就下笔。然后挥汗如雨，下笔如有神。很多情况，\u003Cstrong\u003E问题的答案不是重点，重点在于跟面试官讨论问题。\u003C\u002Fstrong\u003E任何一个你在公司面对的实际问题都没有什么标准答案，在遇到问题的时候，如何跟同事讨论才是工作的重点。一旦方案确定下来，到了具体实施阶段，那就很容易了。所以我们要放对重点，在讨论上面（敲黑板）。\u003C\u002Fp\u003E\u003Cp\u003E讨论就得说话，这就要靠自己的口语能力。 举个例子，我当年刚毕业不久，想学习如何能做一个优秀的面试官，于是跟老板A一起去面试一个人，刚好是个华人。老板问了一个特别简单的算法题，类似于遍历二叉树之类的。面试者一句话都没说，就开始写了，很快就写完了。然后老板A问他，如果情况一，你这个算法还工作吗？面试者一句话没说，又开始改代码，改到了情况一工作。老板A又问，那情况二呢？面试者有点不悦，就继续改代码。老板A打断了他，说：“我希望你能了解问题的细节再开始实现。” 面试者就忽然恍然大悟了，很明显他其实心里清楚应该问清楚问题。但一紧张可能忘记了，再加上对自己的口语不自信，想尽量少说话，让自己在尽量少的时间里面多写点代码，多做完几道题。\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-d752caf728dcb01d1265fdd_b.jpg\& data-rawwidth=\&268\& data-rawheight=\&200\& class=\&content_image\& width=\&268\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E一般面试题的答案基本都是固定的，面试官也知道问题的答案。那面试官为什么还要不厌其烦地问不同的人同样的问题呢？难道就是想花一个小时时间看别人在自己面前写代码吗？当然不是。\u003Cstrong\u003E这个面试者以后可能是他的同事，他来就是想看看自己是否能跟同事一起好好合作。\u003C\u002Fstrong\u003E同事之间大部分时间都是在讨论项目如何实现，问题如何解决。而不是你先埋头苦干，做出了一个错误答案，大家排除错误答案之后，再继续埋头苦干。\u003C\u002Fp\u003E\u003Cp\u003E所以算法面试阶段一定要努力跟面试官沟通，问清楚问题的细节，问清楚需求再动笔。哪怕讨论的时间特别长，根本没有时间实现代码了。最后写点伪代码，说出自己的思路也是可以的。毕竟你在讨论过程中已经表达了自己对于整个问题的深刻理解。一般算法面试都是一个小时，想想用英语自言自语一个小时有多累？所以面试前一定不要忘记努力练习口语。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E基础知识面试\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E这阶段没有太多讨论，基本就是问答形式。完全靠口语了。当听到问题之后，一定要多说细节，让面试官感觉到你真的是理解了。\u003C\u002Fp\u003E\u003Cp\u003E曾经面试过一个人，我问他你知道deadlock吗？他说：“yes.” 我本来期待他说什么是deadlock呢，他就没有说。我继续问，那你知道semaphore吗？他说：“yes.” 因为当天面试了四五个人，问他们知道吗他们都说不知道。终于有一个知道的了我特别开心。就想继续问问，那你来说说他们的区别？他说：“they are very different.” 然后就没有然后了。我就问他，是A吗（一个错误答案），他说不是。我就问，那是B吗（正确答案），他说是的。我说你都理解啊，你为什么不自己说呢？他也不吭声。\u003C\u002Fp\u003E\u003Cp\u003E当面试结束后，他是当天最后一个面试的人，我送他下楼，他用中文跟我说的特别清楚，semaphore的细节啊，他以前工作中遇到过这样的问题，他是怎么解决的啊。我一听技术大牛啊！但当时你面试为何不说呢？\u003Cstrong\u003E他说，我怕用英文说不明白。\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-7997bedde902a2debebf560e_b.jpg\& data-rawwidth=\&640\& data-rawheight=\&605\& class=\&origin_image zh-lightbox-thumb\& width=\&640\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-7997bedde902a2debebf560e_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E基础知识面试阶段，只有一问一答，一般都是标准答案。这阶段的面试时间不会太长，你的时间有限。一定要在有限的时间里面回答更多细节更多问题哦。所以，当准备阶段，你理解所有概念的阶段，就试图用你要面试的语言去理解就对了。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E最后问问题阶段\u003C\u002Fstrong\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E大部分人熬到这个阶段都是精疲力尽，脑子都不转了。只想赶紧回家倒头大睡。面试官看你一个多小时了，可能也累了。问的问题千奇百怪也就可以理解了。这阶段的口语很简单，但也是相当重要的。记住我们程序员的面试，面试官都是程序员，他们不是HR，不是Recruiter，\u003Cstrong\u003E一定不要问关于公司福利的问题。\u003C\u002Fstrong\u003E比如你们产假几天？你们奖金多少？你们公司健康保险是什么样的？把这种问题留给HR和Recruiter。\u003C\u002Fp\u003E\u003Cp\u003E这阶段虽然是让你问问题，但其实是面试官给你最后的表达自己的机会啊。\u003Cstrong\u003E问一个你熟悉的技术相关的问题。\u003C\u002Fstrong\u003E比如，我本科学学过信息安全，我就问问安全方面的，然后当面试官答完我的问题后，我还能评论两句，说对呀对呀，哎呀我以前也这么想的，但我觉得XXX还能提高。真的很高兴能跟你聊之类的。把话语权控制在自己手上，不要让它溜掉。这一切的一切都要靠自己强大的表达能力啊！\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cstrong\u003E总结\u003C\u002Fstrong\u003E\u003C\u002Fh2\u003E\u003Cp\u003E无论什么样的面试，时间总是短暂的，能让对方在短暂的时间肯定你是一件很难的事情。每一个去参加面试的人，能表达自己的时间基本是固定的。为了能在同样的时间，给面试官留下更好的印象，\u003Cstrong\u003E一定要多说多表达。\u003C\u002Fstrong\u003E流畅清晰的表达能让面试官忘记你的语言，透过你的语言看到你的技术能力。\u003Cstrong\u003E在准备面试的过程中，把自己的思考过程说出来，用你要面试的语言说出来，很快就会有提高啦。\u003C\u002Fstrong\u003E祝大家都拿到大offer咯。\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003E福利\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003E最后，再提一个小小的福利，现在关注公众号“论码农的自我修养”或搜索“\u003Cb\u003Ebit_tiger\u003C\u002Fb\u003E”并回复“\u003Cb\u003E\u003Cu\u003E面经\u003C\u002Fu\u003E\u003C\u002Fb\u003E”即可下载我们的\u003Cb\u003E独家面经大礼包\u003C\u002Fb\u003E。\u003C\u002Fp\u003E\u003Cp\u003E这个系列包括的公司名单：\u003C\u002Fp\u003E\u003Cp\u003EAntra\u002FApple\u002FBloomberg\u002FFacebook\u002FGoogle\u002FGofundme\u002FCaskdata\u002FZulily\u002FThumback\u002FHouzz\u002FNetflix\u002FHedviginc\u002FCoursera\u002FPocketGems\u002FSnapchat\u002FSoundhound……\u003C\u002Fp\u003E\u003Cp\u003E另外，我们特别反感诱导分享，所以无需拉群无需分享。现在只提供第一期的下载，但是我们会定期更新这个系列。\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-046f4a972d1f1598bb08_b.jpg\& data-rawwidth=\&720\& data-rawheight=\&1280\& class=\&origin_image zh-lightbox-thumb\& width=\&720\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-046f4a972d1f1598bb08_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E&,&state&:&published&,&sourceUrl&:&&,&pageCommentsCount&:0,&canComment&:false,&snapshotUrl&:&&,&slug&:,&publishedTime&:&T09:45:52+08:00&,&url&:&\u002Fp\u002F&,&title&:&独家丨资深北美IT面试官告诉你面试中口语的重要性&,&summary&:&\u003Cb\u003E本文作者：Payson，现在职Microsoft\u003C\u002Fb\u003E我参加过很多面试，也当过多次面试官，今天就自己以往的经验谈谈在北美面试IT公司的时候，口语能力的重要性。 我们这些勤劳勇敢善良的计算机学生，在准备面试之前，都刻苦勤奋的努力刷题，努力掌握各种科学知识，努力在白…&,&reviewingCommentsCount&:0,&meta&:{&previous&:null,&next&:null},&commentPermission&:&anyone&,&commentsCount&:10,&likesCount&:214},&next&:{&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\u002Fpic2.zhimg.com\u002F50\u002Fv2-ee9de6037c07_xl.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&topics&:[{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&搜索广告&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&机器学习&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&算法&}],&adminClosedComment&:false,&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&author&:{&bio&:&滑雪狂&,&isFollowing&:false,&hash&:&69e38bc9bfbac954c7e76&,&uid&:313300,&isOrg&:false,&slug&:&chang-li-63-36&,&isFollowed&:false,&description&:&&,&name&:&CLI1&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fchang-li-63-36&,&avatar&:{&id&:&v2-cea65c853fd0fab8e65f70896bbb73b7&,&template&:&https:\u002F\u002Fpic3.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&column&:{&slug&:&bittiger&,&name&:&BitTiger.io&},&content&:&\u003Cp\u003E2015年，全球互联网广告营收接近600亿美元，比2014年增长了近20%。多家互联网巨头都依赖于广告营收，如谷歌，百度，Facebook，互联网新贵们也都开始试水广告业，如Snapchat, Pinterest， Spotify.\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-1122acf71cc2c9f72fc55e363c55b7a1_b.jpg\& data-rawwidth=\&1010\& data-rawheight=\&708\& class=\&origin_image zh-lightbox-thumb\& width=\&1010\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-1122acf71cc2c9f72fc55e363c55b7a1_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E作为互联网广告的老大哥，谷歌花了很大的力气研发自己的社交网络，Google+，并期待能与Facebook，Twitter抗衡。然后事与愿违，Google+的份额依然低于1% 。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-1cddfa5deb7eb04a100de04_b.jpg\& data-rawwidth=\&1148\& data-rawheight=\&612\& class=\&origin_image zh-lightbox-thumb\& width=\&1148\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-1cddfa5deb7eb04a100de04_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cbr\u003E\u003Cp\u003E2015年，谷歌终于不再强迫用户把Google+和谷歌家的其他服务绑定，如Youtube。笔者认为谷歌花大量人力财力研发Google+并将其与其他服务绑定的原因之一是搜集用户的喜好数据来为自家的广告业务服务。更具体的说是为了更好地预测广告的点击率。在这方面，Facebook似乎更胜一筹。2015年第一季度，Facebook广告的转换率比Google Display Ads Network (GDN)高出了55%。笔者并不感到惊讶，Facebook显然比谷歌更了解用户的喜好，笔者猜测用户的行为，包括点赞, 评论，关注等，都为广告算法提供了关于用户的喜好或类别的信息。这些信息会用于广告的点击率预测，而点击率预测又会应用于广告排序算法。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-8c761b6bdc0d62ac4352f6d_b.jpg\& data-rawwidth=\&960\& data-rawheight=\&550\& class=\&origin_image zh-lightbox-thumb\& width=\&960\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-8c761b6bdc0d62ac4352f6d_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E今天我就带大家来用 Spark MLlib训练一个广告点击率预测的模型。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003E环境配置\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003EJava\u003C\u002Fp\u003E\u003Cp\u003ESpark 2.0.0\u003C\u002Fp\u003E\u003Cp\u003E安装很简单，pre-built版本的spark下载下来即可\u003C\u002Fp\u003E\u003Cp\u003E\u003Ca href=\&https:\u002F\u002Flink.zhihu.com\u002F?target=http%3A\u002F\u002Fspark.apache.org\u002Fdownloads.html\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EDownloads | Apache Spark\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cp\u003EPython\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003E\u003Cb\u003E数据\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003EKaggle Avazu挑战赛中的广告数据\u003C\u002Fp\u003E\u003Cp\u003E\u003Ca href=\&https:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fwww.kaggle.com\u002Fc\u002Favazu-ctr-prediction\u002Fdata\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EClick-Through Rate Prediction\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003E\u003Cb\u003E元数据\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003Eid: ad identifier\u003C\u002Fp\u003E\u003Cp\u003Eclick: 0\u002F1 for non-click\u002Fclick\u003C\u002Fp\u003E\u003Cp\u003Ehour: format is YYMMDDHH, so
means 23:00 on Sept. 11, 2014 UTC.\u003C\u002Fp\u003E\u003Cp\u003EC1 -- anonymized categorical variable\u003C\u002Fp\u003E\u003Cp\u003Ebanner_pos\u003C\u002Fp\u003E\u003Cp\u003Esite_id\u003C\u002Fp\u003E\u003Cp\u003Esite_domain\u003C\u002Fp\u003E\u003Cp\u003Esite_category\u003C\u002Fp\u003E\u003Cp\u003Eapp_id\u003C\u002Fp\u003E\u003Cp\u003Eapp_domain\u003C\u002Fp\u003E\u003Cp\u003Eapp_category\u003C\u002Fp\u003E\u003Cp\u003Edevice_id\u003C\u002Fp\u003E\u003Cp\u003Edevice_ip\u003C\u002Fp\u003E\u003Cp\u003Edevice_model\u003C\u002Fp\u003E\u003Cp\u003Edevice_type\u003C\u002Fp\u003E\u003Cp\u003Edevice_conn_type\u003C\u002Fp\u003E\u003Cp\u003EC14-C21 -- anonymized categorical variables\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003E\u003Cb\u003E数据预处理\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E我们注意到数据中有字符串类型的值，如site_id,site_domain,site_category,app_id,app_domain,app_category等。我们需要将他们转换成数值型，公式如下： \u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-be68a0e7fecedf_b.jpg\& data-rawwidth=\&986\& data-rawheight=\&298\& class=\&origin_image zh-lightbox-thumb\& width=\&986\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-be68a0e7fecedf_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E代码：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-python\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&kn\&\u003Eimport\u003C\u002Fspan\u003E \u003Cspan class=\&nn\&\u003Eos\u003C\u002Fspan\u003E\n\u003Cspan class=\&kn\&\u003Eimport\u003C\u002Fspan\u003E \u003Cspan class=\&nn\&\u003Esys\u003C\u002Fspan\u003E\n\u003Cspan class=\&k\&\u003Eif\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003E__name__\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E==\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&__main__\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E:\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Einput_file\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Esys\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Eargv\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E[\u003C\u002Fspan\u003E\u003Cspan class=\&mi\&\u003E1\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E]\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Epreprocess_file\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Esys\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Eargv\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E[\u003C\u002Fspan\u003E\u003Cspan class=\&mi\&\u003E2\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E]\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Etest_flag\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Esys\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Eargv\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E[\u003C\u002Fspan\u003E\u003Cspan class=\&mi\&\u003E3\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E]\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Eprint\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&input=\&\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E+\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Einput_file\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Eprint\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&preprocess_file=\&\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E+\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Epreprocess_file\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Eoutput\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&nb\&\u003Eopen\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Epreprocess_file\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&w\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Ewith\u003C\u002Fspan\u003E \u003Cspan class=\&nb\&\u003Eopen\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Einput_file\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&r\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E \u003Cspan class=\&k\&\u003Eas\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Elines\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E:\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nb\&\u003Enext\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Elines\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Efor\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Eline\u003C\u002Fspan\u003E \u003Cspan class=\&ow\&\u003Ein\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Elines\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E:\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Efields\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Eline\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Esplit\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&,\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Eindex\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&mi\&\u003E5\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Eend\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&mi\&\u003E14\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Eif\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Etest_flag\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E==\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&1\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E:\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Eindex\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&mi\&\u003E4\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Eend\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&mi\&\u003E13\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Ewhile\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Eindex\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Eend\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E:\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Efields\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E[\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Eindex\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E]\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&nb\&\u003Estr\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nb\&\u003Ehash\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Efields\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E[\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Eindex\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E])\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E%\u003C\u002Fspan\u003E \u003Cspan class=\&mi\&\u003E3C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Eindex\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E+=\u003C\u002Fspan\u003E \u003Cspan class=\&mi\&\u003E1\u003C\u002Fspan\u003E\n\n
\u003Cspan class=\&n\&\u003Enewline\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&,\&\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Ejoin\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Efields\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Eoutput\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Ewrite\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Enewline\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Eoutput\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Eclose\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cbr\u003E\u003Cp\u003E此外，有必要将原来的训练数据分割成两部分：本地训练数据，本地测试数据。由于原来的训练数据是基于10天的数据，我们可以把前9天数据作为本地训练数据，把最后一天的数据作为本地测试数据。\u003C\u002Fp\u003E\u003Cp\u003E代码： \u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-python\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&kn\&\u003Eimport\u003C\u002Fspan\u003E \u003Cspan class=\&nn\&\u003Eos\u003C\u002Fspan\u003E\n\u003Cspan class=\&kn\&\u003Eimport\u003C\u002Fspan\u003E \u003Cspan class=\&nn\&\u003Esys\u003C\u002Fspan\u003E\n\u003Cspan class=\&k\&\u003Eif\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003E__name__\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E==\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&__main__\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E:\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Einput_file\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Esys\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Eargv\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E[\u003C\u002Fspan\u003E\u003Cspan class=\&mi\&\u003E1\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E]\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Etrain_file\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Esys\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Eargv\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E[\u003C\u002Fspan\u003E\u003Cspan class=\&mi\&\u003E2\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E]\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Etest_file\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Esys\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Eargv\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E[\u003C\u002Fspan\u003E\u003Cspan class=\&mi\&\u003E3\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E]\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Etest_start_date\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Esys\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Eargv\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E[\u003C\u002Fspan\u003E\u003Cspan class=\&mi\&\u003E4\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E]\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Etest_data_ouput\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&nb\&\u003Eopen\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Etest_file\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&w\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Etrain_data_output\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&nb\&\u003Eopen\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Etrain_file\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&w\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n\n\n
\u003Cspan class=\&k\&\u003Ewith\u003C\u002Fspan\u003E \u003Cspan class=\&nb\&\u003Eopen\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Einput_file\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&r\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E \u003Cspan class=\&k\&\u003Eas\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Elines\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E:\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nb\&\u003Enext\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Elines\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Efor\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Eline\u003C\u002Fspan\u003E \u003Cspan class=\&ow\&\u003Ein\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Elines\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E:\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Efields\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Eline\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Esplit\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&,\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Eif\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Efields\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E[\u003C\u002Fspan\u003E\u003Cspan class=\&mi\&\u003E2\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E]\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Estartswith\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Etest_start_date\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E):\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Etest_data_ouput\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Ewrite\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Eline\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Eelse\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E:\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Etrain_data_output\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Ewrite\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Eline\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n\n\n
\u003Cspan class=\&n\&\u003Etrain_data_output\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Eclose\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Etest_data_ouput\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Eclose\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003E\u003Cb\u003ESpark 入门\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003EApache Spark是一个分布式计算框架，旨在简化运行于计算机集群上的并行程序的编写。该框架对资源调度，任务的提交、执行和跟踪，节点间的通信以及数据并行处理的内在底层操作都进行了抽象。它提供了一个更高级别的API用于处理分布式数据。从这方面说，它与Apache Hadoop等分布式处理框架类似。但在底层架构上，Spark与它们有所不同。\u003C\u002Fp\u003E\u003Cp\u003E我们先介绍SparkContext对象。任何Spark程序的编写都是从SparkContext（或用Java编写时的JavaSparkContext）开始的。SparkContext的初始化需要一个SparkConf对象，后者包含了Spark集群配置的各种参数（比如主节点的URL）。初始化后，我们便可用SparkContext对象所包含的各种方法来创建和操作分布式数据集和共享变量。若要用Python代码来实现的话，可参照下面的代码： \u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-python\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Esconf\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003ESparkConf\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003EsetAppName\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&err\&\u003E“\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003EWordCount\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&) .setMaster(“local[4]\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n\u003Cspan class=\&n\&\u003Esc\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003ESparkContext\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Econf\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Esconf\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cbr\u003E\u003Cp\u003E这段代码会创建一个4线程的SparkContext对象，并将其相应的任务命名为WordCount。\u003C\u002Fp\u003E\u003Cp\u003ERDD（Resilient Distributed Dataset，弹性分布式数据集）是Spark的核心概念之一。一个RDD代表一系列的“记录”（严格来说，某种类型的对象）。这些记录被分配或分区到一个集群的多个节点上（在本地模式下，可以类似地理解为单个进程里的多个线程上）。Spark中的RDD具备容错性，即当某个节点或任务失败时（因非用户代码错误的原因而引起，如硬件故障、网络不通等），RDD会在余下的节点上自动重建，以便任务能最终完成。我们可以把RDD看成数据和基于该数据计算的单元。\u003C\u002Fp\u003E\u003Cp\u003ERDD也可以基于Hadoop的输入源创建，比如本地文件系统、HDFS和Amazon S3。基于Hadoop的RDD可以使用任何实现了Hadoop InputFormat接口的输入格式，包括文本文件、其他Hadoop标准格式、HBase、Cassandra等。以下举例说明如何用一个本地文件系统里的文件创建RDD： \u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-java\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003ErddFromTextFile\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Esc\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&na\&\u003EtextFile\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&err\&\u003E“\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Esample\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&na\&\u003Etxt\u003C\u002Fspan\u003E\u003Cspan class=\&err\&\u003E\&\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E)\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E上述代码中的textFile函数（方法）会返回一个RDD对象。该对象的每一条记录都是一个表示文本文件中某一行文字的String（字符串）对象。\u003C\u002Fp\u003E\u003Cp\u003E基于RDD的操作被分为转换（transformation）和执行（action）两种。一般来说，转换操作是对一个数据集里的所有记录执行某种函数，从而使记录发生改变；而执行通常是运行某些计算或聚合操作，并将结果返回运行SparkContext的那个驱动程序（driver）。\u003C\u002Fp\u003E\u003Cp\u003E常见的转换操作: map, filer\u003C\u002Fp\u003E\u003Cp\u003E常见的执行操作: count, take, collect, saveAsTextFile\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003E\u003Cb\u003E基于SparkMLliB的\u003C\u002Fb\u003E\u003Cb\u003E模型训练\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003ESpark提供丰富的机器学习库，包括：分类，回归，聚类等。此外还提供特征提取算法库。详见：\u003C\u002Fp\u003E\u003Cp\u003E\u003Ca href=\&https:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fspark.apache.org\u002Fdocs\u002Flatest\u002Fml-guide.html\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EMLlib: Main Guide\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cp\u003E本文将logistic regression 应用于处理过的数据，把 loss 收敛在 21.7左右\u003C\u002Fp\u003E\u003Cp\u003E代码： \u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-java\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Efrom\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003E__future__\u003C\u002Fspan\u003E \u003Cspan class=\&kn\&\u003Eimport\u003C\u002Fspan\u003E \u003Cspan class=\&nn\&\u003Eprint_function\u003C\u002Fspan\u003E\n\u003Cspan class=\&n\&\u003Efrom\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Epyspark\u003C\u002Fspan\u003E \u003Cspa}
最近写ng2的项目，写了一些ng2基础的应用（包括angular-cli，路由，表单验证，组件通信，ajax，服务／指令，lazyload）demo，地址在-&
学了一下angular2，看它有什么区别呢？
我就不复述网上一堆的对比言论了，我仅仅对我项目里用到的一个点来进行阐述。
有个需求就是一个radio对应一个input标签，比如有两对。
我需要选中1的时候传输1的value，选中2的时候传2的vaule。当选中1,2的input必须置空，选中2的时候1可以有值。还需要拿到数据以后还能显示回这个页面。
ng1做的时候要radio俩ngModel，input俩ngModel，你需要判断radio是不是被选中。input的ngModel就不用管了。（好的办法是用事件代理，这样在传输数据没问题，很简单，数据回显的时候就要根据数据推radio的选中情况了，不操作dom的情况下还需要加ngModel，不过也是没办法的事，不然改交互好了）
重要的一点是你必须$watch radio对应ngModel，如果没被选中，那2框置空。。坑的是如果我有好几个表单，我需要循环表单$watch！！！！坑死了。性能超差。（因为可能在代码里修改radio对应的ngModel来手动完成radio的唯一性，不然也不需要watch，事件代理也一样坑，回显的时候也必须手动维护一个数组来模拟radio的原生特性，但是可以避免$watch，因为发送请求数据不需要radio的状态，所以正在强烈建议重构这个页面）
开始ng2-----------------------------------------------------------------
ng2一个好的点就是ngModel的转变，它做的很棒的一点是单项绑定和双向绑定的选择，ngModel也是。（）是数据到模板的绑定，[ngModel]是模板到数据的绑定。
ng2有Attribute, Class, and Style 绑定，Event Binding。而且都是可以拼接字符串或者在binding里面写表达式，甚至是函数，比如：
& ckass(){& & & return " abc dec"& }
&input type="text" &#spy1 [ngClass]="'hahaha'+ckass()" /&
想用的心已经蠢蠢欲动了。。
普通的双向绑定如ng1是这样写
&input type="text" [(ngModel)]="input" /&
重要的是它可以拆开：
&input type="checkbox" [ngModel]="input" (ngModelChange)="handleChange()"/&
{{ input }}
（ngModelChange）是啥，它里面可以随便写吗？
答案是不能。借用雪狼大叔的翻译：安利一下
ngModelChange并不是&input&元素的事件。 它实际上是一个来自ngModel指令的事件属性。 当Angular在表单中看到一个[(x)]的绑定目标时， 它会期待这个x指令有一个名为x的输入属性，和一个名为xChange的输出属性。
双向绑定的指令都会有一个xxChange的属性，它可以修改绑定。比如我们给它加个条件，如果radio选中了，就可以绑定啦， 不然你就是空吧。
&button class="batton" (click)="handleClick($event)"& click me&/button&
&input type="checkbox" [ngModel]="input" (ngModelChange)="handleChange()"/&
&input type="text" [(ngModel)]="input" [disabled]="!check" /&
{{ input }}
export class AppComponent {
check = false;
handleChange(){
this.check = !this.
if(!this.check) {
this.input = "";
handleClick(e: any) {
this.check = false;
这里留一个button来解决程序修改radio状态的问题。可以看到，我们的handleChange其实就做了一个手动绑定的工作。如果没选中给置空。
运行你会发现，点击click me，input的内容并木有置空，因为radio的修改不是模板到数据的过程，是数据到模板的过程。
没关系，[ngModel]的单项绑定仍然可以自己控制，比如：
@Component({
selector: 'my-app',
template: `
&button class="batton" (click)="handleClick($event)"& click me&/button&
&input type="checkbox" [ngModel]="handleCheck()" (ngModelChange)="handleChange()"/&
&input type="text" [(ngModel)]="input" [disabled]="!check" /&
{{ input }}
styles: [``]
又来了个handleCheck，这是ng1的ngModel不能搞定的。反正不支持处理函数。
那ng2咋写：
export class AppComponent {
check = false;
handleCheck(){
if (!this.check) {
this.input = "";
handleChange(){
this.check = !this.
if(!this.check) {
this.input = "";
handleClick(e: any) {
this.check = false;
我们在数据到模板的绑定只需要判断是否选中就可以了，这样就避免了$watch。
还有一些表达方式的不一样，主要是因为都换成ts了，一些类似es6的语法都开始发挥作用。
1.模块注入
&因为es6的语法，去掉了ng1的依赖注入，改为模块化的注入，import语法
import { Component } from '@angular/core';
export class AppModule { }
由于ng2的模块化，原本模块化不那么明显的ng1的语法要改变很多，模块都作类，新增了注解语法，
@Component({
selector: 'hero',
templateUrl: 'component.html'
export class HeroFormComponent {
Component注解规定了这个模块的selector，和模板template，然后把这个类做控制器。
3.数据展示
基本类似ng1，双花括号的展示方式
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
&h1&{{title}}&/h1&
&h2&My favorite hero is: {{myHero}}&/h2&
export class AppComponent {
title = 'Tour of Heroes';
myHero = 'Windstorm';
只是模板选择器写在了注解里，控制器为此类。
然后这个类就可以做为一个模块使用，其实就是ng1的组件型指令
&my-app&loading...&/my-app&
另外，template里的一些自带指令也是类似ng1，只是写法不同，除了上面写的绑定意外，再说一个ngFor
template: `
&h1&{{title}}&/h1&
&h2&My favorite hero is: {{myHero}}&/h2&
&p&Heroes:&/p&
&li *ngFor="let hero of heroes"&
{{ hero }}
就是类似ng-repeat的作用了。只是换了个语法，看文档就好了。
为了使键盘事件比较方便，然后自己封装进了ng2，vue已做此工作
&input #box
(keyup.enter)="update(box.value)"
(blur)="update(box.value)"&
其余的事件都是类似的，带有（）括号的单向绑定。
服务也有点差距，注入和声明有点不同，此为声明
import { Injectable } from '@angular/core';
@Injectable()
export class HeroService {
当 TypeScript 看到@Injectable()装饰器时，就会记下本服务的元数据。 如果 Angular 需要往这个服务中注入其它依赖，就会使用这些元数据。
使用服务首先引入服务
import { HeroService } from './hero.service';
然后需要在注解里注册一下
providers: [HeroService]
然后在这个类中就可以使用这个服务了
export class AppComponent implements OnInit {
title = 'Tour of Heroes';
heroes: Hero[];
constructor(private heroService: HeroService) { }
getHeroes(): void {
this.heroService.getHeroes().then(heroes =& this.heroes = heroes);
ngOnInit(): void {
this.getHeroes();
6，生命周期
ng2增加了很多生命周期，如上面的ngOnInit等等，都是ng1没有的，就不介绍了
跟ng1类似ng2也是封装了ajax到http，不同的是现在的ng2可以用rxjs了。。rxjs好像贵族的东西，用的人很少，学习成本不低，但是好用。ng2的http不是封装的promise了，而是简化的rx的Observable，需要subscribe来执行他的请求。也可以引入rx的toPromise，然后then下去就可以了。有点强破推销的意思。
其实就是ng1的filter。
import { Pipe, PipeTransform } from '@angular/core';
* Raise the value exponentially
* Takes an exponent argument that defaults to 1.
value | exponentialStrength:exponent
* Example:
exponentialStrength:10}}
formats to: 1024
@Pipe({name: 'exponentialStrength'})
export class ExponentialStrengthPipe implements PipeTransform {
transform(value: number, exponent: string): number {
let exp = parseFloat(exponent);
return Math.pow(value, isNaN(exp) ? 1 : exp);
@Pipe装饰器告诉Angular：这是一个管道，管道类实现了PipeTransform接口的transform方法，该方法接受一个输入值和一些可选参数，并返回转换后的值。transform方法返回就处理后的值。
路由配置没什么说的，跟着文档一步步来就好了，由于是import的引入，不存在ng1包含路由很大的情况，根据配置来就好了。这种框架的路由都是类似的。
10. 组件交互
ng1现在都忘记了，主要说一下ng2的组件交互。
父传子的交互方式是靠props来传递的，这点跟react一样了，子组件的状态是纯靠输入，这是material的分页组件，在子组件里需要用装饰器来取，@input。下面例子就有
&md-paginator #paginator
[length]="xxx"
[pageIndex]="0"
[pageSize]="10"
[pageSizeOptions]="[10]"&
&/md-paginator&
&子传父组件是不建议的，但也有很多需求，比如打开一个子组件做modal，然后modal关闭的时候回传给父组件数据，对于react的方案一个是redux，另一个包括ng1也在用的就是事件系统。都有各自的事件系统，
但是ng2的事件系统最为强大，因为它是rxjs。
这里给一个例子：subject就是rxjs的对象。关于rxjs的介绍另有博文：
@Component({
selector: 'wap',
template: '&app-add-warp [subject]="subject" &&/app-add-warp&'
export class addWarpComponent {
subject = new Subject();
constructor() {
this.subject.subscribe({
next: (v) =& console.log(v)
@Component({
selector: 'app-add',
templateUrl: './add.component.html',
styleUrls: ['./add.component.scss']
export class AddComponent implements OnInit {
@Input('subject') cbSubject:Subject&any&;
constructor() {
ngOnInit() {
this.cbSubject.next(this.user);
subscribe就是触发事件要执行的东西，next方法就是触发事件的点。
阅读(...) 评论()前端丨浅显的介绍一下Angular2的“八大件”a year ago114收藏分享举报文章被以下专栏收录来自硅谷的终身学习平台{&debug&:false,&apiRoot&:&&,&paySDK&:&https:\u002F\u002Fpay.zhihu.com\u002Fapi\u002Fjs&,&wechatConfigAPI&:&\u002Fapi\u002Fwechat\u002Fjssdkconfig&,&name&:&production&,&instance&:&column&,&tokens&:{&X-XSRF-TOKEN&:null,&X-UDID&:null,&Authorization&:&oauth c3cef7c66aa9e6a1e3160e20&}}{&database&:{&Post&:{&&:{&isPending&:false,&contributes&:[{&sourceColumn&:{&lastUpdated&:,&description&:&http:\u002F\u002Fwww.bittiger.io\u002F&,&permission&:&COLUMN_PUBLIC&,&memberId&:,&contributePermission&:&COLUMN_PUBLIC&,&translatedCommentPermission&:&all&,&canManage&:true,&intro&:&来自硅谷的终身学习平台&,&urlToken&:&bittiger&,&id&:5688,&imagePath&:&b65fc4ce1d7b4c4509f44.jpeg&,&slug&:&bittiger&,&applyReason&:&&,&name&:&BitTiger.io&,&title&:&BitTiger.io&,&url&:&https:\u002F\u002Fzhuanlan.zhihu.com\u002Fbittiger&,&commentPermission&:&COLUMN_ALL_CAN_COMMENT&,&canPost&:true,&created&:,&state&:&COLUMN_NORMAL&,&followers&:18687,&avatar&:{&id&:&b65fc4ce1d7b4c4509f44&,&template&:&https:\u002F\u002Fpic6.zhimg.com\u002F{id}_{size}.jpg&},&activateAuthorRequested&:false,&following&:false,&imageUrl&:&https:\u002F\u002Fpic6.zhimg.com\u002Fb65fc4ce1d7b4c4509f44_l.jpg&,&articlesCount&:376},&state&:&accepted&,&targetPost&:{&titleImage&:&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-0c33ccf9f13f8e8de66f32ea41e4f2b9_r.jpg&,&lastUpdated&:,&imagePath&:&v2-0c33ccf9f13f8e8de66f32ea41e4f2b9.jpg&,&permission&:&ARTICLE_PUBLIC&,&topics&:[,7912],&summary&:&\u003Cb\u003E本文作者：Payson，现在职Microsoft\u003C\u002Fb\u003E Angular 是用来做客户端应用的框架，只需要HTML和能编译成JavaScript的语言，比如Dart啦，比如TypeScript啦，或者直接用JavaScript也凑合事儿。官方推荐的是和TypeScript配合着用。那有些同学就要问了，\u003Cstrong\u003E这框架神奇在哪里…\u003C\u002Fstrong\u003E&,©Permission&:&ARTICLE_COPYABLE&,&translatedCommentPermission&:&all&,&likes&:0,&origAuthorId&:0,&publishedTime&:&T09:57:23+08:00&,&sourceUrl&:&&,&urlToken&:,&id&:1907747,&withContent&:false,&slug&:,&bigTitleImage&:false,&title&:&前端丨浅显的介绍一下Angular2的“八大件”&,&url&:&\u002Fp\u002F&,&commentPermission&:&ARTICLE_ALL_CAN_COMMENT&,&snapshotUrl&:&&,&created&:,&comments&:0,&columnId&:5688,&content&:&&,&parentId&:0,&state&:&ARTICLE_PUBLISHED&,&imageUrl&:&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-0c33ccf9f13f8e8de66f32ea41e4f2b9_r.jpg&,&author&:{&bio&:&MS in Marketing & MBA\u002FGrowth Hacker&,&isFollowing&:false,&hash&:&af83f53a8cfe128c23f25d&,&uid&:80,&isOrg&:false,&slug&:&xi-lan-hua-66&,&isFollowed&:false,&description&:&在硅谷的非码农。&,&name&:&Ray Cao&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fxi-lan-hua-66&,&avatar&:{&id&:&v2-4bea69cc17e730da91b3e9&,&template&:&https:\u002F\u002Fpic1.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&memberId&:2014720,&excerptTitle&:&&,&voteType&:&ARTICLE_VOTE_CLEAR&},&id&:492908}],&title&:&前端丨浅显的介绍一下Angular2的“八大件”&,&author&:&xi-lan-hua-66&,&content&:&\u003Cp\u003E\u003Cb\u003E本文作者：Payson，现在职Microsoft\u003C\u002Fb\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003EAngular 是用来做客户端应用的框架，只需要HTML和能编译成JavaScript的语言，比如Dart啦，比如TypeScript啦，或者直接用JavaScript也凑合事儿。官方推荐的是和TypeScript配合着用。那有些同学就要问了，\u003Cstrong\u003E这框架神奇在哪里啊？为何就能做客户端应用了？框架里面都有什么啊？\u003C\u002Fstrong\u003EAngular主要有8个东西构成，包括：\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003E模块 (module)\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003E组件 (component)\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003E模板 (template)\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003E元数据 (metadata)\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003E数据绑定
(data binding)\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003E指令 (directive)\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003E服务 (service)\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003E依赖注入 (dependency injection)\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E这八大件就好比孙悟空身上的毛，拔下来一吹，能变出各种东西来。所以啊，只要你吃透了这老北京八大件，那做一个客户端应用简直就是分分钟的事儿。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E模板\u003C\u002Fstrong\u003E基本定义了你的应用长啥样，长得好不好看得有人看着，\u003Cstrong\u003E组件\u003C\u002Fstrong\u003E就负责管理这些模板。长得好看没用那不就成了花瓶了么，所以还需要\u003Cstrong\u003E服务\u003C\u002Fstrong\u003E来给应用添加一些逻辑，这些东西东一块西一块的乱七八糟还真不行，我们还需要\u003Cstrong\u003E模块\u003C\u002Fstrong\u003E来打包所有的组件、服务等等。所以说，模块就是用来打包的。一个应用程序有很多模块打的包，一层一层的，最开始那个就叫做根模块。我们通过引诱（其实是引导吧）根模块来启动程序。\u003C\u002Fp\u003E\u003Cp\u003E我偷偷从官网偷了一张照片来给大家感受一下这八大件是怎么互相配合的。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-19fbd5fb7aff_b.jpg\& data-rawwidth=\&1330\& data-rawheight=\&650\& class=\&origin_image zh-lightbox-thumb\& width=\&1330\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-19fbd5fb7aff_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1330'%20height='650'&&\u002Fsvg&\& data-rawwidth=\&1330\& data-rawheight=\&650\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1330\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-19fbd5fb7aff_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-19fbd5fb7aff_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E那下面就浅显地介绍一下这八大件。\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cstrong\u003E模块 （Module）\u003C\u002Fstrong\u003E\u003C\u002Fh2\u003E\u003Cp\u003E刚才提到了根模块，是用来启动程序的。没有根模块，再好的程序也跑不起来。所以模块很重要很重要。Angular的应用，都是模块化的。每个feature特性都有自己的子模块，无论是子模块还是根模块定义的结构都差不多。我们可以把模块看成一个行李箱，里面装满了各种东西。包括declaration、imports、providers等。declaration用来放各种小零件，包括组件、指令、管道等。imports是导入其他的模块。providers用来盛放各种service。for一个example，一个module大概长这个样子。\u003Cstrong\u003E关于Module的细节，下一篇Angular的文章我会详细说哒。\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-402e40ce5ac037d1cfe1784_b.jpg\& data-rawwidth=\&972\& data-rawheight=\&464\& class=\&origin_image zh-lightbox-thumb\& width=\&972\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-402e40ce5ac037d1cfe1784_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='972'%20height='464'&&\u002Fsvg&\& data-rawwidth=\&972\& data-rawheight=\&464\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&972\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-402e40ce5ac037d1cfe1784_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-402e40ce5ac037d1cfe1784_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Ch2\u003E\u003Cstrong\u003E组件 (Component) 元数据 (Metadata) 模板 (Template)\u003C\u002Fstrong\u003E\u003C\u002Fh2\u003E\u003Cp\u003E这仨可以一起说。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E模板\u003C\u002Fstrong\u003E就是HTML，就是你告诉Angular，喂喂喂，这儿你给我加个按钮，那儿你给我来个日历就是这样。除了&h1& &p&等等这些常见的html元素，我们还可以加自定义的元素在模板里面。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E组件\u003C\u002Fstrong\u003E负责让模板看起来没那么无聊。比如你在模板里面定义了一个按钮，那你按了之后发生了什么啊？或者你定义了一个input box，你输入你的名字后会发生什么啊？这就需要Component来定义。\u003C\u002Fp\u003E\u003Cp\u003E那每个Component都不一样，我们怎么区分呢？其实应该说Angular怎么识别呢？就是靠这个叫做\u003Cstrong\u003E元数据\u003C\u002Fstrong\u003E的东西。元数据会定义一些配置细节，告诉Angular：嘿Angular，如果你想把这个东西给大家看，那你得先去做ABCDEFG这几件事儿。Angular按照元数据的指示，根据Template的样子最后创建视图。\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cstrong\u003E数据绑定 (Data Binding)\u003C\u002Fstrong\u003E\u003C\u002Fh2\u003E\u003Cp\u003E如果没有任何框架，我们自己写数据绑定，那简直就是人间地狱啊，噩梦啊。之前我们可怜的前端程序员都是用jQuery，我们要纯手工打造各种数据更新，UI更新，经常犯错，bug一堆堆，debug简直就是家常便饭。后来越来越多的框架都有数据绑定了，无论是单向的双向的还是五花板门乱七八糟项的，都帮我们可怜的前端程序员省去了很多时间。这样我们就可以早早下班回家老婆孩子热炕头了。\u003C\u002Fp\u003E\u003Cp\u003EAngular2比Angular1更好滴实现了数据绑定。一共有四种吧：\u003C\u002Fp\u003E\u003Col\u003E\u003Cli\u003E\u003Cp\u003E {{someString}}这个叫插值绑定，从Component到DOM，之前在Angular1里面也有\u003Cbr\u003E\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E[someThing] 这个叫属性绑定，也是从Component到DOM\u003Cbr\u003E\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E（event）这个是事件绑定，从DOM到Component\u003Cbr\u003E\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E最后一个就是把上面这两个结合在一起[(ng...)] 双向绑定\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-06feecb0d15c751c9781d_b.jpg\& data-rawwidth=\&1018\& data-rawheight=\&634\& class=\&origin_image zh-lightbox-thumb\& width=\&1018\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-06feecb0d15c751c9781d_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1018'%20height='634'&&\u002Fsvg&\& data-rawwidth=\&1018\& data-rawheight=\&634\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1018\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-06feecb0d15c751c9781d_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-06feecb0d15c751c9781d_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003C\u002Fol\u003E\u003Cp\u003E除了这四种现在在各大框架中都十分普遍的绑定方式外，Angular2里面还有一种爸爸对儿子的@input绑定和儿子对爸爸的@output绑定。这种方式让爸爸跟儿子毫无代沟，交流起来丝毫不费力。\u003Cbr\u003E\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cstrong\u003E指令 (directive)\u003C\u002Fstrong\u003E\u003C\u002Fh2\u003E\u003Cp\u003E指令跟组件(Component)非常类似，其实组件就相当于一个指令。指令地位崇高，包括结构型指令和属性指令。\u003C\u002Fp\u003E\u003Cp\u003E结构型我们在Angular1里面也经常用啊，就是现在语法不太一样了，比如ngfor, ngIf等等，都是结构型指令。这些一般是不会改变任何元素的行为啦，外观啦等等。相反，属性型就非要改外观或者行为。\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cstrong\u003E服务（Service）\u003C\u002Fstrong\u003E\u003C\u002Fh2\u003E\u003Cp\u003E以前呐，总听说中国服务业不发达，我回家一看，这挺发达的啊，到处灯红酒绿的。人想活的好啊，还得靠服务业，不是大保健那种服务啦。\u003C\u002Fp\u003E\u003Cp\u003E应用程序中的服务无处不在无孔不入，哪儿都有它。上面介绍的组件里面有一些变量，有些用户输入的变量啦，用户的选择啦，这些数据都乖乖地待在前端呢，不直接跟服务器对话。要不你用户爱输入什么输入什么，爱上传什么上传什么，服务器不就炸裂了么？组件要与服务(service)直接沟通。这样服务里面就可以加一些验证逻辑，比如你想下载小黄片什么的，服务可以阻止你（其实没有这种服务）。服务就像大宅子里面的大管家，所有的琐事儿都是服务来管。大管家希望每一个组件尽量精简，其余的细节内容都交给服务托管。那组件中如何使用这些服务呢？就靠下面要介绍的依赖注入。\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003E依赖注入（Dependency Injection）\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003EAngular通过依赖注入让组件可以使用服务。Angular创建一个组件的时候，首先你得跟上级领导请求，喂，领导啊，我这个组件需要这些服务，领导说，那好吧，那给你个注射器（injector）你用去吧。就像这样：\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003Econstructor( private service: MyService)\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E这个注射器啊会存放以前创建的那个服务，上面这行代码就是用service来存放之前创建好的MyService。那有些同学就要问了，你啥时候创建MyService的，我咋不知道？哦对，那如果这个服务还没有被创建的话，聪明的注射器同学就会先创建一个MyService服务实例，然后把这个服务跟Angular讲。这就是依赖注入啦。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-b8af580d645d221ea4ac1b_b.jpg\& data-rawwidth=\&1318\& data-rawheight=\&628\& class=\&origin_image zh-lightbox-thumb\& width=\&1318\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-b8af580d645d221ea4ac1b_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1318'%20height='628'&&\u002Fsvg&\& data-rawwidth=\&1318\& data-rawheight=\&628\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1318\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-b8af580d645d221ea4ac1b_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-b8af580d645d221ea4ac1b_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cstrong\u003E总结\u003C\u002Fstrong\u003E\u003C\u002Fh2\u003E\u003Cp\u003E今天浅显地介绍了一下Angular的八大件，这八大件是Angular应用程序的最基础的东西，读完这篇文章你就算了解Angular的基本元素了，也就上了道了。当然啦，还有很多其他东西需要学习。\u003C\u002Fp\u003E\u003Cp\u003E最后的最后我想说，以上所有的名词，包括组件、模板、模块、指令等等都不是我翻译的，都是官方翻译的。吐个槽，翻译的真难听啊。想象一下我跟爷爷奶奶们讲模块指令什么的，他们肯定一脚把我踹飞。\u003C\u002Fp\u003E\u003Cbr\u003E\u003Ch2\u003E\u003Cb\u003E福利\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003E最后，再提一个小小的福利，现在关注公众号“论码农的自我修养”或搜索“\u003Cb\u003Ebit_tiger\u003C\u002Fb\u003E”并回复“\u003Cb\u003E\u003Cu\u003ECareer\u003C\u002Fu\u003E\u003C\u002Fb\u003E”即可下载我们的\u003Cb\u003E原创求职手册\u003C\u002Fb\u003E。这本手册由Mike Kehoe所写。作为BitTiger的Co-founder之一， 他曾就职于德勤，并在中国交流学习过。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-87f0ccf8fac114cc2f7d9_b.jpg\& data-rawwidth=\&778\& data-rawheight=\&866\& class=\&origin_image zh-lightbox-thumb\& width=\&778\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-87f0ccf8fac114cc2f7d9_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='778'%20height='866'&&\u002Fsvg&\& data-rawwidth=\&778\& data-rawheight=\&866\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&778\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-87f0ccf8fac114cc2f7d9_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-87f0ccf8fac114cc2f7d9_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E另外，我们特别反感诱导分享，所以无需拉群无需分享。回复即可下载。\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-046f4a972d1f1598bb08_b.jpg\& data-rawwidth=\&720\& data-rawheight=\&1280\& class=\&origin_image zh-lightbox-thumb\& width=\&720\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-046f4a972d1f1598bb08_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='720'%20height='1280'&&\u002Fsvg&\& data-rawwidth=\&720\& data-rawheight=\&1280\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&720\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-046f4a972d1f1598bb08_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-046f4a972d1f1598bb08_b.jpg\&\u003E\u003C\u002Ffigure\u003E&,&updated&:new Date(&T01:57:23.000Z&),&canComment&:false,&commentPermission&:&anyone&,&commentCount&:9,&collapsedCount&:0,&likeCount&:114,&state&:&published&,&isLiked&:false,&slug&:&&,&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-0c33ccf9f13f8e8de66f32ea41e4f2b9_r.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&reviewers&:[],&topics&:[{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&Angular&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&前端开发&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&前端工程师&}],&adminClosedComment&:false,&titleImageSize&:{&width&:750,&height&:422},&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&column&:{&slug&:&bittiger&,&name&:&BitTiger.io&},&tipjarState&:&inactivated&,&annotationAction&:[],&sourceUrl&:&&,&pageCommentsCount&:9,&hasPublishingDraft&:false,&snapshotUrl&:&&,&publishedTime&:&T09:57:23+08:00&,&url&:&\u002Fp\u002F&,&lastestLikers&:[{&bio&:&刷个知乎静一静...&,&isFollowing&:false,&hash&:&f81c870a4ad0d7&,&uid&:24,&isOrg&:false,&slug&:&xu-hui-min&,&isFollowed&:false,&description&:&通信狗&,&name&:&徐慧敏&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fxu-hui-min&,&avatar&:{&id&:&943cadf0e46eef53e54ef7&,&template&:&https:\u002F\u002Fpic2.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&计算机学生-- 纯素，爱法斗&,&isFollowing&:false,&hash&:&c8f0343b24dadb4866dd&,&uid&:56,&isOrg&:false,&slug&:&yix-leng&,&isFollowed&:false,&description&:&&,&name&:&Yix Leng&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fyix-leng&,&avatar&:{&id&:&13b5e56a3aa1fe9a9f59e0dd&,&template&:&https:\u002F\u002Fpic4.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&一层不变的世界是那样的枯燥，换个花样来提升自己对生活的热爱&,&isFollowing&:false,&hash&:&ef9fc25b1ceeba420c08ae&,&uid&:228400,&isOrg&:false,&slug&:&chris-71-53&,&isFollowed&:false,&description&:&University of Waterloo - 2A Computer Science&,&name&:&Chris&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fchris-71-53&,&avatar&:{&id&:&v2-f452a6ebcd843551bba3c&,&template&:&https:\u002F\u002Fpic1.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&智人永不为奴！&,&isFollowing&:false,&hash&:&a60d66de248a1ecff0f46&,&uid&:72,&isOrg&:false,&slug&:&xia-zhi-chen&,&isFollowed&:false,&description&:&&,&name&:&夏之晨&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fxia-zhi-chen&,&avatar&:{&id&:&da8e974dc&,&template&:&https:\u002F\u002Fpic4.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&软件工程师&,&isFollowing&:false,&hash&:&2c5ee726c1570516afcfb4&,&uid&:772700,&isOrg&:false,&slug&:&roceleylaw&,&isFollowed&:false,&description&:&巧笑嫣然，顾盼生姿&,&name&:&RoceleyLaw&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Froceleylaw&,&avatar&:{&id&:&fec7e4edd65de60d74fb5&,&template&:&https:\u002F\u002Fpic4.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false}],&summary&:&\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-402e40ce5ac037d1cfe.jpg\& data-rawwidth=\&972\& data-rawheight=\&464\& class=\&origin_image inline-img zh-lightbox-thumb\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-402e40ce5ac037d1cfe1784_r.jpg\&\u003E\u003Cb\u003E本文作者：Payson，现在职Microsoft\u003C\u002Fb\u003E Angular 是用来做客户端应用的框架，只需要HTML和能编译成JavaScript的语言，比如Dart啦，比如TypeScript啦，或者直接用JavaScript也凑合事儿。官方推荐的是和TypeScript配合着用。那有些同学就要问了，\u003Cstrong\u003E这框架神奇在哪里…\u003C\u002Fstrong\u003E&,&reviewingCommentsCount&:0,&meta&:{&previous&:{&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\u002Fpic1.zhimg.com\u002F50\u002Fv2-64f1d4bf9bd5e022a7cf95_xl.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&topics&:[{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&程序员&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&面试&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&微软（Microsoft）&}],&adminClosedComment&:false,&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&author&:{&bio&:&MS in Marketing & MBA\u002FGrowth Hacker&,&isFollowing&:false,&hash&:&af83f53a8cfe128c23f25d&,&uid&:80,&isOrg&:false,&slug&:&xi-lan-hua-66&,&isFollowed&:false,&description&:&在硅谷的非码农。&,&name&:&Ray Cao&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fxi-lan-hua-66&,&avatar&:{&id&:&v2-4bea69cc17e730da91b3e9&,&template&:&https:\u002F\u002Fpic1.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&column&:{&slug&:&bittiger&,&name&:&BitTiger.io&},&content&:&\u003Cp\u003E\u003Cb\u003E本文作者：Payson，现在职Microsoft\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E我参加过很多面试，也当过多次面试官，今天就自己以往的经验谈谈在北美面试IT公司的时候，口语能力的重要性。\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E我们这些勤劳勇敢善良的计算机学生，在准备面试之前，都刻苦勤奋的努力刷题，努力掌握各种科学知识，努力在白板写代码，写到手酸头痛。\u003Cstrong\u003E但往往我们都忽略了面试中更重要的一点，就是自己的表达能力。\u003C\u002Fstrong\u003E北美面试基本通用语言是英语，也有比如你去加拿大的魁北克省，可能面试要求是法语。无论哪种语言吧，对我们大部分华人来说，都是第二语言。而我们大部分华人都不善于表达，导致我们在面试准备中忽视了口语的练习，与大offer擦肩而过，\u003Cstrong\u003E最后都让那些口吐莲花眉飞色舞的印度人把大offer抢走了。\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-406cfb1b3cabc_b.jpg\& data-rawwidth=\&600\& data-rawheight=\&377\& class=\&origin_image zh-lightbox-thumb\& width=\&600\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-406cfb1b3cabc_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E今天结合几个小故事，来说说就程序员来说不同面试阶段口语的重要性，以及面试中的\u003Cstrong\u003E几个大坑\u003C\u002Fstrong\u003E。\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cstrong\u003E电话面试阶段：背个百用段子\u003C\u002Fstrong\u003E\u003C\u002Fh2\u003E\u003Cp\u003E你能进入这阶段面试，说明你的简历已经被面试官们集体传阅一遍了。即使这样，一般电话一响，俩人首先要寒暄一发。面试官不能上来就问问题，不然显得太不礼貌了。于是为了打破尴尬的局面，面试官往往就会说：“introduce yourself\&。你一拍大腿，这我会啊，这太简单了。于是开始说自己在哪里上学，学了什么，在哪里实习，做了什么，在哪里上班，做了什么等等。\u003C\u002Fp\u003E\u003Cp\u003E这就是程序员面试中的一个大坑。\u003Cstrong\u003E我的意见就是千万不要按照简历介绍自己。\u003C\u002Fstrong\u003E我们面试的时候都很紧张，难免磕磕巴巴的，说错话。如果完全按照简历介绍自己，再加上紧张的时候说错几个词，磕磕巴巴的，就会给人一种印象：“\u003Cstrong\u003E怎么你连简历都念不明白？ 这样能跟团队合作愉快么？\u003C\u002Fstrong\u003E”\u003C\u002Fp\u003E\u003Cp\u003E几年以前我和一个英语是母语的同事W一起电面过一个人，她的简历我看得清清楚楚，以前她还是中国某985的计算机老师。我其实是一种膜拜的心情去面试她的。我和W都是那种坑人的面试官，就让她自我介绍。她说的特别不流利，以至于W根本不知道她在说什么。然后W就友善地跟她说：thanks for your time。问题都没问就走了。\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-a034a40b905b2ee458efa40_b.jpg\& data-rawwidth=\&640\& data-rawheight=\&484\& class=\&origin_image zh-lightbox-thumb\& width=\&640\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-a034a40b905b2ee458efa40_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E电面的时候面试官看不到你的脸，看不到你手舞足蹈，看不到你眉飞色舞，唯一能判断的就是你的语言。如果想过这一关，除了技术过硬，一定要保证自己的自我介绍不要给自己减分。\u003Cstrong\u003E我的建议是给自己起个名号。\u003C\u002Fstrong\u003E行走江湖谁没个名号。名号呢要听起来貌似是个小缺点，仔细想想还是个蛮有意思的特点，但是回家一琢磨，貌似是个可爱可敬的优点。举个小例子，比如说你跟面试官说：啊，大家给我起了个外号叫Hello World，为啥呢？因为我总是喜欢尝试不同的新技术，每次出现了新的东西，我总是勇于尝试，喜欢搞个“Hello World”版本的小实验，然后跟大家讨论。这种小外号说完一般你都会讲讲为什么你会有这种外号。同时背一个百用的自我介绍段子，跟你要做的工作技术不要有任何关系，也不要出现在简历上。这个段子可以是个小故事，越细节越好。给把这个段子背熟了。\u003C\u002Fp\u003E\u003Cp\u003E当你听到“introduce yourself”的时候就条件反射一样滴说出来这个段子。然后马上甩包给面试官“how about you, what are you working on\& 等等，这样能马上结束寒暄阶段，正式进入我们计算机学生最擅长的技术阶段。\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cstrong\u003EOnsite面试阶段：边说边写\u003C\u002Fstrong\u003E\u003C\u002Fh2\u003E\u003Cp\u003E\u003Cstrong\u003E算法题以及设计题面试\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E这个阶段很多人都是埋头苦干，在白板上面努力写代码，恨不得听到问题的一半就下笔。然后挥汗如雨，下笔如有神。很多情况，\u003Cstrong\u003E问题的答案不是重点，重点在于跟面试官讨论问题。\u003C\u002Fstrong\u003E任何一个你在公司面对的实际问题都没有什么标准答案，在遇到问题的时候，如何跟同事讨论才是工作的重点。一旦方案确定下来，到了具体实施阶段，那就很容易了。所以我们要放对重点，在讨论上面（敲黑板）。\u003C\u002Fp\u003E\u003Cp\u003E讨论就得说话，这就要靠自己的口语能力。 举个例子，我当年刚毕业不久，想学习如何能做一个优秀的面试官，于是跟老板A一起去面试一个人，刚好是个华人。老板问了一个特别简单的算法题，类似于遍历二叉树之类的。面试者一句话都没说，就开始写了，很快就写完了。然后老板A问他，如果情况一，你这个算法还工作吗？面试者一句话没说，又开始改代码，改到了情况一工作。老板A又问，那情况二呢？面试者有点不悦，就继续改代码。老板A打断了他，说：“我希望你能了解问题的细节再开始实现。” 面试者就忽然恍然大悟了，很明显他其实心里清楚应该问清楚问题。但一紧张可能忘记了，再加上对自己的口语不自信，想尽量少说话，让自己在尽量少的时间里面多写点代码，多做完几道题。\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-d752caf728dcb01d1265fdd_b.jpg\& data-rawwidth=\&268\& data-rawheight=\&200\& class=\&content_image\& width=\&268\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E一般面试题的答案基本都是固定的，面试官也知道问题的答案。那面试官为什么还要不厌其烦地问不同的人同样的问题呢？难道就是想花一个小时时间看别人在自己面前写代码吗？当然不是。\u003Cstrong\u003E这个面试者以后可能是他的同事，他来就是想看看自己是否能跟同事一起好好合作。\u003C\u002Fstrong\u003E同事之间大部分时间都是在讨论项目如何实现，问题如何解决。而不是你先埋头苦干，做出了一个错误答案，大家排除错误答案之后，再继续埋头苦干。\u003C\u002Fp\u003E\u003Cp\u003E所以算法面试阶段一定要努力跟面试官沟通，问清楚问题的细节，问清楚需求再动笔。哪怕讨论的时间特别长，根本没有时间实现代码了。最后写点伪代码，说出自己的思路也是可以的。毕竟你在讨论过程中已经表达了自己对于整个问题的深刻理解。一般算法面试都是一个小时，想想用英语自言自语一个小时有多累？所以面试前一定不要忘记努力练习口语。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E基础知识面试\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E这阶段没有太多讨论，基本就是问答形式。完全靠口语了。当听到问题之后，一定要多说细节，让面试官感觉到你真的是理解了。\u003C\u002Fp\u003E\u003Cp\u003E曾经面试过一个人，我问他你知道deadlock吗？他说：“yes.” 我本来期待他说什么是deadlock呢，他就没有说。我继续问，那你知道semaphore吗？他说：“yes.” 因为当天面试了四五个人，问他们知道吗他们都说不知道。终于有一个知道的了我特别开心。就想继续问问，那你来说说他们的区别？他说：“they are very different.” 然后就没有然后了。我就问他，是A吗（一个错误答案），他说不是。我就问，那是B吗（正确答案），他说是的。我说你都理解啊，你为什么不自己说呢？他也不吭声。\u003C\u002Fp\u003E\u003Cp\u003E当面试结束后，他是当天最后一个面试的人，我送他下楼，他用中文跟我说的特别清楚，semaphore的细节啊，他以前工作中遇到过这样的问题，他是怎么解决的啊。我一听技术大牛啊！但当时你面试为何不说呢？\u003Cstrong\u003E他说，我怕用英文说不明白。\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-7997bedde902a2debebf560e_b.jpg\& data-rawwidth=\&640\& data-rawheight=\&605\& class=\&origin_image zh-lightbox-thumb\& width=\&640\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-7997bedde902a2debebf560e_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E基础知识面试阶段，只有一问一答，一般都是标准答案。这阶段的面试时间不会太长，你的时间有限。一定要在有限的时间里面回答更多细节更多问题哦。所以，当准备阶段，你理解所有概念的阶段，就试图用你要面试的语言去理解就对了。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E最后问问题阶段\u003C\u002Fstrong\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E大部分人熬到这个阶段都是精疲力尽，脑子都不转了。只想赶紧回家倒头大睡。面试官看你一个多小时了，可能也累了。问的问题千奇百怪也就可以理解了。这阶段的口语很简单，但也是相当重要的。记住我们程序员的面试，面试官都是程序员，他们不是HR，不是Recruiter，\u003Cstrong\u003E一定不要问关于公司福利的问题。\u003C\u002Fstrong\u003E比如你们产假几天？你们奖金多少？你们公司健康保险是什么样的？把这种问题留给HR和Recruiter。\u003C\u002Fp\u003E\u003Cp\u003E这阶段虽然是让你问问题，但其实是面试官给你最后的表达自己的机会啊。\u003Cstrong\u003E问一个你熟悉的技术相关的问题。\u003C\u002Fstrong\u003E比如，我本科学学过信息安全，我就问问安全方面的，然后当面试官答完我的问题后，我还能评论两句，说对呀对呀，哎呀我以前也这么想的，但我觉得XXX还能提高。真的很高兴能跟你聊之类的。把话语权控制在自己手上，不要让它溜掉。这一切的一切都要靠自己强大的表达能力啊！\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cstrong\u003E总结\u003C\u002Fstrong\u003E\u003C\u002Fh2\u003E\u003Cp\u003E无论什么样的面试，时间总是短暂的，能让对方在短暂的时间肯定你是一件很难的事情。每一个去参加面试的人，能表达自己的时间基本是固定的。为了能在同样的时间，给面试官留下更好的印象，\u003Cstrong\u003E一定要多说多表达。\u003C\u002Fstrong\u003E流畅清晰的表达能让面试官忘记你的语言，透过你的语言看到你的技术能力。\u003Cstrong\u003E在准备面试的过程中，把自己的思考过程说出来，用你要面试的语言说出来，很快就会有提高啦。\u003C\u002Fstrong\u003E祝大家都拿到大offer咯。\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003E福利\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003E最后，再提一个小小的福利，现在关注公众号“论码农的自我修养”或搜索“\u003Cb\u003Ebit_tiger\u003C\u002Fb\u003E”并回复“\u003Cb\u003E\u003Cu\u003E面经\u003C\u002Fu\u003E\u003C\u002Fb\u003E”即可下载我们的\u003Cb\u003E独家面经大礼包\u003C\u002Fb\u003E。\u003C\u002Fp\u003E\u003Cp\u003E这个系列包括的公司名单：\u003C\u002Fp\u003E\u003Cp\u003EAntra\u002FApple\u002FBloomberg\u002FFacebook\u002FGoogle\u002FGofundme\u002FCaskdata\u002FZulily\u002FThumback\u002FHouzz\u002FNetflix\u002FHedviginc\u002FCoursera\u002FPocketGems\u002FSnapchat\u002FSoundhound……\u003C\u002Fp\u003E\u003Cp\u003E另外，我们特别反感诱导分享，所以无需拉群无需分享。现在只提供第一期的下载，但是我们会定期更新这个系列。\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-046f4a972d1f1598bb08_b.jpg\& data-rawwidth=\&720\& data-rawheight=\&1280\& class=\&origin_image zh-lightbox-thumb\& width=\&720\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-046f4a972d1f1598bb08_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E&,&state&:&published&,&sourceUrl&:&&,&pageCommentsCount&:0,&canComment&:false,&snapshotUrl&:&&,&slug&:,&publishedTime&:&T09:45:52+08:00&,&url&:&\u002Fp\u002F&,&title&:&独家丨资深北美IT面试官告诉你面试中口语的重要性&,&summary&:&\u003Cb\u003E本文作者：Payson，现在职Microsoft\u003C\u002Fb\u003E我参加过很多面试，也当过多次面试官，今天就自己以往的经验谈谈在北美面试IT公司的时候，口语能力的重要性。 我们这些勤劳勇敢善良的计算机学生，在准备面试之前，都刻苦勤奋的努力刷题，努力掌握各种科学知识，努力在白…&,&reviewingCommentsCount&:0,&meta&:{&previous&:null,&next&:null},&commentPermission&:&anyone&,&commentsCount&:10,&likesCount&:214},&next&:{&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\u002Fpic2.zhimg.com\u002F50\u002Fv2-ee9de6037c07_xl.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&topics&:[{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&搜索广告&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&机器学习&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&算法&}],&adminClosedComment&:false,&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&author&:{&bio&:&滑雪狂&,&isFollowing&:false,&hash&:&69e38bc9bfbac954c7e76&,&uid&:313300,&isOrg&:false,&slug&:&chang-li-63-36&,&isFollowed&:false,&description&:&&,&name&:&CLI1&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fchang-li-63-36&,&avatar&:{&id&:&v2-cea65c853fd0fab8e65f70896bbb73b7&,&template&:&https:\u002F\u002Fpic3.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&column&:{&slug&:&bittiger&,&name&:&BitTiger.io&},&content&:&\u003Cp\u003E2015年，全球互联网广告营收接近600亿美元，比2014年增长了近20%。多家互联网巨头都依赖于广告营收，如谷歌，百度，Facebook，互联网新贵们也都开始试水广告业，如Snapchat, Pinterest， Spotify.\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-1122acf71cc2c9f72fc55e363c55b7a1_b.jpg\& data-rawwidth=\&1010\& data-rawheight=\&708\& class=\&origin_image zh-lightbox-thumb\& width=\&1010\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-1122acf71cc2c9f72fc55e363c55b7a1_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E作为互联网广告的老大哥，谷歌花了很大的力气研发自己的社交网络，Google+，并期待能与Facebook，Twitter抗衡。然后事与愿违，Google+的份额依然低于1% 。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-1cddfa5deb7eb04a100de04_b.jpg\& data-rawwidth=\&1148\& data-rawheight=\&612\& class=\&origin_image zh-lightbox-thumb\& width=\&1148\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-1cddfa5deb7eb04a100de04_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cbr\u003E\u003Cp\u003E2015年，谷歌终于不再强迫用户把Google+和谷歌家的其他服务绑定，如Youtube。笔者认为谷歌花大量人力财力研发Google+并将其与其他服务绑定的原因之一是搜集用户的喜好数据来为自家的广告业务服务。更具体的说是为了更好地预测广告的点击率。在这方面，Facebook似乎更胜一筹。2015年第一季度，Facebook广告的转换率比Google Display Ads Network (GDN)高出了55%。笔者并不感到惊讶，Facebook显然比谷歌更了解用户的喜好，笔者猜测用户的行为，包括点赞, 评论，关注等，都为广告算法提供了关于用户的喜好或类别的信息。这些信息会用于广告的点击率预测，而点击率预测又会应用于广告排序算法。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-8c761b6bdc0d62ac4352f6d_b.jpg\& data-rawwidth=\&960\& data-rawheight=\&550\& class=\&origin_image zh-lightbox-thumb\& width=\&960\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-8c761b6bdc0d62ac4352f6d_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E今天我就带大家来用 Spark MLlib训练一个广告点击率预测的模型。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003E环境配置\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003EJava\u003C\u002Fp\u003E\u003Cp\u003ESpark 2.0.0\u003C\u002Fp\u003E\u003Cp\u003E安装很简单，pre-built版本的spark下载下来即可\u003C\u002Fp\u003E\u003Cp\u003E\u003Ca href=\&https:\u002F\u002Flink.zhihu.com\u002F?target=http%3A\u002F\u002Fspark.apache.org\u002Fdownloads.html\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EDownloads | Apache Spark\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cp\u003EPython\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003E\u003Cb\u003E数据\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003EKaggle Avazu挑战赛中的广告数据\u003C\u002Fp\u003E\u003Cp\u003E\u003Ca href=\&https:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fwww.kaggle.com\u002Fc\u002Favazu-ctr-prediction\u002Fdata\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EClick-Through Rate Prediction\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003E\u003Cb\u003E元数据\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003Eid: ad identifier\u003C\u002Fp\u003E\u003Cp\u003Eclick: 0\u002F1 for non-click\u002Fclick\u003C\u002Fp\u003E\u003Cp\u003Ehour: format is YYMMDDHH, so
means 23:00 on Sept. 11, 2014 UTC.\u003C\u002Fp\u003E\u003Cp\u003EC1 -- anonymized categorical variable\u003C\u002Fp\u003E\u003Cp\u003Ebanner_pos\u003C\u002Fp\u003E\u003Cp\u003Esite_id\u003C\u002Fp\u003E\u003Cp\u003Esite_domain\u003C\u002Fp\u003E\u003Cp\u003Esite_category\u003C\u002Fp\u003E\u003Cp\u003Eapp_id\u003C\u002Fp\u003E\u003Cp\u003Eapp_domain\u003C\u002Fp\u003E\u003Cp\u003Eapp_category\u003C\u002Fp\u003E\u003Cp\u003Edevice_id\u003C\u002Fp\u003E\u003Cp\u003Edevice_ip\u003C\u002Fp\u003E\u003Cp\u003Edevice_model\u003C\u002Fp\u003E\u003Cp\u003Edevice_type\u003C\u002Fp\u003E\u003Cp\u003Edevice_conn_type\u003C\u002Fp\u003E\u003Cp\u003EC14-C21 -- anonymized categorical variables\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003E\u003Cb\u003E数据预处理\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E我们注意到数据中有字符串类型的值，如site_id,site_domain,site_category,app_id,app_domain,app_category等。我们需要将他们转换成数值型，公式如下： \u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-be68a0e7fecedf_b.jpg\& data-rawwidth=\&986\& data-rawheight=\&298\& class=\&origin_image zh-lightbox-thumb\& width=\&986\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-be68a0e7fecedf_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E代码：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-python\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&kn\&\u003Eimport\u003C\u002Fspan\u003E \u003Cspan class=\&nn\&\u003Eos\u003C\u002Fspan\u003E\n\u003Cspan class=\&kn\&\u003Eimport\u003C\u002Fspan\u003E \u003Cspan class=\&nn\&\u003Esys\u003C\u002Fspan\u003E\n\u003Cspan class=\&k\&\u003Eif\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003E__name__\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E==\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&__main__\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E:\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Einput_file\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Esys\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Eargv\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E[\u003C\u002Fspan\u003E\u003Cspan class=\&mi\&\u003E1\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E]\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Epreprocess_file\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Esys\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Eargv\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E[\u003C\u002Fspan\u003E\u003Cspan class=\&mi\&\u003E2\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E]\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Etest_flag\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Esys\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Eargv\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E[\u003C\u002Fspan\u003E\u003Cspan class=\&mi\&\u003E3\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E]\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Eprint\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&input=\&\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E+\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Einput_file\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Eprint\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&preprocess_file=\&\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E+\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Epreprocess_file\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Eoutput\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&nb\&\u003Eopen\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Epreprocess_file\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&w\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Ewith\u003C\u002Fspan\u003E \u003Cspan class=\&nb\&\u003Eopen\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Einput_file\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&r\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E \u003Cspan class=\&k\&\u003Eas\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Elines\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E:\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nb\&\u003Enext\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Elines\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Efor\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Eline\u003C\u002Fspan\u003E \u003Cspan class=\&ow\&\u003Ein\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Elines\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E:\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Efields\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Eline\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Esplit\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&,\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Eindex\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&mi\&\u003E5\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Eend\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&mi\&\u003E14\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Eif\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Etest_flag\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E==\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&1\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E:\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Eindex\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&mi\&\u003E4\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Eend\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&mi\&\u003E13\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Ewhile\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Eindex\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Eend\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E:\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Efields\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E[\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Eindex\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E]\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&nb\&\u003Estr\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nb\&\u003Ehash\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Efields\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E[\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Eindex\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E])\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E%\u003C\u002Fspan\u003E \u003Cspan class=\&mi\&\u003E3C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Eindex\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E+=\u003C\u002Fspan\u003E \u003Cspan class=\&mi\&\u003E1\u003C\u002Fspan\u003E\n\n
\u003Cspan class=\&n\&\u003Enewline\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&,\&\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Ejoin\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Efields\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Eoutput\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Ewrite\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Enewline\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Eoutput\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Eclose\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cbr\u003E\u003Cp\u003E此外，有必要将原来的训练数据分割成两部分：本地训练数据，本地测试数据。由于原来的训练数据是基于10天的数据，我们可以把前9天数据作为本地训练数据，把最后一天的数据作为本地测试数据。\u003C\u002Fp\u003E\u003Cp\u003E代码： \u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-python\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&kn\&\u003Eimport\u003C\u002Fspan\u003E \u003Cspan class=\&nn\&\u003Eos\u003C\u002Fspan\u003E\n\u003Cspan class=\&kn\&\u003Eimport\u003C\u002Fspan\u003E \u003Cspan class=\&nn\&\u003Esys\u003C\u002Fspan\u003E\n\u003Cspan class=\&k\&\u003Eif\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003E__name__\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E==\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&__main__\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E:\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Einput_file\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Esys\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Eargv\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E[\u003C\u002Fspan\u003E\u003Cspan class=\&mi\&\u003E1\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E]\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Etrain_file\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Esys\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Eargv\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E[\u003C\u002Fspan\u003E\u003Cspan class=\&mi\&\u003E2\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E]\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Etest_file\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Esys\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Eargv\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E[\u003C\u002Fspan\u003E\u003Cspan class=\&mi\&\u003E3\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E]\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Etest_start_date\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Esys\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Eargv\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E[\u003C\u002Fspan\u003E\u003Cspan class=\&mi\&\u003E4\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E]\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Etest_data_ouput\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&nb\&\u003Eopen\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Etest_file\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&w\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Etrain_data_output\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&nb\&\u003Eopen\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Etrain_file\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&w\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n\n\n
\u003Cspan class=\&k\&\u003Ewith\u003C\u002Fspan\u003E \u003Cspan class=\&nb\&\u003Eopen\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Einput_file\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&r\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E \u003Cspan class=\&k\&\u003Eas\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Elines\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E:\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nb\&\u003Enext\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Elines\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Efor\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Eline\u003C\u002Fspan\u003E \u003Cspan class=\&ow\&\u003Ein\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Elines\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E:\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Efields\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Eline\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Esplit\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&,\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Eif\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Efields\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E[\u003C\u002Fspan\u003E\u003Cspan class=\&mi\&\u003E2\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E]\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Estartswith\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Etest_start_date\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E):\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Etest_data_ouput\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Ewrite\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Eline\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Eelse\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E:\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Etrain_data_output\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Ewrite\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Eline\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n\n\n
\u003Cspan class=\&n\&\u003Etrain_data_output\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Eclose\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Etest_data_ouput\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Eclose\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003E\u003Cb\u003ESpark 入门\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003EApache Spark是一个分布式计算框架，旨在简化运行于计算机集群上的并行程序的编写。该框架对资源调度，任务的提交、执行和跟踪，节点间的通信以及数据并行处理的内在底层操作都进行了抽象。它提供了一个更高级别的API用于处理分布式数据。从这方面说，它与Apache Hadoop等分布式处理框架类似。但在底层架构上，Spark与它们有所不同。\u003C\u002Fp\u003E\u003Cp\u003E我们先介绍SparkContext对象。任何Spark程序的编写都是从SparkContext（或用Java编写时的JavaSparkContext）开始的。SparkContext的初始化需要一个SparkConf对象，后者包含了Spark集群配置的各种参数（比如主节点的URL）。初始化后，我们便可用SparkContext对象所包含的各种方法来创建和操作分布式数据集和共享变量。若要用Python代码来实现的话，可参照下面的代码： \u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-python\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Esconf\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003ESparkConf\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003EsetAppName\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&err\&\u003E“\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003EWordCount\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&) .setMaster(“local[4]\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n\u003Cspan class=\&n\&\u003Esc\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003ESparkContext\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Econf\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Esconf\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cbr\u003E\u003Cp\u003E这段代码会创建一个4线程的SparkContext对象，并将其相应的任务命名为WordCount。\u003C\u002Fp\u003E\u003Cp\u003ERDD（Resilient Distributed Dataset，弹性分布式数据集）是Spark的核心概念之一。一个RDD代表一系列的“记录”（严格来说，某种类型的对象）。这些记录被分配或分区到一个集群的多个节点上（在本地模式下，可以类似地理解为单个进程里的多个线程上）。Spark中的RDD具备容错性，即当某个节点或任务失败时（因非用户代码错误的原因而引起，如硬件故障、网络不通等），RDD会在余下的节点上自动重建，以便任务能最终完成。我们可以把RDD看成数据和基于该数据计算的单元。\u003C\u002Fp\u003E\u003Cp\u003ERDD也可以基于Hadoop的输入源创建，比如本地文件系统、HDFS和Amazon S3。基于Hadoop的RDD可以使用任何实现了Hadoop InputFormat接口的输入格式，包括文本文件、其他Hadoop标准格式、HBase、Cassandra等。以下举例说明如何用一个本地文件系统里的文件创建RDD： \u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-java\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003ErddFromTextFile\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Esc\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&na\&\u003EtextFile\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&err\&\u003E“\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Esample\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&na\&\u003Etxt\u003C\u002Fspan\u003E\u003Cspan class=\&err\&\u003E\&\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E)\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E上述代码中的textFile函数（方法）会返回一个RDD对象。该对象的每一条记录都是一个表示文本文件中某一行文字的String（字符串）对象。\u003C\u002Fp\u003E\u003Cp\u003E基于RDD的操作被分为转换（transformation）和执行（action）两种。一般来说，转换操作是对一个数据集里的所有记录执行某种函数，从而使记录发生改变；而执行通常是运行某些计算或聚合操作，并将结果返回运行SparkContext的那个驱动程序（driver）。\u003C\u002Fp\u003E\u003Cp\u003E常见的转换操作: map, filer\u003C\u002Fp\u003E\u003Cp\u003E常见的执行操作: count, take, collect, saveAsTextFile\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003E\u003Cb\u003E基于SparkMLliB的\u003C\u002Fb\u003E\u003Cb\u003E模型训练\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003ESpark提供丰富的机器学习库，包括：分类，回归，聚类等。此外还提供特征提取算法库。详见：\u003C\u002Fp\u003E\u003Cp\u003E\u003Ca href=\&https:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fspark.apache.org\u002Fdocs\u002Flatest\u002Fml-guide.html\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EMLlib: Main Guide\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cp\u003E本文将logistic regression 应用于处理过的数据，把 loss 收敛在 21.7左右\u003C\u002Fp\u003E\u003Cp\u003E代码： \u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-java\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Efrom\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003E__future__\u003C\u002Fspan\u003E \u003Cspan class=\&kn\&\u003Eimport\u003C\u002Fspan\u003E \u003Cspan class=\&nn\&\u003Eprint_function\u003C\u002Fspan\u003E\n\u003Cspan class=\&n\&\u003Efrom\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Epyspark\u003C\u002Fspan\u003E \u003Cspa}
我要回帖
更多关于 angular2 http 的文章
更多推荐
- ·什么是推荐几个好用的网站推荐？
- ·美团跑腿代购方法怎么下单？
- ·户内各个功能室内空间功能区划分尺度由哪三个部分组成？
- ·彭福文在成都十大物流公司龙瑶物流占多少股份？
- ·请问苏炳添怎么考上大学的是通过什么途径进入专业队？
- ·换了部手机微信与支付宝的微信收款二维码生成跟原来的不一样了，能安全使用吗？
- ·PS的CTRL加鼠标左键出现问题问题
- ·求 spice girl的wannabes 的wannabe百度云
- ·如何自动比对excel两个2个excel表格数据比对中的数据并找出差异
- ·小赢民生易贷好下款吗吗，有谁了解这个软件吗
- ·格力2017双十一销售额格力股票利好么
- ·LGG5和小米小米5x与红米note4xX有什么区别
- ·微信答题微信请柬系统 源代码码哪里可以找到？
- ·不能以[03-]数字开头 正则表达式以什么开头
- ·助听器如何消除录音的电流声声可以消除的吗？
- ·钉子对团队的要求对会员有什么要求吗？
- ·天津蓟州明天天气区收购黑白花肥牛的手机号
- ·QQ里各色的钻都钻戒代表什么意思思啊？
- ·求问这电脑玩吃鸡都需要换啥
- ·在百度知道上课回答问题的好处能有什么好处
- ·angularjs 类似2 有没有类似jszip
- ·求暮光之城3百度云5百度云链接，谢谢
- ·小米降噪耳机 iphone兼容一加5高配版吗
- ·分辨超超六类与六类网线区别和五类的区别在什么地方
- ·微信支付系统源代码答题系统 源代码，哪个好？
- ·跪求放开我北鼻第一季二季百度资源！！！
- ·深圳西乡有好的Java西乡培训机构构吗？哪个靠谱？
- ·华硕笔记本不能关机电脑关不了机。
- ·配置，为什么别人的绝地求生高画质配置，流畅度跟自己不一样
- ·英特尔快速储存怎么用 XTU怎么用
- ·一下哪位大神没有参与有适配酷玩6的MIUI或Flyme的刷机包
- ·为吃什么能让大脑兴奋女排一直能让国人那么兴奋
- ·做腰部牵引有什么后果1度滑脱能牵引吗，喜欢打乒乓球能打吗
- ·让贝克汉姆如此亲睐是什么意思的纹身师，到底有多
- ·打麻将如何改变手气天天输钱是什么意思，是手气不好，还是太霉了
- ·安东尼为什么要门罗恶意犯规规
