Соглашение об именах для зависимостей углового модуля

Question

Я только начал изучать AngularJS и получил возможность посмотреть разные угловые примеры. У меня есть вопрос относительно зависимостей angular.module. Как мы можем узнать имя используемых зависимостей и от того, где (или в какой директории) угловые инъекции этих зависимостей?

, например

var clientApp = angular.module('clientApp', ['ui.bootstrap', 'hljs', 'common', 'smart-table', 
    'bootstrap.fileField', 'toaster', 'ngAnimate', 'angulartics', 'angulartics.google.analytics']); 

в приведенном выше clientApp они использовали девять зависимостей. Я запутался в именах, используемых для ввода этих зависимостей, таких как ui.bootstrap, hljs и т. Д. Существует ли стандартное соглашение для этих имен? Также как угловой выбор необходимых модулей из папки lib? Это моя структура каталогов

+---js 
¦  appctrl.js 
+---lib 
    +---components 
     +---angular 
     ¦  angular.js 
     ¦  angular.min.js 
     +---angular-animate 
     ¦  angular-animate.js 
     ¦  angular-animate.min.js 
     +---angular-bootstrap 
     ¦  ui-bootstrap-tpls.js 
     ¦  ui-bootstrap-tpls.min.js 
     ¦  ui-bootstrap.js 
     ¦  ui-bootstrap.min.js 

КлиентApp получит все модули в обязательном порядке. Интересно, как он может получить доступ к этой директории без указания.

Answer 1

Ввод зависимостей модулей зависит от вашего кода. Либо одна или несколько зависимостей вводятся на основе потребности в коде. Если вы перенаправляете страницы, используя угловой «ngRoute», вы будете введены. Если вы вводите «ngRoute», вы должны указать «angular-route.js» в заголовке скрипта. Другим примером является ngAnimate. Это используется, когда требуется анимация. Это должно использоваться, когда меню появляется или исчезает, чтобы сделать переход плавным. Необходимо добавить угловое-animate.js.

ui-bootstrap - это список компонентов бутстрапа, разработанных в угловых условиях. Если вы намереваетесь использовать какие-либо директивы в следующем URL-адресе, вы будете вводить ui-bootstrap. https://angular-ui.github.io/bootstrap/

Тостер - это библиотека третьей части. Другой общий - это сетчатка.

Есть сотни модулей, которые могут быть введены в угловые модули. Вводите только модули, которые используются в коде, как описано выше. Вы должны добавить связанные js-файлы в свой HTML-скрипт. Если вы не добавите скрипт js, угловой код не поймет инъекцию.

Дайте мне знать, если вы ожидаете больше деталей

Answer 2

Зависимости вы инъекционные к модулю названы так же, как ваш clientApp углового модуль, поскольку они также являются угловыми модулями.

Так что в вашем случае я мог бы потребовать ваше приложение, передав «clientApp» в массив зависимостей моего модуля.

Что касается файловых фрагментов, которые необходимо запросить clientApp, это зависит от того, как вы создаете приложение. Вы можете обернуть все ваши JS в Immediately Invoked Function Expressions AKA IIFEs, как например:

(angular.module(function() {}))()

Тогда вы просто должны включать каждый скрипт отдельно в вашем index.html, как вы бы любой файл Javascript. Их имена объявляются примерно так же, как и модуль. Пример:

.service('sampleSvc', ['$window', 'modalSvc', function($window, modalSvc){})])

Когда ваши IIFEs выполняются эти функции регистрируются на вашем модуле приложения, а затем можно назвать по имени. В этом случае sampleSvc.

Или вы можете погрузиться в мир инструментов для сборки ...Лично мне нравится, что NPM делает все и пишет все свои собственные команды оболочки для каждой части цикла сборки. Я предпочитаю браузеру в сочетании с этим. Однако для кого-то, кто только начинает работу, вы можете проверить grunt и gulp. (Спорное время мнения: Глоток быстрее)

также: +1 к рекомендации для изучения John Papa's Angular Styleguide. Если я не ошибаюсь, это было одобрено угловой командой. Также проверьте его ng-demos для более надежных примеров.