【Angular6】ngコマンドでdev、stg、prodの3つの環境で設定を切り替えてビルドできるようにしてみる | DevelopersIO
【Angular6】ngコマンドでdev、stg、prodの3つの環境で設定を切り替えてビルドできるようにしてみる Angular CLIのデフォルトだと、「ng build」または、「ng build --prod」で、2つの環境のみ切り替えができる状況ですが、ngコマンドでdev、stg、prodの3つの環境で設定を切り替えてビルドできるようにしてみたいと思います。 どうも！大阪オフィスの西村祐二です。 AngularではAngular CLIを使えば簡単にビルドすることができます。 ただ、デフォルトだと、 ng buildまたは、ng build --prodで、2つの環境のみ切り替えができる状況です。 しかし、環境はdev、stg、prodと３つあることが多いと思います。 そこで、今回、dev、stg、prodの3つの環境で設定を切り替えてビルドできるようにしてみたいと思います。
Angular で超簡単に画面の自動スクロールを実装する方法 - Qiita
概要 Angular で画面スクロールを実現する方法（いわゆる、画面内アンカーにジャンプする動き） 静的 HTML コンテンツにおいて、画面内スクロールはよく使われる機能だが、Angular はブラウザが要素を探すタイミングが Router によるコンポーネント生成より早いためうまくいかなかった。 スクロールを無理やり実現しようと思ったら、ディレクティブとか頑張ってイジったり、別ライブラリ入れたりと苦労する。 しかし、v6.1 から導入された Router Scroller という機能でスクロールが超簡単に実現できるようになったため、その実装方法の備忘録。 ただし、ヌルヌルっと動くようなアニメーション動作の実装は説明していない。あくまで目的の位置をパッと表示するスクロール処理に関する内容となっている。 前提条件 Angular バージョン 6.1.0 以降のみ対応 RouterModule
AngularのDragDropModuleを使ってToDoリストを作る | DevelopersIO
AngularでTrelloのようなリストをドラッグ＆ドロップできるような画面を作る方法をご紹介します！ Angular Material CDKのDragDropModuleを使用します。 検証環境 Angular CLI: 8.3.21 Node: 12.13.0 OS: darwin x64 Angular: 8.2.14 @angular/cdk: 8.2.3 事前準備 @angular/cdkが入っていない場合は追加しましょう。 $ ng add @angular/cdk Angularのプロジェクト作成方法はこの記事では割愛します。 実装してみる app.module.tsにインポート文を追加 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular
Angular Elementsことはじめ – Custom Elementsを実装する方法
2018年5月4日にAngular 6がリリースされました。Angular 6は、Angular自体の機能というよりは、Angularをいかに使ってもらえるかというところに重点が置かれたリリース内容でした。その中の1つに、Angular Elementsという、Angularの利用を促進しそうな機能が新たに追加されました。詳細は記事内に書きますが、Angularで構築したコンポーネントを手軽に別のWebサイトで通常のHTMLのように扱えるCustom Elementsに変換する機能です。似たようなことがReactやVueでは既にできていて、Angularはずっと苦手としていた部分です。今回自分の勉強がてら、Angular Elementsの使い方をまとめてみました。参考にしてもらえればと思います。 目次 はじめに – Angular Elements とは Angular Elements
プロバイダーの種類と選び方 - Angular After Tutorial
AngularのDIには4種類のプロバイダーがあります。それぞれに目的があり、適した用途があります。チュートリアルでは述べられていない、プロバイダーの選び方の指針を理解しましょう。
Perspective of Angular in 2020
Angular Advent Calendar 2019の25日目の記事です。 この記事は GDG TokyoのDevFest 2019で発表した内容から抜粋、加筆したものです。 2019年も終わりということで、発表では今年一年のAngularの動きを振り返り、来年以降の展望についてまとめました。 この記事では振り返り部分は割愛し、2020年以降のAngularのロードマップについてのみ触れることにします。 全篇をご所望の場合はスライドを直接参照してください。 bit.ly/2Y5ZfJx Roadmap in 2020 2020年の間にはv9.0からv11.xまでのリリースが行われる予定です。半年に一度のメジャーバージョンアップは今後も継続されます。 v9.0では次のような大きな変更があります。 Ivyのデフォルト有効化 CDK Clipboard APIの提供開始 CDK Testin
Event Coalescing to improve performance - Qiita
この記事がAngular #2 Advent Calendar 2019 ２３日目の記事です。 Event Bubbling の性能の問題 下記のHTMLコードを見ましょう。 <div (click)="doSomething()"> <button (click)="doAnotherThing()">Button</button> </div> Event Bubbling のため、DivのなかのButtonをクリックしたら、両方のEvent ListenerがTriggerされます。この２つのEvent Listenerが全部Change Detectionを実行します。実際がこのようなケースでChange Detectionを一回だけ実行したいです。特にこのようなケースがAngular MaterialとかUI ライブラリで結構普通のケースですので、性能改善したいです。 実行順番
Angularのプロジェクトでチームに人が増えるときにやりたいこと - Qiita
この記事は Angular #2 Advent Calendar 2019 の21日目の記事です。 こんにちは、Angularをはじめて2年目になるフロントエンドエンジニアの北川です。 日頃はAngular+Node.js(Lambda Serverless)での開発を行なっています。 新規開発でng newから作ったAngularアプリを1人エンジニアプロジェクトとしてコツコツ開発して、1年ほど経ったところでメンバーが増えることになったので、1人プロジェクトからチーム開発にシフトさせるために負債返却として行なったTips的なことについて紹介します。 ファイルを分割する 一つのファイルに多くの処理を書いていると、他の人が機能の追加をする際に同じファイルに処理を書き加えることをしてしまい、放っておくと巨大なファイルができあがってしまいます。 その結果、ファイル内の見通しが悪く、コンフリクトも
Angular v9 で Angular Elements(WebComponents 出力)を使う - Qiita
この記事は Angular アドベントカレンダー 2019 の11 日目の記事です。体調不良につき遅くなり申し訳ありません……。 はじめに Angular の WebComponents 出力である Angular Elements が搭載されたのが Angular v6 でのことなので、1年半になります。 今年は Setncil 1.0 がリリースされ、 lit-html での実装に比べ抽象度を高く保ちつつも、 pure WebComponents としての出力することができることから注目を浴びているように感じます。 Stencil での実装としても、 Angular の良い点である ShadowDOM + Sass を継承しており、 Component 単位で見ると Angular に通じる開発体験がある箇所もあります。 しかし Angular の出番が奪われたわけでは全くなく、やはり
@angular/cdkのDragDropModuleに感謝した話。 - Qiita
この記事は Angular Advent Calendar 2019 18日目の記事です。 こんにちは、しみきょんです！ 今日は@angular/cdkの DragDropModule の話をします。 Ionic / Angularでアプリケーションを作っている際にDraggableなリストコンポネントを作りたくて、Ionicコンポネントや他ライブラリを探して模索していたのですがいまいちはまらず、、 ふと我に返った時に、Angular Material使えばいいじゃん!！となり DragDropModule の恩恵をうけた感謝の話です。 環境 @ionic/angular v4.9.0 @angular/core v8.1.3 @angular/cdk v8.2.3 @angular/material v8.2.3 ngrx v8.3.0 rxjs v6.5.3 typescript v3
Angular + Amplify DataStoreを試してみる #reinvent | DevelopersIO
どうも！大阪オフィスの西村祐二です。 この記事はAngular Advent Calendar 2019の16日目の記事です。 re:Invent 2019期間中に、Amplifyの新機能「Amplify DataStore」が発表されました！今回は、この機能をAngularで試してみたいと思います。 「Amplify DataStore」を使うことによってデバイスやブラウザのストレージを使ったオフライン対応などが簡単にできたり、開発者はローカルのデータを扱うような感覚で、簡単に分散されたデータを扱うことができます。 速報記事は下記になります。Amplify DataStoreの説明は下記を参照ください。 【速報】デバイスのデータストア向けの新機能「Amplify DataStore」が公開されました！ #reinvent https://aws-amplify.github.io/doc
【Angular】これからはじめるE2Eテスト（2019） - Qiita
この記事は Angular #2 Advent Calendar 2019 10日目の記事です Angular 9なかなかこないですね！みなさまのAngularのアップデート状況はいかがなものでしょうか。 いざアップデートしたはいいものの、ブラウザ上で正常に動作するか手作業で確認するのはなかなかツライものがあります。 また、E2Eで自動化してみたいけど何から手をつけたらいいか分からなかったり、昔からの製品なのでIEでも動作するか確認したい・・・ など色々困っていることはありませんでしょうか？ この記事では、マルチブラウザで動作し （Chrome、Firefox、Edge、IE11など） Angularで困ったときのナレッジが割と見つかりやすく Angular CLIでプロジェクトを作成した際に標準でインストールされている Protractor を使って はじめてE2Eを書くための方法を紹介
AngularでChrome Extensionの開発を完結させる
Angular Advent Calendar 2019 12/13の記事です。誠に勝手ながらQiitaではなく個人ブログに執筆させていただきます。 誠に勝手ながら自己紹介しておくと、22歳の大学院生やりつつ、LCNEMのCEO,CTOです。Angularが大好きでフロントに多用しつつ、Firebaseでサクッと開発したり、Golangでブロックチェーン「そのもの」を開発したり、案件をいただいたりもしています。ブロックチェーンに限らず、開発の依頼や、採用についてお気軽にご連絡ください。 私個人の是非Twitterもぜひご覧ください。 今回のテーマは、AngularでChrome拡張の開発を完結させる、です。 「Orbit」という、SLIP44の規格をもとに、ブロックチェーンに利用する秘密鍵をチョー簡単に管理するChrome拡張を開発中です（というか完成）。（もともとCosmos用になにか作
【Angular】アニメーションをつけようとしてハマったけど、trackByを使うと一発解決した話 - Qiita
この記事は Angular Advent Calendar 2019 12日目の記事です 今年は1つめのカレンダーが速攻で埋まって、勢いの良さに気持ちが盛り上がりました 2つめのカレンダーも全枠バッチリ埋まっていて、嬉しいですね アドカレ開始前からテンション上がりました はじめに 先日、Angularを使ったアプリケーションでアニメーションのcssを書いてみた際、うまく動かずハマったので、その話を書きます。解決に手間取ったので、同じことでハマってる方の役に立つと嬉しいです。 認識違いや、もっと良い方法等あれば、ご指摘いただけると嬉しいです やりたいこと Webアプリケーションの画面左側にメニューバー的なものを表示し、カテゴリごとにアイテムの表示／非表示を切り替えたい。その際、アニメーションさせたい。 理想の動き 一見、cssを書くだけで簡単にできそうなのですが、いざやってみると以下のような
Angular と Firebase で月間PV1億超えの PWA を作った話 - Qiita
はじめに これは Angular Advent Calendar 2019 10日目の記事です。 こんにちは (｡･ω･｡) Angular と Firebase で CGM サービス（一般ユーザー投稿型サービス）を開発している者です。 早いもので、Angular Advent Calendar も 3 回目の参加となります。 例年ではなんとなく不吉な 4 日目をいただいていたのですが、今年も募集当日にエントリーしに行くと既に 9 割ほどの枠で参加表明があり、狙っていた？ 4 日目も埋まっていました。 （どこでも良いので他の人が嫌がる確率が高そうなところに入ったろの精神 今まで #1 しかなかったカレンダーが今年は勢いそのまま #2 まで誕生し、ここ 1 年での Angular コミュニティの成長を実感しています (ﾉﾟ∀ﾟ)ﾉ 小話はこの辺で... この記事では、約 2 年間 Angul
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Angularでスクロールイベントを検知する(Angular2,4,5) - Qiita
クリスマスを華やかにするGUI小技集 - Qiita
Angular と GraphQL 2019 - Qiita
Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.
TypeScriptのclassをオブジェクトで初期化する - Qiita
