2013-08-13 4 views
0

Я создал приложение на основе ng-шаблона. Все работает нормально. Однако, теперь я приближаюсь к развертыванию, я хочу скомпилировать и минимизировать код. Это достаточно сложно, используя компиляцию grunt, но, конечно, приложение ломается, когда его минимизируют. Я не ожидал ничего меньше!Угловой контроллер minification

Я впрыскивается зависимости в мои контроллеры так:

var appCtrl = app.controller('AppCtrl', function AppCtrl($scope, $rootScope, helpService, userService, menuService, $location) {... body ...}); 

appCtrl.$inject = ['$scope', '$rootScope', 'helpService', 'userService', 'menuService', '$location']; 

Я также попытался это следующим образом:

var appCtrl = app.controller('AppCtrl', ['$scope', '$rootScope', 'helpService', 'userService', 'menuService', '$location', 
function AppCtrl($scope, $rootScope, helpService, userService, menuService, $location) {... body ...}]); 

Все, что я когда-нибудь ошибка, как это: Error: Unknown поставщик : aProvider < - a

Я также просмотрел свои услуги и ввел зависимости аналогично второму методу выше, но затем начал получать ошибок в программе, даже если она не была уменьшена. Это говорило мне, что у $ q нет метода defer()!

app.factory('checkAuth', ['$q', '$location', '$filter', '$rootScope', function ($q, $location, $filter, $rootScope) {...body...}]); 

Мой вопрос: что мне не хватает? Правильно ли я делаю инъекции зависимостей? Есть ли где-то еще DI?

Спасибо!

EDIT: Просто нашел это: Angular.module minification bug

Он не полностью устранило проблему ... теперь я получаю сообщение об ошибке:

TypeError: Object #<error> has no method 'slice' 

, но по крайней мере это от Error: Unknown провайдер: aProvider < - a :-)

+0

2-й и 3-й позиции действительны. Включили ли вы модуль ngResource в своем приложении? –

ответ

4

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

Другие подходы не будут работать из-за того, как Angularjs обрабатывает инъекцию зависимостей - он будет искать имя параметра для определения поставщика. Ваш minifier изменит имя параметра от $scope до a, и Angjuar попытается найти поставщика для a. Встроенный стиль исправляет это за счет более типизации и немного более строгого обслуживания. (Там инструмент, который изменит ваш угловой код так, что он может быть минимизирован путем ворчания здесь: https://github.com/btford/ngmin)

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

+0

Спасибо за это! Я добавил ответ ниже, чтобы его можно было отформатировать. –

0

OK - Исправлено: я изменил фильтр, чтобы вернуть текст, а не логическое значение, как это:

function orgFilter(item, args) { 
    if ((args.searchString !== "" && item["strName"].indexOf(args.searchString) == -1) && 
     (args.searchString !== "" && item["strShortName"].indexOf(args.searchString) == -1) && 
     (args.searchString !== "" && item["strCode"].indexOf(args.searchString) == -1) 
     ) { 
//   return false; 
     return 'continue_coreloop'; 
    } 
//  return true; 
    return 'add_result'; 
} 

..., а затем изменили функцию compileFilter(), чтобы соответствовать тексту

var filterBody = filterInfo.body 
     .replace(/return \'continue_coreloop\'[;}]/gi, "{ continue _coreloop; }") 
     .replace(/return \'add_result\'[;}]/gi, "{ _retval[_idx++] = $item$; continue _coreloop; }") 
     .replace(/return ([^;}]+?);/gi, 
     "{ if ($1=='add_result') { _retval[_idx++] = $item$; }; continue _coreloop; }"); 

Uglify не изменяет значения текста, поэтому совпадение будет по-прежнему истинным.

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