3

Angular позволяет загружать шаблоны по средствам роутера динамически, но пока не нашел ни одного примера где динамически загружался бы ещё и контролер...

var app = angular.module( 'app', ['ngRoute'] );
app.config([ '$routeProvider',
    function( $routeProvider ) {
        $routeProvider
            .when('/', {
                    templateUrl: 'template/main/main.html',
                    controller: 'MainCtr'
                })
            .when('/login', {
                    templateUrl: 'template/only/login.html',
                    controller: 'LoginCtr'
                })
            .otherwise({
                    redirectTo: '/'
                });
    }
]);

Как загружать контроллеры динамически с загрузкой шаблона? Например, если скрипт контроллера лежит в одной папке с шаблоном. Или для этих целей 'стандартный' роутер не подходит?

3
  • 1
    Может это поможет. stackoverflow.com/questions/20909525/….
    – diproart
    7 июн 2015 в 14:46
  • что за код приведен в вопросе? Он отлично работает и устанавливает контроллер выбранному view. Вы хотели что-то другое?
    – Grundy
    21 апр 2016 в 9:43
  • Он требует предварительного подключения скриптов, а было нужно что бы они тянулись так же как и шаблоны - динамически, по мере надобности.
    – t1nk
    21 апр 2016 в 9:46

1 ответ 1

1

Для этой задачи я взял себе на вооружение webpack, ui-router и oclazyload

Настроил webpack с разбивкой на чанки. Можно посмотреть хороший скринкаст, который даст полную информацию о настройке

output: {
    path: path.resolve(__dirname, 'web/'),
    publicPath: '/',
    chunkFilename: 'js/bundle.[name].js',
    filename: 'js/bundle.js'
},

Пример роутинга.

{
     stateName: 'app.articles.detail',
     params: {
         url: '/:code',
         templateProvider: ($q) => {
             return $q((resolve) => {
                 require.ensure([], () => resolve(require('./views/articles.detail.html')));
             });
         },
         controller: 'ArticlesDetailController as vm',
         resolve: {
             loadArticlesDetailController: ($q, $ocLazyLoad) => {
                 return $q((resolve) => {
                     require.ensure([], () => {
                         // load only controller module
                         let module = require('./controllers/articles.detail.controller');
                         $ocLazyLoad.load({
                             name: module.name
                         });
                         resolve(module.controller);
                     })
                 });
             }
         }
     }
 }

Webpack создаст отдельные бандлы для шаблона и контроллера и подгрузит их динамически.

Подгрузит их только при необходимости.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.