You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
(訳注：2017/02/16、画像、元記事がリンク切れしていたため修正いたしました。) 状態遷移の管理はアプリケーション構築の上でもっとも難しいとされる部分の1つです。URLに状態が確実に反映されなければならないという意味ではWeb上では特に難しいと言えます。さらに、アプリケーションを複数のバンドルに分けて要求に応じてロードする処理をする場合がよくありますが、これを透過的に実行するのは大変です。 Angular Routerはこのような問題を解消してくれます。Routerを使えば、アプリケーションの状態を宣言的に特定でき、URLに気を付けながら状態遷移を管理することができ、必要に応じてにコンポーネントをロードできます。この記事では、RouterのAPIについてだけでなく、背後にあるメンタルモデルと設計理念についても考察したいと思います。 では、始めましょう。 概略 Routerは何をするの
FirebaseとAngular2を使ってリアルタイムでデータのやり取り【導入編】 林 優一 Firebaseはリアルタイム同期なデータベースを中心に、Auth認証やPushNotificationやユーザーの行動分析といったアプリケーションに最適な機能を提供するBasSです。先月行われたGoogle IOにて、PushNotificationや行動分析機能が追加されるなど話題となりました。 今回はFirebaseのリアルタイムベースとAngular2を用いて、リアルタイムにデータをやり取りする方法について解説します。 Firebaseのリアルタイムデータベース Firebaseのリアルタイムデータベースはクラウドホスト型のNoSQLデータベースです。JSONの形式でデータは保存されます。 APIはもちろん、iOS/Android/Web用のSDKが提供されているので、非常に簡単に導入する
前回のエントリで、TechFeedをProgressive Web Apps化した件について書きました。今回（2016/11/8）のバージョンアップでは、もう一つ大きなトピックがあります。それはAngular2のAoTビルドに対応したことでTechFeedの起動時間を大幅に削減したことです。 Angular2のAoT（Ahead of Time）ビルドについては、ググってみても意外と日本語のいい記事がないので、ちょっとだけ解説します。 AoT概要Angular2アプリは、コンポーネントのツリーによって構成されます。コンポーネントは初期化される時に依存しているオブジェクトを注入（Dependency Injection）されたり、コンポーネントの状態を検知してUIを書き換えたりと言った様々な処理が必要です。Angular2は、ランタイム本体がそれらを動的に行うのではなく、そうした処理をハード
#概要 Angular2とionic2でformを使った際に，バリデーションが少し面倒だったので，Angular2のformについて調べてみました．この記事は The Ultimate Guide to Forms in Angular2 を元にしています．元の記事は少々長いため，以下のように二部に分けて記事にします．うまく訳せていないところもあるので，元の記事はご自身で確認いただければと思います． なおionic2に関しては第２部の最後に，フォームのサンプルを書いてみたいと思います． 第１部 FormControl FormGroup FormBuilder バリデーション 第２部 カスタムバリデーション 変更をWatchする ngModelによる双方向データバインディング ionic2に組み込んでみる 第１部ではAngular2が用意するツールを用いてバリデーションを実装するまでを見て
ついにリリースされましたね、Angular2! Angular2にはCLI(command line interface)の開発環境が整えられており、雛形の自動生成、更新ファイルを自動ロードするなど、爆速な開発が可能になっていることをご存知でしょうか。 このAngular CLIを導入するだけで、様々な開発環境が一気に整います。そのため、gulpだgruntだ、TypeScriptだと様々な環境を整える必要があった今までの開発スタイルが一気に変わる可能性があります。 以下では、Angular CLIを使って共通ロジック[MessageService]からテキストを取得して、そのテキスト表示する画面部品、[HelloComponent]を持ったアプリを作りたいと思います。サービスやコンポーネントを使うのでAngularでの開発のおよその骨格を感じ取っていただけると思います。 では、Angul
こんにちは、平奥です！ これは、 TECHSCORE Advent Calendar 2016 TECHSCORE BLOG の22日目の記事です。 弊社サービス Synergy! は、 AngularJS で実装されています。 AngularJS はご存知の方も多いとは思いますが、後継バージョンの Angular2 が登場しました。 Angular2 は AngularJS の問題点が整理されました。その結果、使いやすく、そしてパフォーマンスもものすごく改善されています。 しかし問題点もあります。 AngularJS との互換性がありません。 そのため Angular2 を動作させるには今まで使用していた AngularJS の環境を使うことはできず、新たに動作させる環境を用意しないといけません。 Plnkr などを使えば簡単に Angular2 の検証はできるのですが、せっかくなら A
すべて 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
Edit · Jun 26, 2016 · 15 minutes read · Follow @mgechev rollup tree-shaking commonjs Progressive Web Applications help us build native-like web apps, thanks to amazing tools such as Service Workers, IndexDB, App Shell etc. Once the browser downloads all the static assets required by our app, the active Service Worker can cache them locally. This way the user may experience slowdown during the init
Angular2でフォームのバリデーションチェック、動的にCSSの追加を行い、エラー時に色を変えたり、メッセージを表示する方法をまとめました。 ※Angular2の2.0.0版、TypeScriptを使って確認したものです。（デモはv4.4.3、v2.0.0で動作確認） ※目次をクリックすると目次の下部にコンテンツが表示されます。 １．FormsModuleのインポート ２．NgModelディレクティブを使ったシンプルなフォーム作成例（バリデーションチェックなし） ３．バリデーションチェック、動的にCSS追加 ４．フォームの作成方法 ５．デモ Angular2のフォームの機能を使用する場合、別途フォームのモジュールをインポートする必要があります。 一般的なAngular2のフォーム機能を使用する場合、FormsModuleをインポートします。 ※ダイナミックフォームを使用する場合は、Rea
anguler2のチュートリアルを改造していて、 serviceで実行したHTTP POST通信の処理結果によって、 呼び出し元componentの画面を変更したくなった。 angular2 - Global Events in Angular 2 - Stack Overflow Service Events というものがあるらしい。 my app @Output() loginError = new EventEmitter(); を足して、 イベントを発生させたい（呼び出し元componentの関数を実行したい）タイミングで、 this.loginError.emit("Error:server returns false"); のようにevent emit service.ts import {Injectable} from 'angular2/core'; import {Ou
Observableを使ってhttpリクエストを複数実行する方法を確認しました。 ※Angular2の2.0.0版、TypeScriptを使って確認したものです。（デモはv4.4.3、v2.0.0で動作確認） ※目次をクリックすると目次の下部にコンテンツが表示されます。 １．3つのhttpリクエストをチェインして実行 ２．3つのhttpリクエストをパラレルに実行 ３．デモ １）ライブラリ、サービス、依存性の指定 こちらの記事参照 Angular2でHTTPでサーバーからJSONデータ取得 Angular2のHTTPクライアントはObservableをリターンします。ObservableのflatMapメソッドを使ってHTTPクライアントをチェーンして実行しています。 ※ObservableのflatMapメソッド 例）３つのhttpリクエストを順番に実行 chain() { this._h
すべて Tech Idea Diary 2024-07-03 読んだ本 2024-Q2 Diary読書 2024-07-03 Angular: v18.1で @let 構文が追加される TechAngularTypeScript 2024-06-26 WebブラウザにおけるOpenTelemetryの自動計装PoC: Trace via Service Worker TechWebOpenTelemetryService Worker 2024-06-23 Cloudflare Image Transformationで画像最適化した TechCloudflareBlog DevAstro 2024-06-20 Angular: Rendering EffectsとBusiness Effects TechAngularSignals 2024-06-14 計画の優先順位ではなく目標の優先
前回の記事で、Angular2のPipeを紹介しましたが、 すでにはじめから用意されているPipeをいくつか紹介しました。 しかし、Angular2では自分でPipeを定義できるんです。 煩雑になりがちな繰り返し処理をすっきりまとめることができるので、地味に重宝してます。 そこで、今回はカスタムパイプの作成方法を紹介します。 カスタムパイプを定義する 数字を入力すると、それに紐付いた文字列を出力するPipeを定義してみましょう。 「サーバーのAPIから取得する値は数字だけど、ブラウザでの表示は文字列」といったよくある場面を想定します。 今回は1〜9までの数字から、家族の続柄の文字列を出力してみましょう。 family-type.pipe.ts import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'family
[aside type=”boader”] この記事は内容が古くなっています。 2018/01/16現在（v5時点）のAngular入門の最適な方法は、ぼくが熟考を重ねて作成したはじめてのAngular入門コースを受講することです。 このページ以上に効率的に入門できるので、ぜひ受講を検討してみてください！ そして朗報です！ 数量限定のスペシャルクーポンを用意しました。 動画コンテンツで効率的に学習してみてはいかがでしょうか。 次のリンクからのみ有効ですので、お早めにどうぞ。 【クーポン適用】【最新v5対応】はじめてのAngular入門 実践シングルページアプリケーション（SPA）構築 [/aside] ぼくは今までAngularJSを使ったことがなかったんです。 でも最近Angular2を使い始めて、なんとなく理解できるようになってきました。 巷では、Angular2が採用している技術は、
Angular2実践入門〜ng-japan 2016 セッションレポート〜 仲 裕介（HTML5 Experts.jp副編集長） この記事は、「ng-japan 2016」のセッションレポート（速報）です。講演内容を忠実に再現していますが、ニュアンス等伝えきれない場合があるので、気になるところは、記事末尾に掲載の講演資料やYoutube動画でご確認ください。 Angular2実践入門 / 白石俊平氏 当メディアの編集長であり、TechFeedの開発者でもある白石俊平氏によるセッション。スライド40枚以上の大作でライブコーディングもあります。 ライブコーディングで学ぶAngular2 今日のライブコーディングを追体験できるスターターキットを作った。是非活用してほしい。 https://github.com/shumpei/angular2-webpack-starter-minimum –
PrimeNG 10 Begins PrimeTek is thrilled to announce PrimeNG X (v10) that utilizes the brand new PrimeOne Design Architecture, new free Boostrap, Material and PrimeOne Themes with Dark mode alternatives, modern icons via PrimeIcons 4.0, PrimeFlex CSS utilities, significantly improved performance thanks to migration to the OnPush ChangeDetectionStrategy, lighter CSS by using the Angular style apis an
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く