Wenn Sie NG verwenden, können Sie eine einfache Seitenanwendung durchführen, und ich hoffe, dass alle Seiten auf der Website die NG -Route verwenden und versuchen, den Standort nicht zu verwenden. Solche WebApps haben jedoch viele Vorteile, aber der einzige Nachteil ist, dass Ihr WebApp mehr Benutzer und mehr Funktionen hat und mehr Controller immer mehr geworden sind. Sie müssen alle Controller als globale Module laden, sodass Sie nach dem Drücken von F5 auf einer Seite auf der Website zu einer anderen Seite übergehen können, ohne den Controller nicht zu finden. Das Laden aller Controller macht die erste Öffnungsgeschwindigkeit der Seite am Mobiltelefon langsamer. Heute werde ich Ihnen teilen, wie ich diesen Nachteil verbessert habe und die modulare Belastung des Controllers erkennen kann.
app.js
Die Codekopie lautet wie folgt:
app.config (Funktion ($ controllerProvider, $ compileProvider, $ filterProvider, $ ciply) {
app.register = {
Controller: $ ControllerProvider.register,
Richtlinie: $ compileProvider.directive,
Filter: $ filterProvider.register,
Fabrik: $ ciples.factory,
Service: $ cips.service
};
});
Blockieren Sie die erforderlichen JS auf der Route und fahren Sie nach erfolgreichem Laden fort. Wenn Sie nicht wissen, was $ Skript ist, klicken Sie bitte auf http://dustindiaz.com/scriptjs
Die Codekopie lautet wie folgt:
$ routeProvider.when ('/: Plugin', {
templateurl: function (rd) {
return 'plugin/' + rd.plugin + '/index.html';
},
lösen: {
Laden: Funktion ($ q, $ route, $ rootscope) {
var deferred = $ q.Defer ();
var Abhängigkeiten = [
'Plugin/' + $ route.current.params.plugin + '/controller.js' '
];
$ script (Abhängigkeiten, function () {
$ rootscope. $ bewerben (function () {
aufgeschoben.resolve ();
});
});
Rückgabe aufgeschoben.Promise;
}
}
});
Controller.js
Die Codekopie lautet wie folgt:
app.register.controller ('MypluginCtrl', Funktion ($ scope) {
...
});
index.html
Die Codekopie lautet wie folgt:
<div ng-controller = "mypluginctrl">
...
</div>
Auf diese Weise kann die Transformation die JS dynamisch laden, von der die Route abhängt, wenn die Route geleitet wird. Im Allgemeinen gibt es jedoch viele Routen in unseren WebApps, und jeder von ihnen muss eine Reihe von Code schreiben, was sowohl hässlich als auch schwer zu pflegen ist. Wir könnten es genauso gut optimieren.
app.js
Die Codekopie lautet wie folgt:
app.config (Funktion ($ controllerProvider, $ compileProvider, $ filterProvider, $ ciply) {
app.register = {
Controller: $ ControllerProvider.register,
Richtlinie: $ compileProvider.directive,
Filter: $ filterProvider.register,
Fabrik: $ ciples.factory,
Service: $ cips.service
};
app.asyncjs = function (js) {
return ["$ q", "$ route", "$ rootscope", function ($ q, $ route, $ rootscope) {
var deferred = $ q.Defer ();
var abhängigkeiten = js;
if (array.isarray (Abhängigkeiten)) {
für (var i = 0; i <abhängigkeiten.length; i ++) {
Abhängigkeiten [i] + = "? V =" + V;
}
} anders {
Abhängigkeiten + = "? V =" + v; // v ist die Versionsnummer
}
$ script (Abhängigkeiten, function () {
$ rootscope. $ bewerben (function () {
aufgeschoben.resolve ();
});
});
Rückgabe aufgeschoben.Promise;
}];
}
});
Die Codekopie lautet wie folgt:
$ routeProvider.when ('/: Plugin', {
templateurl: function (rd) {
return 'plugin/' + rd.plugin + '/index.html';
},
lösen: {
Laden: app.asyncjs ('Plugin/Controller.js')
}
});
Teilen Sie zu diesem Zeitpunkt einfach den ursprünglichen Controller.js in mehrere JS nach dem Modul auf und fügen Sie dann Modulabhängigkeiten zur Route hinzu, um die Ladegeschwindigkeit zu verbessern. Diese Methode kann nicht nur für das Laden von Controller bei Bedarf verwendet werden, sondern auch für andere JS -Module, wie z.
Die Codekopie lautet wie folgt:
$ routeProvider.when ('/: Plugin', {
templateurl: function (rd) {
return 'plugin/' + rd.plugin + '/index.html';
},
lösen: {
Laden: app.asyncjs (['Plugin/Controller.js', 'Plugin/jquery.ui.datepicker.js']))
}
});
Das ist in Ordnung
PS: $ script kann die JS beurteilen, die geladen werden müssen. Wenn es zuvor geladen wurde, kehrt es direkt zum Erfolg zurück. Das heißt, nur wenn Sie die Datumsauswahlschnittstelle zum ersten Mal eingeben, fordern Sie jQuery.ui.datepicker.js an, um zu beenden und dann einzugeben, und Sie werden es nicht anfordern.