Angular2 開発環境構築

Angular-cliにjQueryを導入する

投稿日:2017年3月13日 更新日:

Angular-cliの開発環境でのjQueryの導入方法を説明します。

 

 

1.Angular-cliの導入

最初にangular-cliを導入します。angular-cliが未導入の場合は以下を参考にして下さい。
Angular2の開発環境を構築(angular-cli)

 

2.Angular2のプロジェクト作成

作業ディレクトリ(当サイトでは「C:\ng2test」)に、サンプルプロジェクトを「sample3」を作成します。プロジェクト作成は以下を参考にして下さい。

Angular2のプロジェクト作成からデプロイまで

 

3.jQueryのインストール

npmでjQueryのパッケージをローカルインストールします。[--save]オプションを指定して、package.jsonにパッケージ情報を書き込みます。

 

4.jQueryの型定義ファイルのインストール

npmでjQueryのパッケージをローカルインストールします。[--save--dev]オプションを指定して、package.jsonのdependenciesにパッケージ情報を書き込みます。

 

5.angular-cli.jsonの編集

angular-cli.jsonにjqueryのscriptsを追加します。

 

6.動作テスト確認

 

スポンサーリンク

スポンサーリンク

-Angular2, 開発環境構築

執筆者:

関連記事

(webpack2)TypeScriptとWebpackを使ったWEBフロントエンド開発

当セクションでは前回の『Webpackを使ったWEBフロントエンド開発』をもとに具体的なプロジェクトを作成して、webpackの機能を把握したいと思います。使用するパッケージはwebpack2になりま ...

(webpack2)webpack-dev-serverを使ったWEBフロントエンド開発

当セクションでは前回の『Webpackを使ったWEBフロントエンド開発』をもとに具体的なプロジェクトを作成して、webpackの機能を把握したいと思います。使用するパッケージはwebpack2になりま ...

Angular2の開発環境を構築(angular-cli)

Angular2の開発環境をangular-cliで構築して、テストプロジェクト作成して実行テストまでを行います。 当サイトはangular-cliでAngular2を開発します。angular-cl ...

SystemJSを使ったWEBフロントエンド開発

当セクションはSystemJSを使ったWEBフロントエンド開発について説明します。JavaScriptをロードするための最も基本的な方法はscriptタグで実現することですが、SPAを構築するフロント ...

Webpackを使ったWEBフロントエンド開発

Webpackとはビルドツールの1つであり、モジュール管理ツールとしての側面も持っています。フロントエンドのビルドツールとしては、他にGulpとGruntなどがありますが、それらの仲間といった感じだと ...


プロフィール
管理人です。 業務プログラムに勤しむ人です プロフィール詳細


検索

カテゴリ

アーカイブ