>웹 프론트엔드 >JS 튜토리얼 >AngularJS 모듈 관리 문제를 처리하는 색다른 방법_AngularJS

AngularJS 모듈 관리 문제를 처리하는 색다른 방법_AngularJS

WBOY
WBOY원래의
2016-05-16 16:01:421323검색

1.원인

저는 winform 작업을 해왔는데 운이 좋게도 node.js, express, angleJS 등과 같은 많은 오픈 소스 프레임워크를 통합하는 마스터로부터 프로젝트를 인수하여 빠르게 선반에 올려 놓았습니다. 그래서 예전 아이디어를 활용하면서 코드를 정리하고 리팩터링했습니다.

2. 질문

특정 환경에서는 BootStrap의 모달박스를 사용해야 합니다. win에서 배우고 있나요? . 당연히 BoostStrp 모달박스를 보편적인 것으로 통합하여 어디에서나 호출할 생각을 했습니다. . .

그래서 대화 상자 파일은 patial을 사용하여 참조되고 대화 상자 자체는 서버 관련 통신을 위해 anglurJS를 사용합니다.

나중에는 하나만 사용하면 잘 작동한다는 것을 알았습니다. 여러 번 참조하면(다른 데이터 호출) 하나만 작동합니다. .

3. 분석

일부 정보를 확인한 결과,angular.bootstrap 호출은 페이지에서 한 번만 실행할 수 있다는 것을 깨달았습니다. 여러 번 실행하면 유용하지 않습니다. 그리고 이전에는 모든 angle.module을 각각 별도의 JS 파일에 작성했습니다. time JS 파일은 마침내 angle.bootstrap을 호출하므로 자연스럽게 실패하게 됩니다.

4. 기대됩니다

그래서 페이지에 다양한 파일을 마음대로 부분적으로 추가할 수 있고, js 파일이 반복적으로 참조되지 않으며, AngulurJS도 완벽하게 실행될 수 있는 솔루션 메커니즘을 갖고 싶습니다.

5.해결책

친애하는 친구 여러분, 이 방법은 다소 역겹지만 매우 직접적이고 효과적입니다.

모든 AngularJS 모듈을 전역 배열로 동적으로 유지 관리한 다음 동적으로 로드하는 것이 아이디어입니다.

말은 그만하고 코드만 올려주세요

프레임 페이지 헤드(레이아웃...)에 있는 angulunit.js 파일을 참조하세요. 코드는 다음과 같습니다.

Array.prototype.indexOf = function (val) { 
  for( var i = 0; i < this.length; i++) {
    if(this[i] == val) return i;
          }
  return - 1;
      };
var jsModules = new Array();
function Confirm(val){
  if (jsModules.indexOf(val) > -1)
    return;
  else
    jsModules.push(val);

};

각 angul.js 모듈에서

을 교체하세요.

코드 복사 코드는 다음과 같습니다.

angular.bootstrap(문서, [모듈 이름]);

로 교체

코드 복사 코드는 다음과 같습니다.

확인(모듈 이름);

레이아웃 끝에 angulur.js 파일을 추가합니다(레이아웃 페이지? 이름은 모르겠지만 어쨌든 공개 프레임 페이지입니다).

코드 복사 코드는 다음과 같습니다.

(함수 () {
var app = angle.module('app', jsModules);
Angular.bootstrap(문서, ['app']);
})();

헤헤~~ 몸이 아프네요. . . 그것이 당신을 아프게 하나요?

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.