[Angular] 入門 - Qiita
こんにちは。 最近フロント側のフレームワークをAngularに乗り換えたので自分のメモとしてAngular入門をまとめました。 Angularとは？ 「Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop. 」 とのこと
![[Angular] 入門 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/0b5a5201cc6809b51baae146e532f64e5733d2cf/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%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1pbWFnZS1zdG9yZSUyRjAlMkYyNDE5MDklMkY1ZGU1MmRjNTAzODc4N2IzNWZjOTJkODhiNDY4ZmM3YTI2OTM2NjI1JTJGeF9sYXJnZS5wbmclM0YxNjY0NzYzNzQ4P2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZmbT1wbmczMiZzPTgwOTA2N2M4MzdjYWExNWMzYjNiZjlkOGE4ODQzMzIz%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D0a0e803c6b6e4c50d0467dc3582bd023%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCQW5ndWxhciU1RCUyMCVFNSU4NSVBNSVFOSU5NiU4MCZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPTM5MzQ1YTUyZGNlOTU0MDk1ZjJkZTM1OWFmZGMyOGQ4%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBzeWFudGllbiZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPTMxZDY5NThkZmJiYTlkYzBlZGMxNjBjN2I2ZTY5Mzg0%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D5cbc2b1378d66ad67a4f13588489198b)
[Angular] ExpressionChangedAfterItHasBeenCheckedError への2つの対処法 - Qiita
ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'something: null'. Current value: 'something: something'. Componentを入れ子構造にしているとよく見るこのエラー どうも、子供のComponentから親Componentを変更しようとすると発生するようだ。 Angularでは、子供のComponentからの親の変更を基本的に禁止しているので、こういうことが出るらしい。 とりあえずこの2つのどっちかでOK setTimeout による非同期処理化 detectChanged による明示的な変更 今回の例の前提と登場人物 子Componentによ
![[Angular] ExpressionChangedAfterItHasBeenCheckedError への2つの対処法 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/37f31054083789ffd2cc7539962d79b84d8768f1/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCQW5ndWxhciU1RCUyMEV4cHJlc3Npb25DaGFuZ2VkQWZ0ZXJJdEhhc0JlZW5DaGVja2VkRXJyb3IlMjAlRTMlODElQjglRTMlODElQUUyJUUzJTgxJUE0JUUzJTgxJUFFJUU1JUFGJUJFJUU1JTg3JUE2JUU2JUIzJTk1JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz0wOWI4NGViZGU0ZjU5MTdkYmMwNTk2OTAzZjllMDhhYg%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzZXRlZW4mdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTNmN2YxNzYyZmUzZDY4YjE4MGMyYzY0N2FkMDg3YTYz%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5pWZ6IKy57O744Ko44Oz44K444OL44KiIOOChOOBo-OBmeOCk-OBqOOBneOBruWRqOi-ug%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3Da1dfc019bd3c8bb6e378381e6461fcca)
State of SEO for SPA 2019 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? メタ この記事はNode学園2018にて話した内容を記事として編纂 +その後の変化を加筆修正したものです。 スライドはこちら。 https://speakerdeck.com/kazuyaseki/seo-for-spa-cfb3706f-ae1d-4c6f-a83f-96dc2452f32b 追記 2019/5/8 遂に Google bot が扱うレンダリングエンジンが Chrome 最新版(現時点では 74)相当となりました！ https://webmasters.googleblog.com/2019/05/the-new-ev
Angularのngrxを使って状態管理を行う（実装編：エンティティ設定） - Qiita
この記事はAngular+Firebaseでチャットアプリを作るのエントリーです。 前記事：Angularのngrxを使って状態管理を行う（実装編：初期設定～エフェクト設定） 次記事：WEBアプリでFirebaseのデプロイ環境を構築する この記事で行うこと 前回の記事ではngrxの状態管理の実装（初期設定～エフェクト設定）を扱いました。 本記事ではngrxの実装方法（機能ストア～エンティティ設定）について学習します。 機能ストアの設置 Entityを用いたストア設計 View（コンポーネント）にStateを反映 機能ストアとは 公式ドキュメント内で機能ストアはStoreModule.forFeatureとして記載されています。 ルートストア（StoreModule.forRoot）がアプリケーション全体で使用できる一方、機能ストアは機能モジュール単位で利用できるストアになります。 Ang
Angularのngrxを使って状態管理を行う（理論編） - Qiita
この記事はAngular+Firebaseでチャットアプリを作るのエントリーです。 前記事：Angular+Firebase ユーザー設計とデータの保護 次記事：Angularのngrxを使って状態管理を行う（実装編：初期設定～エフェクト設定） この記事で行うこと 前回の記事ではユーザー設計とデータの保護を扱いました。 ここからAngularの@ngrxというライブラリを使って、状態管理の理論、実装を３回にわけて行っていきます。 本記事ではまず、状態管理の理論について学習します。 なぜngrxを使う必要があるのか ngrxの流れを見る Effectで非同期のデータを扱う @ngrxとは @ngrxはReduxというライブラリに影響を受けて作成されたAngularの公式ライブラリです。Actions、Dispatcher、Reducer、State、ViewというReduxのデータフロー構成
AngularのReactiveFormとAngularMaterialを組み合わせる - Qiita
import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators, AbstractControl } from '@angular/forms'; // 性別用型 interface Gender { value: number; display: string; } @Component({ selector: 'app-root', template: ` <form [formGroup]="editForm" (ngSubmit)="onSave()" class="form"> <mat-form-field class="form-field"> <input matInput placeholder="お名前" formControlName="nam
AngularとRXJSで簡単なストアを作ってみる - Qiita
はじめに 注意！！Fluxパターンの記事ではありません！！ Vue人気も一段落ついた感があるので、ここからAngularを盛り上げる（？）ためにも何か投稿せねば！！ ということでAngular+RXJSのBehaiviorSubjectを利用した簡単なストアを作ってみます。 環境 angular-cli 6.2.2 angular ^6.1.0 rxjs ~6.2.0 サービス定義 まずはおもむろにng newするなりして、Angularが書ける環境を用意します。 んでsrc/app内にcoreディレクトリを切ります。 その中でさっそくStoreServiceを書きます。このサービスはUser型をBehaviorSubjectで保持します。BehaviorSubjectのstreamを流すだけで無く、最後に流された値を保持する機能を利用します。 ついでにObservableとして観測できる
超初心者のAngular学習〜３日目コンポーネント〜 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 前回では最初のAngularを立ち上げる部分からやっていきました。三日目はフロントエンド、バックエンド等の開発でよく聞くコンポーネントについて理解を深めるための備忘録です、たぶん間違ってること多め。 コンポーネントとは そもそもコンポーネントって何？って思うと思います。僕のよく使うサイトを引用すると 、 コンポーネント (component) 何かの部品のこと 引用元: 分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典 ふむ、大まかには部品のことらしい（爆）。 もう少しフロントエンドのコンポーネント詳しく探る
Ionic3でアプリを作る際のLazy Loadingへの対応 - Qiita
最近(2018年10月)、Ionic3でAndroidアプリを作って、Play Storeで公開しました。 そこに至るにはいろいろと罠がありましたので、その記録を思い出せるうちに書いて残しておこうと思います。 困ったり解決したりする度にツイートしてたからいけるはず……！！ いくつかの記事にわけて、シリーズとしてまとめておきます。 なお、なんとかリリースできたアプリはこちら。あなたの日本語入力速度を測定します。→フリックとローマジ 〜日本語入力スピード測定〜 シリーズ一覧 小さめの奴をまとめて Ionicアプリにおける、色の指定のしかた アプリのIDを初期値にしたまま端末に複数インストールすると上書きされる iconとsplashの生成 android実機デバッグでエラーメッセージを見る chromeでinspectタブを開いていると、端末ビルド時にno device error play-
[Firestore] Google認証で特定のドメインのユーザーだけアクセスを許可する - Qiita
Firebase AuthenticationでGoogleアカウントによるログインを実装するのは簡単ですが、デフォルトだと全てのGoogleアカウントでログインできるようになっています。 社内向けのアプリケーションなどでは、特定のドメインのユーザーのみアクセスを許可したいケースがあると思いますが、そのようなケースの実装方法が案外出回っていなかったので、まとめておきます。 検証環境 Angular6 @angular/fire: v5.0.2 firebase: v5.4.1 今回はAngularを例にしていますが、他のフレームワークでも大きな違いはないと思います。 AngularFire AngularでFirebaseを使うには、AngularFireという公式のライブラリを使うのが一番早いです。 AngularFireのセットアップとAuthenticationの基本的な実装方法は以
![[Firestore] Google認証で特定のドメインのユーザーだけアクセスを許可する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/fcba83ee7502ec27f58043efbb09d89d667770ed/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%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGNDc0MTQlMkZwcm9maWxlLWltYWdlcyUyRjE1MzcxNzE0MTg_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9ODk5OThlNzFlYmQzNWRjNmJhZDY5YzM1ZTA0N2M2NDc%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D29cdde8116859dadff873833989cc34f%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCRmlyZXN0b3JlJTVEJTIwR29vZ2xlJUU4JUFBJThEJUU4JUE4JUJDJUUzJTgxJUE3JUU3JTg5JUI5JUU1JUFFJTlBJUUzJTgxJUFFJUUzJTgzJTg5JUUzJTgzJUExJUUzJTgyJUE0JUUzJTgzJUIzJUUzJTgxJUFFJUUzJTgzJUE2JUUzJTgzJUJDJUUzJTgyJUI2JUUzJTgzJUJDJUUzJTgxJUEwJUUzJTgxJTkxJUUzJTgyJUEyJUUzJTgyJUFGJUUzJTgyJUJCJUUzJTgyJUI5JUUzJTgyJTkyJUU4JUE4JUIxJUU1JThGJUFGJUUzJTgxJTk5JUUzJTgyJThCJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9YWNjMzIzOTg4NmI1OWJiMzcyNzNlYjZiMmEzMzE2ZDA%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBhdm9zYWxtb24mdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz04OGIxOTA1ZTU0ZjEzODIxNTkwMjAxMDc0YjBmNTgwNg%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D65d0fa9225653a906845c75121b9de67)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Why should learn MongoDB for feature - Qiita
Angular - Qiita
Angularのngrxを使って状態管理を行う（実装編：初期設定～エフェクト設定） - Qiita
Angular7 + AngularMaterial 環境構築 - Qiita
【Angular7】 json を module として扱う - Qiita
Angular js gives developer control - Qiita
angular2-materializeでdatepickerのeventを受け取る - Qiita
Angular使いの NativeScriptハンズオン - Qiita
Angular x Firebase 新規開発ワークフロー - Qiita
Angular 日付のフォーマット - Qiita
