Angular에서 모듈과 네임스페이스/이름 충돌JS

Angular에서 모듈과 네임스페이스/이름 충돌JS

다음 jfiddle http://jsfiddle.net/bchapman26/9uUBU/29/을 참조하십시오.

//angular.js example for factory vs service
var app = angular.module('myApp', ['module1', 'module2']);

var service1module = angular.module('module1', []);

service1module.factory('myService', function() {
    return {
        sayHello: function(text) {
            return "Service1 says \"Hello " + text + "\"";
        },
        sayGoodbye: function(text) {
            return "Service1 says \"Goodbye " + text + "\"";
        }
    };
});

var service2module = angular.module('module2', []);

service2module.factory('myService', function() {
    return {
        sayHello: function(text) {
            return "Service2 says \"Hello " + text + "\"";
        },
        sayGoodbye: function(text) {
            return "Service2 says \"Goodbye " + text + "\"";
        }
    };
});

function HelloCtrl($scope, myService) {
    $scope.fromService1 = myService.sayHello("World");
}

function GoodbyeCtrl($scope, myService) {
    $scope.fromService2 = myService.sayGoodbye("World");
}​

2개의 모듈(module1과 module2)이 있습니다.module1과 module2는 모두 myService라고 불리는 서비스를 정의합니다.이로 인해 두 모듈을 myApp으로 가져올 때 Angular 내의 myService에서 이름 충돌이 발생합니다.AngularJs는 발생할 수 있는 문제를 경고하지 않고 두 번째 서비스 정의를 사용하는 것으로 보입니다.

매우 큰 프로젝트(또는 모듈을 재사용하는 경우)에서는 이름이 충돌할 위험이 있으며 디버깅이 어려울 수 있습니다.

이름 경합이 발생하지 않도록 모듈 이름에 프레픽스를 붙이는 방법이 있습니까?

오늘부로 앵귤러JS 모듈은 다른 모듈 내의 객체 간의 충돌을 방지하는 네임스페이스를 제공하지 않습니다.그 이유는 Angular가JS 앱에는 모듈 이름에 관계없이 모든 개체의 이름을 유지하는 단일 인젝터가 있습니다.

앵귤러JS 개발자 가이드:

종속성 생성의 책임을 관리하기 위해 각 Angular 애플리케이션에는 인젝터가 있습니다.인젝터는 종속성의 구축 및 조회를 담당하는 서비스 로케이터입니다.

말씀하신 바와 같이 메인/앱 모듈에 모듈을 삽입할 때 심각한 버그가 발생할 수 있습니다.충돌이 발생하면 무음 상태가 되며 마지막으로 주입된 모듈에 따라 승자가 결정됩니다.

그러니까 이런 충돌을 피할 수 있는 방법은 없습니다.아마도 이것은 미래에 일어날 것이다.이 문제가 발생할 가능성이 높은 대규모 앱의 경우 명명 규칙이 가장 적합한 도구입니다.모듈 또는 기능 영역에 속하는 객체가 짧은 프레픽스를 사용할 수 있는지 여부를 고려합니다.

규칙을 사용하여 모듈 이름을 지정하여 항상 고유하도록 함으로써 이러한 상황을 피할 수 있습니다.

한 가지 방법은 다른 언어에서 어떻게 하는지 보는 것입니다.예를 들어 Java에서 클래스의 "전체 이름"은 파일 이름과 해당 이름이 있는 폴더에 기반합니다.예를 들어 비트맵이라는 Java 파일이 있는 경우.myArtStuff 폴더에 있는 java, 클래스의 전체 이름은 MyArtStuff입니다.비트맵

알고보니 각진 모양JS에서는 모듈 이름의 일부로 점(.)을 사용할 수 있으므로 기본적으로 이름 규칙을 사용할 수 있습니다.

예를 들어 개발자가 스크립트 "MainPage\Module1.js"에서 "ModuleA"라는 이름의 모듈을 작성할 경우 모듈 이름을 "MainPage"로 지정해야 합니다.모듈 1모듈 A"입니다.각 경로와 파일 이름은 앱에서 고유하므로 모듈 이름은 고유합니다.

개발자가 이 규칙을 따르도록 해야 합니다.

Rockallite가 지적한 바와 같이 여러 모듈에서 동일한 이름을 가진 서비스나 컨트롤러 등에는 도움이 되지 않습니다.그러나 이와 유사한 방법을 사용하여 결과를 얻을 수 있으며 이러한 요소의 이름 앞에 접두사를 붙일 수도 있습니다.

이상적인 각도JS에는 네임스페이스가 있으며, 미래에는 네임스페이스가 있을 것입니다.그때까지 우리가 할 수 있는 최선의 방법은 네임스페이스가 발명되기 전 40년 이상 개발자들이 해온 일을 하는 것입니다. 그리고 우리가 할 수 있는 가장 좋은 요소들에 접두사를 붙이는 것입니다.

아쉽게도 없습니다.namespacingAngularJS로 표시됩니다.한 가지 해결방법은 다음과 같습니다.prefix(다른 해결책은 이것일 수 있습니다!)다음의 예를 참조해 주세요.

// root app
const rootApp = angular.module('root-app', ['app1', 'app2']);

// app 1
const app1 = angular.module('app1', []);
app1.controller('app1.main', function($scope) {
  $scope.msg = 'App1';
});

// app2
const app2 = angular.module('app2', []);
app1.controller('app2.main', function($scope) {
  $scope.msg = 'App2';
})

<!-- angularjs@1.7.0 -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.min.js"></script>

<!-- root app -->
<div ng-app="root-app">

  <!-- app 1 -->
  <div ng-controller="app1.main">
    {{msg}}
  </div>

  <!-- app 2 -->
  <div ng-controller="app2.main">
    {{msg}}
  </div>

</div>

서비스를 제공하는 모듈에서 컨트롤러를 정의합니다.

service2Module.controller("ServiceTwoCtrl", function(myService, $scope) {});

언급URL : https://stackoverflow.com/questions/13406791/modules-and-namespace-name-collision-in-angularjs