AngularJS入門チュートリアル：モジュラー操作の使用例-jsチュートリアル-php.cn

AngularJS入門チュートリアル：モジュラー操作の使用例

高洛峰

リリース： 2016-12-08 11:08:40

オリジナル

1052 人が閲覧しました

この記事の例では、AngularJS モジュラー操作の使用法について説明します。詳細は次のとおりです。

前のチュートリアルでは、問題の説明を容易にするために、作成者はすべてのコントローラーコードを HTML ページに記述しました。実際、これは良いプログラミング習慣ではなく、保守性も悪くなります。通常のアプローチは、ビジネスロジックを処理するコードを別の JS ファイルに記述し、そのファイルを HTML ページに導入することです。

ただし、これにより新たな問題が発生します。コントローラーはすべてグローバル名前空間で定義されており、この JS をログインページとパスワード変更ページの両方に導入するとします。同じ考え方で、コントローラーに UserController という名前を付けると、名前の競合が発生します。新しいコントローラーを追加するときは、同じ名前のコントローラーが既に存在するかどうかを常に心配する必要があります。コードのスケーラビリティは非常に悪いですか?

AngularJS のモジュールはこの問題をうまく解決できます。次に、AngularJs が名前の競合をどのように処理するかを見てみましょう。

コードリスト 1.tutorial04_1.html

<!DOCTYPE html>
<html ng-app="loginMod">
<head lang="en">
 <meta charset="UTF-8">
 <script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
 <title>tutorial04_1</title>
</head>
<body>
<div ng-controller="UserController">
 用户名：<input type="text" ng-model="name" placeholder="用户名"/>
 密码：<input type="password" ng-model="pword" placeholder="密码"/>
 <button ng-click="login()">提交</button>
 <p>您输入的用户名：{{name}}</p>
 <p>您输入的密码：{{pword}}</p>
</div>
<script type="text/javascript" src="js/tutorial04.js">
</script>
</body>
</html>

ログイン後にコピー

コードリスト 2.tutorial04_2.html

<!DOCTYPE html>
<html ng-app="pwordMod">
<head lang="en">
 <meta charset="UTF-8">
 <script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
 <title>tutorial04_2</title>
</head>
<body>
<div ng-controller="UserController">
 密码：<input type="password" ng-model="pword" placeholder="密码"/>
 <button ng-click="changePwrd()">提交</button>
 <p>您输入的密码：{{pword}}</p>
</div>
<script type="text/javascript" src="js/tutorial04.js">
</script>
</body>
</html>

ログイン後にコピー

コードリスト 3.tutorial04.js

var loginMod = angular.module("loginMod", []);
loginMod.controller("UserController",function($scope,$log)
 {
  $scope.name="admin";
  $scope.pword="123456";
  $log.info( $scope.name);
  $log.info( $scope.pword);
  $scope.login = function()
  {
   alert("登录");
  }
 }
);
var pwordMod = angular.module("pwordMod", []);
pwordMod.controller("UserController",function($scope,$log)
 {
  $scope.pword="123456";
  $scope.changePwrd = function()
  {
   alert("修改密码");
  }
 }
);

ログイン後にコピー

ログインページtutorial04_1があります。 htmlとパスワード変更ページtutorial04_2.html、コントローラのコードはtutorial04.jsで記述されており、両方のページで同じコントローラUserControllerが定義されています。

var loginMod = angular.module("loginMod", []);

ログイン後にコピー

このコード行でモジュールを定義します。最初のパラメーターはモジュール名です。 2 番目のパラメーターは配列であり、このパラメーターが指定されている場合は、新しいモジュールが作成されます。指定されていない場合は、構成から取得されます。

loginMod.controller("UserController",function($scope,$log)...

ログイン後にコピー

コントローラー関数を使用してモジュールにコントローラーを追加します。最初のパラメーターはコントローラー名で、2 番目のパラメーターはコントローラーの実装部分です。

その後、tutorial04_1.html とtutorial04_2.html で ng-app="loginMod" と ng-app="pwordMod" を使用して、ページ内のコントローラーがどのモジュールに属しているかを指定できます。

ブラウザでページを実行すると、別のページを呼び出すときにモジュール内の UserController コントローラーが使用されていないことがわかります:

AngularJS入門チュートリアル：モジュラー操作の使用例