이번에는 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 명령
<html ng-app="appMobile">
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
