日本語訳：Angular 2 Change Detection Explained - Qiita
こんにちは、らこです。 この記事はPascal Precht氏によるAngular 2 Change Detection Explainedを日本語訳したものです。 Angular 2を使う上で必修ともいうべき Change Detection に関する貴重な資料なので、許可をもらって日本語に訳しました。Thank you, Pascal! けっこう長いので、先に要点だけ書いておきます。できれば全部読んで、原文も読んで、スライドも見てください。 レンダリングとはモデルをDOMに可視化することである Change Detectionとはモデルの変更を検知し、UIに反映することである モデルの変更を引き起こすのは常に非同期的な処理の結果である Angularはあらゆる非同期処理の後にChange Detectionを行う(Zoneを使って) 変更を検知する際にはオブジェクトの参照が変わったかど
[Angular2]複数httpリクエスト - Qiita
import { Injectable } from '@angular/core'; import { Http } from '@angular/http' import { Observable } from 'rxjs' @Injectable() export class HogeService { constructor(private http: Http) { } // 並列に実行してすべて完了したら結果をlogを出力するサンプル sample1() { let urls = [ "http://itunes.apple.com/jp/rss/newapplications/limit=10/json", "http://itunes.apple.com/jp/rss/newfreeapplications/limit=10/json", "http://itunes.ap
![[Angular2]複数httpリクエスト - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/9bdb12d90b23439b56f3b7e271725160745acbd7/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMTIyMDA4JTJGcHJvZmlsZS1pbWFnZXMlMkYxNDczNzE1MDk1P2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZmbT1wbmczMiZzPTg0NzIzOTc1NDJkZDg5YWVkYWZhOTJlYTBjNTIzNDI4%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D77065795a7ab2e1710603b9ff571a082%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCQW5ndWxhcjIlNUQlRTglQTQlODclRTYlOTUlQjBodHRwJUUzJTgzJUFBJUUzJTgyJUFGJUUzJTgyJUE4JUUzJTgyJUI5JUUzJTgzJTg4JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9NGI1NTQxMzFhZTFhMTA3NWJiNDZhYjE4MGY4MmFmMzA%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBhbzIteSZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPWI0MWYyODU4ZTYwOGIwNDJjN2JkMGRjNjBjZTg4YjU1%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3De1f523930f35bcaff9f6589fa3acc949)
npm i angular2してHello World!するところまで - Qiita
【160325追記】この記事はAngular 2 alpha時代に初稿を仕上げ、それ以降は変更にあわせて保守を続けていましたが、そろそろ差が大きくなってきたため改稿版として別の記事を用意しました。今後はそちらをご覧ください。 @armorik83です。初日である昨日は、このアドベントカレンダー最大のサプライズとして@btford氏に寄稿していただきました。アドベントカレンダーの立ち上げ直後からオファーし、日本の「アドベントカレンダー」という特殊なTech系の事情を説明し、Angular 2のカレンダーをぜひ飾ってほしいという旨で依頼したことを覚えています。直前になって、時差で向こうはまだ11月なため日本のカレンダー開始に気付いていなかった、という笑い話も乗り越え、公開にこぎ着けたことを喜ばしく思います。 Thank you so much for contributing! Angular
コンポーネント間のデータ授受メモ - Qiita
参考元: COMPONENT INTERACTION 親から子に情報を与える場合 親の変化を子で何かするときに使用します。 Inputを使用する 公式 子コンポーネントでは親から取得したデータを格納するプロパティに@Input()デコレーションを定義します。親のテンプレートの[]で指定した値をそのまま使用する場合は、引数なしの@Input() プロパティ名 :型で良いですが、変える場合は@Input('ほにゃらら') プロパティ名 :型にします。 (今回の場合親のテンプレートでは[master]と定義していますが、子ではmasterNameとして使用します。) import { Component, Input } from '@angular/core'; import { Hero } from './hero'; @Component({ selector: 'hero-child'
TypeScriptでtsdからtypingsへ移行した後のtsconfig.json - Qiita
tsdが非推奨になったので代わりに推奨されているtypingsに移行した。typingsについてはすでに詳細な記事がQiitaでも書かれているのでこちらを見ると良い。 TypeScriptのtsdが非推奨になったので、typingsへ移行 TypeScriptの型定義管理ツールTypingsについて 本記事ではtsconfig.jsonの注意点についてだけ補足として書いておく。 tsconfig.jsonの注意点 tsconfig.jsonでexcludeを使ってビルドしている場合は、適切に設定しないとerror TS2300: Duplicate identifierが大量に発生してしまうので注意。原因は、typingsで型定義をインストールすると、typings/browser/...とtypings/main/...にそれぞれ型定義がインストールされるため、二重に自動的に読み込まれて
AngularJSとTypescriptとES6で倒したエラー集まとめ(2015/10/10更新 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? AngularJSとTypescriptとES6倒したエラー集まとめ（Error出たら更新します）(2015/10/10更新) AngularJSをTypescirptとES6で記述しているとよく怒られます。 わたしは怒られてもへこたれないのでたまに同じことを怒られます。 なので怒られたらメモろうと思って記述しました。 AngularJSとTypescirptとES6のそれが書いてあります。 誰かの助けになれば幸いです。 ※自分のエラー解決方法が間違っていたりずれていたらおせーてね 使い方 最初にエラーのインデックスとしてそれらを列挙し
Angular2でバリデーションメッセージを内包したカスタムコントロールコンポーネントを作成する - Qiita
やりたいこと カスタムコントロールをコンポーネント化したい コンポーネントに対して model-based form を使いたい バリデーション後のエラーメッセージ等をコンポーネント内に内包したい カスタムコントロールを作るには NgModelやFormControlNameに対応するにはControlValueAccessorを実装すればいいっぽい。 以下の記事を参照した。 Custom Form Controls in Angular 2 by thoughtram コンポーネント内からバリデーションエラーを検知する 普通に作ろうとすると、内部からFormControlのerrorsオブジェクトにアクセスできず、何がバリデーションエラーになっているのかわからないため、メッセージの出しようがない。 結論としては、InjectorからNgControlを取り出せば可能のようだ。 最終的なコ
Angular2の開発環境、俺ならこうやる 2016年7月25日版(2.0) - Qiita
(追記)2.0に対応しました。(2016/09/15) ここに書いていることは全て自己流のオレオレ環境なのであまり鵜呑みにしないでください。 今回のGitHubリポジトリ→ovrmrw/ovrmrw-ng2-env-20160725 まずは僕のマシン環境から。 Windows 10 64bit or 7 32bit Visual Studio Code (stable) 1.3.1 Node.js 6.3.1 Git 2.8.1 GitHub Desktop (Node.jsはnvm-windowsでインストールしています) Angular2やるならこれぐらいは最低限インストールしておく必要があります。 WindowsにおけるNode.jsの環境構築はWindowsでnpm installの赤いエラーに悩まされているアナタへも合わせてどうぞ。 Node.jsの6系はnode-sassインス
Angular + Typescriptをブラウザでデバッグしたい - Qiita
はじめに Angularプロジェクトをブラウザでデバッグする際に、**TypescriptファイルにBreakPointを設定する方法**がわからなかったので調べた。 環境 Angular: 2.4.7 angular-cli: 1.0.0-beta.28.3 webpack: 2.2.0 Google Chrome: 53.0.2785.116 各種設定ファイルは、Angular CLIでプロジェクト作成後、デフォルト設定のまま エディタはVisual Studio Code(1.7.2)を使用 デバッグ方法 Angular CLIで雛形プロジェクトを作成した後、ng serveコマンドで開発ビルド&実行する Chromeのdeveloper toolsを起動する Sourcesタブを選択 webpack://**配下にTypescriptファイルが配置されている**のでBreakPoi
Angular入門: Component/ServiceをTestまで含めて試す - Qiita
import { Component } from '@angular/core'; import {CounterService} from './services/counter.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { point: number; constructor(private counterService: CounterService) { this.point = counterService.point.getValue(); counterService.point.subscribe((v) => this.p
Angular CLIによるAngular2入門 / Angular2アプリを爆速開発 - Qiita
ついにリリースされましたね、Angular2! Angular2にはCLI(command line interface)の開発環境が整えられており、雛形の自動生成、更新ファイルを自動ロードするなど、爆速な開発が可能になっていることをご存知でしょうか。 このAngular CLIを導入するだけで、様々な開発環境が一気に整います。そのため、gulpだgruntだ、TypeScriptだと様々な環境を整える必要があった今までの開発スタイルが一気に変わる可能性があります。 以下では、Angular CLIを使って共通ロジック[MessageService]からテキストを取得して、そのテキスト表示する画面部品、[HelloComponent]を持ったアプリを作りたいと思います。サービスやコンポーネントを使うのでAngularでの開発のおよその骨格を感じ取っていただけると思います。 では、Angul
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}
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を使ったりなどで
Angular2のFormについて（その１） - Qiita
概要 Angular2とionic2でformを使った際に，バリデーションが少し面倒だったので，Angular2のformについて調べてみました．この記事は The Ultimate Guide to Forms in Angular2 を元にしています．元の記事は少々長いため，以下のように二部に分けて記事にします．うまく訳せていないところもあるので，元の記事はご自身で確認いただければと思います． なおionic2に関しては第２部の最後に，フォームのサンプルを書いてみたいと思います． 第１部 FormControl FormGroup FormBuilder バリデーション 第２部 カスタムバリデーション 変更をWatchする ngModelによる双方向データバインディング ionic2に組み込んでみる 第１部ではAngular2が用意するツールを用いてバリデーションを実装するまでを見てい
Angularチュートリアル + Spring Bootやってみた - Qiita
package com.example.controller; import com.example.model.Hero; import org.springframework.http.MediaType; import org.springframework.web.bind.annotation.*; import java.util.*; import java.util.function.Function; import java.util.stream.Collectors; @RestController public class HeroController { /** * hero list */ private List<Hero> heroes; /** * angular tutorial * reference app/in-memory-data.servic
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Angular2のFormからtemplate syntaxを探る - Qiita
ReactユーザーのためのAngular2ファーストステップ - Qiita
https://qiita.com/taito0625/items/313cfe8f3553e9a044e9
angular2のtemplate tagも使ってあげてほしいなーという話 - Qiita
Angular2の使い方 - Qiita
