Как мне включить файлы кода для моего проекта AngularJS?

0

Предположим, у меня есть приложение AngularJS среднего размера со структурой каталогов, аналогичной следующей:

/app
----app.js
----index.html

----/functionalityA
--------/views
------------pageA.html
--------/controllers
------------ctrlA.js
------------ctrlB.js
--------/directives
------------directiveA.js
--------/services
------------serviceA.js
------------serviceB.js

----/functionalityB
--------/views
------------pageB.html
--------/controllers
------------ctrlC.js
------------ctrlD.js
--------/directives
------------directiveB.js
--------/services
------------serviceC.js
------------serviceD.js

В нем много файлов. Как включить все из них в мое приложение?

Один из подходов заключался бы в использовании тегов <script> для всех из них в index.html:

<script src="angular.js"></script>
<script src="app.js"></script>
<script src="functionalityA/controllers/ctrlA.js"></script>
<script src="functionalityA/controllers/ctrlB.js"></script>
<script src="functionalityA/directives/directiveA.js"></script>
<script src="functionalityA/services/serviceA.js"></script>
<script src="functionalityA/services/serviceB.js"></script>
<script src="functionalityB/controllers/ctrlC.js"></script>
<script src="functionalityB/controllers/ctrlD.js"></script>
<script src="functionalityB/directives/directiveB.js"></script>
<script src="functionalityB/services/serviceC.js"></script>
<script src="functionalityB/services/serviceD.js"></script>

Это приемлемый подход?

Если нет, какие другие подходы я могу взять?

Обратите внимание, что мой вопрос заключается в понимании предпочтительного подхода к включению файлов проекта .js. Я не спрашиваю, как структурировать мои файлы.

Теги:
structure

2 ответа

0

Неправильно включать все эти файлы в отдельные теги сценариев, но каждый из них будет создавать отдельный запрос на сервер. Это не очень эффективно, так как каждый запрос будет иметь свои собственные заголовки и другие навороты. Однако, если сервер и браузер поддерживают HTTP/2, это не будет проблемой.

Но поскольку HTTP/2 по-прежнему нова и не поддерживается широко, исходные файлы обычно объединяются в один файл или лениво загружаются по требованию.

0

Во-первых - вы должны классифицировать свои файлы по их функции, а не по типу.


Вам нужно включать файлы JS так или иначе, если вам нужна их функциональность. Возможно, вы можете включить их только тогда, когда они нужны.

Вы можете использовать такую библиотеку, как Requre JS.

Или вы можете включить эти теги сценариев в свои динамические представления и обратиться к JQuery в своем заголовке, чтобы включить их динамически. Для этого вы можете использовать ng-include.

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

myApp.config(function($controllerProvider, $provide) {
    myApp.controlProvider = $controllerProvider;
    myApp.serviceProvider = $provide;
});

myApp.serviceProvider.factory('myDynFactory', function(){
        return {
                  //Whatever you like
        }
});

myApp.controlProvider.register('myDynController', [function($scope) {

   //Whatever you like
}]);

Ещё вопросы

Сообщество Overcoder
Наверх
Меню