AngularJS 입문 튜토리얼: 모듈식 작업 사용 예-JS 튜토리얼-php.cn

AngularJS 입문 튜토리얼: 모듈식 작업 사용 예

高洛峰

풀어 주다： 2016-12-08 11:08:40

원래의

1032명이 탐색했습니다.

이 기사의 예에서는 AngularJS 모듈식 작업의 사용법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

이전 튜토리얼에서는 문제의 설명을 용이하게 하기 위해 코드가 상대적으로 작았습니다. 사실, 이것은 좋은 프로그래밍 습관과 열악한 유지 관리 기능이 아닙니다. 일반적인 접근 방식은 비즈니스 로직을 처리하는 코드를 별도의 JS 파일에 작성한 다음 해당 파일을 HTML 페이지에 도입하는 것입니다.

그러나 이로 인해 새로운 문제가 발생합니다. 우리 컨트롤러가 모두 전역 네임스페이스에 정의되어 있고 이 JS를 로그인 페이지와 비밀번호 수정 페이지에 도입한다고 가정합니다. B도 같은 생각을 갖고 컨트롤러 이름을 UserController로 지정하면 이름 충돌이 발생합니다. 그리고 새로운 컨트롤러를 추가할 때, 같은 이름의 컨트롤러가 이미 존재하는지 늘 고민해야 하는데, 코드 확장성이 많이 떨어지는 걸까요?

AngularJS의 모듈은 이 문제를 매우 잘 해결할 수 있습니다. 다음으로 AngularJ가 이름 충돌을 처리하는 방법을 살펴보겠습니다.

코드 목록 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>

로그인 후 복사

코드 목록 3. tutorial04.js

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

로그인 후 복사

로그인 페이지 tutorial04_1.html과 비밀번호 변경 페이지 tutorial04_2.html이 있고 컨트롤러 코드는 tutorial04.js에 작성되었으며 동일한 컨트롤러 UserController가 두 페이지 모두에 정의되어 있습니다.

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("修改密码");
  }
 }
);

로그인 후 복사

이 코드 줄을 통해 모듈을 정의합니다. 첫 번째 매개변수는 모듈 이름입니다. 두 번째 매개변수는 선택사항인 배열입니다. 이 매개변수를 지정하면 새 모듈이 생성됩니다. 지정하지 않으면 구성에서 검색됩니다.

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

로그인 후 복사

컨트롤러 함수를 통해 모듈에 컨트롤러를 추가합니다. 첫 번째 매개변수는 컨트롤러 이름, 두 번째 매개변수는 컨트롤러 구현 부분입니다. .

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

로그인 후 복사

그런 다음 tutorial04_1.html 및 tutorial04_2.html에서 ng-app="loginMod" 및 ng-app="pwordMod"를 사용하여 페이지의 컨트롤러가 속한 모듈을 지정할 수 있습니다.

브라우저에서 페이지를 실행할 때 모듈의 UserController 컨트롤러가 다른 페이지 호출에 사용되지 않는 것을 확인할 수 있습니다.