AngularAngular8で追加された新機能Differential Loading(差分ロード) Angular8で追加された新機能Differential Loading(差分ロード) 去年の末あたりにAngular7がリリースされたと思ったのですが、もうすでにAngular8がリリースされました。大体半年スパンでメジャーバージョン...2019.06.07Angular
AngularThe 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.08Angular
AngularAngular5の@ViewChildと@ViewChildrenの違い Angular5の@ViewChildと@ViewChildrenの違い Angular の@ViewChildren もしくは @ViewChildを使用して親コンポーネントから子コンポーネントのメソッドなどにアクセスできるようになりま...2018.11.29Angular
AngularAngular7ではIvyは含まれておらず、開発中とのことです Angular7ではIvyは含まれておらず、開発中とのことです 次世代レンダリングエンジンのIvyは、Angular7には含まれていないようです。 公式ブログによると、「現在、下位互換性を検証中!」とのことで、もうじきIvyになると思わ...2018.11.23Angular
AngularAngular6からAngular7にバージョンアップする方法 Angular6からAngular7にバージョンアップする方法 Angularは6か月毎にメジャーバージョンアップしていますが、2018/10/19にAngular7が正式にリリースされました。 Angular6からAngular7にバ...2018.11.23Angular
AngularCould 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.22Angular
AngularCannot find module ‘@angular/compiler-cli’ Cannot find module '@angular/compiler-cli' ng serve --oでこのエラーが発生したら、node_modulesを一旦消して npm install で解決しました。2018.11.21Angular
AngularAngular をIEでデバッグする方法 Angular をIEでデバッグする方法 VSCodeのプラグインにChrome for Debuggerをインストールしておきます。 launch.jsonに「」を登録しておき、ng serveしたらF5を押します。 そうするとCh...2018.10.27Angular
AngularAngular で別端末のブラウザからng serveを確認する方法 Angular で別端末のブラウザからng serveを確認する方法 MacのVSCodeで開発していて、WindowsのIE11で動作確認したくなりました。 VSCodeのターミナルでng serveの--hostオプションを使用する...2018.10.25Angular
AngularAngular のJITコンパイラとAOTコンパイラ Angular のJITコンパイラとAOTコンパイラ AngularにはコンパイラがJITとAOTがあります。 JITは実行時にブラウザでアプリケーションをコンパイルします。 AOTはビルド時にアプリケーションをコンパイルします。また...2018.10.23Angular
AngularAngular CLIでプロキシファイルを設定する方法 Angular CLIでプロキシファイルを設定する方法 Angular開発時にフロントエンドがAngularでAPIがJavaだったりするとそれぞれローカル開発環境が異なると思います。 Angular : java: こんな感じ...2018.10.17Angular
Angularjasmineのitに第三引数でミリ秒が指定できる jasmineのitに第三引数でミリ秒が指定できる Angularのテストコードの書き方については「Angular でテストコードの書き方を纏めました」でほぼほぼ書きました。あとはディレクティブのテストがダミーのコンポーネント作ってあげた...2018.08.23Angular
AngularAngularのテストをChromeではなくIEでしてみる方法 AngularのテストをChromeではなくIEでしてみる方法 Angularのテストコードの書き方については「Angular でテストコードの書き方を纏めました」で結構書いたつもりです。新たに新規記事でIEブラウザでテストする方法を書い...2018.08.22Angular
AngularAngular でサブディレクトリにビルドする方法 Angular でサブディレクトリにビルドする方法 Angularでビルドするには ng build もしくはpackage.jsonのnpm-scriptsを変更していないなら npm run build を実行すれば、srcと...2018.08.04Angular
AngularAngular の@ViewChildの使い方 Angular の@ViewChildの使い方 Angular の@ViewChildを使えば、parent to view child というように親コンポーネントから子コンポーネントのメソッドなどにアクセスできるようになります。 ま...2018.08.03Angular
AngularAngular でデコレータを作成してみる Angular でデコレータを作成してみる Angular で独自にデコレータを作成してみます。例えばあるイベントハンドラが呼ばれたときにDBに登録する、といったことがデコレータで実現することができます。 が、面倒なのでここではコンソー...2018.07.07Angular
AngularAngular でpipeの使い方 Angular でpipeの使い方 Angular にはpipeという機能があります。データをフォーマットするための仕組みです。 {{式 | パイプ名}} というように記述します。Angular には標準でいくつか標準で提供されている...2018.07.03Angular
AngularAngularにng-bootstrapをインストールする方法と使い方 Angularにng-bootstrapをインストールする方法と使い方 ng-bootstrap をインストールする方法です。 npm install --save @ng-bootstrap/ng-bootstrap ng-boot...2018.06.07Angular
AngularAngular の[disabled]バインディングはtrueかfalseで効くようです Angular の[disabled]バインディングはtrueかfalseで効くようです2018.06.07Angular
AngularAngular のルーティングの基本とRoutes の使い方 Angular のルーティングの基本とRoutes の使い方 Angularにはルーティングという機能があります。描画領域をコントロールする仕組みです。 ルーティングを実現させるには、RoutesとRouterModuleをインポートす...2018.06.01Angular
AngularAngular のObservable とSubject でRxJSの仕組みを理解する Angular のObservable とSubject でRxJSの仕組みを理解する RxJSを使って簡単なデータの受け渡しをします。 まずコンポーネントを作成します。 ng generate component abc ちなみに...2018.05.31Angular
AngularAngular の@Output の使い方 Angular の@Output の使い方 @Inputの使い方は理解しやすいですが、@Outputの使い方は理解するのが少し難しい気がします。 コンポーネントとコンポーネントの連携ではなく、コンポーネントの中にコンポーネントが存在する...2018.05.30Angular
AngularAngular のtrigger 関数でアニメーションを実装する方法 Angular のtrigger 関数でアニメーションを実装する方法 trrigerをインポートしてアニメーションを実装しますが、app.module.tsファイルにBrowserAnimationsModuleをインポートする必要があり...2018.05.30Angular
AngularAngular のサービスクラスの作り方 Angular のサービスクラスの作り方 コンポーネントは部品です。テンプレートはビューです。ではサービスはというと、サーバーからデータを取得してくるビジネスロジックに当たります。 Angular のサービスクラスの特徴として、@Inj...2018.05.28Angular
AngularAngular で複数コンポーネントを連携する Angular で複数コンポーネントを連携する Angular でコンポーネントとコンポーネントを連携する方法です。 abcとdefというコンポーネントを作成して実際に連携させてみます。 コンポーネント間の連携ではclassを定義して...2018.05.25Angular
AngularAngular の標準のパイプ機能の使い方 Angular の標準のパイプ機能の使い方 Angular にはパイプというビュー上の変数を加工(整形)する機能です。 例えば姓名が格納されている変数の末尾に「様」をつける、などがパイプを使って加工する機能例になります。 記述例は以下...2018.05.25Angular
AngularAngular でTypeScript のエイリアス機能を利用してimport文を簡潔に記述する Angular でTypeScript のエイリアス機能を利用してimport文を簡潔に記述する Angular プロジェクトを作成すると、プロジェクト名 - src -tsconfig.jsonファイルが作成されます。 tsconfi...2018.05.24AngularTypeScript
AngularAngular でコンポーネントのスタイルシートをcssからstylusに変更する方法 Angular でコンポーネントのスタイルシートをcssからstylusに変更する方法 ng generate component コンポーネント名で、コンポーネントを作成すると以下のファイルが作成されます。 ファイル名 ...2018.05.24Angular
AngularAngular のngFor ディレクティブの使い方 Angular のngFor ディレクティブの使い方 AngularにはngForディレクティブというディレクティブが標準で用意されています。 for文でループする機能です。記述方法は以下の通りです。 <xxx *ngFor='...2018.05.23Angular
AngularAngularにngx-bootstrapをインストールする方法 Angularにngx-bootstrapをインストールする方法 ngx-bootstrapをインストールして、Angular6で使用する方法です。 npm install ngx-bootstrap --save ngx-boots...2018.05.17Angular
AngularAngularとTypeScriptでSPAを作成する AngularとTypeScriptでSPAを作成する VS Codeが「VS Live Share」なんて便利なものを出してきたのでペアプログラミングができるし、エディタはVS Codeを使いましょう。 nodeはnodistでとりえ...2018.05.15Angular