AngularJS: порядок объявления фрагментации фрагмента файла

Я использую grunt для конкатенации файлов .js для моего приложения Angular.

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

Однако я обнаружил, что порядок конкатенации, похоже, нарушает приложение, если модуль потребляется до его объявления.

например:

|-- src/
|   |-- app/
|   |   |-- userProfile/
|   |   |   |   userProfile.js
|   |   |   |-- deposits/
|   |   |   |   |-- depositFormCtrl.js

Где:

// userProfile.js
var userProfile = angular.module('userProfile',[])

// depositFormCtrl.js
angular.module('userProfile')
    .controller('DepositFormCtrl', function($scope) {...});

Когда grunt выполняет конкатенацию, depositFormCtrl.js появляется перед userProfile.js. Это заставляет приложение выкидывать ошибку, жалуясь:

Неподготовленная ошибка: нет модуля: userProfile

Я вижу много разговоров о возможностях использования RequireJS/AMD для управления порядком загрузки модулей. Однако часто он утверждал, что это слишком сложно/не требуется, как Angular обрабатывает это для вас.

Например: Брайан Форд команды Angular упоминается:

Мой личный подход заключается в том, что RequireJS делает слишком много; единственной особенностью системы AngularJS DI является отсутствие асинхронной загрузки.

Он также заявил в другом месте, что он не рекомендует RequireJS с Angular.

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

Добавление angular -loader.js в мой проект не помогло решить проблему.

Есть ли объявление, которое я должен использовать, которое предотвращает ошибки, которые у меня возникают?

Каков правильный способ объявления модулей и контроллеров, чтобы файлы заказов были объединены, не влияет на код во время выполнения?

Ответ 1

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

//app/_declarations.js
angular.module('userProfile',[]);

//app/userProfile/userProfile.js
angular.module('userProfile')
   .config(['$routeProvider', function ($router) {...});

//app/userProfile/deposits/depositFormCtrl.js
angular.module('userProfile')
   .controller('DepositFormCtrl', function($scope) {...});

Может быть, не подходит для всех сценариев, но прост в настройке и понимании.

Ответ 2

Я столкнулся с той же проблемой. Я разделил шаг конкатенации в моем GruntFile.js на две задачи, поэтому по существу мой app.js, где определено мое приложение Angular, является "добавленным" к промежуточному конкатенированному файлу (_app.js), и результат сохраняется с тем же именем промежуточного файла, что приводит к окончательному "_app.js"

app.js

var TestApp = angular.module('TestApp', [...]);

Подпрограммы в моем разделе concat моего GruntFile.js

....
// Concatenate all Angular application JS files into _app.js.  Note the use
// of wildcards to walk the App folder subfolders to pick up all JS files.
        jsCore: {
            src: [                   
                '<%= meta.appPath%>/**/*.js',

                // Do not include app.js, since it needs to be prepended to the final concat file
                '!<%= meta.appPath/app.js',

                // Do not include config.js, since it will need to be tokenized by RM
                '!<%= meta.appPath%>/config.js'
            ],
            dest: '<%= meta.resPath %>/_app.js'
        },

        // Prepend app.js to the beginning of _app.js, and save result as _app.js.  
        // This keeps Angular happy ...
        jsApp: {
            src: [
                '<%= meta.appPath%>/app.js',
                '<%= meta.resPath%>/_app.js'
            ],
            dest: '<%= meta.resPath %>/_app.js'
        }
...

В результате файл _app.js имеет источник app.js в начале, то есть объявление TestApp.

Ответ 3

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

Лично я стараюсь избегать разбиения модуля на несколько файлов по нескольким причинам:

Трудно найти все контроллеры/службы/и т.д. из одного модуля
Если модуль становится слишком большим, значит, это означает, что вы должны разделить несколько модулей.
Это достаточно громоздко, чтобы вручную объявить список зависимостей модулей и список вложенных зависимостей для каждого модуля. Добавьте к этому список файлов зависимостей js, необходимых для RequireJS, и вы потратите большую часть своего времени на объявление скучных вещей вместо решения бизнес-задач.

Однако, если вы сохраните правило 1 модуля /1 файла, вы увидите, что ваш index.html растет очень быстро. Лично я не считаю это большой проблемой.

Ответ 4

используйте gulp, а затем используйте gulp - angular -sort

return gulp.src('./build/src/app/**/*.js')
        .pipe(sort())
        .pipe(plug.concat('concat.js'))
        .pipe(gulp.dest('./output/'));