2013-04-19 3 views
18

В this repo Угловой JS имплантирован RequireJS для AMD.Поддерживает ли AngularJS AMD как RequireJS?

В this repo команда AngularJS использует проект AngularJS с AMD, который не включает RequireJS.

  • Я думаю об этом неправильно - I.E. они решают разные проблемы?
  • Поддерживает ли Linux-версию AngularJS AMD сейчас, где она не была раньше?
  • Больше не нужно использовать RequireJS с проектами AngularJS?
+0

Я предполагаю, что комментарий по этому вопросу может быть полезным http://stackoverflow.com/q/12529083/1236044 – jbl

+1

@jbl Кажется, что вопрос немного датированный 'спросил 21 сентября '12 в 10: 49'. Пример, представленный Angular team здесь: https://github.com/angular/angular-seed/blob/master/app/index-async.html говорит о моем замешательстве. –

+0

вот отличное видео, в котором показано, как использовать requireJS с angularJS https://www.youtube.com/watch?v=4yulGISBF8w#t=142 – gskalinskii

ответ

20

Да, вы можете использовать RequireJS с угловым. Вам нужно сделать немного дополнительной работы, чтобы она функционировала, как в ссылке, которую вы включили, но это возможно.

В общем, я не нашел необходимости в AMD с угловым. Вся идея AMD заключается в том, что она позволяет декларативно определять зависимости между вашими сценариями и не беспокоиться о том, как вы их включаете на странице. Тем не менее, Angular позаботится об этом с вашим механизмом впрыскивания зависимостей, поэтому вы не получаете никакой пользы, используя AMD поверх этого.

tl; dr Я не нашел веской причины использовать AMD с Angular.js.

+2

Есть ли «какие-либо» преимущества, о которых вы могли подумать, или ситуации, которые вы могли бы запустить в который заставит вас хотеть использовать Requir.js с Angular.js? Вот ссылка, которая вносит свой вклад в это обсуждение: http://stackoverflow.com/questions/12529083/does-it-make-sense-to-use-require-js-with-angular-js –

+0

Вы могли бы объяснить больше/дать пример того, как работает механизм инъекций зависимостей Angularjs? –

+2

Есть ли способ загрузить модули angularjs асинхронно? –

27

Использование RequireJS с AngularJS имеет смысл, но только если вы понимаете, как каждый из них работает относительно зависимой инъекции, так как хотя оба они вводят зависимости, они вводят очень разные вещи.

У AngularJS есть своя система зависимостей, которая позволяет вводить модули AngularJS во вновь созданный модуль, чтобы повторно использовать реализации. Допустим, вы создали «первый» модуль, который реализует AngularJS фильтр «поздороваться»:

angular 
    .module('first', []) 
    .filter('greet', function() { 
    return function(name) { 
     return 'Hello, ' + name + '!'; 
    } 
    }); 

А теперь предположим, что вы хотите использовать «поздороваться» фильтр в другом модуле, называемом «втором», который реализует «до свидания "фильтр. Вы можете сделать это путь инъекций «первый» модуль «вторым» модуль:

angular 
    .module('second', ['first']) 
    .filter('goodbye', function() { 
    return function(name) { 
     return 'Good bye, ' + name + '!'; 
    } 
    }); 

Дела в том, что для того, чтобы сделать эту работу правильно без RequireJS, вы должны убедиться, что модуль «первый» AngularJS загружается на страницу, прежде чем создавать «второй» модуль AngularJS. Котировочная документация:

В зависимости от модуля подразумевается, что необходимый модуль необходимо загрузить , прежде чем загрузится требуемый модуль.

В этом смысле здесь RequireJS может помочь вам, поскольку RequireJS обеспечивает чистый способ ввода сценариев на страницу, помогая вам организовать зависимости сценариев между собой.

Возвращаясь к «первым» и «вторым» AngularJS модулям, вот как вы можете сделать это с помощью RequireJS разделительного модулей на разные файлах использовать скрипт зависимостей загрузки:

// firstModule.js file 
define(['angular'], function(angular) { 
    angular 
    .module('first', []) 
    .filter('greet', function() { 
     return function(name) { 
     return 'Hello, ' + name + '!'; 
     } 
    }); 
}); 
// secondModule.js file 
define(['angular', 'firstModule'], function(angular) { 
    angular 
    .module('second', ['first']) 
    .filter('goodbye', function() { 
     return function(name) { 
     return 'Good bye, ' + name + '!'; 
     } 
    }); 
}); 

You может видеть, что мы зависим от файла firstModule, который нужно вставить до того, как будет выполнен запрос обратного вызова RequireJS, для которого нужно загрузить первый модуль AngularJS для создания «второго» модуля AngularJS.

Сторона примечания: «Угловые» в файлах «firstModule» и «secondModule» необходимы для использования функции AngularJS в функции обратного вызова RequireJS, и ее необходимо настроить в конфигурации RequireJS для сопоставления «угловой» и код библиотеки. У вас может быть и AngularJS, загружаемый на страницу традиционным способом (скриптовый тег), хотя и наносит ущерб требованиям RequireJS.

Подробнее о поддержке RequireJS от ядра AngularJS версии 2.0 на моем сообщении в блоге.

Основываясь на моем блоге «Создание чувство RequireJS с AngularJS», вот link.

2

Вы можете лениво загрузить компоненты Angular.js, используя поставщиков. От article:

Поставщики - это по существу объекты, которые используются для создания и настройки экземпляров артефактов AngularJS. Следовательно, для регистрации ленивого контроллера вы должны использовать $controllerProvider. ...

Таким образом, вы должны сначала определить свой модуль приложения, чтобы хранить экземпляры соответствующих поставщиков. Затем вы определяете свои ленивые артефакты, чтобы регистрироваться, используя поставщиков, а не API модуля. Затем, используя функцию «разрешить», которая возвращает обещание в определении маршрута, вы загрузите все ленивые артефакты и разрешите обещание после их загрузки. Это гарантирует, что все ленивые артефакты будут доступны до отображения соответствующего маршрута. Кроме того, не забудьте решить обещание внутри $ rootScope. $ Apply, если разрешение будет происходить за пределами AngularJS. Затем вы создадите скрипт «bootstrap», который сначала загружает модуль приложения перед загрузкой приложения. Наконец, вы ссылаетесь на скрипт начальной загрузки из вашего файла index.html.

http://ify.io/lazy-loading-in-angularjs/

Смежные вопросы