IntelliJ IDEA 2026.1 Help

AngularJS

Angular 1 とも呼ばれる AngularJS(英語) は、シングルページ Web アプリケーションを開発するためのフレームワークです。 IntelliJ IDEA は、あらかじめ定義されたカスタム ng ディレクティブとコントローラー名とアプリケーション名のための AngularJS 対応の補完オプションと、中括弧式 {{}} 内のデータバインディングのコードインサイトを提案します。 組み込みの AngularJS ライブテンプレートを使用して、HTML のコントローラー名と JavaScript の定義名の間、または ngView または &routeProvider とテンプレート間を移動できます。 AngularJS エンティティの場合は、 シンボルに移動ナビゲーションを使用します。

始める前に

  1. Node.js をダウンロードしてインストールします。

  2. 設定で JavaScript and TypeScript プラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 プラグイン を選択します。 インストール済み タブをクリックします。 検索フィールドに JavaScript と TypeScript と入力します。 プラグインに関する詳細は、 プラグインの管理を参照してください。

  3. Angular および AngularJS プラグインを 設定 | プラグイン ページ、 Marketplace タブでインストールし有効化してください。詳しくは JetBrains Marketplace からプラグインをインストールするをご覧ください。 このプラグインは IntelliJ IDEA Ultimate でのみ利用可能です。

新しい AngularJS アプリケーションを作成する

AngularJS フレームワークをダウンロードするか、Bower パッケージマネージャーを使用して、手動でプロジェクトに AngularJS をインストールできます。

AngularJS の依存関係をダウンロードする

  • 組み込み ターミナル (Alt+F12) で次のように入力します。

    npm install

  • または、プロジェクトルートの package.json ファイルのコンテキストメニューから 'npm install' の実行 を選択します。

空の IntelliJ IDEA プロジェクトを作成する.

  1. メインメニューから ファイル | 新規 | プロジェクト を選択するか、 ようこそ 画面の 新規プロジェクト ボタンをクリックします。

  2. 新規プロジェクト ダイアログで、左側のペインで 新規プロジェクト を選択します。

  3. 右側のペインで、 言語 領域の JavaScript を選択します。

  4. 新しいプロジェクトに名前を付け、必要に応じてその場所を変更してから、 作成 をクリックします。

空のプロジェクトに AngularJS を手動でインストールして構成する

  1. http://angularjs.org/ で AngularJS フレームワークをダウンロードしてください。

  2. AngularJS を使用する空のプロジェクトを開きます。

  3. AngularJS を IntelliJ IDEA JavaScript ライブラリとして構成して、IntelliJ IDEA が AngularJS 固有の構造を認識し、完全なコーディング支援を提供できるようにします。

    1. 設定 ダイアログ (Ctrl+Alt+S) で、 言語& フレームワーク | JavaScript | ライブラリ に進みます。

    2. ライブラリ エリアで、 追加 ボタンをクリックします。

    3. 開いた 新規ライブラリ ダイアログで、ライブラリの名前を指定してください。

    4. ライブラリファイルのリストの横にある 追加 ボタン (追加ボタン) をクリックし、個別のファイルが必要か、フォルダー全体が必要かによって、 ファイルのアタッチ… または ディレクトリのアタッチ… を選択します。

    5. 開いたダイアログで Angular.js 、または Angular.min.js 、またはディレクトリ全体を選択します。

      IntelliJ IDEA は 新規ライブラリ ダイアログに戻り、 名前 の読み取り専用フィールドに選択したファイルまたはフォルダーの名前が表示されます。

    6. タイプ フィールドに、ダウンロードして追加するバージョンを指定します。

      • Angular.js を追加した場合は、 デバッグ を選択してください。 このバージョンは開発環境、特にデバッグに役立ちます。

      • 縮小(英語)された Angular.min.js を追加した場合は、 リリース を選択します。 このバージョンは、ファイルサイズが大幅に小さいため、実稼働環境で役立ちます。

    JavaScript ライブラリを構成する の詳細を参照してください。

Bower を使用して空のプロジェクトに AngularJS をインストールする

  1. AngularJS を使用する空のプロジェクトを開きます。

  2. Bower の説明に従って、 Bower をインストールしてください。

  3. 埋め込まれた ターミナル （Alt+F12 ）で、 bower install angular と入力して、パッケージをプロジェクトの依存関係としてインストールします。

既存の AngularJS アプリケーションから始める

プロジェクトに Angular ソースがすでにある場合（たとえば bower_components フォルダーに）、プロジェクトを開いて作業を開始してください。 これらのソースが プロジェクトから除外されている場合は、AngularJS を JavaScript ライブラリとして設定するだけです。

バージョン管理からアプリケーションのソースをチェックアウト

  1. ようこそ 画面で リポジトリのクローン をクリックします。

    あるいは、メインメニューから ファイル | 新規 | バージョン管理からプロジェクト…、 Git | クローン…、 VCS | バージョン管理から取得 を選択します。

    メインメニューの Git の代わりに、プロジェクトに関連付けられている他のバージョン管理システムが表示される場合があります。 例： Mercurial または Perforce。

  2. 表示されるダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。 詳細については、 プロジェクトをチェックアウトする (クローン) を参照してください。

依存関係をダウンロードする

  • ポップアップで 'npm install' の実行 をクリックしてください。

    Angular アプリケーションを開き、package.json から依存関係をダウンロードする

プロジェクトのセキュリティ

IntelliJ IDEA の外部で作成され、そこにインポートされたプロジェクトを開くと、IntelliJ IDEA は、未知ソースコードを使用してこのプロジェクトを処理する方法を決定できるダイアログを表示します。

次のいずれかのオプションを選択します。

  • セーフモードでプレビュー: この場合、IntelliJ IDEA はプロジェクトをプレビューモードで開きます。 これは、プロジェクトのソースを参照することはできますが、タスクやスクリプトを実行したり、プロジェクトを実行 / デバッグしたりすることはできないことを意味します。

    IntelliJ IDEA はエディター領域の上部に通知を表示し、 プロジェクトを信頼する… リンクをクリックして、いつでもプロジェクトをロードできます。

  • プロジェクトを信頼: この場合、IntelliJ IDEA はプロジェクトを開いてロードします。 これは、プロジェクトが初期化され、プロジェクトのプラグインが解決され、依存関係が追加され、すべての IntelliJ IDEA 機能が使用可能になることを意味します。

  • 開かない: この場合、IntelliJ IDEA はプロジェクトを開きません。

プロジェクトのセキュリティ の詳細を参照してください。

AngularJS ルーターの状態ダイアグラムを使用する

ui-router(英語) を使用する AngularJS アプリケーションのビュー、状態、テンプレートの関係を示すダイアグラムが表示されます。

ダイアグラムを生成して表示する

  • 目的のファイルをエディターで開き、コンテキストメニューから ダイアグラム | AngularJS ui-router 状態ダイアグラムの表示 を選択します。 IntelliJ IDEA はダイアグラムを生成し、それを別のエディタータブに表示します。

  • 要素を選択し、コンテキストメニューから ソースに移動 を選択します。

2026 年 3 月 30 日
JavaScriptBower