JAMstack - クライアントサイドJavaScript、再利用可能なAPI、予めビルドされたマークアップによるモダンなWeb開発アーキテクチャ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? JAMstackの概要を意訳しました。 誤りやより良い表現などがあればご指摘頂けると助かります。 原文： https://jamstack.org/ 「スタック」について言及する際、OS、特定のWebサーバ、バックエンドのプログラミング言語やデータベースについてはもう触れる必要はありません。 JAMstackは特定のテクノロジーではありません。これは、高速化、堅牢なセキュリティ、スケーリングコストの低減、そしてより良い開発者体験をもたらすWebサイトやアプリケーションを構築する新たな手法です。 JAMstackとは？ 下記3点の基準を満
Angular Materialでファイル選択ボタン - Qiita
小ネタです。 Angular Materialを使ったプロジェクトで、ファイル選択input <input type="file" /> を使うときにボタンをmat-buttonにする方法を紹介します。 HTML <input type="file" style="display: none" #fileInput accept="image/*" (change)="onChangeFileInput()" /> <button mat-raised-button color="primary" class="file-select-button" (click)="onClickFileInputButton()"> <mat-icon>attach_file</mat-icon> ファイルを選択 </button> <p class="file-name" *ngIf="!file;
prodビルドはイベント名も節約 - Qiita
事象 angularでページ遷移時に子画面にバインドしてるオブジェクトを更新し、描画を更新したい。 ところが、ローカル実行時や--aotビルドした時は問題なく動くが、--prodビルドした時だけ動かない。 原因 処理の実行判定を、イベントオブジェクトのコンストラクタ名で行っていたため。 最適化によって、イベントオブジェクトの中身も削減されるようだ。 this.router.events.subscribe(event => { // ひとまずイベントが発生してるか確かめる console.log(event.constructor.name); if (event.constructor.name === 'NavigationEnd') { ... // 画面にバインドしてるオブジェクトを更新 console.log('base navEnd'); } });
cypressでintegrationフォルダ以外を対象にしたい時 - Qiita
Angularのテストランナーをkarma→cypressに乗り換えたときに デフォルトのspec探索パスが'/cypress/integration/**.spec.ts'になっているのを変更したい TL;DR package.jsonのscriptsを変更する cypress.jsonの設定を追加する 対象読者 cypressを使う人です デフォルト設定 cypressをインストールしてすぐだと、cypressフォルダが生成され、 cypress/integration/配下にあるspecファイルだけがテストの実行対象になっているはずです。 cypress ├── fixtures │ └── example.json ├── integration │ └── test.spec.ts ├── plugins │ ├── cy-ts-preprocessor.js │
[Angular] ルーティング による画面遷移 - Qiita
$ ng version _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| |___/ Angular CLI: 11.0.5 Node: 12.18.3 OS: darwin x64 Angular: 11.0.5 ... animations, cli, common, compiler, compiler-cli, core, forms ... platform-browser, platform-b
![[Angular] ルーティング による画面遷移 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/07e20b03eff1bd446bd576be1c3f470f81933b0c/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%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMTkzMzQyJTJGcHJvZmlsZS1pbWFnZXMlMkYxNTAwODg4MTU5P2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZiZz1GRkZGRkYmZm09cG5nMzImcz1kMzkxNGRmZTNiN2YyOWJiMmFhMDdkZjdkN2Q2OWUxMg%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253De16357d6d0767c0b44a4310bc0f98389%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCQW5ndWxhciU1RCUyMCVFMyU4MyVBQiVFMyU4MyVCQyVFMyU4MyU4NiVFMyU4MiVBMyVFMyU4MyVCMyVFMyU4MiVCMCUyMCVFMyU4MSVBQiVFMyU4MiU4OCVFMyU4MiU4QiVFNyU5NCVCQiVFOSU5RCVBMiVFOSU4MSVCNyVFNyVBNyVCQiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPWRhY2EyM2RjYzVjMTBlMGY0NjQ4MWU2M2FhZWJhNDU5%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBrc2gtZnRociZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPTNmMDNkNmIxNjdmOWNjYjdjYTFiYzcxMjgwODFjOGE4%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Decffae05859f9a3e9b6b931b05ab7ae5)
SPAのハッシュ付きURL遷移にGTMを仕込む - Qiita
Angularのハッシュ付き遷移を使っているんですが、これだとGoogleAnalyticsのPageViewで / しか取れていないことがわかった。 そこでGoogleタグマネージャを使ってハッシュ付きURLの遷移でもPageViewを取れるようにします。 1. 変数の追加 1.1 hash変数の作成 名前はなんでもいいですが、ここではhashとしました。 変数の種類：JavaScript変数 グローバル変数名：location.hash これを保存します。 1.2 ハッシュ付きトラッキングコードの作成 また名前はなんでもいいです。 GoogleAnalyticsからトラッキングコードを持ってきて入力します。 また、詳細設定＞設定するフィールドのpageに先程作成した変数のhashを入れます。 これを保存します。 2. トリガーの追加 また名前は(ry トリガーの種類：履歴の変更 トリガ
dateコマンドで今の時間に設定したい時のスニペットを無駄にAngularで書いた - Qiita
そんな時はここからコピペしてください。 Date Command 私の、私による、私のための 3ヶ月に1回くらい使いたくなるコマンドを、ちょっとおしゃれに書いてみた。 装飾は-webkit-background-clip:text CSS effectを参考にしました。 なんかの拍子に、ラズパイのタイムスタンプがずれちゃって、 本来であれば、ntpサーバと同期して、あれやこれや設定するのが正しいのですが ポートが開いてないとか、急いでいるとか、とにかく面倒臭い時に使います。 Angular を使ってみた。 無駄に。 備忘録をかねて、Github Pagesへ公開するまでの手順も載せておきます。 $ ng new datecommand 新規アプリを作成する。 $ cd datecommand/ ディレクトリを移動 $ ng serve --open まず、起動する。 ホットリロード環境がで
ルーティング設定を行ったAngularアプリをFlaskで動かす - Qiita
新たにAngularでアプリを作成してHerokuで動かそうとした際に、同時にPythonで作成したバックエンドのアプリも使いたいときがありました。 その時に、バックエンドをPythonサーバー・フロントエンドをAngularにすればいいのでは！と思ってアプリを構築した際の手順の忘備録です。 開発環境 PythonサーバーにはFlaskを採用しました。 Flask 1.0.2 Angular CLI 6.1.1 Angularアプリのビルド FlaskでAngularのアプリを表示するために、Angularアプリをビルドします。 デフォルトの設定ではビルドするとdistというディレクトリが作成されると思います。このディレクトリの内部のファイルが公開用に使うものとなっています。 ここでは、テスト用のアプリを作成し、ビルドを行うまでのコマンドを記載しています。 testコンポネントはのちのAn
Angular入門 未経験から1ヶ月でサービス作れるようにする その11. Firebaseを使ったAPI通信2 - Qiita
Angularでの HTTP 通信のやり方を解説していきます。 FirebaseのAPIを使ってデータの作成をやっていきます。 前回の振り返り 前回 は、AngularにおけるFirebaseのセットアップとAPIを使ってFirebaseからデータを取得する方法を学びました。 本記事は前回の続きですので、前回の内容は頭に入れておいてください。 わからなくなったら、前回の記事を見返しましょう。 この記事のソースコード https://github.com/seteen/AngularGuides/tree/入門その11 データの扱い方と準備 product.ts のデータ構造の変更 Firebaseでは、下記のような Key => Data のデータ構造になっています。 { "-LKX29TybTT3bEv5sIyy": { "description": "神は云った。「Angularあれ」
i18n対応Angularアプリケーションの開発環境 - Qiita
初めに この記事では以下のような構成のAngularアプリケーションを開発する際のローカル開発環境の構築を解説します。 Angular公式のi18n機能を使ってi18nを実現する 最終的なビルド生成物はAOTビルド後にサーバーまたはS3などの静的ファイルホスティングサービスから配信する **/en/ **/ja/ などのアクセス先のパスを変化させることによって言語切替が可能 アプリケーションのUI上から言語選択を行う機能の動作確認をローカルで行う必要がある 環境 $ ng -v Angular CLI: 6.1.5 Node: 9.11.1 OS: darwin x64 Angular: 6.1.4 ... animations, common, compiler, compiler-cli, core, forms ... http, language-service, platform
jQueryの処理はComponentに書く - Qiita
開発ツールで確認。 コードもjQueryもangularによってscripts.bundle.jsにまとめられてる。 htmlのヘッダにscripts.bundle.jsの呼び出し宣言もつけてくれている。 …でも、どうにも実行されていないっぽい 対応 jQueryの処理は、Componentの中に書く！ そもそも宣言されてるだけでただの飾りになってるのでは？と思い Component内に移植してやるとうまく動きました import { Component, OnInit } from '@angular/core'; // jQuery用の変数宣言 declare var $; @Component({ selector: 'main-component', templateUrl: './main.component.html' }) export class MainComponent
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
angularのバージョンアップ - Qiita
Angularで検索可能なセレクトボックスを設置する - Qiita
[非公式] Ionic v3でAngular 6を使う方法（追記あり） - Qiita![[非公式] Ionic v3でAngular 6を使う方法（追記あり） - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/adfa4ac450c1c5d01f8ebf56c85ea1538f138459/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%25252Fadvent-calendar-ogp-background-7940cd1c8db80a7ec40711d90f43539e.jpg%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMTAwNDYwJTJGcHJvZmlsZS1pbWFnZXMlMkYxNTE5NzExNTk4P2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZiZz1GRkZGRkYmZm09cG5nMzImcz0wOWFlY2ZiNWY2MmE4Y2VkMWVjMmZkZjQ0NTk1MDgyMg%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Dd3f6f12a6f9368e42f105808e83df4fc%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCJUU5JTlEJTlFJUU1JTg1JUFDJUU1JUJDJThGJTVEJTIwSW9uaWMlMjB2MyVFMyU4MSVBN0FuZ3VsYXIlMjA2JUUzJTgyJTkyJUU0JUJEJUJGJUUzJTgxJTg2JUU2JTk2JUI5JUU2JUIzJTk1JUVGJUJDJTg4JUU4JUJGJUJEJUU4JUE4JTk4JUUzJTgxJTgyJUUzJTgyJThBJUVGJUJDJTg5JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9NTdmMTJlMGRkMDUzMWRmMzNjMDA1NTljMDIyNjBiY2I%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDByZGxhYm8mdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz0zODM2MjI1MDhjNTVjYjZlNWVkOGMzYWNmYThiZDhjYw%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D25f308b70509411ded7012ec23f4e002)
i18n対応AngularアプリケーションをFirebase Hostingで公開するときの設定 - Qiita
Angular CLI 隠しコマンド - Qiita
AngularのInputについてのノウハウ（メモ） - Qiita
angular6 の i18n で生成した xlfファイルをマイクロソフトの多言語アプリ ツールキットで編集可能にする - Qiita
Angular 6 Latest Features - Qiita
AngularでStorybookを使う - Qiita
