NG를 사용한다는 것은 간단한 페이지 응용 프로그램을 수행하는 것을 의미하며 사이트의 모든 페이지가 NG 경로를 사용하고 Location.href를 사용하지 않기를 바랍니다. 그러나 이러한 WebApp에는 많은 이점이 있지만 WebApp에 더 많은 사용자와 기능이 있고 더 많은 컨트롤러가 점점 더 많아지면서 유일한 단점이 있습니다. 모든 컨트롤러를 전체 모듈로로드하여 F5를 눌러 사이트의 모든 페이지에서 새로 고침되면 컨트롤러를 찾지 못하는 오류없이 다른 페이지로 라우팅 할 수 있습니다. 모든 컨트롤러를로드하면 휴대폰에서 페이지의 첫 번째 개방 속도가 느려집니다. 오늘 저는이 단점을 어떻게 개선하고 컨트롤러의 모듈 식로드를 깨닫는 방법을 공유 할 것입니다.
app.js
코드 사본은 다음과 같습니다.
app.config (function ($ controllerprovider, $ compileprovider, $ filterprovider, $ prover) {
app.register = {
컨트롤러 : $ ControllerProvider.register,
지침 : $ compileprovider.directive,
필터 : $ FilterProvider.register,
공장 : $ provery. factory,
서비스 : $ prover.service
};
});
경로시 필요한 JS를 차단하고 성공적으로로드 후 계속하십시오. $ 스크립트가 무엇인지 모르는 경우 http://dustindiaz.com/scriptjs를 클릭하십시오.
코드 사본은 다음과 같습니다.
$ loureprovider.when ( '/: 플러그인', {
templateurl : function (rd) {
'플러그인/' + rd.plugin + '/index.html';
},
해결하다: {
부하 : 함수 ($ q, $ route, $ rootscope) {
var deferred = $ q.defer ();
var 종속성 = [
'플러그인/' + $ rate.current.params.plugin + '/controller.js'
];
$ script (종속성, function () {
$ rootscope. $ apply (function () {
Deferred.resolve ();
});
});
Return Deferred.Promise;
}
}
});
Controller.js
코드 사본은 다음과 같습니다.
app.register.controller ( 'mypluginctrl', function ($ scope) {
...
});
index.html
코드 사본은 다음과 같습니다.
<div ng-controller = "mypluginctrl">
...
</div>
이러한 방식으로, 변환은 경로가 라우팅 될 때 경로가 의존하는 JS를 동적으로로드 할 수 있습니다. 그러나 일반적으로 WebApps에는 많은 경로가 있으며, 각 경로는 다양한 코드를 작성해야하며, 이는 추악하고 유지하기가 어렵습니다. 우리는 그것을 최적화 할 수도 있습니다.
app.js
코드 사본은 다음과 같습니다.
app.config (function ($ controllerprovider, $ compileprovider, $ filterprovider, $ prover) {
app.register = {
컨트롤러 : $ ControllerProvider.register,
지침 : $ compileprovider.directive,
필터 : $ FilterProvider.register,
공장 : $ provery. factory,
서비스 : $ prover.service
};
app.asyncjs = function (js) {
반환 [ "$ q", "$ route", "$ rootscope", function ($ q, $ route, $ rootscope) {
var deferred = $ q.defer ();
var 종속성 = js;
if (array.isArray (종속성)) {
for (var i = 0; i <feenceencies.length; i ++) {
종속성 [i] + = "? v =" + v;
}
} 또 다른 {
종속성 + = "? v =" + v; // v는 버전 번호입니다
}
$ script (종속성, function () {
$ rootscope. $ apply (function () {
Deferred.resolve ();
});
});
Return Deferred.Promise;
}];
}
});
코드 사본은 다음과 같습니다.
$ loureprovider.when ( '/: 플러그인', {
templateurl : function (rd) {
'플러그인/' + rd.plugin + '/index.html';
},
해결하다: {
로드 : app.asyncjs ( '플러그인/컨트롤러 .js')
}
});
이 시점에서 원래 Controller.js를 모듈에 따라 여러 JS로 분할 한 다음 모듈 종속성을 추가하여로드 속도를 향상시킵니다. 이 방법은 주문형 컨트롤러 로딩뿐만 아니라 jquery.ui.datepicker.js와 같은 다른 JS 모듈에도 사용할 수 있습니다. 선택 해야하는 경로 노드를 추가하십시오.
코드 사본은 다음과 같습니다.
$ loureprovider.when ( '/: 플러그인', {
templateurl : function (rd) {
'플러그인/' + rd.plugin + '/index.html';
},
해결하다: {
로드 : app.asyncjs ([ '플러그인/컨트롤러.js', '플러그인/jquery.ui.datepicker.js'])).
}
});
괜찮아요
추신 : $ 스크립트는로드 해야하는 JS를 판단 할 수 있습니다. 이전에로드 된 경우 성공으로 직접 돌아갑니다. 즉, 처음으로 날짜 선택 인터페이스를 입력 할 때만 jQuery.ui.datepicker.js를 요청하여 종료 한 다음 입력하지 않으면 요청하지 않습니다.