ホームページ > 記事 > ウェブフロントエンド > AngularJS入門チュートリアル：モジュラー操作の使用例
AngularJS入門チュートリアル：モジュラー操作の使用例
- 高洛峰オリジナル
- 2016-12-08 11:08:40981ブラウズ
この記事の例では、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 コントローラーが使用されていないことがわかります:
