カテゴリー別アーカイブ: Angular2

AngularJSで日付フォーマット

こんな雰囲気。パイプでdate型にデータを渡しつつフォーマット指定。

<ul>
    <li>整形({{format}}):{{current | date: format}}</lli>
    <li>整形(書式指定):{{current | date: 'yyyy年M月d日(EEE)a hh時mm分ss秒'}}</li>
</ul>

current = new Date();
formats = [ 'medium', 'short', 'fullDate', 'longDate', 'mediumDate', 'shortDate', 'mediumTime', 'shortTime' ];

結果はこんな感じ。

整形(デフォルト):2015/08/13
整形(medium):2015/08/13 10:11:34
整形(short):2015/08/13 10:11
整形(fullDate):2015年8月13日木曜日
整形(longDate):2015年8月13日
整形(mediumDate):2015/08/13
整形(shortDate):2015/08/13
整形(mediumTime):10:11:34
整形(shortTime):10:11
整形(書式指定):2015年8月13日(木)午前 10時11分34秒

Angular2スタート

・コーディング環境
TypeScriptを使うことを前提。
いろいろあるけど、Atomが一番手頃かな。

  • VisualStudio
  • InteliJ
  • Eclipse
  • Atom
  • WebStorm

<設定>
1.DL(https://atom.io/)
2.Packages > SettingView > Open > Install
3.「atom-typescript」を適用。

<動作環境:CentOS>
・nvm
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.26.1/install.sh | bash
source ~/.bashrc

・node
nvm install stable
nvm alias default stable

・準備
npm init

・tsd (TypeScript用 型定義ファイル管理ツール)
npm install tsd@0.6.0 -g

・Angular2用の型定義
tsd query angular2 –action install

・tsc (TypeScript→JS変換ツール)
npm install -g typescript@^1.5.0-beta
tsc –init

・promise
npm install webpack -g
npm install es6-promise
npm install es6-shims
npm install es7-reflect-metadata

・動作テスト
HTML作成
TS作成
tsc –watch -m commonjs -t es5 –emitDecoratorMetadata *.ts

(参考)
http://sankame.github.io/angular2/angular2_quick_start/
http://qiita.com/ystg/items/0c79d0d5e998e5861be2
http://labs.timedia.co.jp/2016/01/hello-angular2.html