Angular 2アンチパターン集 - Qiita
@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を使ったりなどで
AngularとZone.jsとテストの話 - Qiita
どうも @Quramy です。このエントリはAngular Advent Calendar の3日目向けに書いています。 はじめに Angularにおいて、Componentのテストコードは少し癖が強いですね。少なくとも僕はそう感じました。 次のComponentを例としてみましょう。ngModel を使って name プロパティをバインディングしただけのシンプルなComponent です。 import { Component } from '@angular/core'; @Component({ selector: 'app-my-form', template: `<input [(ngModel)]="name">` }) export class MyFormComponent { name: string = ''; } このComponent に対して、「name プロパテ
Angular2 における Injector の話 - Dolpenの日記
ちょっと機会があってみんなで Angular2 + TypeScript TUTORIAL: TOUR OF HEROES を少しずつ読んで行く勉強会をやっているのだが、コンポーネントの依存性解決に関してかなり独特な世界観があったのでちょっとまとめる。 Dependency Injection (依存性の注入)って何？ 依存性とは あるクラスに特定の変数や定数、インスタンスが入ってしまっている状態。 class Car { engine:Engine = new HondaEngine(); tire:Tire = new BridgestoneTire(); } こんな例だと「この車はHONDAのエンジンとブリヂストンのタイヤに依存している」と言える。 これだと何が問題になるか Car クラスの動き（特定のメソッド）をテストすることを考える。 HONDAのエンジンとブリヂストンのタイヤを
ng-contentを使ってみる - Qiita
ng-contentとは componentの中に外から要素を注入したいときに使います。angular1でいうところのngTranscludeに近いですね。 とりあえず子要素を注入してみる とりあえず子要素を突っ込むには、突っ込みたい位置に<ng-content></ng-content>を置きます。それだけです。 @Component({ selector: 'foo', template: ` <ng-content></ng-content> `, }) export class Foo { } @Component({ selector: 'bar', template: ` <section> <h3>tag selector(foo)</h3> <ng-content select="foo"></ng-content> </section> <section> <h3>tag
Marginalia
すべて Tech Idea Diary 2024-10-30 GDG DevFest Tokyo 2024で本屋をやります（ぜひ来てください） Diary本屋GDE 2024-10-29 Angular v19: resource() の解説 TechAngularSignals 2024-10-28 Angular v19: linkedSignal() の解説 TechAngularSignals 2024-10-09 Angular v19: effect() の変更点 TechAngularSignals 2024-10-02 lacolacoユーザーの声を募集しています Diary 2024-10-01 読んだ本 2024-Q3 Diary読書 2024-09-28 『SREをはじめよう』（オライリー・ジャパン）を献本いただきました Diary読書SRE 2024-09-25 A
Introduction · Start Angular
Angular を勉強する最良の方法は angular.io を読む コード や issue を読む 実際に手を動かす だと思います。ただ残念ながらすべて英語で書かれていますので、はじめてこうしたフレームワークにチャレンジするには敷居が若干高くなるかと思います。 これは私がセミナーのご依頼を受け初心者向けによく利用している教科書を gitbooks に書き起こしたものです。Angular に関する基本的な要素についてはほとんどの部分で網羅しているとは思いますが、細かい説明は書いていません。なので、気になることはご自身で調べると良いと思いますし、やはり angular.io の チュートリアル などはやっておくべきことと思います。そこに行く前のより簡単なものです。 この本を通じて Angular で自身のWebアプリケーションを作ってみたくなれば幸いです。 December 16, 2016
その使い方はもう古いかも？AngularJS老化チェック（ディレクティブ篇） - Qiita
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を定義する - イソップブログ
前回の記事で、Angular2のPipeを紹介しましたが、 すでにはじめから用意されているPipeをいくつか紹介しました。 しかし、Angular2では自分でPipeを定義できるんです。 煩雑になりがちな繰り返し処理をすっきりまとめることができるので、地味に重宝してます。 そこで、今回はカスタムパイプの作成方法を紹介します。 カスタムパイプを定義する 数字を入力すると、それに紐付いた文字列を出力するPipeを定義してみましょう。 「サーバーのAPIから取得する値は数字だけど、ブラウザでの表示は文字列」といったよくある場面を想定します。 今回は1〜9までの数字から、家族の続柄の文字列を出力してみましょう。 family-type.pipe.ts import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'family
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Angular Router: Empty Paths, Componentless Routes, and Redirects
Rangle.io : Angular Training
Angular 2 - Qiita Advent Calendar 2015 - Qiita