Использование NG означает выполнение простого приложения страницы, и я надеюсь, что все страницы на сайте будут использовать NG -маршрут, и постарайтесь не использовать SORACE.Href. Тем не менее, такие веб -приложения имеют много преимуществ, но единственным недостатком является то, что в качестве веб -приложения имеет больше пользователей и больше функций, а больше контроллеров становится все больше и больше. Вы должны загружать все контроллеры как глобальные модули, чтобы после нажатия F5 обновлять любую страницу на сайте, вы можете отправиться на любую другую страницу без ошибки, не найдя контроллера. Загрузка всех контроллеров делает первую скорость открытия страницы более медленной на мобильном телефоне. Сегодня я поделюсь с вами, как я улучшил этот недостаток и осознаю модульную нагрузку контроллера.
app.js
Кода -копия выглядит следующим образом:
app.config (function ($ controverprovider, $ compileprovider, $ filterprovider, $ предоставьте) {
app.register = {
Контроллер: $ controllerProvider.register,
Директива: $ compileprovider.directive,
Фильтр: $ filterprovider.register,
Фабрика: $ предоставлена. Фактор,
Сервис: $ предоставлен. Service
};
});
Заблокируйте необходимый JS при маршруте и продолжайте успешно загружать. Если вы не знаете, что такое сценарий $, нажмите http://dustindiaz.com/scriptjs
Кода -копия выглядит следующим образом:
$ routeprovider.when ('/: plugin', {
Templateurl: function (rd) {
вернуть плагин/' + rd.plugin +'/index.html ';
},
решать: {
нагрузка: функция ($ Q, $ route, $ ourtscope) {
var deferred = $ q.defer ();
var -зависимости = [
'плагин/' + $ route.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, от которого зависит маршрут, когда маршрут маршрутизируется. Однако, как правило, в наших веб -приложениях есть много маршрутов, и каждый из них должен написать кучу кода, который является и некрасивым и трудным для поддержания. Мы могли бы также оптимизировать это.
app.js
Кода -копия выглядит следующим образом:
app.config (function ($ controverprovider, $ compileprovider, $ filterprovider, $ предоставьте) {
app.register = {
Контроллер: $ controllerProvider.register,
Директива: $ compileprovider.directive,
Фильтр: $ filterprovider.register,
Фабрика: $ предоставлена. Фактор,
Сервис: $ предоставлен. Service
};
app.asyncjs = function (js) {
return ["$ q", "$ route", "$ rootscope", function ($ q, $ route, $ ourtscope) {
var deferred = $ q.defer ();
var -зависимости = JS;
if (array.isarray (зависимости)) {
for (var i = 0; i <degencies.length; i ++) {
зависимости [i] + = "? V =" + V;
}
} еще {
Зависимости + = "? V =" + V; // V - номер версии
}
$ script (зависимости, function () {
$ rootscope. $ Apply (function () {
deferred.resolve ();
});
});
return DEFERRED.PROMISE;
}];
}
});
Кода -копия выглядит следующим образом:
$ routeprovider.when ('/: plugin', {
Templateurl: function (rd) {
вернуть плагин/' + rd.plugin +'/index.html ';
},
решать: {
загрузка: app.asyncjs ('plugin/controller.js')
}
});
На этом этапе просто разделите исходный Controller.js на несколько JS в соответствии с модулем, а затем добавьте зависимости модуля для пути для улучшения скорости нагрузки. Этот метод может использоваться не только для загрузки контроллера по требованию, но и для других модулей JS, таких как jQuery.ui.datepicker.js, добавьте узел маршрута, который необходимо выбрать.
Кода -копия выглядит следующим образом:
$ routeprovider.when ('/: plugin', {
Templateurl: function (rd) {
вернуть плагин/' + rd.plugin +'/index.html ';
},
решать: {
загрузка: app.asyncjs (['plugin/controller.js', 'plugin/jquery.ui.datepicker.js'])
}
});
Это нормально
PS: $ Script может судить JS, который необходимо загрузить. Если он был загружен ранее, он вернется непосредственно к успеху. То есть только тогда, когда вы впервые введете интерфейс выбора даты, вы запросите jQuery.ui.datepicker.js, а затем ввести, и вы не будете запрашивать его.