この本ではAngularのチュートリアルを終えた人に向けて、コンポーネントやサービス、アプリケーション全体の設計を改善していく道筋を示します。この本はベストプラクティスの変化に合わせ、不定期にコンテンツをアップデートしていきます。
![Angular After Tutorial - Angular After Tutorial](https://cdn-ak-scissors.b.st-hatena.com/image/square/c50a2b6730bd6b92da97edd4e1120efb7c4c6f2f/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--lNHn6o1f--%2Fg_center%252Ch_280%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYm9va19jb3Zlci9lODJmNjkwMWZlLmpwZw%3D%3D%252Cw_200%2Fv1627283836%2Fdefault%2Fog-base-book_yz4z02.jpg)
はじめに 個人的なお話ですが、AngularJS から Angular に移行して約半年が経過しました。 ngrxは移行当初から導入しており、いくつかハマったポイントがあります。 この記事ではngrxで私が「最初からやっとけば良かった...」と思ったことについて書いていきます。 Do: するべきこと ngrx-store-freeze を使う https://github.com/brandonroberts/ngrx-store-freeze Redux では状態オブジェクトを直接変更してはいけません。 ngrx-store-freeze を使うと state と payload を直接変更した際に例外が発生します。 再帰的に Object.freeze() してくれるので状態オブジェクトがネストしてても大丈夫です。 有効にする場合は、MetaReducer として登録します。
Editor SetupNx Console editor extensions make your developer experience richer. The extensions show inferred tasks and help you invoke themshow what is cached and how the cache is configuredprovide a visual UI for invoking generatorsshow dependencies between projects and tasksDownloadOfficial IntegrationsIf you are using VSCode or a JetBrains IDE you can install Nx Console from their respective ma
この記事は Angular Advent Calendar 2018 の 18日目の記事です。 今回は最近NgRxの新機能として追加されたMockStoreについて書きたいと思います。 NgRxの基本的な使い方については14日目でkiita312さんが書かれていますので、ぜひそちらをご参考ください。 Ngrxをこれから始める人への入門ガイド MockStoreとは MockStoreとは、Storeを使ったComponentでのテストを簡単に行えるようにする為のモジュールです。 10月末にmasterにマージされ、v7.0.0でリリース予定となりました。 まだドキュメントが作成されておらずngrx.ioにも記載がないのですが、機能自体はstableとなっています。 非常に便利なので、v7(beta)を使用している方はこの記事を参考にぜひ使い始めてみてください。 残念ながらv7は現在(201
Overviewapp-shellapplicationclasscomponentconfigdirectiveenumenvironmentsguardinterceptorinterfacelibrarymodulepiperesolverservice-workerserviceweb-workerng lintng newng runng serveng testng updateng versionError EncyclopediaOverviewNG0100: Expression Changed After CheckedNG01101: Wrong Async Validator Return TypeNG01203: Missing value accessorNG0200: Circular Dependency in DING0201: No Provider F
Clear examples, explanations, and resources for RxJS. RxJS is one of the hottest libraries in web development today. Offering a powerful, functional approach for dealing with events and with integration points into a growing number of frameworks, libraries, and utilities, the case for learning Rx has never been more appealing. Couple this with the ability to utilize your knowledge across nearly a
2017年9月からGoogleのプレミアムパートナーでもある株式会社ゴーガでエンジニアをしており、Google Maps APIとAngularを使って地図関連のWebサービスを開発しています。 特にテーマが思いつかないので、直近でハマったことについて書きます。Google Mapのようなサードパーティーのライブラリを使用した際に注意しておきたいことです。 はじめに Google Mapのマーカー(地図に表示される指標)をクリックした時に、マーカーの情報を元にAngularのコンポーネントを更新する処理を書いていたところ、Angular Materialのダイアログがうまく開かないという問題が発生しました。なぜだろうと思っていろいろ調べていたら、マーカーをクリックした時にコンポーネントのngAfterViewCheckedが全く反応していない(ビューが更新されていない)ことに気付きました。
Welcome to Storybook's documentation ✦ Learn how to get started with Storybook in your project. Then, explore Storybook's main concepts and discover additional resources to help you grow and maintain your Storybook. What is Storybook?Storybook is a frontend workshop for building UI components and pages in isolation. It helps you develop and share hard-to-reach states and edge cases without needing
AngularにWebComponentsがやって来るヤァ!ヤァ!ヤァ!〜@angular/elementsのファーストインプレッション〜JavaScriptAngularWebComponents タイトルは「ビートルズがやって来るヤァ!ヤァ!ヤァ!」のパロディです。 @angular/elementsとは何か? @angular/elementsは、AngularコンポーネントをWeb Componentsにするためのパッケージです。9/29にPullRequestが起こされ10/28にLGTMが出てlabsブランチに移されました。まだexperimental=実験ステータスのできたてほやほや新機能です。 これは言い訳なんですが、@angular/elementsの方向性もまだ流動的ですし、筆者もまだ全然知識が追いついてません。現状わかる範囲でまとめましたが、ツッコミや訂正ありましたら
概要 Angularの文脈でアプリを高速化するとは、ほぼChange Detectionまわりの最適化を行うことだと思われます。適切にChangeDetectionStrategy.OnPushを設定するのは当たり前ですね。他に、個人的にやってみて特に体感的に速くなったなーってのが、イベントなどから無駄なChange Detectionを走らせないようにすることです。 Change Detectionが走っているかどうかはNgZone#onMicrotaskEmptyから確認できます。 export class App { constructor(zone: NgZone) { zone.onMicrotaskEmpty.subscribe(() => { console.log('detect change'); }); } } 明らかにおかしな回数呼ばれている場合は、どこかで無駄打ちし
This page will walk through Angular Renderer2 example. The Renderer2 is used for UI rendering manipulation. Using Renderer2, 1. We can create element, provide a text and then it can be appended with any existing element at run time on any event of an element. 2. We can add and remove CSS classes, styles, HTML attributes to change the UI. 3. We can set DOM property with a value at run time. 4. We c
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く