AngularJS를 처음부터 운영하여 애플리케이션 모듈화 구현

이번에는 AngularJS를 처음부터 조작하여 애플리케이션 모듈화를 구현하는 방법을 알려드리겠습니다. 애플리케이션 모듈화를 구현하기 위해 AngularJS를 운영할 때 주의사항은 무엇인가요?

1. 모듈화의 이점

(1) 구현 논리가 더 명확하고 읽기 쉽습니다.
(2) 팀 개발이 명확하고 제어가 쉽습니다.
재사용 가능합니다.
(4) 유지 관리가 용이한 추상 공개 모듈
(5) 새로운 유사한 시스템의 조립 및 개발을 용이하게 합니다.

2. AngularJS 모듈 정의

객체의 module() 사용 방법:

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

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

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

angular.module() 이 메서드는 모듈 인스턴스 개체를 반환하며 개체의 컨트롤러(), 지시문(), 필터() 및 기타 메서드를 호출하여 컨트롤러, 명령, 필터 및 기타 구성 요소를 모듈에 추가할 수 있습니다. 3) 페이지 참조 모듈: ng -app 명령

3. 모듈을 사용하여 이름 충돌 문제를 해결하세요두 페이지가 js 파일을 공유합니다. 두 페이지에서 정의한 컨트롤러 이름이 동일합니다. AngularJS는 모듈성을 사용하여 이름 지정 충돌을 해결합니다. 두 개의 모듈 인스턴스를 생성하기 위해 두 개의 모듈 인스턴스의 Controller() 메서드를 호출합니다. 그러나 이 두 컨트롤러는 서로 다른 모듈에 속하지만 html 페이지의 컨트롤러 이름은 모두 UserController이므로 충돌을 방지할 수 있습니다.

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");
  }  
})

for moduleization 프로젝트 이름: app, 두 개의 모듈: 로그인 및 등록:

├─app
│ │
│ ├──css---------------CSS样式
│ ├──img---------------图片资源
│ ├──js----------------JS代码  
│ │  common.js // 公共JS代码
│ │
│ ├──modules
│ │  │
│ │  ├─login----------------登录模块
│ │  │  │  
│ │  │  │   loginModule.js----------------登录模块定义
│ │  │  │   
│ │  │  ├─css
│ │  │  ├─js  
│ │  │  │   directives.js
│ │  │  │   filters.js
│ │  │  │   controllers.js----------------控制器定义
│ │  │  │  
│ │  │  │  
│ │  │  └─views  
│ │  │     login.html
│ │  │     
│ │  └──register----------------注册模块  
│ │     │  
│ │     │   registerModule.js----------------注册模块定义
│ │     │   
│ │     ├─css
│ │     ├─js  
│ │     │   directives.js
│ │     │   filters.js
│ │     │   controllers.js----------------控制器定义
│ │     │  
│ │     │  
│ │     └─views  
│ │       register.html
│ │

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

추천 도서:

vue+mint-ui 프로젝트에서 사용하는 방법

DOM 객체 노드 메소드 삭제에 대한 JS 요약

위 내용은 AngularJS를 처음부터 운영하여 애플리케이션 모듈화 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!