Angular 2 の初期化・Component のコンパイル周りのソースを読んでみる - Qiita
年末のイベントで何度か Angular 2 について紹介させていただいたのですが、自分で話しながらよくわかっていないなと感じることしきり。時間ができたらしっかり理解したい！と思っていました。理解するにはソースを読むしかない！ということで Angular 2 のソースを読んでみます。 使い方については本家ドキュメントを始めいろいろなところに書かれているので、内部構造について調べます。Change Detection, Dependency Injection 周りは @laco0416 さんによってカバーされている/される予定（12/23）なので、初期化・Component のコンパイル周りに挑戦してみたいと思います。 AngularConnect のキーノートでは、Angular 1 ではランタイムで何度も HTML のコンパイルが走っていたが、Angular 2 では初期化時に一度走るだ
Angular 2のルーティングで遅延処理を挟む方法 - Qiita
Angular 2の「ルーティング」。SPA (シングルページアプリケーション)でディープリンクを実装する機能がAngular2にも搭載されてます。 ルーティングでページ遷移時に非同期処理を挟むときの方法をまとめました。 動作デモ 実装ポイント HTMLにルーターの参照を入れる (必須) インターフェースを実装する (たぶん必須) ルーティングの遷移時において、非同期処理を挟みたいクラスに、OnActivateとOnDeactivateインターフェースを指定。すると、routerOnActivate()メソッドとrouterOnDeactivate()メソッドの実装が義務付けられます。これがルーティング時のライフサイクルイベントとなります。 import {OnActivate} from "angular2/router"; import {OnDeactivate} from "ang
Angular2のRouterを触ってみる - Qiita
まずは最小限の例を示しましょう。 beta.0で更新された5 MIN QUICKSTARTを参考にディレクトリ構成は以下のようにしています。 my-app ├ node_modules ├ app │ ├ app.component.ts │ ├ page1.component.ts │ ├ page2.component.ts │ └ boot.ts ├ index.html ├ package.json └ tsconfig.json <html> <head> <title>Angular 2 QuickStart</title> <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> <script src="node_modules/systemjs/dist/system.src.j
Angular2で描画後になにか操作したい場合 - Qiita
import { Component, AfterViewInit, AfterViewChecked } from '@angular/core'; @Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1>` }) export class AppComponent implements AfterViewInit, AfterViewChecked { name = 'Angular'; ngAfterViewInit(){ console.log("init"); } ngAfterViewChecked(){ console.log("checked"); } } 使用上の注意 Expression has changed after it was checked. Previous value: 'An
Angular パフォーマンスアップ最短最速マニュアル - Qiita
動機 Angular(2 or 4)で開発中のプロダクト(SPA)が重い JS の肥大化 起動が遅い パフォーマンスチューンしたい で、みんないろいろ調べると思うけど… AOT コンパイルとか module の最適化とか手段はいろいろあるのはわかった が、ブログエントリを読んで今開発中のプロダクトに自分で解決策を注入するのが大変 サマリ 対工数効果が高い部分に絞ってパフォーマンスチューンできる、「これさえやればOK！」みたいな進研ゼミ的マニュアルを作った(半ば覚え書きだけど) 平均起動時間1は84%減 4000msec超 -> 640ms2 JS ファイルサイズ3は23%減 2770kb -> 2153kb (Parsed Size) 最適化後の Gziped Size は 393.47kb 前提 この記事は、AngularClass/angular-starter を使ったプロダクトで実
[Angular2]複数httpリクエスト - Qiita
Angular1ではPromiseを使っていましたが、 Angular2ではObservableを使用するようになったようです。 忘れそうなのでメモ・・・ 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:/
![[Angular2]複数httpリクエスト - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/72cbc077d5663499164880835549f97716f11ab5/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-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCQW5ndWxhcjIlNUQlRTglQTQlODclRTYlOTUlQjBodHRwJUUzJTgzJUFBJUUzJTgyJUFGJUUzJTgyJUE4JUUzJTgyJUI5JUUzJTgzJTg4JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz05MWFkOTJjYWI1NGFmNjhjMzM0MjZlMTk5YWEwYmJiZQ%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwYW8yLXkmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWRiOTBlMjg5NWI2YTQ4OTZmYmEzMzMyYjY5YzU2YjM5%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D1a61b8047e6096ad557ce1bb729d8298)
今流行りの「MEANスタック」についてまとめてみる(Mongo, Express, Angular, Nodeで作るWEBアプリケーション) - Qiita
今はやりのMEANスタックについてまとめてみる(Mongo, Express, Angular, Nodeで作るWEBアプリケーション) 海外でじわじわ人気を獲得し始めている うわさの「MEANスタック」とはなにか？ まとめてみました。 MEANとは 合わせて読みたい M = MongoDB 従来のRDBMSとは異なる、NoSQLというデータベースシステムによる ドキュメント指向型データベース。 MongoDBについてまとめてみた E = Express Node.jsの軽量Webアプリケーションフレームワーク Expressについてまとめてみた Expressを学ぶチュートリアル形式の記事・コンテンツまとめ A = Angular オープンソース(MITライセンス)のJavaScript用 MVCフレームワーク。 Angularについてまとめてみた Angular JSの良質チュートリア
Angular2のUIライブラリまとめ - Qiita
2017年1月21日時点で使用可能なAngular2のUIライブラリをまとめました。バージョンや使い心地などは追って更新する予定です。 Angular-Material2 ng2-bootstrap ng-lightning PrimeNG SemanticUI Angular2-polymer https://vaadin.com/vaadin-documentation-portlet/charts/webcomponents-api/charts-angular2.html https://github.com/vaadin/angular2-polymer OnsenUI Ionic 2 Fuel-UI Kendo UI for Angular 2 Register as a new user and use Qiita more conveniently You get arti
Angular2でModal作る - Qiita
Angular2でモーダルを自作したメモ。 要件: Angular以外のライブラリには頼らない モーダルを開く時はServiceとして扱いたい モーダルの内側はComponentとして開発したい モーダルを閉じた場合、Promise(or Observable)をresolveしたい。 要するに、下記のようなコードを書きたいのだ。 import { Component , Input } from "@angular/core"; import { ModalContext } from "./modal"; @Component({ selector: "greeting", template: ` <div> <section> <input [(ngModel)]="message" placeholder="Message"> </section> <footer> <button
Angular4(Angular2~)のユニットテスト【Angularのユニットテストの基本とComponentの簡単なテスト編】 - Qiita
import {ComponentFixture, TestBed, async, ComponentFixtureAutoDetect,} from '@angular/core/testing'; import {By} from '@angular/platform-browser'; import {DebugElement} from '@angular/core'; import {AppComponent} from './app.component'; // describeでテストSuiteを作成 describe('AppComponentのテスト', () => { // テストの中のAppComponent let comp: AppComponent; // ComponentFixtureは、 componentのインスタンスそのものとcomponentのDOM
WebStromとAngular CLIでAngular2アプリケーションを作ってみよう - Qiita
こんにちわ、メトロノームかわかみ（@saruyama_monki）です。 Angularアドベントカレンダーの７日目は、WebStromとAngular CLIを使ってAngular2アプリケーション作ることを解説します。 WebStrom 2016.3について WebStormについての紹介は割愛させて頂きますが有料のIDEになります。 11月14日にバージョン2016.3のアップデードが入りまして、Angular CLIが使えるようになりました。 WebStormは、他の製品（PhpStorm、RubyMineなど）にも梱包されておりますので同じように使えます。 有料は。。。と思われる方は、まずは30日のFree Trial版を使ってみて下さい。プログラミングがもっともっと好きになると思います。 Angular2プロジェクトの作成 WebStromを立ち上げますと、プロジェクトの作成画
Angular をやるのに欠かせない VSCode Extension - Qiita
2017/07/11(Tue) 時点の情報に基づいています Angular をやるのに Visual Studio Code (以降 VSCode) は相性ばっちりで、デフォルト設定でもほぼストレスなくプログラミングできるのが素晴らしいですが、以下の VSCode Extension をインストールすれば、さらに効率アップが図れます。 Angular Language Service Angular 本家が開発している Extension で template に対してプロパティ補完をしてくれる強力な Extension です。存在しないプロパティを指定すればエラーチェックがかかって教えてくれます。 Path Intellisense ファイルパスを補完してくれる Extension です。例えば Component の templateUrl や styleUrls に外部の HTML
Angular+Firebaseでチャットアプリを作る - Qiita
はじめに 今、最も注目されているJavaScriptフレームワークの１つであるAngular(9.xx)と、同様に注目度の高いBaaS（Backend as a service）であるFirebaseを使って、チャット用WEBアプリをハンズオン形式で書いていきます。 「Angular+Firebase」のリアルタイム更新に興味がある方はご一読ください。 （追記：2017/6）本記事は元々「Angular2+Rails5でチャットアプリを作る」と題していましたが、ここ半年ほどひたすら「Angular+Firebase」を触ってきたので、「Angular+Firebaseでチャットアプリを作る」として、現時点（2017年6月）での最新の内容に書き換えています。 （追記：2018/1）現時点（2018年1月）での最新の内容に書き換えています。 （追記：2018/9）現時点（2018年9月）での最
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の開発環境、俺ならこうやる 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インス
Angular2 Dart版のForkとその後の開発の動向 - Qiita
７月下旬に、Angular2 Dart版が従来のTypeScript版からコンパイルされたコードベースから独自リポジトリに移行し、専業チームの手でDartに最適化されたものに進化させていくことが発表された。あれから二週間ほど経過し、リポジトリにChangelogやCI等が整備されCommitが増えてきたので、このタイミングでDart Newsの抄訳をし、リポジトリ上の活動から見えるAngular2Dartの開発の動向をまとめてみる。 追記 AngularDartのハイレベルロードマップの草稿が発表されたので抄訳してみた。 http://qiita.com/ntaoo/items/347f9a2cb6b71f7e4bf0 AngularDart is going all Dart (抄訳) Angular2のコードベースをTypeSript/JavaScript版とDart版に分離し、Ang
Angular Dartのハイレベルロードマップ - Qiita
これは開発計画の草稿だ。Angular Dartは現在、多くの大規模なGoogleプロジェクトで使用されている。そして何よりも、私たちは特に、安定性、性能、そして生産性に関して深く検討する。 Angular 2 JS/TS プロジェクトとの関係についてのメモ。私たちはTS版チームと設計と性能の記録を共有し２つのバージョンを出来るだけ近いものに維持するが、私たちは時折、Dartコミュニティーのためにより良いものになるように、同一の機能とAPIを持つよりも分化させることを選択する。現時点では、私たちはDagger2を基礎にした新しいDIとComponent APIを開発中であり、それはDartの強力な静的型解析とレキシカルスコープを活かしたものになる。 性能 Angular Dartのコンパイラを、（できる限り）イディオマティックなDartコードを出力するように最適化する。 Change De
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
angular-cli + UIフレームワーク Angular2-Material で Angular2 アプリを構築するチュートリアル - Qiita
はじめに 本稿では Angular2-Material というUIフレームワークを導入し、Angular2 のアプリの枠組みを作るまでの手順を説明しています。 前提としてこの手順を進める前に node.js と angular-cli を入れておく必要があります。 node.js、angular-cli を導入するまでの手順は僕が先日書いた以下の記事 http://qiita.com/kent_ocean/items/f1a1d21fd9997cc5d6f8 をご参照ください。 Angular2-Material とは https://material.angular.io/ https://github.com/angular/material2 Angular2-Material で具体的にどのような UI が作れるのかは、下記ページの各リンクに図入りの解説が掲載されているので読んでみ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Angular2でi18n対応してみる - Qiita