AngularJS Hello World: 最初のサンプルプログラム

替え： ジェームズ・ハートマン ジェームズ・ハートマン
Hours 更新中

⚡ スマートサマリー

AngularJS の Hello World プログラムでは、単一の HTML ファイル、1 つのスクリプト参照、および ng-app と ng-controller という 2 つのディレクティブのみを使用して、二重中括弧式を介してコントローラー スコープ変数をページにバインドします。

  • 🔘 ng-app: ng-app属性はルート要素をマークし、指定されたAngularJSモジュールを自動的にブートストラップします。
  • ☑️ ng-controller: ng-controller は HelloWorldCtrl を h1 要素にアタッチし、そこでコントローラー スコープを使用できるようにします。
  • ✅ スコープバインディング: コントローラー内で $scope.message を割り当てると、ビューでレンダリングされる {{message}} 式に渡されます。
  • 🧪 単一ファイル: 1つのHTMLファイルと1つのスクリプト参照だけでサンプルを実行でき、ビルド手順は不要です。
  • 🛠️ トラブルシューティング： 画面上に括弧が文字通り表示されている場合、ほぼ間違いなくライブラリが読み込まれていないか、ng-app が見つからないことを意味します。
  • 📊 バージョンノート： AngularJSのサポートは2022年1月に終了し、バージョン1.8.3が最終リリースとなりました。今後の開発はAngularで行う必要があります。
プロフィール

ng-app と ng-controller を使用した AngularJS Hello World の最初のサンプル プログラム

AngularJSアプリケーションの威力を実感する最良の方法は、AngularJSで最初の基本的なプログラムである「Hello World」アプリを作成することです。

統合開発環境は数多くあり、 AngularJS 開発においては、人気のあるもののいくつかを以下に示します。この例では、 Webstorm 私たちのIDEとして。

  1. Webstorm
  2. Sublime Text
  3. AngularJS Eclipse
  4. Visual Studioの

こんにちは、AngularJS さん

バージョンノート： AngularJS 1.x は 2021 年 12 月 31 日に長期サポートを終了し、フレームワークチームは、 AngularJSのサポートが正式に終了しました 2022年1月に、1.8.3が最終リリースとなり、それ以降のセキュリティパッチはありません。以下のすべてのステップとコードブロックは、記述どおりに保持されます。新しいプロジェクトは、最新のAngularに属し、同じ作業は以下から始まります。 ng serveとスタンドアロンコンポーネント そして今でも同じものを使用しています {{ }} 補間構文。

以下の例は、AngularJS で最初の「Hello world」アプリケーションを作成する最も簡単な方法を示しています。

以下の注釈付きスクリーンショットは、そのファイルの各部分にラベルを付けており、その7つの数字は Code 以下に説明リストを示します。これは以前の1.4.0ビルドに対してキャプチャされたものなので、スクリプト行はコードに固定されているバージョンとは異なります。

ng-app、ng-controller、スクリプト参照、スコープ変数に対する7つの番号付きコールアウトを含む、注釈付きAngularJS Hello World HTMLファイル

<!DOCTYPE html>  
<html ng-app="app">  
<head>  
    <meta charset="utf 8">
    <title>Guru99</title>     
</head>  
<body>
<h1 ng-controller="HelloWorldCtrl">{{message}}</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script>  
    angular.module("app", []).controller("HelloWorldCtrl", function($scope) {  
    $scope.message="Hello World" 
    } )
</script> 

</body>  
</html>

Code 説明：

  1. 「ng-アプリ」キーワードは、このアプリケーションがAngularJSアプリケーションであることを示すために使用されます。このアプリケーションには任意の名前を付けることができます。
  2. コントローラーはビジネスロジックを保持するために使用されます。h1 タグでは、 コントローラこれは「Hello World」を表示するロジックを持つので、このタグでは「HelloWorldCtrl」という名前のコントローラーにアクセスしたいと言えます。
  3. 「message」というメンバー変数を使用していますが、これは「Hello World」メッセージを表示するためのプレースホルダーにすぎません。
  4. 「scriptタグ」は、AngularJSに必要なすべての機能を備えたangular.jsスクリプトを参照するために使用されます。この参照がないと、AngularJSの関数を使用しようとしても動作しません。
  5. 「コントローラー」とは、実際にビジネスロジックを作成する場所、つまりコントローラーのことです。各キーワードの詳細については、以降の章で説明します。ここで重要なのは、ステップ2で参照されている「HelloWorldCtrl」というコントローラーメソッドを定義している点です。
  6. ここでは、コードがこのコントローラーを呼び出す際に実行される「関数」を作成します。$scopeオブジェクトはAngularJSの特別なオブジェクトであり、AngularJS内で使用されるグローバルオブジェクトです。$scopeオブジェクトは、コントローラーとビュー間のデータ管理に使用されます。
  7. ここでは、「message」という名前のメンバ変数を作成し、その変数に「Hello World」という値を割り当て、そのメンバ変数をスコープオブジェクトにアタッチします。

ご注意: ng-controller ディレクティブは、 AngularJS （ステップ 2）は、アプリケーションでコントローラーを定義するために使用されます。このアプリケーションでは、ng-controller キーワードを使用して「HelloWorldCtrl」という名前のコントローラーを定義しています。コントローラーの実際のロジックは（ステップ 5）で作成します。

コードが正常に実行された場合、ブラウザでコードを実行すると次の出力が表示されます。

出力：

「Hello World」というメッセージが表示されます。

ブラウザウィンドウのタイトル Guru99 AngularJSスコープ変数から見出し「Hello World」をレンダリングする

AngularJSの読み込み方法：CDNまたはローカルファイル

上記の例が機能するのは、ブラウザが本文の終わりに到達する前に、1行でフレームワークをページに取り込むことができるためです。AngularJSは単一のファイルとして提供されます。 Javaスクリプトファイルなので、最初のプログラムにはビルド手順もパッケージマネージャーも不要です。ブラウザで開くだけのシンプルなHTMLファイルで十分です。

そのファイルを取り込む方法は2つあります。

  1. CDNのコピーを参照します。 例が指し示すのは code.angularjs.org そしてピンのバージョンは1.6.9です。そのホストはまだ1.xビルドを提供しており、最高バージョンは1.8.2ですが、 Google ホストライブラリにはAngularJSが表示されなくなりました。
  2. ローカルコピーをダウンロードしてください。 ファイルをHTMLページの横に保存し、スクリプトタグでそのファイルを指定します。ローカルコピーを作成することで、サンプルをオフラインでも動作させることができ、プロキシがCDNをブロックしている場合に特に役立ちます。
<!-- Option 1: reference a CDN copy -->
<script src="https://code.angularjs.org/1.8.2/angular.min.js"></script>

<!-- Option 2: reference a downloaded copy in the same folder -->
<script src="angular.min.js"></script>

　 angular.js 学習しながら、 angular.min.js 本番環境では、ミニファイされていないビルドが読みやすいスタックを出力します。 traces、一方、ミニファイされたビルドでは名前が変更された変数が報告されます。

ファイルが読み込まれると、 ng-app フレームワークが起動します。AngularJS はドキュメントの読み込みが完了するとその属性を探し、その属性を持つ要素をコンパイルのルートとして扱い、その値で指定されたモジュールをブートストラップします。その結果、次の 3 つのことが起こります。

  • 最初のものだけ ng-app ページ上の要素は自動的にブートストラップされます。2 つ目の要素は、以下の場合を除き無視されます。 angular.bootstrap 手動で呼び出されます。
  • 値は、登録されているモジュールの名前を指定する必要があります。 角度.モジュールそうでなければコンソールに報告されます [$injector:modulerr].
  • ng-app html 例にあるように、要素を使用すると、ドキュメント全体がAngularJSの支配下に置かれます。より狭いコンテナでも同様に機能します。
お見逃しなく：

{{ }}式とng-modelバインディングの仕組み

周囲の二重の支柱 message h1 タグ内のテキストは、読み込み時に一度だけ入力されるプレースホルダーではありません。AngularJS はそのテキストノードを周囲の要素を監視するウォッチャーにコンパイルします。 スコープレンダリングされた出力 tracks $scope.message ページが存在する限り。

このサイクルは3つの段階から成ります。

  1. コントローラは値を書き込みます $scope.
  2. ダイジェスト処理では、監視対象のすべての式を前回の結果と比較します。
  3. 値が変更された各式は、その場で再レンダリングされます。

したがって、補間式はスコープからビューへの一方向です。双方向バインディングには ng-モデル 指令 フォームコントロール用に設計されています。 <input ng-model="message"> 見出しの横にあるボックスに文字を入力すると、キーを押すたびに見出しが変わります。これは、ng-model が式が監視しているのと同じスコープのプロパティにフィールド値を書き戻すためです。

式は意図的に制限されています。スコープのプロパティを読み取り、スコープのメソッドを呼び出し、未定義の値を黙って許容しますが、変数を宣言したり、制御フロー文を使用したり、次のようなグローバルオブジェクトにアクセスしたりすることはできません。 window.

空白ページやレンダリングされていない {{ }} を修正する方法

最初の AngularJS プログラムは、次の 2 つの目に見える方法のいずれかで失敗します。ページが空白のままになるか、テキストが {{message}} 「Hello World」が表示されるべき場所に、このメッセージが表示されます。どちらの場合も、フレームワークがマークアップを引き継がなかったことを意味します。ブラウザのコンソールを開いた状態で、以下のチェック項目を順番に確認してください。

  1. ライブラリが読み込まれたことを確認してください。 ネットワークパネルを開いて、 angular.js リクエスト。404エラーまたはアクセス不能なCDNの場合、画面上の括弧は変更されません。
  2. スクリプトのパスを確認してください。 相対パスは HTML ファイルが格納されているフォルダに対して解決されるため、 js サブフォルダーが必要 js/angular.min.js.
  3. ng-app を検証します。 属性が欠落しているかスペルミスがあると、何もブートストラップされません。属性はハイフンで区切られます。 ng-app マークアップでは、ディレクティブはキャメルケースですが、 Java脚本。
  4. コンソールのエラーメッセージを確認してください。 [$injector:modulerr] これは、ng-appで指定されたモジュールが登録されなかったことを意味します。 [ng:areq] これは通常、マークアップ内のコントローラー名が渡された名前と一致しないことを意味します。 .controller().
  5. 2つ目のng-appを探してください。 最初の要素のみがブートストラップされるため、内部要素に余分なコピーが残っていると、ページのその部分が暗黙のうちに無効になります。

残りの報告の大部分は、さらに2つの原因によるものである。

  • ファイルプロトコル。 この単一ファイルの例は、ディスクから直接開いた場合は問題なく動作しますが、XHR経由で取得したテンプレートはブラウザのオリジンルールによってブロックされます。テンプレートが表示されたら、フォルダをHTTP経由で配信してください。
  • 一瞬だけ、矯正器具がちらりと見えた。 フレームワークがマークアップをコンパイルする前にレンダリングされると、生の式が一瞬表示されます。 ng-cloak 要素に、または式を交換 ng-bind="message"これは、自身のマークアップを一切表示しません。

これらのいずれにも当てはまらない場合は、ページを上記の例と同じ状態に縮小し、独自のコードを1行ずつ追加してください。

よくあるご質問

上記の4つのうちどれでも使えます。この例では Webstormプログラムは単一の静的HTMLファイルなので、プレーンテキストエディタで十分です。IDEは、ディレクティブの補完、ライブリロード、統合デバッグ機能を追加するだけです。

$scope は、 コントローラ そしてその表示。HelloWorldCtrl 内に $scope.message を記述すると、そのプロパティが h1 要素に配置された式から見えるようになります。

どちらのファイルも同じフレームワークを含んでいます。angular.js は圧縮されていないため、エラーは読みやすいソースコードを指します。angular.min.js は本番環境向けに圧縮されており、AngularJS が通常検査するパラメータ名が圧縮によって変更されるため、明示的な依存関係の注釈が必要です。

AngularJS は、ここに示されている 1.x フレームワークであり、ディレクティブ、$scope、およびプレーンテキストによって駆動されます。 Javaスクリプト。Angular（バージョン2以降）は別物です TypeScript コンポーネントに基づいて構築されたフレームワークであり、積極的にメンテナンスされている製品ラインです。

主に、依然として広く普及している既存の 1.x アプリケーションを維持するため。バインディング、ディレクティブ、 依存性注入 移行は可能ですが、サポートは2022年1月に終了したため、新しいプロジェクトは最新のAngularを使用する必要があります。

はい。同じモジュール上でそれぞれを .controller() で登録し、ng-controller を使用して異なる要素にアタッチしてください。それぞれが独自の子スコープを受け取るため、同じ名前のプロパティでも独立性が保たれます。

最新のアシスタントは 1.x のコードベースを読み込み、ディレクティブ、フィルター、サービスのインベントリと、それに対応するコンポーネントおよびサービスの提案を生成します。このインベントリは、sco に役立ちます。ping 作業は、すべての地図がping 手動による確認がまだ必要です。

GitHubコパイロット コントローラーの定型コード、スコープの割り当てを完了し、 NG-送信 短いコメントからハンドラーを取得できますが、トレーニングは最新のAngularに偏っているため、提案が実際に1.x構文を使用していることを確認してください。

この投稿を要約すると次のようになります: