@armorik83です。Angularアドベントカレンダーの4日目となる本日は、かつて好評だった拙記事"AngularJSアンチパターン集"にあやかって、Angular 2(以下、単にAngularと表記したときは2.0以上4未満を指す)について気をつけた方がよい点――アンチパターンをまとめたいと思います。 Angular 2.xでアンチパターンは起こりうるか Angular 1系とは大きくAPIが変わったAngular 2系。APIが大きく変わった理由として、Web標準により近い構成を取れるようにする目的がありました。例えば、angular.module()ではなくTypeScriptのimport fromをベースとするソース分割の仕組みであったり、ES2015 classを標準としたComponentやServiceの定義であったり、$qではなく標準のPromiseを使ったりなどで
ちょっと機会があってみんなで Angular2 + TypeScript TUTORIAL: TOUR OF HEROES を少しずつ読んで行く勉強会をやっているのだが、コンポーネントの依存性解決に関してかなり独特な世界観があったのでちょっとまとめる。 Dependency Injection (依存性の注入)って何? 依存性とは あるクラスに特定の変数や定数、インスタンスが入ってしまっている状態。 class Car { engine:Engine = new HondaEngine(); tire:Tire = new BridgestoneTire(); } こんな例だと「この車はHONDAのエンジンとブリヂストンのタイヤに依存している」と言える。 これだと何が問題になるか Car クラスの動き(特定のメソッド)をテストすることを考える。 HONDAのエンジンとブリヂストンのタイヤを
すべて Tech Idea Diary 2025-04-27 GitHub Actions: github/command でIssueOpsを実装する TechGitHub ActionsGitHub 2025-04-09 Angular: Selectorlessがもうすぐやってくる TechAngular 2025-04-09 Weekly Commits on Angular 2025-04-09 TechAngular 2025-04-02 読んだ本 2025-Q1 Diary読書 2025-03-26 Angular: Using Web Worker through Resources TechAngularWeb WorkerSignals 2025-03-19 Weekly Commits on Angular 2025-03-19 TechAngular 2025-03
Angular を勉強する最良の方法は angular.io を読む コード や issue を読む 実際に手を動かす だと思います。ただ残念ながらすべて英語で書かれていますので、はじめてこうしたフレームワークにチャレンジするには敷居が若干高くなるかと思います。 これは私がセミナーのご依頼を受け初心者向けによく利用している教科書を gitbooks に書き起こしたものです。Angular に関する基本的な要素についてはほとんどの部分で網羅しているとは思いますが、細かい説明は書いていません。なので、気になることはご自身で調べると良いと思いますし、やはり angular.io の チュートリアル などはやっておくべきことと思います。そこに行く前のより簡単なものです。 この本を通じて Angular で自身のWebアプリケーションを作ってみたくなれば幸いです。 December 16, 2016
const app = angular.module("app", []); class MyAppCtrl { } app.component("myApp", { template: `<greeting name="'World'"></greeting>`, controller: MyAppCtrl }); class GreetingCtrl { get upperName() { return this.name.toUpperCase(); } } app.component("greeting", { bindings: { name: "=" }, template: `<h1>Hello {{$ctrl.upperName}}!</h1>`, controller: GreetingCtrl }); angular.bootstrap(document.body, [
前回の記事で、Angular2のPipeを紹介しましたが、 すでにはじめから用意されているPipeをいくつか紹介しました。 しかし、Angular2では自分でPipeを定義できるんです。 煩雑になりがちな繰り返し処理をすっきりまとめることができるので、地味に重宝してます。 そこで、今回はカスタムパイプの作成方法を紹介します。 カスタムパイプを定義する 数字を入力すると、それに紐付いた文字列を出力するPipeを定義してみましょう。 「サーバーのAPIから取得する値は数字だけど、ブラウザでの表示は文字列」といったよくある場面を想定します。 今回は1〜9までの数字から、家族の続柄の文字列を出力してみましょう。 family-type.pipe.ts import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'family
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く