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 プロパテ
Jasmine使い方メモ - Qiita
describe('add 関数のテスト', function() { it('1 + 1 は 2', function() { expect(add(1, 1)).toBe(2); }); it('1 + 4 は 5', function() { expect(add(1, 4)).toBe(5); }); it('10 + 2 は 12', function() { expect(add(10, 2)).toBe(5); // わざと失敗させている }); }); <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <script src="jasmine.js"></script> <script src="jasmine-html.js"></script> <script src="boot.js"></script> <
Angular2の使い方 - Qiita
記事の内容をrc.4に対応しました 動作サンプルについてはまだBeta版のままなのでご了承ください (2016/08/04) Angular2(rc.4)の使い方について簡潔にまとめてみました 細かい部分は省くので、公式サイトやQiita内に素晴らしい記事があるので そちらを参考にしてください インストール npm install @angular/common@2.0.0-rc.4 @angular/compiler@2.0.0-rc.4 @angular/core@2.0.0-rc.4 @angular/platform-browser@2.0.0-rc.4 @angular/platform-browser-dynamic@2.0.0-rc.4
Angular2 DOC GUIDEを翻訳する[DEPENDENCY INJECTION] - Qiita
トピック Angular2 CORE DOCUMENTATIONのGUIDEの翻訳です。 DOCUMENTATION OVERVIEW - ドキュメント概要 - ARCHITECTURE OVERVIEW - 構文概要 - DISPLAYING DATA - データ表示 - USER INPUT - ユーザー入力 - FORMS - フォーム - DEPENDENCY INJECTION - 依存性注入 - STYLE GUIDE - スタイルガイド - 注意1）ここに掲載されていない項目は、Angular2 CORE DOCUMENTATIONのGUIDEを直接参照してください。 注意2）2016年11月22日時点の翻訳です。翻訳者はTOEICで700点くらいの英語力なので、英訳が間違っている可能性があります。しかもかなり意訳している箇所もあります。もし意訳を通り越して、誤訳になっている
![Angular2 DOC GUIDEを翻訳する[DEPENDENCY INJECTION] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/2c9c24d9fb828d141a19731b2dc0bb48cb7388f5/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9QW5ndWxhcjIlMjBET0MlMjBHVUlERSVFMyU4MiU5MiVFNyVCRiVCQiVFOCVBOCVCMyVFMyU4MSU5OSVFMyU4MiU4QiU1QkRFUEVOREVOQ1klMjBJTkpFQ1RJT04lNUQmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTc3NmNmMjExZjU3NDIyOWY2OGQxZjQ4MWQyYTI5YjI5%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBZYW1hbW90bzA1MjUmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWVhYTEwZjNlZGRjYzM5MmE3OGJkMjcxYmJkMmNiZmI3%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Df86ae72d8481ce38dbebb34ed809acac)
NgModule導入について · Angular Info
どうも、らこです。RC.5のリリースがおそらく来週と迫っていますが、多くのバグ修正と共に新しい機能が追加されます。 NgModuleはこれまでのAngular2で不便だったこと、複雑だったことを一気に解決してくれる新機能です。 RCも大詰めとなったこのタイミングで導入されることに困惑するかもしれませんが、 ぜひとも対応してもらいたいと思います。 はじめに NgModuleは完全に新しく導入されたAPIであり、既存のAPIへの破壊的変更ではありません。 ただし、従来の方法は非推奨となり、stableリリースの段階では廃止される予定です。 RC.5からは移行期間に入るものと思っていてください。 NgModule NgModuleの概要についてスライドを作ってあるので、これをベースに解説します。 NgModuleの概要 NgModuleは、ディレクティブやパイプ、サービスなどをひとまとめにしたモ
Angular 2のローカル変数とexportAs
Angular 2には local variables (ローカル変数)という機能があります。 公式のチュートリアルやデベロッパーガイドを読んでいると突然登場してみなさんを惑わしているかもしれません。 しかし、この機能はAngular 2を使いこなす上でとても重要なものなので、ぜひ知っておきましょう。 ローカル変数と # シンタックス ローカル変数とは、コンポーネントのテンプレート中で定義して使用できる変数のことです。 ローカル変数には原則として、ローカル変数を定義した要素のインスタンスが代入されます。 ローカル変数の定義は # シンタックスを使います。 次の例では、 input 要素をローカル変数 i として定義し、 ボタンをクリックするときに input 要素の値をコンポーネントに渡しています。 @Component({ selector: 'my-app', template: `
Ahead-of-Time Compilation in Angular v2 - albatrosary's blog
「Angular v2は事前コンパイルすることができる」ということを聞いても何のことだろうと思ってしまう。何故このように事前コンパイルする必要があるかというと「開発したAngular2アプリケーションをより効率の良いもの」にするためです。この「効率」というものを具体的にコードを書いて見ます。サンプルコードはAngular2チュートリアルを使っています。 事前コンパイルはngcコマンドで行いますが、そのモジュールが@angular/compiler-cliから提供されます。これにtsconfig.aot.jsonというファイルを追加することと、package.jsonに"ngc": "ngc -p ./tsconfig.aot.json",というスクリプトを定義すること、そしてbootstrapを定義しているmain.tsに対してAoT(Ahead-of-Time)ファイルmain.aot.
Angular 4でcanvas要素を扱う方法 - Qiita
Angular 4の話 AngularでHTML5のcanvas要素とどうやったら連携できるのか調べてみました。TypeScript 2.2, Angular 4での書き方です。 動作サンプル 動作サンプルはPlunkerにアップしておきました。 Angular 4 Example - How to use Canvas Element 手順の解説 template内のセレクターにID値を割り当てておく。ID値の割り当て方はAngularの記法を使う。(例 : <canvas #hoge></canvas>) クラスではAfterViewInitインターフェースをimplementsキーワードで指定。これによってngAfterViewInit ()メソッド(ライフサイクル)の実装が義務付けられる。 クラスのメンバー変数にViewChildアノテーションでID値を使って関連付けを行う。 ng
Angular2のFormについて（その１） - Qiita
概要 Angular2とionic2でformを使った際に，バリデーションが少し面倒だったので，Angular2のformについて調べてみました．この記事は The Ultimate Guide to Forms in Angular2 を元にしています．元の記事は少々長いため，以下のように二部に分けて記事にします．うまく訳せていないところもあるので，元の記事はご自身で確認いただければと思います． なおionic2に関しては第２部の最後に，フォームのサンプルを書いてみたいと思います． 第１部 FormControl FormGroup FormBuilder バリデーション 第２部 カスタムバリデーション 変更をWatchする ngModelによる双方向データバインディング ionic2に組み込んでみる 第１部ではAngular2が用意するツールを用いてバリデーションを実装するまでを見てい
Angular2 における Injector の話 - Dolpenの日記
ちょっと機会があってみんなで Angular2 + TypeScript TUTORIAL: TOUR OF HEROES を少しずつ読んで行く勉強会をやっているのだが、コンポーネントの依存性解決に関してかなり独特な世界観があったのでちょっとまとめる。 Dependency Injection (依存性の注入)って何？ 依存性とは あるクラスに特定の変数や定数、インスタンスが入ってしまっている状態。 class Car { engine:Engine = new HondaEngine(); tire:Tire = new BridgestoneTire(); } こんな例だと「この車はHONDAのエンジンとブリヂストンのタイヤに依存している」と言える。 これだと何が問題になるか Car クラスの動き（特定のメソッド）をテストすることを考える。 HONDAのエンジンとブリヂストンのタイヤを
Angular 2の*シンタックス - Qiita
どうも、らこです。先日主催したイベントで「Angular 2の*記号が何の意味があるのかわからなくて気持ち悪い」という声を聞き、意外に知られてないと思ったので一度きちんと書いておこうと思います。みなさんのAngular 2への理解の手助けになれば幸いです。 なお、本記事はAngular 2 Beta.14時点でのものです。 Angular 2におけるディレクティブ Angular 2は基本的にコンポーネント志向であり、アプリケーションはコンポーネントで組み立てます。ただし、Angular 1と同じようにHTML要素やコンポーネントを修飾するためにディレクティブを使うことができます。 次のmyDirectiveディレクティブは、付与した要素のスタイルを変更し、colorをredにします。 import {Component, Directive, ElementRef, Renderer}
リアクティブプログラミングとRxJavaの概要
この連載では、Javaでリアクティブプログラミングを行うためのライブラリである「RxJava」を使って、リアクティブプログラミングにおけるポイントや、RxJavaが持つ機能について学んでいきます。今回は、RxJavaおよびリアクティブプログラミングの概要について解説します。 対象読者 Java経験者（初心者可） RxJava未経験者 リアクティブプログラミング未経験者 RxJavaとは RxJavaは、Javaでリアクティブプログラミングを行うためのライブラリです。このライブラリは軽量であり、また、他のライブラリに対する依存がないのでRxJavaのjarをパスに通すだけで使えるようになります。対応しているJavaのバージョンは6からで、さらにAndroidもバージョン2.3（Gingerbread）からサポートしています。 そして、RxJavaは厳密には関数型リアクティブプログラミング（F
【中学数学】文字と式-表し方,計算法,代入,1次式の加法,減法,乗法,除法,単項式,多項式,展開
目次(もくじ) 【文字の表し方】（中学１年生） 【代入と式の値】（中学１年生） 【１次式の乗法・除法】（中学１年生） 【１次式の加法･減法】（中学１年生） 【単項式・多項式の計算】（中学２～３年生） 【文字の表し方】（中学１年生） ■文章を式で表す ■積の表し方 文字のまじった乗法では、ふつう、×の記号を用いずに、文字をアルファベットの順にならべて書きます。 a×b = ab x×y×a = axy （注） 数と数の乗法では、×の記号を省略できません。しかし、×の代わりに・を使うことがあります。 2×3 = 2・3 文字と数の積では、ふつう、数字を文字の前に書きます。 a×3 = 3a 負の数と文字との積では、かっこをつけずに書きます。 x×(-2) = (-2)x = -2x かっこでくくられた式は、１つの文字と考えます。 (a+b)×4 = 4(a+b)， 2×(x-y)×a =
必ず覚えておきたい！ Angular2でコンポーネントの子要素を参照する方法
Angular2でアプリケーションを構築する時に、 親コンポーネントから子コンポーネントを操作したいことが多くあります。 例えば、子コンポーネントの値を取得・変更したい時や、DOMを取得したい時などが挙げられます。 Angular2では、ViewChildren、 ContentChildren を使用することで、 親要素から子要素を参照することができます。 今回はViewChildren、ContentChildren を使用した、子要素の参照方法を紹介します。 ViewChildren とは コンポーネントのテンプレートの中に配置された子要素をViewChildren と呼びます。 使い方は、@ViewChildren もしくは @ViewChild デコレータを @angular/core からインポートして使用します。 @ViewChildren は複数個取得でき、@ViewChi
Angular2でdebounceを設定する
Angular2でのdebounce（処理の間引き）は、RxJSの機能を使うと簡単に設定することが出来ます。 今日はdebounceの設定方法を紹介します。 debounceって何？ プログラミングでの「間引き処理」は頻繁に使います。 間引き処理というのは、連続した処理がある場合に、100ミリ秒に一度実行したり、最後の処理の500ミリ秒後に実行するなど、実行回数を間引く（減らす）ことを指します。 今回紹介するdebounce は、「連続処理される、最後の処理の500ミリ秒後に関数を実行する」間引き処理のことを言います。実行は1度きりです。 今回は紹介しませんが、他にも throttle があります。 使い方 今回の例として、検索窓の入力での間引き処理を設定してみましょう。 例えば、検索窓に入力した文字列をサーバに送る場合を想定してみます。 動きはデモを確認してみてください。 キーボードの
TypeScript Coding Guidelines | falsandtru warehouse
TypeScript Guidelines 型と値 プリミティブのオブジェクト化の禁止 Stringなどプリミティブな型および値のオブジェクト版の使用を禁止する。 グローバル変数 ブラウザにおいて実行頻度の高い場所でのグローバル変数の直接使用を禁止する。 グローバル変数は参照が遅いためローカル変数として再定義して使用しなければならない。 void型 void型の関数の戻り値以外への使用およびnull | undefined型としての使用を禁止する。 void型に定義された値を得た場合はその値を使用せず直ちに破棄する。 void型はコールバックを経由して任意の値を割り当て可能であるため実際にはundefinedまたはnull | undefined型として扱うことはできず、未知という点でunknown型、不可触という点でnever型と同じものとして扱わなければならない。 undefined値
TypeScript Tutorial
TypeScript lets you write JavaScript the way you really want to. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript is pure object oriented with classes, interfaces and statically typed like C# or Java. The popular JavaScript framework Angular 2.0 is written in TypeScript. Mastering TypeScript can help programmers to write object-oriented programs and have t
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Angular2 細かい言葉とかの意味を知りたい - スズキ学習ノート
Thunderbird でメール作成時にウィンドウサイズに合わせて文字を折り返す方法