집 >웹 프론트엔드 >JS 튜토리얼 >AngularJS 애플리케이션 모듈화 사용에 대한 자세한 설명

AngularJS 애플리케이션 모듈화 사용에 대한 자세한 설명

php中世界最好的语言원래의: 2018-04-08 10:56:541592검색

이번에는 AngularJSapplicationmodularization 사용에 대한 자세한 설명과 AngularJS 애플리케이션 모듈화 사용 시 주의사항은 무엇인지 알아보겠습니다.

1. 모듈화의 이점

(1) 구현 로직이 더 명확하고 가독성이 높습니다.
(2) 팀 개발이 명확하고 제어하기 쉽습니다.
(3) 재사용 가능한 코드,
(4) 강력한 유지 관리 기능을 갖춘 추상 공용 모듈,
(5) 새로운 유사한 시스템의 조립 및 개발을 용이하게 합니다.

2. AngularJS 모듈 정의

(1) 각도 방법 객체의 module()을 사용하려면:

  // 定义一个无依赖模块
  angular.module('appModule',[]);
  // 定义一个依赖module1、module2的模块
  angular.module('appModule',['module1','module2']);

(2) angle.module() 메소드: 세 개의 매개변수를 받습니다.

첫 번째는 모듈의 이름이고, 두 번째는 모듈의 이름을 나타내는 배열입니다. 모듈은 다음에 달려 있습니다. 다른 모듈에 의존할 필요가 없다면 빈 배열을 전달하면 됩니다. 세 번째 매개변수는 선택사항이며 모듈 구성을 위한 메소드를 수신합니다. 해당 기능은 모듈 인스턴스의 config() 메소드와 동일합니다.

angular.module() 이 메서드는 개체의 컨트롤러(), directive(), filter() 및 기타 메서드를 호출하여 controller, 지침, filter 및 기타 구성 요소를 모듈에 추가할 수 있습니다. .

(3) 페이지 참조 모듈: ng-app 명령

<html ng-app="appMobile">

3. 모듈을 사용하여 이름 충돌 문제를 해결합니다.

두 페이지가 js 파일을 공유합니다. 두 페이지에서 정의된 컨트롤이 컨트롤러 이름이 같을 때 충돌이 발생합니다. AngularJS는 모듈화를 사용하여 명명 충돌을 해결합니다. 두 개의 모듈 인스턴스를 생성하고 Controller() 메서드를 호출합니다. 두 모듈 인스턴스 중 동일한 이름의 두 모듈을 생성하지만 이 두 컨트롤러는 다른 모듈에 속합니다. html 페이지의 컨트롤러 이름은 모두 UserController이지만 서로 다른 모듈에 속하므로 충돌을 피할 수 있습니다.

4. 가장 모듈화된 모범 사례 프로젝트 이름: app, 두 개의 모듈 포함: 로그인 및 등록:

var loginModule = angular.module("loginModule",[]);
loginModule.controller("UserController",function($scope,$log){
  
  $scope.uname = "login";
  $scope.pword = "admin";
  $scope.submit = function(){
    alert("登录模块： UserController");
  }
  
})
var registerModule = angular.module("registerModule",[]);
registerModule.controller("UserController",function($scope,$log){
  
  $scope.uname = "register";
  $scope.pword = "admin";
  $scope.submit = function(){
    alert("注册模块： UserController");
  }  
})

더 흥미로운 정보를 보려면 이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. , PHP 중국어 웹사이트의 다른 관련 기사도 주목해주세요!