Angular Reactive Formsでフォーム作成方法 – Angular Reactive Formsでフォーム作成方法 - Angular 項目 バージョン Angular 16.0.2 node 18.16.0 npm 9.5.1 プロジェクト作成 プロジェクト作成します。 $ ng n reactive-t... 2023.05.23 Angular
Angular Visual Studio CodeにESLintプラグインをインストールする方法(Prettier連携) – Angular Visual Studio CodeにESLintプラグインをインストールする方法(Prettier連携) - Angular プラグイン VSCodeにESLintプラグインをインストールします。 依存関係インストール $ npm i -... 2023.05.20 AngularESLint
Angular Angular8で追加された新機能Differential Loading(差分ロード) Angular8で追加された新機能Differential Loading(差分ロード) 去年の末あたりにAngular7がリリースされたと思ったのですが、もうすでにAngular8がリリースされました。大体半年スパンでメジャーバージョンが... 2019.06.07 Angular
Angular The serve command requires to be run in an Angular project, but a project definition could not be found. The serve command requires to be run in an Angular project, but a project definition could not be found. ng serveとコマンドを打... 2018.12.08 Angular
Angular Angular5の@ViewChildと@ViewChildrenの違い Angular5の@ViewChildと@ViewChildrenの違い Angular の@ViewChildren もしくは @ViewChildを使用して親コンポーネントから子コンポーネントのメソッドなどにアクセスできるようになります... 2018.11.29 Angular
Angular Angular7ではIvyは含まれておらず、開発中とのことです Angular7ではIvyは含まれておらず、開発中とのことです 次世代レンダリングエンジンのIvyは、Angular7には含まれていないようです。 公式ブログによると、「現在、下位互換性を検証中!」とのことで、もうじきIvyになると思われま... 2018.11.23 Angular
Angular Angular6からAngular7にバージョンアップする方法 Angular6からAngular7にバージョンアップする方法 Angularは6か月毎にメジャーバージョンアップしていますが、2018/10/19にAngular7が正式にリリースされました。 Angular6からAngular7にバージ... 2018.11.23 Angular
Angular Could not find module “@angular-devkit/build-angular” Could not find module "@angular-devkit/build-angular" こんなエラーが出たら npm install --save-dev @angular-devkit/build-angular で解... 2018.11.22 Angular
Angular Cannot find module ‘@angular/compiler-cli’ Cannot find module '@angular/compiler-cli' ng serve --oでこのエラーが発生したら、node_modulesを一旦消して npm install で解決しました。 2018.11.21 Angular
Angular Angular をIEでデバッグする方法 Angular をIEでデバッグする方法 VSCodeのプラグインにChrome for Debuggerをインストールしておきます。 launch.jsonに「」を登録しておき、ng serveしたらF5を押します。 そうするとChrom... 2018.10.27 Angular
Angular Angular で別端末のブラウザからng serveを確認する方法 Angular で別端末のブラウザからng serveを確認する方法 MacのVSCodeで開発していて、WindowsのIE11で動作確認したくなりました。 VSCodeのターミナルでng serveの--hostオプションを使用すると実... 2018.10.25 Angular
Angular Angular のJITコンパイラとAOTコンパイラ Angular のJITコンパイラとAOTコンパイラ AngularにはコンパイラがJITとAOTがあります。 JITは実行時にブラウザでアプリケーションをコンパイルします。 AOTはビルド時にアプリケーションをコンパイルします。また、テン... 2018.10.23 Angular
Angular Angular CLIでプロキシファイルを設定する方法 Angular CLIでプロキシファイルを設定する方法 Angular開発時にフロントエンドがAngularでAPIがJavaだったりするとそれぞれローカル開発環境が異なると思います。 Angular : java: こんな感じで開発するこ... 2018.10.17 Angular
Angular jasmineのitに第三引数でミリ秒が指定できる jasmineのitに第三引数でミリ秒が指定できる Angularのテストコードの書き方については「Angular でテストコードの書き方を纏めました」でほぼほぼ書きました。あとはディレクティブのテストがダミーのコンポーネント作ってあげたり... 2018.08.23 Angular
Angular AngularのテストをChromeではなくIEでしてみる方法 AngularのテストをChromeではなくIEでしてみる方法 Angularのテストコードの書き方については「Angular でテストコードの書き方を纏めました」で結構書いたつもりです。新たに新規記事でIEブラウザでテストする方法を書いて... 2018.08.22 Angular
Angular TypeScriptでDOM要素を作成する TypeScriptでDOM要素を作成する Angularが公式にサポートしている言語はTypeScriptなので、TypeScriptでDOMの操作をしてみます。JSと変わりありませんが、型(インタフェース名)は意識する必要があります。 ... 2018.08.13 AngularTypeScript
Angular Angular でサブディレクトリにビルドする方法 Angular でサブディレクトリにビルドする方法 Angularでビルドするには ng build もしくはpackage.jsonのnpm-scriptsを変更していないなら npm run build を実行すれば、srcと同じ階層の... 2018.08.04 Angular
Angular Angular の@ViewChildの使い方 Angular の@ViewChildの使い方 Angular の@ViewChildを使えば、parent to view child というように親コンポーネントから子コンポーネントのメソッドなどにアクセスできるようになります。 またコ... 2018.08.03 Angular
Angular Angular でデコレータを作成してみる Angular でデコレータを作成してみる Angular で独自にデコレータを作成してみます。例えばあるイベントハンドラが呼ばれたときにDBに登録する、といったことがデコレータで実現することができます。 が、面倒なのでここではコンソール出... 2018.07.07 Angular
Angular Angular でpipeの使い方 Angular でpipeの使い方 Angular にはpipeという機能があります。データをフォーマットするための仕組みです。 {{式 | パイプ名}} というように記述します。Angular には標準でいくつか標準で提供されているpip... 2018.07.03 Angular
Angular Angularにng-bootstrapをインストールする方法と使い方 Angularにng-bootstrapをインストールする方法と使い方 ng-bootstrap をインストールする方法です。 npm install --save @ng-bootstrap/ng-bootstrap ng-bootstr... 2018.06.07 Angular
Angular Angular の[disabled]バインディングはtrueかfalseで効くようです Angular の[disabled]バインディングはtrueかfalseで効くようです 2018.06.07 Angular
Angular Angular のルーティングの基本とRoutes の使い方 Angular のルーティングの基本とRoutes の使い方 Angularにはルーティングという機能があります。描画領域をコントロールする仕組みです。 ルーティングを実現させるには、RoutesとRouterModuleをインポートする必... 2018.06.01 Angular
Angular Angular のObservable とSubject でRxJSの仕組みを理解する Angular のObservable とSubject でRxJSの仕組みを理解する RxJSを使って簡単なデータの受け渡しをします。 まずコンポーネントを作成します。 ng generate component abc ちなみにAngu... 2018.05.31 Angular
Angular Angular の@Output の使い方 Angular の@Output の使い方 @Inputの使い方は理解しやすいですが、@Outputの使い方は理解するのが少し難しい気がします。 コンポーネントとコンポーネントの連携ではなく、コンポーネントの中にコンポーネントが存在するよう... 2018.05.30 Angular
Angular Angular のtrigger 関数でアニメーションを実装する方法 Angular のtrigger 関数でアニメーションを実装する方法 trrigerをインポートしてアニメーションを実装しますが、app.module.tsファイルにBrowserAnimationsModuleをインポートする必要がありま... 2018.05.30 Angular
Angular Angular のサービスクラスの作り方 Angular のサービスクラスの作り方 コンポーネントは部品です。テンプレートはビューです。ではサービスはというと、サーバーからデータを取得してくるビジネスロジックに当たります。 Angular のサービスクラスの特徴として、@Injec... 2018.05.28 Angular
Angular Angular で複数コンポーネントを連携する Angular で複数コンポーネントを連携する Angular でコンポーネントとコンポーネントを連携する方法です。 abcとdefというコンポーネントを作成して実際に連携させてみます。 コンポーネント間の連携ではclassを定義しておくこ... 2018.05.25 Angular
Angular Angular の標準のパイプ機能の使い方 Angular の標準のパイプ機能の使い方 Angular にはパイプというビュー上の変数を加工(整形)する機能です。 例えば姓名が格納されている変数の末尾に「様」をつける、などがパイプを使って加工する機能例になります。 記述例は以下の通り... 2018.05.25 Angular
Angular Angular でTypeScript のエイリアス機能を利用してimport文を簡潔に記述する Angular でTypeScript のエイリアス機能を利用してimport文を簡潔に記述する Angular プロジェクトを作成すると、プロジェクト名 - src -tsconfig.jsonファイルが作成されます。 tsconfig.... 2018.05.24 AngularTypeScript
Angular Angular でコンポーネントのスタイルシートをcssからstylusに変更する方法 Angular でコンポーネントのスタイルシートをcssからstylusに変更する方法 ng generate component コンポーネント名で、コンポーネントを作成すると以下のファイルが作成されます。 ファイル名 コンポーネント名.... 2018.05.24 Angular
Angular Angular のngFor ディレクティブの使い方 Angular のngFor ディレクティブの使い方 AngularにはngForディレクティブというディレクティブが標準で用意されています。 for文でループする機能です。記述方法は以下の通りです。 <xxx *ngFor='let 仮引... 2018.05.23 Angular
Angular Angular で初期化時にTitleサービスを使用してタイトルを設定する – ngOnInit Angular で初期化時にTitleサービスを使用してタイトルを設定する 2018.05.18 Angular
Angular Angularにngx-bootstrapをインストールする方法 Angularにngx-bootstrapをインストールする方法 ngx-bootstrapをインストールして、Angular6で使用する方法です。 npm install ngx-bootstrap --save ngx-bootstra... 2018.05.17 Angular
Angular AngularとTypeScriptでSPAを作成する AngularとTypeScriptでSPAを作成する 前提 項目 バージョン OS Windows10 node v18.16.0 VS Codeが「VS Live Share」なんて便利なものを出してきたのでペアプログラミングができるし... 2018.05.15 Angular