Angular4さわる

これは何か

新機能開発を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+

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

f:id:ryotah:20170619212705p:plain

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

transformposition: absoluteを利用します。

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


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

アスペクト比を保つ

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>

ウィンドウや他の要素の高さに合わせて、スクロールコンテナの高さを調整

以下画像の、緑の高さをコントロールしたい。
f:id:ryotah:20170616185745p:plain

一番左のFlexboxを利用する方法が簡単でよさそう。

  • 並びをカラムに変更
  • height: 100%flex-grow: 1 をうまく利用

f:id:ryotah:20170616185803p:plainf:id:ryotah:20170616185810p:plain


(以下のコードはjsfiddleとほぼ同じ。)

<!doctype html>
<html class="no-js" lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <base href="/">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div class="d-flex h-100">
      <!-- 1 -->
      <section class="card w-25 h-100">
        <div class="card-block h-100">
          <div class="d-flex flex-column h-100">
            <h1>
              Header
            </h1>
            <div style="flex: 1;" class="d-flex flex-column">
              <div>
                description, description...
              </div>
              <div style="
                flex: 1;
                background-color: rgba(255,0,0,.1);
                overflow: scroll;
                ">
                <div class="d-flex flex-column" style="height: 600px;">
                  <div class="mb-auto" style="background-color: rgba(255,0,0,.1);">
                    Top<br>
                    <code>display: flex;</code>
                  </div>
                  <div class="mb-auto" style="background-color: rgba(255,0,0,.1);">
                    Middle
                  </div>
                  <div style="background-color: rgba(255,0,0,.1);">
                    Bottom
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- 2 -->
      <section class="card w-25">
        <div class="card-block h-100">
          <div class="h-100">
            <h1>
              Header
            </h1>
            <div style="height: calc(100% - 52px);">
              <div>
                description, description...
              </div>
              <div style="
                height: calc(100% - 24px);
                background-color: rgba(255,0,0,.1);
                overflow: scroll;
                ">
                <div class="d-flex flex-column" style="height: 600px;">
                  <div class="mb-auto" style="background-color: rgba(255,0,0,.1);">
                    Top<br>
                    <code>height: calc(100% -...</code>
                  </div>
                  <div class="mb-auto" style="background-color: rgba(255,0,0,.1);">
                    Middle
                  </div>
                  <div style="background-color: rgba(255,0,0,.1);">
                    Bottom
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- 3 -->
      <section class="card w-25">
        <div class="card-block h-100">
          <div class="h-100">
            <h1>
              Header
            </h1>
            <div style="height: calc(100% - 52px); position: relative;">
              <div class="w-100" style="position: absolute; background-color: #fff;">
                description, description...
              </div>
              <div style="
                height: 100%;
                background-color: rgba(255,0,0,.1);
                overflow: scroll;
                padding-top: 24px;
                ">
                <div class="d-flex flex-column" style="height: 600px;">
                  <div class="mb-auto" style="background-color: rgba(255,0,0,.1);">
                    Top<br>
                    <code>height: calc(100% -...</code>
                    <code>position: absolute;</code>
                  </div>
                  <div class="mb-auto" style="background-color: rgba(255,0,0,.1);">
                    Middle
                  </div>
                  <div style="background-color: rgba(255,0,0,.1);">
                    Bottom
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- 4 -->
      <section class="card w-25">
        <div class="card-block h-100">
          <div class="h-100">
            <h1>
              Header
            </h1>
            <div>
              <div>
                description, description...
              </div>
              <div id="scroll" style="
                background-color: rgba(255,0,0,.1);
                overflow: scroll;
                ">
                <div class="d-flex flex-column" style="height: 600px;">
                  <div class="mb-auto" style="background-color: rgba(255,0,0,.1);">
                    Top<br>
                    <code>elm.offsetTop</code>
                  </div>
                  <div class="mb-auto" style="background-color: rgba(255,0,0,.1);">
                    Middle
                  </div>
                  <div style="background-color: rgba(255,0,0,.1);">
                    Bottom
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
    <script src="/app.js"></script>
    <script>
      function setHeight() {
        var elm = document.getElementById('scroll');
        console.log(elm.offsetParent);
        console.log(elm.offsetTop);
        elm.style.height = 'calc(100vh - 1.25rem - ' + elm.offsetTop + 'px)';
      }
      setHeight();
      window.onresize = function () {
        setHeight();
      };
    </script>
  </body>
</html>

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

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