本連載では、Webアプリケーションフレームワーク「Angular」の活用方法を、サンプルとともに紹介しています。前回はAngularのUIコンポーネントであるAngular Materialを紹介しました。今回は2019年5月にリリースされたAngularのバージョン8について、変更点や新機能を紹介していきます。 はじめに Angularは、Googleとオープンソースコミュニティで開発されているJavaScriptフレームワークです。最初のバージョンはAngularJS（AngularJS 1）と呼ばれていましたが、バージョン2で全面的に刷新され、以降、おおむね半年に1回アップデートされています。 2018年5月のバージョン6、10月のバージョン7に続いて、2019年5月にAngularのバージョン8がリリースされました。CLIツールの機能追加、速度向上やサイズ削減などについて、引き続き
@Injectable() export class Test1Service { getName() { return { name: "john" }; } } @Controller("test1") export class Test1Controller { constructor(private readonly test1Service: Test1Service) {} @Get() getName() { return this.test1Service.getName(); } } Nest CLI でプロジェクトを作成したときに生成されるコードはこんな感じになっていると思います。 service での処理を controller で呼び出すことができているくらいにしか思いません。 このサービスは必ずしも、DI しないと使えないわけではなく、通常のクラスなので、インスタ
リポジトリを作ってから一行もコードを書かずに GitHub Pages にデプロイまでできる GitHub template を作った話 - Qiita
リポジトリを作ってから一行もコードを書かずに GitHub Pages にデプロイまでできる GitHub template を作った話AngularGithubPagesangular-cli この記事は Angular Advent Calendar 2019 の 1 日目の記事です。 今年も 1 日目に飛び込みました @kasaharu です。 今年はなんと Angular #2 Advent Calendar 2019 もあるみたいですよ。 Angular アプリケーションのための GitHub template を作る Angular アプリケーションを new したあとにやったほうがいいことを詰め込んで GitHub Pages にデプロイまでできる GitHub template を作ったお話です。 Angular アプリケーション以外でも役に立つことがある(?)かもしれませ
あらためてReactとVueを比較してみる〔2020年最新版〕 ｜ 25歳でフリーランス28歳で起業したエンジニア -じゃけぇ- のあれこれ
どーもじゃけぇ(@bb_ja_k)です。 フリーランスとして普段はフロントエンドメインで仕事してます。 ３大モダンフロントエンド フレームワーク/ライブラリ と言えば React、Vue、Angular ですね。 「まずはどれか習得しようかなぁ」と考えている人の多くはReactかVueの選択で悩むのではないでしょうか。 フロントエンドは本当に技術の革新が早いので、ReactとVueの比較記事を見ても割と古い情報での比較が散見されます。 ReactはHooksの登場で大きく変わりましたし、VueもComposition APIを含むメジャーバージョンアップであるVue3も控えています。 正直これから勉強を始める人は何がなんだかって感じだと思いますし、せっかくだったらなるべく無駄にならないほうをやりたいなーと思うことでしょう。(自分もモダンフロントエンドを勉強し始めた時めっちゃ調べました←)
テックカンパニーをテックカンパニーたらしめているものはなにか？技術か、人か、それともチームなのか。 連載「Technology Company Internals」では、テックカンパニーの内側で働くエンジニアに、技術に精通したエキスパートが対面で話を聞き、テックカンパニーとは何か？を探るだけでなく、テックカンパニーを目指す企業の指針となることを目指します。 コロナ禍は飲食業界のDXを促進する 白石: 本日はよろしくお願いします。自己紹介からお願いします。 鄧: 鄧 皓亢（デン ハオカン）と申します。CTOを務めています。普段の仕事は、一言でいうと「なんでも屋」ですね。アーキテクト的な役割を担うこともあれば、お客様に価値を少しでも早くお届けするためにソリューションをチームに提案したり、場合によっては自分でもコードを書いたりします。 北川: 北川 真理（キタガワ マコト）です。フロントエンドエ
Get ready for a new faster web experience with Firebase. For the longest time you all have asked us to optimize the size of our JavaScript libraries, and we’ve done just that. We’ve released brand new beta libraries that are significantly smaller in size. Some are even up to 80% smaller! We’ve managed to reduce the size all without removing any features from the previous version too! How did we do
Lars Gyrup Brink Nielsen for This is Angular Posted on Jul 21, 2020 • Updated on Nov 15, 2020 Cover photo by Pixabay on Pexels. The views expressed in this opinion piece are entirely my own. They do not represent any organization. You're going down a dark, murky, slippery road and you've lost your way. What do you do? Keep moving while acting like everything is alright? Or stop and ask for help? T
こんばんは！Google Developers Expert for Angularのlacolacoです。この記事はAngularアドベントカレンダー 2020、25日目の記事です。 毎年最終日を書かせてもらってますが、いつものような「一年のふりかえりと来年の予想」ではなく、今年はカジュアルにライブラリ紹介させてもらおうと思います。 気になったものがあればぜひ来年趣味や仕事のプロジェクトで使ってみてください。 Angular専用ライブラリ ngneat/reactive-forms ngneat/reactive-forms: (Angular Reactive) Forms with Benefits 😉 AngularのReactive Formsとほとんど互換性を保ったまま、本家に不足している型チェックをサポートしたライブラリです。 公式のロードマップでAngular Forms
AWS AmplifyとAngular8を使ってCognitoでQuickSightにログインするページを作ってみる | DevelopersIO
先日、aws-samplesで公開されていたCognitoのユーザーでQuickSightにログインするサンプルを紹介するブログを書きました。 また、AmplifyとAngular8を使ってCognitoでAWSマネジメントコンソールにログインするページを作るブログも書きました。 今回のブログではこの２つのブログをがっちゃんと合わせて、ブラウザで動かせるCognitoユーザープールのユーザーでQuickSightにログインするページを作ります。 ついでに、Cognitoユーザーごとに異なるQuickSightユーザーでログインできるような構成例を紹介します。 ゴール 次のことができるサイトを作ることがゴールです。 ログイン、ログアウトができる ログインした際に、QucikSightへフェデレーションログインができる こちらが完成イメージです。 構成概要図 AWS Amplifyでざっくりこ
Angular 14正式リリース。Typed Angular FormsやStandalone Componentsなど新機能
Angular 14正式リリース。Typed Angular FormsやStandalone Componentsなど新機能 Webアプリケーションフレームワーク「Angular」の最新版となる「Angular 14」が正式にリリースされました。 Angular v14 is here#ngUpdate includes: Strictly typed forms! Streamlined page title accessibility CLI autocomplete a developer preview of standalone components! & so much more! Learn all about v14: https://t.co/I3mvnb2CSX pic.twitter.com/nYtpOm4KXi — Angular (@angular) June
フロントエンドアーキテクチャがまた進化する ー Angular、Wizとの統合により「ハイドレーション完了後にイベントをリプレイ可能」に
4月23日、Angularチームが「Event Dispatch in Angular」と題した記事を公開した。この記事では、Angularの新しいイベントディスパッチシステムの裏側の詳細について詳しく紹介されている。 4月23日、Angularチームが「Event Dispatch in Angular」と題した記事を公開した。この記事では、Angularの新しいイベントディスパッチシステムの裏側の詳細について詳しく紹介されている。 イベントディスパッチの導入 Angularは、 JSAction というライブラリを使用して、 発生したイベントをアプリケーションのルートで捕捉し、完全なハイドレーションが完了したあとに再生する 機能を導入した。この機能により、ページがインタラクティブに見えるが反応しないという問題を解決している。 例えば、クリック時に onSave() を呼び出す、以下のよ
転職のお知らせ - 余白
写真は今年のクリスマスの様子です。 From: ビットバンク株式会社 やってたこと 仮想通貨取引所アプリケーション（Angular）開発 機能開発・リファクタリング・アーキテクチャの再編など アプリケーションの品質にフォーカスした足回り整備 エラー収集・監視の運用の整備とか バンドルサイズの削減とか To: Classi株式会社 2019年2月から技術アドバイザーを請け負っていましたが、1月から社員になります やりたいこと Make products which users enjoy to use Make infrastructure which developers enjoy to develop 日本の学校を子供たちが行きたくなる学びの場にアップデートする 本件についてのお問い合わせは Kyashの送金メッセージ でお願いします。（返答を保証するものではありません）
この記事について npmを利用してinstallしたりupgradeしたりする際にpermission deniedと表示されてしまった時に助けになるかもしれない記事です。 現象 npmコマンドを実行すると "EACCES: permission denied, access '/usr/local/lib/node_modules/npm/node_modules/<パッケージ名>'" というエラーが表示されてしまう。 npm ERR! Darwin 15.5.0 npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "update" "-g" npm ERR! node v5.6.0 npm ERR! npm v3.7.1 npm ERR! path /usr/local/lib/node_modules/npm/node_m
![npmでpermission deniedになった時の対処法[mac] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/02a98747c5cd1360aee7ac0c2ec8f99eea50040c/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-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9bnBtJUUzJTgxJUE3cGVybWlzc2lvbiUyMGRlbmllZCVFMyU4MSVBQiVFMyU4MSVBQSVFMyU4MSVBMyVFMyU4MSU5RiVFNiU5OSU4MiVFMyU4MSVBRSVFNSVBRiVCRSVFNSU4NyVBNiVFNiVCMyU5NSU1Qm1hYyU1RCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MTY2MTFiNDM1YzBlZjA4NzBiNDlkYjU1OGIwYmExMDU%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwb2tvaHMmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTc5MWJkYjVlOGU3YTIxNGQ2YTMwZGExYjNjNjdkYjA1%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D3a40b0441eda5911e1f70e72facdf8b6)
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にインポート文を追加 app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule }
どうも！大阪オフィスの西村祐二です。 Angularでアプリケーションを作っていると、ログイン時のトークンやいろんなコンポーネントでよく使う情報をどうやってアプリケーション内で管理していくか悩むことがあります。 Angularには、Reduxベースで状態を管理できる準公式ライブラリのNgRxがあります。 v8になってボイラーテンプレートなどの記述量が減って使いやすくなったので、今回はNgRxをつかってTODOアプリケーションを作ってみたいと思います。 NgRxとは NgRxはAngularアプリケーション用の状態管理ライブラリです。 NgRxを利用するとReduxのような状態管理ができます。 また、NgRxはRxJSベースで作られており、状態をストリームとして扱うことができます。 なんでNgRxを使う？ 簡単に説明すると状態管理にルールを付けて、秩序をもたらすためです。RxJSでも状態管理
Angularの追いかけ方
Angular #2 Advent Calendar 2019の25日目の記事です。 アドベントカレンダー2枚が埋まるほど日本でのAngularの熱が高まっていることがAngularのGDEとしてとても嬉しいです！ この記事ではAngularについてもっと深く知りたい、学びたいと思っている方々向けに、私が普段からウォッチしている信頼できるリソースを紹介します。 Twitter Angular（@angular） まずはもちろん公式アカウントです。公式アナウンスは基本的にこのアカウントから発信されます。 @stephenfluin/Angular GDEs Angular GDEがまとめられたTwitterリストです。 Stephen Fluin（@stephenfluin） Stephen FluinはAngularチームのDeveloper Advocateです。公式ブログの記事の執筆も
Re: 愛すべきAngularとのお別れ。2,3年後を見据えReactにリプレイスする話 - DEVGRU
note.com 上記の記事について、現職では主に Angular を使っている立場（※ 社内ではReactのプロダクトも複数あります）でこの記事についての感想を述べます。 広告 理由はAngularを書ける（or書きたい）エンジニアを採用することが難しいからです。それにつきます。 はい、特に異論はありません。 実際、現職でもAngular のプロダクトのフロントエンドエンジニアの採用には苦戦しており、採用が難しい点について概ね事実かと思います。 その差が出たのは、元記事で指摘されている通り、 "React & Vue.js" vs "Angular" の勢力の別れ方が大きいかと思います。 Vue.js と Angular を触った経験としては、パラダイムというか宗派が異なる部分は確かにあるという感触です。 一方でこの記事の読者に気をつけていただきたいのは、 Angular と React
Ivyが単体テストにもたらした恩恵 - Qiita
今年のAngularアドカレはテストの話題が豊富ですね。 Angular8 ユニットテストが動かねぇ！ や はじめてのユニットテストを書く前にモック実装で手が止まってしまわないために など、テストコードを書く上での知見が色々と紹介されています。 僕自身も3年前のアドカレで、Zone.jsがいかにAngularのテストに貢献しているかとかを書いたりしたことがあり、Angularの色々な機能の中でもテスト周りは特に好きな部分の1つだったります。 さて、Angularで直近ホットだった話題といえば、やはりIvyは外せません。 Ivy自体は基本的に内部構造の変更であるため、アプリケーションコードの書き方そのものに影響する話ではないですが、AoT(Ahead of Time)コンパイルをデフォルトにするための布石であり、バンドルサイズの削減やビルドプロセスがシンプルになる、といった効果については聞い
JSer.info #669 - Angular v17リリースがリリースされました。 Introducing Angular v17. Last month marked the 13th anniversary… | by Minko Gechev | Nov, 2023 | Angular Blog Release v17.0.0 · angular/angular Node.js 16のサポート終了、ドキュメントサイトの刷新、@ifや@forなどのbuilt-in control flowが追加されています。 新しいプロジェクトでのSSRにおけるhydrationがデフォルトで有効に、ng serveとng buildにViteとesbuildを利用するようになるといった変更も含まれています。 Prettier 3.1がリリースされました。 Prettier 3.1: New ex
VSCode、便利ですよね。 ですが、デフォルトの設定だとAngularアプリの開発には少々不向きなので拡張機能で充実させましょう。 Angular Support HTML<->Typescriptと双方に定義へ飛ぶことができます。 vscode-angular-html これを使えば、HTMLにAngular用のシンタックスハイライトを追加してくれます。 適用前 適用後 インラインスタイルにも適用されます。 Angular Material 2, Flex layout 1, Covalent 1 & Material icon snippets 個人的にこれに一番助けられてます。 Angular Materialのコンポーネントを補完してくれます。
20190612 oretoku-frontend justice-for-frontend
The document introduces Yuta Suzuki, a software engineer who previously worked as a frontend engineer. It provides details on his technical skills such as TypeScript, Angular, Node, and Jasmine. It also mentions he participated in an event called crossparty2019 and likes TypeScript in Japan. The document contains instructions for cloning a repository, modifying the package.json file, and installin
Angularアプリケーションの状態管理の方法はさまざまな実装がありえるが、その中でも典型的ないくつかのパターンを、それがどのようなニーズがあって選ばれるのかという考察を踏まえながら列挙する。パターンとその特徴を例示するのであって、それぞれのパターンにおける最良の実装を示すものでもないし、これらのパターンに該当しない実装を否定するものでもない。 Standalone Componentsなど、Angularのメンタルモデルが変わっていく兆しを見せる今、これらをまとめておくことは諸々のAngularアプリケーションの状態管理のあり方を見直すきっかけになるのでないかと思う。特に、NgRxがデファクトスタンダードであり唯一の選択肢だと考えている人には、それが単にひとつの選択肢であることを思い出してもらえるのではないだろうか。 コンポーネントクラスによる直接の状態管理一番最初のパターンは、次の例の
Angular のための RxJS
On the Angular team, we believe testing is critical to build highly complex and scalable applications effectively. Testing takes many forms, and “unit tests” focus on testing the smallest units of a codebase. For Angular applications, this typically includes tests of individual components or services. We regularly survey Angular developers to make sure we are always providing the best experience,
なぜentryComponentsは非推奨になるのか
この記事では、Angular v9.0にて非推奨となる entryComponents 機能が、なぜ非推奨になるのかについてできるだけ簡単に解説します。 Angular - Deprecated APIs and Features はじめに 解説を始める前に、重要な点をあらかじめ書き記しておきます。 もしIvyをオプトアウトする場合は、 entryComponents は引き続き必要です。決して削除しないでください。 いままで entryComponents 機能を使ったことがない方が新たになにか覚える必要はありません。興味がなければ過去のものとして無視してください。 entryComponents とは何なのか v9.0 で非推奨となる entryComponents とは何だったのかということをまずは振り返りましょう。 entryComponents は多くの場合、 動的なコンポーネン
[社内ハンズオン資料] Angular+Firebaseで作るTODOアプリケーション | DevelopersIO
大阪オフィスのフロントエンド勉強会で使用したAngular+Firebaseハンズオンの資料を公開します。勉強用のサンプルアプリケーションとして活用していただければ幸いです。 どうも！大阪オフィスの西村祐二です。 大阪オフィスではフロントエンド勉強会を隔週で行っており、そこでAngular+Firebaseで作るTODOアプリケーションのハンズオン行ったのでその資料を公開します。 勉強のためのサンプルアプリケーションとしてお役に立てれば幸いです。 ゴール 下記のようなTODOアプリケーションを実装します。 主な機能として下記になります。 TODOの追加削除 Drag And DropでTODOを移動させてデータを更新 Googleアカウントでログイン・ログアウト TODO追加入力フォームのバリデーション バックエンドはFirebaseを利用しています。 利用するツール Angular An
![[社内ハンズオン資料] Angular+Firebaseで作るTODOアプリケーション | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/6e0940ba64874bd2343c7288634d9d170730b2e5/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2020%2F03%2Fangular9-eyecatch-1200x630-1.jpg)
Welcome to Snyk's State of JavaScript frameworks security report 2019. In this report, we investigate the state of security for both the Angular and React ecosystems. This report by no means intends to venture into any rivalries that may exist between the two in terms of whether one or the other is a true framework - we are not comparing them as competitive frameworks at all. Instead, we review th
Angular でテストコードの書き方を纏めました
否定形も使えて、その場合はnot.MatcherとすればOKです。 expect(xxx).not.ToEqual(yyy)サービスやパイプのテストは簡単ですが、コンポーネントのテストが大変です。 デフォルトで用意されているapp.component.spec.tsファイルを見るとよくわかると思います。 beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ AppComponent // ここにテストコンポーネントを追加する ], }).compileComponents(); }));beforeEachメソッドでTestBed.configureTestingModuleメソッドでテストコンポーネントを定義します。 TestBed.createComponentメソッド このメソッドでコンポー
RESTとトランザクション - Qiita
状況 あなたはいま新たなWEBサービスの開発に, サーバサイドのプログラマとして参加しています. このサービスはJavascriptで動くクライアントサイドと, REST形式のAPIを提供するサーバサイドで構成されています. 初期の打ち合わせの結果, サービスのビジネスロジックは最大限クライアントサイドに実装し, サーバサイドはDBの薄いラッパー程度の簡単なものとして実装していく方針でまとまりました. サーバサイドの開発は順調に進んでいっていました, ある日クライアントサイドのプログラマからこんな相談を受けるまでは. 「この画面の処理で３種類のリソースを保存する必要があるのだけれど, いずれかの処理に失敗した場合は 残り２つのリソースに対する変更も取り消したいたいんだ. どうやったらいいと思う?」 当然ながら, DBMSが提供するトランザクション機能が使えれば特に問題のない話ではある. し
Microsoftは米国時間2019年8月21日、Webアプリケーション開発を高速化するVisual Studio Codeの拡張機能「Web Template Studio(以下、WebTS)」が大きく進化したことを公式ブログを通じてアピールした。なお、WebTSのソースコードはGitHubで公開している。 新たなWebTSはコミュニティからのフィードバックに基づいて、AngularやVue.js、Flaskといったフレームワークを新たに追加。バックエンドフレームワークはFlaskを加えて、Node.jsとFlaskいずれかを選択できる。Webアプリケーション開発時のウィザードも再設計し、テンプレートの見直しや、クラウドホスティング用にApp Serviceを追加した。 新たにフロントフレームワークとしてReact.js、Vue.js、Angular、バックエンドフレームワークとしてFl
Angularのゼミを作りたい話 - 余白
ふわっと考えていることの書き起こし。 最近、Angularのゼミのようなものを作りたいと思っている。 目的はいくつかあって、Angularのコントリビューターを増やしたいし、Angularについて日本各地でしっかり話せる人を増やしたいし、まだ僕一人しかいない日本のAngular GDEも増えてくれるとうれしい。 つまり、仕事で使いこなしたいとかそういう次元を越えて、Angularへの愛に突き動かされる同志を増やしたい。 しかしそういった人物をどのように見つければいいのか全くわからず、いろいろと考えている。 最初からそんな状態の人はいないだろうという前提に立って、僕が導き手にならないといけないだろうなとは思っている。 ただ、愛は他人が何かしてどうこうなるものでもないので、モチベーションというか素質というか熱量というか、そういう「心」的なものは育てられないと思う。 教えられることといえば知識と
Angular公式のi18nパッケージ（パッケージ名 @angular/locale）がとても出来がよく、DeepLを使った自動翻訳も簡単にできたので、何がよかったかをご紹介したいと思います。「いやいやそんなのまだまだだ」「こっちのツールの方が強強だ」という方はぜひ記事を書いていただき、知見を共有できれば幸いです。 Angular i18nというと「Angular公式のi18nパッケージ」（ @angular/locale ）と「Angularのi18n化（国際化）」の2つの意味がありややこしいですが、本文では前者の「Angular公式のi18nパッケージ」を指すことにします。 Angular i18nのよかったこと4選 私が採用してとても開発者体験がよかった点を4つご紹介したいと思います。 1. compiletime i18nによりパフォーマンスの問題がない まず、SPAの多言語化には
Photo by All Bong on Unsplash 概要 アプリケーション開発において設計は非常に重要です。 本記事では Todo アプリを例に、これまで取り組んできた React アプリケーションのアーキテクチャや実装パターンを紹介します。 このアーキテクチャは筆者の Angular を用いたアプリケーション開発の経験が元になっており、Angular のオピニオンや Angular コミュニティで紹介された設計手法が含まれています。 コンセプト コンポーネントとロジックの分離を基本とし、依存関係を単方向にします。 下記に実装例を示します。 Angular アプリケーションに適用した場合 https://github.com/puku0x/todo-angular React アプリケーションに適用した場合 https://github.com/puku0x/todo-react
[Angular8]サイトを簡単スタイリング！Angular Flex-Layoutの使い方をまとめてみた | DevelopersIO
どうも！大阪オフィスの西村祐二です。 フッター、ヘッターのレイアウトなど、画面のスタイリングをする際に、CSSのFlexboxなどで記載していく人は多いのではないでしょうか。 AngularではCSSのFlexboxをCSSファイルに書かず、HTMLタグ(ディレクティブ)を設定するだけで、簡単にFlexboxを設定できるライブラリAngular Flex-Layoutが公式から提供されています。 ex) <div fxLayout="row" fxLayoutAlign="space-between"> </div> 今回はそのAngular Flex-Layoutの使い方をまとめてみます。 目次 環境 試していく環境を準備 早速試していく！ fxLayout 子要素の並ぶ向き fxLayoutAlign 要素の整列順 fxLayoutGap 要素間のマージン設定 Grid Mode fx
Angular v11.0.0のリリースとともに、Angularの開発ロードマップも更新された。 この記事では開発ロードマップから “Migrate To ESLint” が消えたことと、Lintingに関するAngular CLIの動きについて簡単にまとめる。 TL;DR要点だけ知りたい人は次のことだけ持ち帰って欲しい。 TSLintからESLintへの移行はサードパーティのangular-eslintの利用を公式に推奨している Angular CLIのデフォルトLinter(TSLint)はv12で非推奨になる angular-eslintAngularチームがTSLintからESLintへの移行を考え始める以前から、angular-eslintプロジェクトはTSLint+Codelyzerの機能をESLintで再現するツールを開発してきた。 近々angular-eslintのリリース
JSer.info #579 - Parcel 2.3.0がリリースされました。 Release v2.3.0 · parcel-bundler/parcel ParcelでParcel自体のいくつかの依存関係を事前にbundleするように変更。 Node Core ModulesのpolyfillやBabel/PostCSSの依存関係をオンデマンドでインストールするように変更などの変更が含まれています。 Reduce the number of npm dependencies needed by parcel by devongovett · Pull Request #7576 · parcel-bundler/parcel Vite 2.8.0がリリースされています。 vite/CHANGELOG.md at main · vitejs/vite macOS Montereyで50
Angular: Lightweight Injection Tokenという新しいテクニック | Marginalia
最近Angularチームが発見し、Angularライブラリの実装におけるパターンとして普及させようとしているのが、 Lightweight Injection Token というテクニックだ。これはこれまで不可能だった コンポーネント(ディレクティブ)のTree-Shaking を可能にする。本稿ではこの新しいテクニックの概要、そして生まれた経緯や深く知るための参考リンクをまとめる。 なお、Lightweight Injection Tokenについては公式ドキュメントでも解説される予定であるため、そちらを参照すればいい部分は省略する。 Angular - Optimizing client app size with lightweight injection tokens Lightweight Injection Tokenの概要ひとことでいえば、「オプショナルな機能に関連するInj
Photo by Craig Adderley from PexelsIn January of 2018 we laid out our plans for the final releases of AngularJS before entering long-term support and last year, we extended the LTS due to the global pandemic until December 31, 2021. Well, friends, the time has come and we’re no longer supporting AngularJS. We’re incredibly proud of the work that has been done with AngularJS and the way it evolved
本稿では Nx を使ったAngular+Nest.jsのmonorepoアプリケーションを単一のDockerイメージとしてデプロイ可能にする手順を記す。 サンプルコードの最終的な状態は以下のリポジトリに公開している。 https://github.com/lacolaco/nx-angular-nest-docker-example 0. 背景一般的にはSingle Page Applicationのクライアントとサーバーは別のコンテナとしてデプロイされNginxなどで静的ファイルへのリクエストとAPIリクエストを振り分けることが多いが、今回はあえて単一のDockerコンテナでHTTPサーバーを立ち上げ、そのサーバーから静的ファイルとしてクライアントをサーブする。 なぜかというと、今回はGoogle Cloud Runにアプリケーションをデプロイすることが目的だからだ。Cloud Runに
Gears – Bartosz Ciechanowski
I’ve always been fascinated by mechanical gears. There is something captivating about the way their teeth come together to create a fluid, unified motion: In this blog post I’d like to look at these simple machines up close. I’ll explain how gears affect the properties of rotational motion and how the shape of their teeth is way more sophisticated than it may initially seem. Movement is important
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
改良の継続と次世代への進化に注目！ 「Angular」バージョン8の新機能
DI(Dependency Injection)のメリットを理解する
Go, Clojure, マイクロサービス…コロナを技術で乗り越えろ！飲食スタートアップの挑戦
Introducing the new Firebase JS SDK
Angular struggles in 2020
2021年に使いたいAngularサードパーティライブラリ10選
npmでpermission deniedになった時の対処法[mac] - Qiita
AngularのDragDropModuleを使ってToDoリストを作る | DevelopersIO
はじめてのNgRx v8を使ったAngularアプリケーション | DevelopersIO
2023-11-16のJS: Angular v17、Prettier 3.1、Node.js v21.2.0
Angularの開発が捗る！オススメのVSCode拡張機能 | DevelopersIO
Angularアプリケーションの状態管理パターン | Marginalia
Angular のための RxJS
Moving Angular CLI to Jest and Web Test Runner
JavaScript frameworks security report 2019 | Snyk
MS、Webアプリケーション開発の「Web Template Studio 2.0」リリース
半自動で多言語・国際化を実現できるAngular i18nがすごい。DeepLでの自動翻訳も紹介
Angular/React両方を経験して得られた堅牢なアプリケーション設計
Angular: ESLintサポートの現状 2020 Autumn | Marginalia
2022-02-14のJS: Parcel 2.3.0、Vite 2.8.0、Angular Compilerがどのように動いているか、JavaScriptでDDD
Discontinued Long Term Support for AngularJS
Nx: Angular+Nest.jsアプリをDockerビルドする | Marginalia