ng-Controller を使用した AngularJS コントローラーの例

AngularJS のコントローラーとは何ですか?

A コントローラー AngularJS では、ビューからデータを取得し、そのデータを処理し、そのデータをビューに送信して、エンドユーザーに表示されます。コントローラーには、コアビジネスロジックが含まれます。コントローラーは、データモデルを使用して必要な処理を実行し、出力をビューに渡します。ビューは、エンドユーザーに表示されます。

Angular の観点からコントローラーは何をするのでしょうか?

以下は、AngularJS コントローラーの動作の簡単な定義です。

コントローラーの主な役割は、ビューに渡されるデータを制御することです。スコープとビューは双方向通信を行います。
ビューのプロパティはスコープ上の「関数」を呼び出すことができます。さらに、ビュー上のイベントはスコープ上の「メソッド」を呼び出すことができます。以下のコードスニペットは、関数の簡単な例を示しています。

私達の関数($スコープ) これは、コントローラーと、$scope.firstName と $scope.lastName の連結を返すために使用される内部関数を定義するときに定義されます。
In AngularJS、関数を変数として定義すると、その関数はメソッドと呼ばれます。

この方法でデータはコントローラーからスコープに渡され、その後データはスコープからビューに行き来します。
スコープはモデルをビューに公開するために使用されます。モデルは、ビューからのイベントを介してトリガーできるスコープ内で定義されたメソッドを介して変更できます。スコープからモデルへの双方向のモデルバインディングを定義できます。
理想的には、コントローラーは DOM を操作するために使用すべきではありません。これは、後で説明するディレクティブによって実行する必要があります。
ベストプラクティスは、機能に基づいたコントローラーを用意することです。たとえば、入力用のフォームがあり、そのためのコントローラーが必要な場合は、「フォームコントローラー」というコントローラーを作成します。

AngularJS で基本的なコントローラーを構築する方法

以下は、AngularJS でコントローラーを作成する手順です。

ステップ 1) 基本的な HTML ページを作成する

コントローラーの作成を始める前に、まず基本的な HTML ページのセットアップを行う必要があります。

以下のコードスニペットは、「イベント登録」というタイトルを持ち、次のような重要なライブラリへの参照を持つシンプルなHTMLページです。 Bootstrap、jQuery および Angular。

ブートストラップ CSS スタイルシートへの参照を追加しています。これはブートストラップライブラリと組み合わせて使用されます。
angularjs ライブラリへの参照を追加しています。したがって、今後 angular.js を使用して行うことはすべて、このライブラリから参照されることになります。
Web ページの特定のコントロールに対する応答性を高めるために、ブートストラップライブラリへの参照を追加しています。
DOM 操作に使用される jquery ライブラリへの参照を追加しました。 Angular の機能の一部はこのライブラリに依存しているため、これは Angular で必要です。

デフォルトでは、上記のコードスニペットはすべての例に含まれるため、後続のセクションでは特定の angularJS コードのみを示すことができます。

ステップ 2) ファイルとファイル構造を確認する

次に、コース期間中に開始するファイルとファイル構造を見てみましょう。

まず、従来の Web アプリケーションと同様に、ファイルを 2 つのフォルダーに分離します。「CSS」フォルダーがあります。これにはすべてのカスケードスタイルシートファイルが含まれ、さらに「lib」フォルダーが作成されます。 Javaスクリプトファイル。
bootstrap.css ファイルは CSS フォルダーに配置され、Web サイトに優れた外観と操作性を追加するために使用されます。
angular.js は、angularJS サイトからダウンロードされ、lib フォルダーに保存されているメインファイルです。
app.js ファイルには、コントローラーのコードが含まれます。
bootstrap.js ファイルは、bootstrap.cs ファイルを補足して、Web アプリケーションにブートストラップ機能を追加するために使用されます。
jquery ファイルは、DOM 操作機能をサイトに追加するために使用されます。

ステップ 3) AngularJS コードを使用して出力を表示する

ここでやりたいことは、ページがブラウザで表示されたときに、テキスト形式とテキストボックスの両方で「AngularJS」という単語を表示することです。angular.js を使用してこれを実行する方法の例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">

	Tutorial Name : <input type="text" ng-model="tutorialName"><br>

	This tutorial is {{tutorialName}}
</div>
<script>
	var app = angular.module('DemoApp',[]);

	app.controller('DemoController', function($scope){
	$scope.tutorialName = "Angular JS";
	});
</script>

</body>
</html>

コードの説明：

私達の ng-アプリ キーワードは、このアプリケーションが Angular アプリケーションとして考慮されるべきであることを示すために使用されます。接頭辞で始まるもの 「NG」 として知られています指令。「DemoApp」は、Angular.JS アプリケーションに付けられた名前です。
div タグを作成し、このタグに ng-controller ディレクティブとコントローラーの名前「DemoController」を追加しました。これにより、基本的に div タグがデモコントローラーのコンテンツにアクセスできるようになります。コントローラー内で定義された機能にアクセスできるようにするには、ディレクティブの下にコントローラーの名前を指定する必要があります。
ng-model ディレクティブを使用してモデルバインディングを作成しています。これにより、Tutorial Name のテキストボックスがメンバー変数「tutorialName」にバインドされます。
「tutorialName」というメンバー変数を作成します。これは、ユーザーがチュートリアル名のテキストボックスに入力した情報を表示するために使用されます。
DemoApp アプリケーションにアタッチするモジュールを作成しています。したがって、このモジュールはアプリケーションの一部になります。
このモジュールでは、tutorialName 変数にデフォルト値「AngularJS」を割り当てる関数を定義します。

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

出力：

変数 tutorialName に「Angular JS」という値を割り当てたので、これがテキストボックスとプレーンテキスト行に表示されます。

AngularJS コントローラーでメソッドを定義する方法

通常、コントローラー内で複数のメソッドを定義してビジネスロジックを分離する必要があります。

たとえば、コントローラーに 2 つの基本的なことを実行させたいとします。

2つの数字の加算を実行する
2つの数の減算を実行します

次に、コントローラー内に 2 つのメソッドを作成し、XNUMX つは加算を実行し、もう XNUMX つは減算を実行するのが理想的です。

Angular.JS コントローラー内でカスタムメソッドを定義する方法の簡単な例を見てみましょう。コントローラーは単に文字列を返します。

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<title>Event Registration</title>
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body ng-app="DemoApp">
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">
	Tutorial Name :<input type="text" ng-model="tutorialName"><br>
	<br>
	This tutorial is {{tutorialName}}	
</div>

<script>
var app = angular.module('DemoApp', []);
app.controller('DemoController', function($scope) {
    $scope.tutorialName = "Angular JS";
	$scope.tName = function() {
        return $scope.tName;
    };
});
</script>	
</body>
</html>

コードの説明：

ここでは、「AngularJS」という文字列を返す関数を定義しているだけです。この関数は、tutorialName というメンバー変数を介してスコープオブジェクトにアタッチされます。
コマンドが正常に実行された場合、ブラウザでコードを実行すると次の出力が表示されます。

出力：