Angular4さわる

angular

これは何か

新機能開発をAngular4で作り始めました。その時に調べたことのメモです。
Angular CLI使っています。

前提知識

調べたことメモ

Angular CLI

Autoprefixer

環境変数

上記ページ以外にもWikiのstoriesからいろいろ確認できます。
stories · angular/angular-cli Wiki · GitHub

IE9, IE10, IE11対応

  • src/polyfills.ts

ビルド

SCSS

VS Codeエクステンション

よかったチュートリアル

  1. The Ultimate Angular CLI Reference Guide — SitePoint
  2. Angular 2 Tutorial: Create a CRUD App with Angular CLI — SitePoint
  3. Understanding Component Architecture: Refactoring an Angular App — SitePoint
  4. Angular and RxJS: Create an API Service to Talk to a REST Backend — SitePoint

Angular CLIを利用したチュートリアルのシリーズです。
Githubにコードがあります。
GitHub - sitepoint-editors/angular-todo-app: Todo app for Angular2+

画像を内接リサイズにする

css

f:id:ryotah:20170619212705p:plain

css - Resize to fit image in div, and center horizontally and vertically - Stack Overflow

transformとposition: absoluteを利用します。

前の記事のアスペクト比を保つcssを利用するとこんな感じです。

object-fitというプロパティを利用すればもっと簡単でした。（でもIEには対応していない）
object-fit - CSS | MDN

アスペクト比を保つ

css

f:id:ryotah:20170619205403p:plain

「padding-topに%を設定すると、包括しているブロックの幅を基準にする」という仕様を利用します。

padding-top - CSS | MDN

以下のコードは、アスペクト比を4:3にする場合。

.a43 {
  border: 1px solid #000;
  width: 160px;
  position: relative;
}
.a43:before {
  content: '';
  display: block;

  /* アスペクト比 4:3 */
  padding-top:75%;
}
.a43-inner {
  position: absolute;
  top: 0;
}

<div class="a43">
  <div class="a43-inner">
    foo<br>
    bar
  </div>
</div>

AngularでBugsnagを利用

Angular4始めました。
Angularでエラーをインターセプトする場合はこんな感じ。

import { ErrorHandler, Injectable} from '@angular/core';
import { environment } from '../environments/environment';

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
  constructor() {
    Bugsnag.releaseStage =  = environment.production ? 'production' : 'develop';
  }
  handleError(error) {
    Bugsnag.notifyException(error);
    throw error;
  }
}

// ---

@NgModule({
  providers: [{
    provide: ErrorHandler,
    useClass: GlobalErrorHandler
  }]
})
export class AppModule { }

https://angular.io/api/core/ErrorHandler

VS Codeでタイトルバーの色変更

f:id:ryotah:20170616111352p:plain

複数のプロジェクトやライブラリをみる場合に便利。
画像の例は、自分の仕事とAngularとBootstrap4を開いている場合。

// Place your settings in this file to overwrite default and user settings.
{
  "workbench.colorCustomizations": {
    "titleBar.activeBackground": "#1976d2"
  }
}

VS Code Theme Color Reference

JavaScript (TypeScript) クラス、型の判定 

class Foo {}
class Bar extends Foo {}

const foo = new Foo();
const bar = new Bar();

console.log(typeof foo);
// -> 'object'
console.log(foo.constructor === Foo);
// -> true
console.log(foo instanceof Foo);
// -> true
console.log(foo instanceof Object);
// -> true

console.log(bar.constructor === Foo);
// -> false (継承元はわからない)
console.log(bar.constructor === Bar);
// -> true
console.log(bar instanceof Foo);
// -> true
console.log(bar instanceof Bar);
// -> true