AngularJS Hello World アプリケーション: 最初のサンプル プログラム

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

AngularJS アプリケーションの能力を確認する最良の方法は、最初の基本プログラム「Hello World」アプリを Angular.JS で作成することです。

AngularJS 開発に使用できる統合開発環境は数多くありますが、一般的なもののいくつかを以下に示します。この例では、次を使用しています Webstorm 私たちのIDEとして。

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

こんにちは、AngularJS さん

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

AngularJS Hello World プログラム

<!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>

コードの説明：

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

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

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

出力：

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

AngularJS Hello World プログラム

よろしければ：