Usar o NG significa fazer um aplicativo de página simples e espero que todas as páginas no site usem a rota NG e tente não usar o local.href. No entanto, esses webApps têm muitos benefícios, mas a única desvantagem é que, à medida que seu aplicativo da web tem mais usuários e mais funções, e mais controladores se tornaram cada vez mais. Você precisa carregar todos os controladores como módulos globais para que, depois de pressionar F5 para atualizar em qualquer página do site, você possa percorrer qualquer outra página sem um erro de não encontrar o controlador. Carregar todos os controladores torna a primeira velocidade de abertura da página mais lenta no telefone celular. Hoje vou compartilhar com você como melhorei essa desvantagem e percebo a carga modular do controlador.
App.js
A cópia do código é a seguinte:
App.config (função ($ controlerprovider, $ compileProvider, $ filterprovider, $ fornece) {
App.register = {
Controlador: $ controlerprovider.register,
Diretiva: $ compileProvider.directive,
filtro: $ filterprovider.register,
fábrica: $ fornece.factory,
Serviço: $ fornece.service
};
});
Bloqueie o JS necessário quando rota e continue após o carregamento com sucesso. Se você não sabe o que é $ script, clique em http://dustindiaz.com/scriptjs
A cópia do código é a seguinte:
$ RouteProvider.when ('/: plugin', {
templateurl: function (rd) {
retornar 'plugin/' + rd.plugin + '/index.html';
},
Resolva: {
Carregar: função ($ q, $ rota, $ rootscope) {
var diferred = $ q.defer ();
Var dependências = [
'Plugin/' + $ route.current.params.plugin + '/Controller.js'
];
$ script (dependências, function () {
$ Rootscope. $ Aplicar (function () {
diferred.Resolve ();
});
});
return diferred.promise;
}
}
});
controller.js
A cópia do código é a seguinte:
App.register.Controller ('MyPluginctrl', função ($ scope) {
...
});
index.html
A cópia do código é a seguinte:
<div ng-controller = "mypluginctrl">
...
</div>
Dessa forma, a transformação pode carregar dinamicamente o JS do qual a rota depende quando a rota é roteada. No entanto, geralmente existem muitas rotas em nossos aplicativos da web, e cada uma delas precisa escrever um monte de código, que é feio e difícil de manter. Podemos muito bem otimizá -lo.
App.js
A cópia do código é a seguinte:
App.config (função ($ controlerprovider, $ compileProvider, $ filterprovider, $ fornece) {
App.register = {
Controlador: $ controlerprovider.register,
Diretiva: $ compileProvider.directive,
filtro: $ filterprovider.register,
fábrica: $ fornece.factory,
Serviço: $ fornece.service
};
app.asyncjs = função (js) {
return ["$ q", "$ rota", "$ rootscope", função ($ q, $ rota, $ rootscope) {
var diferred = $ q.defer ();
var dependências = js;
if (Array.esArray (dependências)) {
for (var i = 0; i <dependências.length; i ++) {
dependências [i] + = "? V =" + V;
}
} outro {
dependências + = "? v =" + v; // v é o número da versão
}
$ script (dependências, function () {
$ Rootscope. $ Aplicar (function () {
diferred.Resolve ();
});
});
return diferred.promise;
}];
}
});
A cópia do código é a seguinte:
$ RouteProvider.when ('/: plugin', {
templateurl: function (rd) {
retornar 'plugin/' + rd.plugin + '/index.html';
},
Resolva: {
Carga: App.asyncjs ('plugin/controller.js')
}
});
Nesse ponto, basta dividir o controlador original em vários Js de acordo com o módulo e, em seguida, adicionar dependências do módulo para rota para melhorar a velocidade de carregamento. Esse método pode não apenas ser usado para carregar o controlador sob demanda, mas também para outros módulos JS, como jQuery.ui.datepicker.js, adicione o nó de rota que precisa ser selecionado.
A cópia do código é a seguinte:
$ RouteProvider.when ('/: plugin', {
templateurl: function (rd) {
retornar 'plugin/' + rd.plugin + '/index.html';
},
Resolva: {
Load: App.asyncjs (['plugin/controller.js', 'plugin/jquery.ui.datepicker.js']))
}
});
Isso é bom
PS: $ Script pode julgar os JS que precisam ser carregados. Se já foi carregado antes, retornará diretamente ao sucesso. Ou seja, somente quando você inserir a interface de seleção de data pela primeira vez, solicitará que o jquery.ui.datepicker.js saia e depois digite, e você não o solicitará.