Usar NG significa hacer una aplicación de página simple, y espero que todas las páginas del sitio usen la ruta NG e intente no usar ubicación.href. Sin embargo, tales aplicaciones web tienen muchos beneficios, pero la única desventaja es que a medida que su aplicación web tiene más usuarios y más funciones, y más controladores se han vuelto cada vez más. Debe cargar todos los controladores como módulos globales para que después de presionar a F5 para actualizar en cualquier página del sitio, puede enrutar a cualquier otra página sin un error de no encontrar el controlador. Cargar todos los controladores hace que la primera velocidad de apertura de la página sea más lenta en el teléfono móvil. Hoy compartiré con ustedes cómo mejoré esta desventaja y me daré cuenta de la carga modular del controlador.
app.js
La copia del código es la siguiente:
app.config (function ($ controlerProvider, $ compileprovider, $ filtreProvider, $ proporcionar) {
app.register = {
Controlador: $ ControllerProvider.Register,
Directiva: $ compileprovider.Directive,
Filtro: $ FilterProvider.Register,
fábrica: $ proporcionar.factory,
Servicio: $ proporcionar.service
};
});
Bloquee el JS requerido cuando ruta y continúe después de cargar con éxito. Si no sabe qué es el script $, haga clic en http://dustindiaz.com/scriptjs
La copia del código es la siguiente:
$ Routeprovider.When ('/: Plugin', {
TemplateUrl: function (rd) {
return 'plugin/' + rd.plugin + '/index.html';
},
resolver: {
Load: function ($ q, $ ruta, $ rootscope) {
var diferido = $ q.defer ();
dependencias var = [
'Plugin/' + $ ruta.current.params.plugin + '/controller.js'
];
$ script (dependencias, function () {
$ RootsCope. $ Aplicar (function () {
diferido.resolve ();
});
});
regresar diferido.promise;
}
}
});
controlador.js
La copia del código es la siguiente:
app.register.controller ('mypluginctrl', function ($ scope) {
...
});
index.html
La copia del código es la siguiente:
<div ng-confontroller = "mypluginctrl">
...
</div>
De esta manera, la transformación puede cargar dinámicamente el JS que la ruta depende de cuándo se enruta la ruta. Sin embargo, generalmente hay muchas rutas en nuestras aplicaciones web, y cada una de ellas tiene que escribir un montón de código, que es feo y difícil de mantener. También podríamos optimizarlo.
app.js
La copia del código es la siguiente:
app.config (function ($ controlerProvider, $ compileprovider, $ filtreProvider, $ proporcionar) {
app.register = {
Controlador: $ ControllerProvider.Register,
Directiva: $ compileprovider.Directive,
Filtro: $ FilterProvider.Register,
fábrica: $ proporcionar.factory,
Servicio: $ proporcionar.service
};
app.asyncjs = function (js) {
Return ["$ Q", "$ ruta", "$ rootscope", function ($ q, $ ruta, $ rootscope) {
var diferido = $ q.defer ();
VAR dependencias = js;
if (array.isArray (dependencias)) {
para (var i = 0; i <dependencs.length; i ++) {
dependencias [i] + = "? V =" + V;
}
} demás {
Dependencias + = "? V =" + V; // V es el número de versión
}
$ script (dependencias, function () {
$ RootsCope. $ Aplicar (function () {
diferido.resolve ();
});
});
regresar diferido.promise;
}];
}
});
La copia del código es la siguiente:
$ Routeprovider.When ('/: Plugin', {
TemplateUrl: function (rd) {
return 'plugin/' + rd.plugin + '/index.html';
},
resolver: {
Load: App.asyncjs ('Plugin/Controller.js')
}
});
En este punto, simplemente divida el controlador original.js en múltiples JS de acuerdo con el módulo y luego agregue dependencias del módulo para enrutar para mejorar la velocidad de carga. Este método no solo puede usarse para la carga de controlador a pedido, sino también para otros módulos JS, como jQuery.ui.datepicker.js, agregue el nodo de ruta que debe seleccionarse.
La copia del código es la siguiente:
$ Routeprovider.When ('/: Plugin', {
TemplateUrl: function (rd) {
return 'plugin/' + rd.plugin + '/index.html';
},
resolver: {
Load: App.asyncjs (['Plugin/Controller.js', 'Plugin/jQuery.ui.datepicker.js'])
}
});
Está bien
PD: $ Script puede juzgar el JS que necesita ser cargado. Si se ha cargado antes, volverá directamente al éxito. Es decir, solo cuando ingrese la interfaz de selección de fechas por primera vez, solicitará jQuery.ui.datepicker.js para salir y luego ingresar, y no la solicitará.