angular2

[uniquejava]

大漠穷秋的视频:

https://my.oschina.net/mumu/blog/834254 提纲挈领的节奏, 一直看到前六节, 工作上的不确定性, 后三节暂时hold. (实际需要继续看ngbook2, 当前看到第157页)

awesome angular2

https://github.com/AngularClass/awesome-angular2

videos

Learning Path: On the Road to Angular 2

books

1. https://www.safaribooksonline.com/library/view/switching-to-angular/9781785886201/
2. ng-book 2
3. Angular从零到一 (2017.3新书, 写得非常不错)

   articles

http://blog.thoughtram.io/categories/angular-2/

webstorm and angular2

https://egghead.io/lessons/angular-2-webstorm-setting-up-angular-2

[uniquejava]

angular-cli installation and basic usage

npm install -g @angular/cli
ng --help
x ng new angular-hello-world (创建项目的时候必须FQ,可以加上如果不是第一次使用ng创建项目,加上 --skip-install参数, 然后直接拷贝前一个项目的node_modules目录)

cd angular-hello-world
ng generate component hello-world或者
ng g c hello-world (使用缩写)

ng g s core/auth
ng g s todo/todo

ng serve 或者
ng serve --prod --aot (启用压缩和预编译Ahead Of Time)

npm install -g now
ng build --target=production --base-href '/'
cd dist
now

ng test (自动化测试)

typescript命令行

npm install -g typescript然后就可以使用tsc命令编译ts文件 npm install -g tsun, 输入tsun就进到typescript的REPL控制台

提速

ng set --global packageManager=cnpm

如何默认使用scss

ng new --help
ng set defaults.styleExt scss
ng set --global defaults.styleExt scss
ng new My_New_Project --style=scss 

见: http://stackoverflow.com/questions/36220256/angular2-angular-cli-sass-options?rq=1

ng new serious --skip-install=true --skip-tests=true --style=scss --prefix=xx --routing=true

clearfix

如果某个容器中使用了float元素, 那么这个窗口的高度总会出问题, 解决办法是给容器加上加上clearfix样式. http://zh.learnlayout.com/clearfix.html

Angular 2: Host binding and Host listening

简单

@Directive({
  selector: '[Highlight]'
})
export class HighlightDirective {
  @HostListener('mouseenter') mouseover() {
    this.backgroundColor = 'green';
  };

  @HostListener('mouseleave') mouseleave() {
    this.backgroundColor = 'white';
  }

  @HostBinding('style.backgroundColor') get setColor() {
     return this.backgroundColor;
  };

  private backgroundColor = 'white';
  constructor() {}

}

复杂

import {Component, HostListener, Directive} from 'angular2/core';

@Directive({selector: 'button[counting]'})
class CountClicks {
  numberOfClicks = 0;
  @HostListener('click', ['$event.target']) onClick(btn) {
    console.log("button", btn, "number of clicks:", this.numberOfClicks++);
  }
}
@Component({
  selector: 'my-app',
  template: `<button counting>Increment</button>`,
  directives: [CountClicks]
})
export class AppComponent {
  constructor() { console.clear(); }
}

[uniquejava]

change detections

比如数组内部有变化,比如删除, 添加, ..页面上的ngFor不会自己刷新., 此时要手动调用 我最终是这么做的(解决this.metrics在更新后, 页面不刷新的问题)

@IonicPage()
@Component({
  selector: 'page-page4',
  templateUrl: 'page4.html',
  // watch for internal changes inside array
  changeDetection: ChangeDetectionStrategy.OnPush
})
  constructor(private cd: ChangeDetectorRef, private dataService: Data) {
  }
  ionViewDidLoad() {
    this.dataService.getMasterData().subscribe((masterData: any) => {
      // clear up
      d3.selectAll('page-page4 svg').remove();

      // redraw pie charts
      if (masterData) {
        ...
        this.metrics = _.pluck(this.makerArray[0].wordArray, 'label');

        this.cd.detectChanges();  <==== watch out here

        setTimeout(() => {
          this.metrics.forEach((metric, i) => {
            let pieData = [];
            _.each(this.makerArray, maker => {
            ...
            this.drawPieChart('page-page4 .pie' + (i + 1), pieData);

          });
        }, 100);

      }
    });
  }

在页面上使用

<div *ngFor="let metric of metrics; let i = index" class="pie pie{{i+1}}">
        <p>「{{metric}}」</p>
      </div>

这里有个坑, 在ngFor中不能做任何计算, 比如不能使用let i = index + 1

[uniquejava]

调试插件

输入chrome://extentions然后搜索 Augury并安装, 重启chrome浏览器, 可以看到 chrome dev tools的最后面会多出一个叫augury的tab