albatrosary's blog

UI/UXとエンタープライズシステム

Angular

ApplicationRef

stackblitz.com

Difference between Pure and Impure Pipes

stackblitz.com

Rendering Speed used TrackBy

stackblitz.com

Behavior of Nested HostListener

Angular Material の MatTree を使った時に、@HostListener をネストしたような構成になるとイベントが伝搬されないが、理由は event.stopPropagation() が MatTree に実装されているから。 stackblitz.com

BehaviorSubject の CRUD

stackblitz.com

@ViewChild の3パターン

stackblitz.com

Observable, Subject, BehaviorSubject の違い

stackblitz.com

Component で盲目的に getter を使わない

stackblitz.com

Angular で Management API を叩く

Note though that usually the end user would not call that management API himself, but that would be a call from your backend to the Management API, where your backend would fetch the access token for it via Client Credentials Grant (M2M / …

Angular の Component.queries(ViewChild(ren), ContentChild(ren)) を評価する

ViewChild(ren) と ContentChild(ren) は各々 AfterViewInit, AfterContentInit より後でアクセス可能と成りますと「Angularデベロッパーズガイド」に書いてますが、実際にサンプルを動かすと「???」でしたのでメモを書き留めます 本のサンプルに若干のロ…

Angular DI でコンストラクター引数に public or private を入れるのはなぜ?

Angular DI でコンポーネントにインジェクトするときコンストラクターに引数で public or private を入れるのはなぜだろう?しかもどちらか書かないとインジェクトされない。というので数行メモします。 TypeScript で3つのクラス(hogeClass、fugaClass、p…

angular.io サンプルにある Angular with Server Side Rendering

言わずと知れた SSR を触ってみた。サンプルコードは https://angular.io/guide/universal にあり完成されたコードも落とせます。で、サクッと落として動かしてみよう!、、、が、エラーが出る。ので!修正しました!というメモです。 サンプルコードの取得 …

To use Webpacker with Angular

もくもく会@ng_kobe#2 でやったことをまとめます。「Webpacker is 何?」ってところからどうも Ruby on Rails で Angular プロジェクトが作れるらしいものがあるということで少し触ってみた。ドキュメントを読む限りでは「はろーわーるど」的なものは簡単に…

Go on Azure + Angular v4

Azure App ServicesはGoのサポートがあります。現在、Azure App Serviceプラットフォームでサポートされているバージョンは64bit Go 1.4.2とGo 1.5.1です(らしい)。Azure Appサービスを作成してセットアップして、新しいGoアプリに対応し、デプロイメント…

Angular Community の分裂が始まったのか??

Angular 4 のリリースを目の前に Angular Community の分裂がいよいよ表面化し始めた。AngularJSから言われていたその独特な記法は JavaScript エンジニアから敬遠されることもあり、そうしたことが払拭されなかったことが原因なのでは無いかと思う。今 Angu…

Angular 4 をさっそく使ってみよう!

色々なところで Angular 2 での開発案件も多くなり、勉強している方も多いと思いますが Angular 4 も 4.0.0-beta.8 ということで遊びがてら触るのもいいかなと思える今日このごろだと思います。angular-cli も Angular 4 対応をはじめてますので軽く触れる状…

Material2 First Step メモ的な

Angular Material のサイトが少し綺麗になったので material2 を使うためのファーストステップをメモします。やることは大きく次のことです。 Getting started Theming Angular Material このふたつをやれば次のような画面が出来上がります。 特にやっていて…

Angular 4 見てたら .ngsummary.json ってファイルがあった

5日前に 4.0.0-beta.1 がリリースされてましたね。仕事は angular-cli でやっているので、最近はあまりバージョンも気にしなくなり。 せっかくなので 4.0.0-beta.1 を動かしてみた。結果は普通に動く、いいね、がしかし細かいことはわからない。 angular-cli…

Angular Dart ことはじめ

はじめての Angular Dart なのでメモ程度にやったことを記載します。Angular Dart を始めようかなというのは Angular やってて Angular Dart 触っていない人はもぐり的な話を風のうわさで聞いたので(というか記憶があまりないので神の声が聞こえたのかも) …

Angular を書くには Johnpapa さんのスニペット使おう

Angular でアプリケーションを作るには angular-cli の利用が欠かせませんが、Visual Studio Code用のスニペットもありますので利用しましょう。Angular やっていて Johnpapa さんを知らない人はいないというくらい有名な方です。 github.com 注意)ちょっと…

初心者向け Angular

Angular を勉強する最良の方法は angular.io を読む コードやissueを読む 実際に手を動かす だと思います。ただ残念ながらすべて英語で書かれていますので、はじめてこうしたフレームワークにチャレンジするには敷居が若干高くなるかと思います。アドベント…

Angular 3のリリースに関する記事が流れてきたのでメモ

Angular 3の記事がありました。この記事によると Angular 3は、Angular 2のようなフレームワークの置き換えでない ツールの改善と生成コードの削減 年2回新しいメジャーバージョン のようで、Angularチームではフレームワークを書き直したいという人はいない…

Applications using the AED open data, Angular2 and Google Map

何かTodos以外にも作ってみようと思いAEDマップを作った。ご存知の通りAEDとは自動体外式除細動器のことを言います。 A:Automated(自動化された) E:External(体外式の) D:Defibrillator(除細動器) ※ 日本救急医学会 市民のための心肺蘇生 より AED…

Dependency injection tokens

Angular2のDIはtokenを使います。Angular1では文字列をベースとしたDIを行っていましたが大幅に仕組みが異なります。という話ですが、tokenってなに?なに様のつもりなのさ。ということで調べる。 まだ酒巻師匠に話を聞き、ソースを読んでいる最中なのでこま…

Angular2 Component or Directive ?

Angular2も含めAngular1.5からコンポーネント指向的な話があり、文字通り@Componentを利用する機会が増えるだろうと思います(Angular2を利用する場合、当然ですが)。ただインジェクションするときに「Componentをdirectivesに書いて」とか「ここはComponen…

Gross! Angular2 Template Syntax

ちょっときもいAngular2のTemplate Syntaxですが、、確かにキモい、キモすぎる。[]だったり()だったり*とか。このあたりの概要が結構整ってます。 angular.io ざっと目を通してみる 多くはtemplateとclassとのデータのやり取りはダブルカーリー{{}}で記載す…

@Input and @Output of Angular2

ようやく触り始めてるAngular2です。Angular2に定義されている@Inputと@Outputについて触ってみている、ぱっと見キモい。どんな振る舞いをしているのかイマイチわからないのでメモ程度に備忘します。@Inputと@Outputは梱包しているComponentと梱包されている…

yeomanもgulpもgruntもさようなら(?

Angular2を触り始めているが、YEOMANジェネレータがあまりないので自分で作っています。今Angular2を始めている人達の多くがangular2-seed: github.com を利用していると思いますが(実際はよくわかりません)、Angular2にはangular-cliというのがあり、これ…

Angular2の「5 MIN QUICKSTART」をやってみた - AngularJS Advent Calendar 2015

Angular2の「5 MIN QUICKSTART」を触ってみた。このエントリーは「AngularJS Advent Calendar 2015」12月20日の記事です。 angular.io Angular2のQuick Startは、JavaScript、TypeScript、DartとあるがJavaScript、TypeScriptをやってみる JavaScript 作業デ…

ngReact - AngularJS Advent Calendar 2015

Yeomanでネタになるジェネレータ無いかなと探していたらngReact成るものがあったのでさっと見てみます。このエントリーは「AngularJS Advent Calendar 2015」12月15日の記事です。 github.com はじめに ngReactをgit cloneする。ディレクトリ移動してbower i…