Angular

Angular

Angular8で追加された新機能Differential Loading(差分ロード)

Angular8で追加された新機能Differential Loading(差分ロード) 去年の末あたりにAngular7がリリースされたと思ったのですが、もうすでにAngular8がリリースされました。大体半年スパンでメジャーバージョン...
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とコマンドを...
Angular

Angular5の@ViewChildと@ViewChildrenの違い

Angular5の@ViewChildと@ViewChildrenの違い Angular の@ViewChildren もしくは @ViewChildを使用して親コンポーネントから子コンポーネントのメソッドなどにアクセスできるようになりま...
Angular

Angular7からドラッグアンドドロップが色々できるようになっています

Angular7からドラッグアンドドロップが色々できるようになっています
Angular

Angular7ではIvyは含まれておらず、開発中とのことです

Angular7ではIvyは含まれておらず、開発中とのことです 次世代レンダリングエンジンのIvyは、Angular7には含まれていないようです。 公式ブログによると、「現在、下位互換性を検証中!」とのことで、もうじきIvyになると思わ...
Angular

Angular6からAngular7にバージョンアップする方法

Angular6からAngular7にバージョンアップする方法 Angularは6か月毎にメジャーバージョンアップしていますが、2018/10/19にAngular7が正式にリリースされました。 Angular6からAngular7にバ...
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 ...
Angular

Cannot find module ‘@angular/compiler-cli’

Cannot find module '@angular/compiler-cli' ng serve --oでこのエラーが発生したら、node_modulesを一旦消して npm install で解決しました。
Angular

Angular で右クリックを検知する方法

Angular で右クリックを検知する方法
Angular

Angular をIEでデバッグする方法

Angular をIEでデバッグする方法 VSCodeのプラグインにChrome for Debuggerをインストールしておきます。 launch.jsonに「」を登録しておき、ng serveしたらF5を押します。 そうするとCh...
Angular

Angular で別端末のブラウザからng serveを確認する方法

Angular で別端末のブラウザからng serveを確認する方法 MacのVSCodeで開発していて、WindowsのIE11で動作確認したくなりました。 VSCodeのターミナルでng serveの--hostオプションを使用する...
Angular

Angular のJITコンパイラとAOTコンパイラ

Angular のJITコンパイラとAOTコンパイラ AngularにはコンパイラがJITとAOTがあります。 JITは実行時にブラウザでアプリケーションをコンパイルします。 AOTはビルド時にアプリケーションをコンパイルします。また...
Angular

Angular でウィンドウズアプリ(EXE)を起動する方法

Angular でウィンドウズアプリ(EXE)を起動する方法
Angular

Angular CLIでプロキシファイルを設定する方法

Angular CLIでプロキシファイルを設定する方法 Angular開発時にフロントエンドがAngularでAPIがJavaだったりするとそれぞれローカル開発環境が異なると思います。 Angular : java: こんな感じ...
Angular

jasmineのitに第三引数でミリ秒が指定できる

jasmineのitに第三引数でミリ秒が指定できる Angularのテストコードの書き方については「Angular でテストコードの書き方を纏めました」でほぼほぼ書きました。あとはディレクティブのテストがダミーのコンポーネント作ってあげた...
Angular

AngularのテストをChromeではなくIEでしてみる方法

AngularのテストをChromeではなくIEでしてみる方法 Angularのテストコードの書き方については「Angular でテストコードの書き方を纏めました」で結構書いたつもりです。新たに新規記事でIEブラウザでテストする方法を書い...
Angular

AngularでMutationObserverの使い方

AngularでMutationObserverの使い方
Angular

Angular でサブディレクトリにビルドする方法

Angular でサブディレクトリにビルドする方法 Angularでビルドするには ng build もしくはpackage.jsonのnpm-scriptsを変更していないなら npm run build を実行すれば、srcと...
Angular

Angular の@ViewChildの使い方

Angular の@ViewChildの使い方 Angular の@ViewChildを使えば、parent to view child というように親コンポーネントから子コンポーネントのメソッドなどにアクセスできるようになります。 ま...
Angular

Angular の@HostListener の使い方

Angular の@HostListener の使い方
Angular

Angular でカバレッジレポートを出力する

Angular でカバレッジレポートを出力する
Angular

Angular でテストコードの書き方を纏めました

Angular でテストコードの書き方を纏めました
Angular

Angular の#(シャープ)がつく変数

Angular の#(シャープ)がつく変数
Angular

Angular でデコレータを作成してみる

Angular でデコレータを作成してみる Angular で独自にデコレータを作成してみます。例えばあるイベントハンドラが呼ばれたときにDBに登録する、といったことがデコレータで実現することができます。 が、面倒なのでここではコンソー...
Angular

Angular でpipeの使い方

Angular でpipeの使い方 Angular にはpipeという機能があります。データをフォーマットするための仕組みです。 {{式 | パイプ名}} というように記述します。Angular には標準でいくつか標準で提供されている...
Angular

Angular でEnum型を初期化してテンプレートで使用する方法

Angular でEnum型を初期化してテンプレートで使用する方法
Angular

Angular のテンプレート参照変数の使い方

Angular のテンプレート参照変数の使い方
Angular

Angularにng-bootstrapをインストールする方法と使い方

Angularにng-bootstrapをインストールする方法と使い方 ng-bootstrap をインストールする方法です。 npm install --save @ng-bootstrap/ng-bootstrap ng-boot...
Angular

Angular の[disabled]バインディングはtrueかfalseで効くようです

Angular の[disabled]バインディングはtrueかfalseで効くようです
Angular

Angular のngClass ディレクティブの使い方

Angular のngClass ディレクティブの使い方
Angular

Angular のルーティングの基本とRoutes の使い方

Angular のルーティングの基本とRoutes の使い方 Angularにはルーティングという機能があります。描画領域をコントロールする仕組みです。 ルーティングを実現させるには、RoutesとRouterModuleをインポートす...
Angular

Angular のObservable とSubject でRxJSの仕組みを理解する

Angular のObservable とSubject でRxJSの仕組みを理解する RxJSを使って簡単なデータの受け渡しをします。 まずコンポーネントを作成します。 ng generate component abc ちなみに...
Angular

Angular の@Output の使い方

Angular の@Output の使い方 @Inputの使い方は理解しやすいですが、@Outputの使い方は理解するのが少し難しい気がします。 コンポーネントとコンポーネントの連携ではなく、コンポーネントの中にコンポーネントが存在する...
Angular

Angular のtrigger 関数でアニメーションを実装する方法

Angular のtrigger 関数でアニメーションを実装する方法 trrigerをインポートしてアニメーションを実装しますが、app.module.tsファイルにBrowserAnimationsModuleをインポートする必要があり...
Angular

Angular のサービスクラスの作り方

Angular のサービスクラスの作り方 コンポーネントは部品です。テンプレートはビューです。ではサービスはというと、サーバーからデータを取得してくるビジネスロジックに当たります。 Angular のサービスクラスの特徴として、@Inj...
Angular

Angular で複数コンポーネントを連携する

Angular で複数コンポーネントを連携する Angular でコンポーネントとコンポーネントを連携する方法です。 abcとdefというコンポーネントを作成して実際に連携させてみます。 コンポーネント間の連携ではclassを定義して...
Angular

Angular の標準のパイプ機能の使い方

Angular の標準のパイプ機能の使い方 Angular にはパイプというビュー上の変数を加工(整形)する機能です。 例えば姓名が格納されている変数の末尾に「様」をつける、などがパイプを使って加工する機能例になります。 記述例は以下...
Angular

Angular でTypeScript のエイリアス機能を利用してimport文を簡潔に記述する

Angular でTypeScript のエイリアス機能を利用してimport文を簡潔に記述する Angular プロジェクトを作成すると、プロジェクト名 - src -tsconfig.jsonファイルが作成されます。 tsconfi...
Angular

Angular でコンポーネントのスタイルシートをcssからstylusに変更する方法

Angular でコンポーネントのスタイルシートをcssからstylusに変更する方法 ng generate component コンポーネント名で、コンポーネントを作成すると以下のファイルが作成されます。 ファイル名 ...
Angular

Angular のngFor ディレクティブの使い方

Angular のngFor ディレクティブの使い方 AngularにはngForディレクティブというディレクティブが標準で用意されています。 for文でループする機能です。記述方法は以下の通りです。 <xxx *ngFor='...
Angular

Angular のngIf ディレクティブの使い方

Angular のngIf ディレクティブの使い方
Angular

Angularのデータバインディングという仕組み

Angularのデータバインディングという仕組み
Angular

Angular で初期化時にTitleサービスを使用してタイトルを設定する

Angular で初期化時にTitleサービスを使用してタイトルを設定する
Angular

Angularにngx-bootstrapをインストールする方法

Angularにngx-bootstrapをインストールする方法 ngx-bootstrapをインストールして、Angular6で使用する方法です。 npm install ngx-bootstrap --save ngx-boots...
Angular

AngularとTypeScriptでSPAを作成する

AngularとTypeScriptでSPAを作成する VS Codeが「VS Live Share」なんて便利なものを出してきたのでペアプログラミングができるし、エディタはVS Codeを使いましょう。 nodeはnodistでとりえ...
タイトルとURLをコピーしました