AngularJS
Angular 1 とも呼ばれる AngularJS(英語) は、シングルページ Web アプリケーションを開発するためのフレームワークです。PhpStorm は、あらかじめ定義されたカスタム ng ディレクティブとコントローラー名とアプリケーション名のための AngularJS 対応の補完オプションと、中括弧式 {{}} 内のデータバインディングのコードインサイトを提案します。組み込みの AngularJS ライブテンプレートを使用して、HTML のコントローラー名と JavaScript の定義名の間、または ngView または &routeProvider とテンプレート間を移動できます。AngularJS エンティティの場合は、シンボルナビゲーションを使用します。
始める前に
Node.js をダウンロードしてインストールします。
設定 | プラグインページのインストール済みタブで、JavaScript と TypeScript および Angular と AngularJS に必要なプラグインが有効になっていることを確認します。詳細については、「プラグインのマッピング」を参照してください。
新しい AngularJS アプリケーションを作成する
AngularJS フレームワークをダウンロードするか、Bower パッケージマネージャーを使用して、手動でプロジェクトに AngularJS をインストールできます。
AngularJS の依存関係をダウンロードする
埋め込まれたターミナル（Alt+F12）で、次のように入力します。
npm installまたは、プロジェクトルートの package.json ファイルのコンテキストメニューから 'npm install' の実行を選択します。
空の PhpStorm プロジェクトを作成する
ウェルカム画面で新規プロジェクトの作成をクリックするか、メインメニューからを選択します。新しいプロジェクトダイアログが開きます。
左側のペインで、空のプロジェクトを選択します。
プロジェクト名とプロジェクト関連ファイルが保存されるフォルダーへのパスを指定します。
作成をクリックします。
空のプロジェクトに AngularJS を手動でインストールして構成する
http://angularjs.org/(英語) で AngularJS フレームワークをダウンロードしてください。
AngularJS を使用する空のプロジェクトを開きます。
AngularJS を PhpStorm JavaScript ライブラリとして構成して、PhpStorm が AngularJS 固有の構造を認識し、完全なコーディング支援を提供できるようにします。
設定ダイアログ（Ctrl+Alt+S）で、に移動します。
ライブラリエリアで、追加ボタンをクリックします。
開いた新規ライブラリダイアログで、ライブラリの名前を指定してください。
ライブラリファイルのリストの横にある追加ボタン (
) をクリックし、個別のファイルが必要か、フォルダー全体が必要かによって、ファイルを添付またはディレクトリを添付を選択します。開いたダイアログで Angular.js、または Angular.min.js、またはディレクトリ全体を選択します。
PhpStorm は新規ライブラリダイアログに戻ります。名前読み取り専用フィールドには、選択したファイルまたはフォルダーの名前が表示されます。
タイプフィールドに、ダウンロードして追加するバージョンを指定します。
Angular.js を追加した場合は、デバッグを選択してください。このバージョンは開発環境、特にデバッグに役立ちます。
縮小(英語)された Angular.min.js を追加した場合は、リリースを選択します。このバージョンは、ファイルサイズが大幅に小さいため、実稼働環境で役立ちます。
JavaScript ライブラリを構成する詳細を参照してください。
Bower を使用して空のプロジェクトに AngularJS をインストールする
既存の AngularJS アプリケーションから始めます
プロジェクトに Angular ソースがすでにある場合（たとえば bower_components フォルダーに）、プロジェクトを開いて作業を開始してください。これらのソースがプロジェクトから除外されている場合は、AngularJS を JavaScript ライブラリとして設定するだけです。
バージョン管理からアプリケーションのソースをチェックアウト
ウェルカム画面で VCS から取得をクリックします。
あるいは、メインメニューから、、を選択します。
メインメニューの Git の代わりに、プロジェクトに関連付けられている他のバージョン管理システムが表示される場合があります。例: Mercurial または Perforce。
表示されるダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。詳細については、プロジェクトをチェックアウトする (クローン) を参照してください。
依存関係をダウンロードする
ポップアップで 'npm install' の実行をクリックしてください。
プロジェクトのセキュリティ
PhpStorm の外部で作成され、そこにインポートされたプロジェクトを開くと、PhpStorm は、未知ソースコードを使用してこのプロジェクトを処理する方法を決定できるダイアログを表示します。
次のいずれかのオプションを選択します。
セーフモードでプレビュー : この場合、PhpStorm はプロジェクトをプレビューモードで開きます。これは、プロジェクトのソースを参照することはできますが、タスクやスクリプトを実行したり、プロジェクトを実行 / デバッグしたりすることはできないことを意味します。
PhpStorm はエディター領域の上部に通知を表示し、プロジェクトを信頼リンクをクリックして、いつでもプロジェクトをロードできます。
プロジェクトを信頼 : この場合、PhpStorm はプロジェクトを開いてロードします。これは、プロジェクトが初期化され、プロジェクトのプラグインが解決され、依存関係が追加され、すべての PhpStorm 機能が使用可能になることを意味します。
開かない : この場合、PhpStorm はプロジェクトを開きません。
プロジェクトのセキュリティの詳細を参照してください。
AngularJS ルーターの状態ダイアグラムを使用する
ui-router(英語) を使用する AngularJS アプリケーションのビュー、状態、テンプレートの関係を示すダイアグラムが表示されます。
ダイアグラムを生成して表示する
目的のファイルをエディターで開き、コンテキストメニューからを選択します。PhpStorm はダイアグラムを生成し、それを別のエディタータブに表示します。
ダイアグラム内の要素から、この要素を実装するコードに移動する
要素を選択し、コンテキストメニューからソースに移動を選択します。
関連ページ：
プラグインのインストール
プラグインは PhpStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。プラグイン設定を開くを押して設定を開き、を選択します。マーケットプレースタブを使用して、JetBrains マーケッ...
JavaScript ライブラリを構成する
言語と IDE のコンテキストでは、ライブラリはファイルまたはファイルのセットです。これらのファイルの関数とメソッドは、編集したプロジェクトコードから PhpStorm が取得する関数とメソッドに加えて、PhpStorm の内部知識に追加されます。プロジェクトのスコープでは、そのライブラリはデフォルトで書き込み保護されています。PhpStorm は、2 つの事前定義された自動生成ライブラリフォルダーを予約します。node_modules プロジェクト package.json のオブジェクトにリストさ...
Bower
Bower は、HTML、CSS、JavaScript、フォント、イメージファイルなどを含むクライアント側のライブラリとコンポーネントのパッケージマネージャーです。PhpStorm を移動せずに、専用の Bower ページで、または組み込みターミナルのコマンドラインから Bower パッケージをインストール、検索、アップグレード、削除できます。始める前に：Node.js をダウンロードしてインストールします。プロジェクトでローカル Node.js インタープリターが構成されていることを確認します。設...
GitHub でホストされているプロジェクトを管理する
プロジェクトをチェックアウトする (クローン)：PhpStorm から直接貢献したいリポジトリのクローンを作成し、それに基づいて新しいプロジェクトを作成できます。メインメニューで、に移動します。Git メニューが使用できない場合は、を選択します。バージョン管理から取得ダイアログで、左側の GitHub を選択します。次のいずれかを実行して、GitHub にログインします。トークンがある場合は、トークンを使用するをクリックし、トークンをトークンフィールドに貼り付けて、ログインをクリックします。それ以外の...
プロジェクトのセキュリティ
潜在的なセキュリティリスクを防ぐために、PhpStorm では、プロジェクトのソースがわからない場合に、プロジェクトの操作方法を決定できます。PhpStorm は、実行されるタスクまたは構成について警告し、信頼できるソースを構成できるようにします。不明なソースからプロジェクトを開く：プロジェクトを開くと、PhpStorm を使用すると、未知ソースコードを含むプロジェクトの処理方法をすぐに決定できます。プロジェクトを初めて開くたびに、IDE にプロジェクトを信頼ダイアログが表示されます。これは、...
Angular
Angular は、クロスプラットフォームアプリケーションを構築するための一般的なフレームワークです。PhpStorm は Angular のサポートを提供し、新しい Angular アプリの作成やコンポーネントの作業からデバッグやテストまで、開発プロセスのすべてのステップで役立ちます。始める前に：Node.js をダウンロードしてインストールします。設定 | プラグインページのインストール済みタブで、JavaScript と TypeScript および Angular と AngularJS に必要...