WebStorm 2024.3 ヘルプ

AngularJS

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

始める前に

  1. お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。

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

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

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

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

  • 埋め込まれたターミナルAlt+F12)で、次のように入力します。

    npm install

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

空の WebStorm プロジェクトを作成する

  1. ウェルカム画面で新規プロジェクトをクリックするか、メインメニューからファイル | 新規 | プロジェクトを選択します。新規プロジェクトダイアログが開きます。

  2. 左側のペインで、空のプロジェクトを選択します。

  3. プロジェクト関連ファイルが保存されるフォルダーへのパスを指定します。

  4. 作成をクリックします。

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

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

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

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

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

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

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

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

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

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

    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' の実行をクリックしてください。

    Opening an Angular application and downloading the dependencies from package.json

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

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

Untrusted project warning

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

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

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

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

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

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

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

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

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

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

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

関連ページ:

プラグインのインストール

プラグインは WebStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。デフォルトでは、WebStorm には多数のプラグインがバンドルされています。バンドルされたプラグインを無効にするこ...

新規プロジェクトの作成ダイアログ

このダイアログを使用して、空のプロジェクトを作成したり、アプリケーション開発用のフレームワーク固有のプロジェクトスタブを生成したりします。ダイアログの左側のペインには、スタブを生成できるプロジェクトタイプのリストが表示されます。利用可能なプロジェクトタイプのセットは、インストールされてアクティブ化されているプラグインによって異なります。右側のペインの内容は、選択したプロジェクトの種類によって異なります。ロケーションフィールドはすべてのプロジェクトタイプに共通です。空のプロジェクト内容のないプロジ...

JavaScript ライブラリを構成する

言語と IDE のコンテキストでは、ライブラリはファイルまたはファイルのセットです。これらのファイルの関数とメソッドは、編集したプロジェクトコードから WebStorm が取得する関数とメソッドに加えて、WebStorm の内部知識に追加されます。プロジェクトのスコープでは、そのライブラリはデフォルトで書き込み保護されています。WebStorm は、2 つの事前定義された自動生成ライブラリフォルダーを予約します。node_modules プロジェクト package.json のオブジェクトにリストさ...

GitHub でホストされているプロジェクトを管理する

プロジェクトをチェックアウトする (クローン):WebStorm から直接貢献したいリポジトリのクローンを作成し、それに基づいて新しいプロジェクトを作成できます。メインメニューで、に移動します。Git メニューが使用できない場合は、を選択します。バージョン管理から取得ダイアログで、左側の GitHub を選択します。次のいずれかを実行して、GitHub にログインします。トークンがある場合は、トークンを使用するをクリックし、トークンをトークンフィールドに貼り付けて、ログインをクリックします。それ以外の...

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

潜在的なセキュリティリスクを防ぐために、WebStorm では、プロジェクトのソースが不明な場合にプロジェクトをどのように操作するかを決定できます。WebStorm では、実行されるタスク、File Watchers、または webpack 構成について警告し、信頼できるソースを構成できます。不明なソースからプロジェクトを開く:WebStorm の外部で作成され、そこにインポートされたプロジェクトを開くと、WebStorm は、未知ソースコードを使用してこのプロジェクトを処理する方法を決定でき...

プロジェクトを作成

WebStorm では、空のプロジェクトを作成したり、プロジェクトとしてフォルダーを開いたり、VCS からソースをチェックアウトしたり、プロジェクトを作成することができます。また、フレームワークテンプレートを使用してプロジェクトを生成することもできます。そのため、新しいアプリケーションは、必要なすべてのパッケージと構成ですでにブートストラップされています。WebStorm はまたあらゆるプロジェクトの設定、ファイルおよびホールダーを保存し、新しいプロジェクトを作成するときテンプレートとして使用す...