Angular + Firebaseで作ったWEBサービスをリリースしたので、たまった知見を書き出してみる - Qiita
Angular + Firebaseで作ったWEBサービスをリリースしたので、たまった知見を書き出してみるJavaScriptAngularSEOSPAFirebase はじめに 以前からちょこちょこ新しいWEBサービスを作っているということをQiitaの記事に掲載していましたが、このたび[SCORERA（verβ）」を正式にリリースしました。（2019年3月にサービス終了） サービス構築、リリースにあたって色々と知見がたまったので、作成過程で詰まったことや、リリースにかかる作業のうち技術的な側面のものを中心に公開しておこうと思います。 目次 前提 どんなサービス？ 使用している技術 トピック SCORERAのディレクトリとモジュール構成 RxJSの状態管理 外部ライブラリの選定 FirebaseのRealtime DatabaseとFirestore クライアントサイドのエラー取得 An
Angularでイベントから無駄にChange Detectionを走らせないためにすべきこと - Qiita
概要 Angularの文脈でアプリを高速化するとは、ほぼChange Detectionまわりの最適化を行うことだと思われます。適切にChangeDetectionStrategy.OnPushを設定するのは当たり前ですね。他に、個人的にやってみて特に体感的に速くなったなーってのが、イベントなどから無駄なChange Detectionを走らせないようにすることです。 Change Detectionが走っているかどうかはNgZone#onMicrotaskEmptyから確認できます。 export class App { constructor(zone: NgZone) { zone.onMicrotaskEmpty.subscribe(() => { console.log('detect change'); }); } } 明らかにおかしな回数呼ばれている場合は、どこかで無駄打ちし
GitHub - angular/angularfire: Angular + Firebase = ❤️
AngularFire smooths over the rough edges an Angular developer might encounter when implementing the framework-agnostic Firebase JS SDK & aims to provide a more natural developer experience by conforming to Angular conventions. ng add @angular/fire Dependency injection - Provide and Inject Firebase services in your components. Zone.js wrappers - Stable zones allow proper functionality of service wo
Angular 5.0.0がリリースされました
この記事はAngular公式ブログ Version 5.0.0 of Angular Now Availableを元に翻訳、加筆したものです。 Angularのバージョン5.0.0、pentagonal-donutをリリースしました。このリリースは新機能とバグ修正を含むメジャーリリースです。Angularの軽量化と高速化、そして使いやすさにフォーカスしつづけています。 ここではv5における大きな変更について取りあげます。すべてを知りたい方はチェンジログを参照してください。 Build Optimizer5.0.0以降、CLIで作成されたプロダクションビルドではデフォルトでビルドオプティマイザが適用されるようになりました。 ビルドオプティマイザは、Angularアプリケーションのセマンティックな理解をもとにバンドルサイズを小さくするためのCLI同梱のツールです。 ビルドオプティマイザには2つ
Angular 2を使うならUIはコレで！Ionic 2ことはじめ（正式リリース版対応） | HTML5Experts.jp
Angular 2を使うならUIはコレで！Ionic 2ことはじめ（正式リリース版対応） 榊原昌彦（一般社団法人リレーションデザイン研究所 ...） Web制作してると、また新技術が出たのかと思うと、気づいたら「新常識」が増えてたということに頻繁に出会います。 タスクランナー、SCSS、LiveReload、SPA、PWA、ハイブリッドアプリ。そういった近年のキーワードを一気に体験できるUIフレームワーク「Ionic 2」が先日リリースされましたので、ご紹介します。 編集部注: Angular 2の正式名称は「Angular」ですが、現状だと「AngularJS 1.x」のことを呼称していると誤解される可能性が高いと判断し、本稿では「Angular 2」で統一させていただきます 記事の内容が古くなってたので、2017年8月11日に更新しました Ionic 2の概要 Ionic2は、アメリカ
Angular2のビルトインパイプ | VPSサーバーでWebサイト公開 備忘録 ~Linux、MySQLからAJAXまで
Angular1でフィルターと呼ばれていた機能が、Angular2ではパイプという名称で同様な提供されています。その使用方法を確認しました。 ※Angular2の2.0.0版、TypeScriptを使って確認したものです。（デモはv4.4.3、v2.0.0で動作確認） ※目次をクリックすると目次の下部にコンテンツが表示されます。 １．主なビルトインタイプ ２．デモ １）Dateパイプ ○構文 expression | date[:format] 例） birthday = new Date(1988,3,15); {{ birthday | date:”yMMdd” }} →04/15/1988 ２）Decimalパイプ ※Internationalization APIを使用しているので、ChromeとOperaのみ信頼性がある。 ○構文 expression | number[:dig
Angular4 + Django1.11 vol.1 - Djangoroidの奮闘記
参考サイト https://www.codingforentrepreneurs.com/projects/angular-django/ Getting Started Angular4+Django djangular4というフォルダを作成する。さらに、djangular4/client, djangular4/backend というサイトをそれぞれ作成する。 clientフォルダに、joincfe/github のtry-angular-v4をgit cloneしてくる。 $ git clone https://github.com/codingforentrepreneurs/Try-Angular-v4.git . // ここのピリオドがポイント $ npm install // package.jsonに記載があるmoduleをinstallする。 $ ng serve //
ng-japan 2017 #ng_jp #ng_jpA
ng-japan - The Angular conference in Tokyo, Japan (2017/6/17) http://ngjapan.org/ track B: https://www.youtube.com/watch?v=P1X40cddHGU ------- - 15:10 Keynote Stephen Fluin (Angular Core Team) - 1:14:40 RxJSを活用したアプリケーション開発 Kentaro Okuno - 1:55:00 Web Components and Onsen UI Naoki Matagawa - 2:31:00 Angularアプリのテストについて Yosuke Kurami - 3:16:00 Web Payments + Credential Management API Eiji Kitamu
AngularのLifecycle Hooksを理解する
Angularのコンポーネントやディレクティブには Lifecycle Hooks（ライフサイクルフック） という仕組みがあり、コンポーネントの変化にあわせてコールバックを設定できます。これによりコンポーネントのデータやビューの変更時の処理を追加できます。 コンポーネント志向のAngularアプリケーションの構築では、Lifecycle Hooks の理解が不可欠です。 今回は Lifecycle Hooks の基本的な仕組みを紹介します。 目次 Lifecycle HooksとはLifecycle Hooksの種類Lifecycle Hooksの実行順序Lifecycle Hooksのライブデモ Lifecycle Hooksとは 記事の冒頭でも説明したように、Lifecycle Hooks はコンポーネントやディレクティブが変化（作成・変更・破棄）するタイミングで実行されるコールバック
RxJSで"Reduxっぽいもの"を書いてみたらAngularが楽しくて仕方がない。 - Qiita
事の発端はこれ。 The question is: do you really need Redux if you already use Rx? Maybe not. It's not hard to re-implement Redux in Rx. Some say it's a two-liner using Rx .scan() method. It may very well be! (訳: RxJSを使えばReduxは簡単に実装できるよ。) from Redux documant. 「RxJSを使えばReduxは簡単に実装できるよ。」 自己紹介 ちきさん (Tomohiro Noguchi) Twitter/GitHub/Qiita: @ovrmrw ただのSIer。 (前回の登壇) 「僕はどうしてAngular2をテーマに登壇することになってしまったのか」を振り返る 今日話
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を使ったりなどで
The Complete Guide to Angular User Authentication with Auth0
The focus of this guide is to help developers learn how to secure an Angular application by implementing user authentication. You'll enhance an Angular starter application to practice the following security concepts: Add user login and logout.Retrieve user profile information.Protect application routes.Call an API with protected endpoints.This tutorial uses the Auth0 Angular SDK to secure Angular
Angular 2/5 User Registration and Login Example & Tutorial | Jason Watmore's Blog
Tutorial built with Angular 5.0.3 Other versions available: Angular: Angular 15/16, 14, 10, 9, 8, 7, 6 React: React 18 + Redux, React 17 + Recoil, React 16 Hooks + Redux, React 16 + Redux Next.js: Next.js 13 (App Router) + MongoDB, Next.js 13 (Pages Router) + MongoDB, Next.js 13 (Pages Router) + MySQL, Next.js 11 Vue: Vue 3 + Pinia, Vue 2 + Vuex AngularJS: AngularJS .NET: Blazor WebAssembly After
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - ng-book/angular2-rxjs-chat: Example Chat Application using RxJS and Angular 2
Angular2: Detect change in route in Angular2
Angular2 and TypeScript: error TS2322: Type 'Response' is not assignable to type 'UserStatus'
Angular 4 Event Binding
Angular Material
MEAN with Angular 2/5 - User Registration and Login Example & Tutorial | Jason Watmore's Blog
Angular