Почему выдается ошибка при подключении angucomplete?

Question

[KOPC1886]

Всем привет!

Подключил такую библиотеку как angucomplete.js
Но выдается ошибка.

Unknown provider: $sceProvider <- $sce <- angucompleteDirective

Не могу понять в чем проблема(

Вот код

<script type='text/javascript' src='libs/angular.min.js'></script>
<script type='text/javascript' src='js/app.js'></script>
<script type='text/javascript' src='js/controllers.js'></script>
<script type='text/javascript' src='js/sortable.js'></script>
<script type='text/javascript' src='libs/jtruncate.js'></script>
<script type='text/javascript' src='libs/angucomplete.js'></script>
 <div class="block_search" id="blockSearch" ng-controller="Search">
        <angucomplete id="searchCatalog" placeholder="Поиск по каталогу сервисов" pause="100" url="/services-catalog/api/index.php?action=catalogSearch" minlength="3" inputclass="search_input"/>
        <a href="javascript:void(0);" id="searchMagnifier" class="magnifier"></a>
        <!--<input type="search" class="search_input" id="searchCatalog" placeholder="Поиск по каталогу сервисов">-->
        <a href="javascript:void(0);" ng-click="clear()" id="searchClear" class="search_clear"></a>
        <span class="search_example">Например, <i>такси, визитки...</i></span>
        <div class="clear"></div>
    </div>

var servicesCatalog = angular.module('servicesCatalog', [
    'catalogControllers',
    'ui.sortable',
    'angucomplete'
]);

servicesCatalog.run(function($rootScope, $http, $location, $route) {
    $rootScope.ajax = false;
    $rootScope.load_catalog = true;

    var original = $location.path;
    $location.path = function (path, reload) {
        if (reload === false) {
            var lastRoute = $route.current;
            var un = $rootScope.$on('$locationChangeSuccess', function () {
                $route.current = lastRoute;
                un();
            });
        }
        return original.apply($location, [path]);
    };
});

catalogControllers.controller('Search', ['$scope', '$routeParams', '$http',
    function($scope, $routeParams, $http, loader) {

    }]);

Comments

[Никита Гущин]

Какую версию ангуляра используете ?

[KOPC1886]

iNikNik: скачал с сайта angular.ru , там 1.0.6

Answer 1

[Сергей Протько]

Подключите файл angucomplete.js перед app.js и в head секции если не хотите разруливать зависомости вручную или прибегать к помощи какого require.js

Comments

[KOPC1886]

Подключил файл выше app.js, но ошибка не исчезла

[Сергей Протько]

KOPC1886: у вас проблемы с порядком загрузки файлов. Так как вы подключаете все внутри body скрипты загружаются вместе, без блокировок. Это как бы и хорошо но ваше приложение загружается явно быстрее и выполняется первым.

Answer 2

[Никита Гущин]

Если Вы используете эту библиотеку - https://github.com/darylrowland/angucomplete: то Вам нужно использовать версию ангуляра >=1.2.0. Это прописано в зависимостях в файле bower.json.
Похожий вопрос на stackoverflow:

$sce is included by default starting with angular 1.2

Т.е. $sce включен по-умолчанию в ангуляр 1.2

Comments

[KOPC1886]

Подключил только что 1.2.6 выдается ошибка Uncaught Error: [$injector:modulerr] , что не так?

[KOPC1886]

И ссылка https://docs.angularjs.org/error/$injector/moduler...

[Никита Гущин]

Вам нужно отдельно подключить ngRoute, с версии 1.1.6 - это отдельный компонент:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
var app = angular.module('myapp', ['ngRoute']);

[KOPC1886]

iNikNik: подключил и ругается на ту же самую ошибку и еще вылезла вот такая ошибка Uncaught TypeError: Cannot read property 'copy' of undefined angular-route.js:8

[KOPC1886]

iNikNik: а где можно скачать ngRoute, чтобы не подключать его с интернета ?

[Никита Гущин]

KOPC1886: В зависимости к servicesCatalog добавили ngRoute ?

[KOPC1886]

var servicesCatalog = angular.module('servicesCatalog', [
'ngRoute',
'ui.sortable'
//'angucomplete'
]);

[KOPC1886]

и вот так у меня контроллеры идут

servicesCatalog.controller('TabController', ['$scope', '$location', '$http', '$rootScope', '$route',
function($scope, $location, $http, $rootScope, $route) {
/*$scope.isActive = function(viewLocation)
{
return viewLocation === $location.path();
};*/
}]);

[Никита Гущин]

KOPC1886: https://github.com/angular/bower-angular-route

[KOPC1886]

iNikNik: а как ошибки исправить и почему они возникли?

[Никита Гущин]

KOPC1886: как Вам советует Сергей Протько исправьте порядок подключения файлов. Сначала ангуляр, потом библиотеки, потом ваши контроллеры\директивы\сервисы и потом же app.js

[KOPC1886]

iNikNik: подключил, осталась ошибка Uncaught Error: [$injector:modulerr]

[KOPC1886]

в чем может быть проблема?

[KOPC1886]

iNikNik: изменил порядок, но ошибка осталась.

[KOPC1886]

вот по файлам.
controller.js {

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

}

app.js
{
var servicesCatalog = angular.module('servicesCatalog', [
'ngRoute',
'ui.sortable',
'catalogControllers'
//'angucomplete'
]);
}

[Никита Гущин]

KOPC1886: а, совсем забыл. Скорее всего Вам нужно настроить хотя-бы 1 маршрут, чтобы роутер заработал:

app.config(function ($routeProvider) {
            $routeProvider.when('list', {
                controller: 'MyController',
                templateUrl: '/example-08-list.html'
            });
        });

[KOPC1886]

iNikNik: у меня есть маршруты
servicesCatalog.config(['$routeProvider', '$compileProvider', function ($routeProvider, $compileProvider) {
$routeProvider.
when('/catalog/:categoryId', {
templateUrl: 'views/catalog.html',
controller: 'Catalog',
activeNav: 'catalog'
}).
when('/favorites', {
templateUrl: 'views/favorites.html',
controller: 'Favorites',
activeNav: 'favorites'
}).
when('/applications', {
templateUrl: 'views/applications.html',
controller: 'Applications',
activeNav: 'applications'
}).
when('/catalog/:categoryId/:serviceId', {
templateUrl: 'views/service-detail.html',
controller: 'Service-Detail',
activeNav: 'catalog'
}).
otherwise({
redirectTo: '/catalog/:categoryId'
});

$compileProvider.urlSanitizationWhitelist(/^\s*(https?|mailto|file|tel|skype):/);
}]);

[KOPC1886]

в файле app.js

[KOPC1886]

iNikNik: что я делаю не так?

[Никита Гущин]

KOPC1886: Мои варианты закончились) Ошибка говорит, что какой-то из модулей не загрузился, проверьте еще раз, что все файлы подключились, а если не поможет .. надо думать)

[KOPC1886]

iNikNik: а с Вами можно как то связаться в skype или в чате каком? Соц сети ?

[KOPC1886]

iNikNik: А то я новичок в этом деле...

[Никита Гущин]

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

[KOPC1886]

iNikNik: вот что выдается в полной ошибке

Uncaught Error: [$injector:modulerr] Failed to instantiate module servicesCatalog due to:
Error: [$injector:modulerr] Failed to instantiate module ui.sortable due to:
Error: [$injector:nomod] Module 'ui.sortable' is not available! You either misspe......2)

[Сергей Протько]

iNikNik: у товаристча KOPC1886: проблема с тем, что загрузка файлов идет паралельно и app.js загружается и выполняется раньше чем часть библиотек.

KOPC1886: вынесите подключение всех либ в head, тогда скрипты будут грузиться друг за дружкой.

[Никита Гущин]

KOPC1886: ну и, соответственно, Вы уверены, что модуль ui.sortable загрузился, что название верное и что зависимости модуля разрулены?

[KOPC1886]

iNikNik: исправил с ui.sortable, но сейчас ругается на строчку $compileProvider.urlSanitizationWhitelist(/^\s*(https?|mailto|file|tel|skype):/); в файле app.js

[Никита Гущин]

Сергей Протько: это, видимо, из-за
servicesCatalog.run(function(...) { .. });
Сам я никогда этот метод не использовал, поэтому загружаю файлы параллельно, как автор)

[Никита Гущин]

KOPC1886: что говорит?

[KOPC1886]

iNikNik: Uncaught Error: [$injector:modulerr] Failed to instantiate module servicesCatalog due to:
TypeError: undefined is not a function

[Никита Гущин]

KOPC1886: согласно докам $compileProvider, там нету метода urlSanitizationWhitelist

[KOPC1886]

iNikNik: закомментировал строчку эту. Теперь пишет
Uncaught Error: [$injector:unpr] Unknown provider: $templateRequestProvider <- $templateRequest <- $route

[Никита Гущин]

KOPC1886: эх, блин))) У Вас очень странным образом скомпоновано приложение) Теперь на странице судя по-всему не хватает
<div ng-view></div>
В который и будет загружаться шаблон. указанный в конфиге роутера.

[KOPC1886]

iNikNik: у меня это лежит в том же файле где и подключение всех скриптов

[Никита Гущин]

KOPC1886: хорошо. Теперь проблема в том, что я Вам скинул роутер версии 1.3, а ангуляр у Вас версии 1.2.6 ... и они не очень совместимы. Вам нужно найти более старую версию роутера.

[Никита Гущин]

KOPC1886: на будущее - используйте bower. Распиливать зависимости вручную - это ад)))

[KOPC1886]

iNikNik: а если подключить ангуляр версии 1.3.1 ?

[Никита Гущин]

KOPC1886: пробуйте))) надеюсь, поможет)

[KOPC1886]

подключил пишет что Argument 'TabController' is not a function, got undefined и так для каждого контроллера

[KOPC1886]

Я через часик отвечу

[KOPC1886]

Но пока так и валятся ошибки(((

[Сергей Протько]

iNikNik: нет, не по этому. .run ничего не запускает, вызывая этот метод вы говорите ангуляру "запусти ка вот это дело когда ты уже пройдешь фазу конфигурации и перейдешь непосредственно к запуску...

KOPC1886: да сколько ж повторять, либо загружайте все в head либо используйте какой-нибудь менеджер модулей.

[Сергей Протько]

корочу судя по всему это бесполезно что-либо тут писать потому я удаляюсь

[Никита Гущин]

Сергей Протько: хм, интересно. Но я тоже загружаю все в body и в разнобой:

<script src="bower_components/angular/angular.js"></script>
 <script src="bower_components/angular-i18n/angular-locale_ru-ru.js"></script>
 <script src="bower_components/angular-route/angular-route.js"></script>
 ...
 <script src="js/app.js"></script>
 ...
 <script src="js/auth/module.js"></script>
 <script src="js/auth/services/Auth.js"></script>
 ...

И никогда таких проблем не было...

[Сергей Протько]

iNikNik: большую часть проблем невилирует сам ангуляр так как у него есть ленивая инициализация. Но это не сильно надежно. У меня у самого такой же подход (gulp-inject просто фигачит все файлы в index.html в head в нужном порядке (по зависимостям) и периодически возникают проблемы всеравно изза configure и т.д.).

В итоге сейчас смотрю в сторону ES6 модулей...

[KOPC1886]

Сергей Протько: я ангуляр использую в битриксе, поэтому не могу в head ничего вставить, так как ангуляр подключен не на весь сайт .

[KOPC1886]

iNikNik: а какая у вас версия ангуляра и ангуляра-роут ? Может я контроллеры неправильно создал или зависимости неверно указал?

[KOPC1886]

iNikNik: подключи angular.js (версия 1.3.10) и angular-route.min.js (версия 1.3.1) ошибок в консоли нет, но не подгружаются шаблоны(

[Никита Гущин]

KOPC1886: я использую ui-router а не ngRouter

[KOPC1886]

iNikNik: как мне сделать теперь, чтобы по умолчанию загружался маршрут /catalog/:categoryId

servicesCatalog.config(function ($routeProvider, $compileProvider) {
$routeProvider.
when('/catalog/:categoryId', {
templateUrl: 'views/catalog.html',
controller: 'Catalog'
}).
when('/favorites', {
templateUrl: 'views/favorites.html',
controller: 'Favorites'
}).
when('/applications', {
templateUrl: 'views/applications.html',
controller: 'Applications'
}).
when('/catalog/:categoryId/:serviceId', {
templateUrl: 'views/service-detail.html',
controller: 'Service-Detail'
}).
otherwise({
redirectTo: '/catalog/:categoryId'
});

//$compileProvider.urlSanitizationWhitelist(/^\s*(https?|mailto|file|tel|skype):/);
});

[Никита Гущин]

KOPC1886: попробуйте вариант, когда :categoryId - необязательный параметр (документация - https://docs.angularjs.org/api/ngRoute/provider/$r... И в самом контроллере проверяйте, задан-ли этот параметр, если нет - грузите случайную\каким-либо образом выбранную категорию

[KOPC1886]

iNikNik: что то не нашел в документации этого....

[Никита Гущин]

KOPC1886: ой, у меня ссылка кривая немного - https://docs.angularjs.org/api/ngRoute/provider/$r... : path can contain optional named groups with a question mark: e.g.:name?

[KOPC1886]

iNikNik: сделал так

otherwise({
redirectTo: '/catalog/:categoryId*'
});

и теперь в адресной строке в браузере оне ставит так

/#/catalog/*

[KOPC1886]

iNikNik: это нормально?)

[Никита Гущин]

KOPC1886: не не не. Примерно вот так:

when('/catalog/:categoryId?', {
templateUrl: 'views/catalog.html',
controller: 'Catalog'
})

otherwise({
redirectTo: '/catalog/'
});

// где-то в контроллере
if(!$routeParams.categoryId)
{
   // открываем категорию по умолчанию
}

[KOPC1886]

iNikNik: Спасибо Большое!), заработало!!!!))) Ура))

а можно спросить про angucomplete ?

[Никита Гущин]

KOPC1886: спрашивайте) у Вас так и не подключается модуль ?

[KOPC1886]

iNikNik: модуль подключился все хорошо) Написал так



не могу понять как сделать, чтобы сформировать ссылку при нажатии на выбранный элемент. То есть я хочу сделать так: выводится список найденных элементов и при нажатии на один из этих элементов отобразились либо сервисы категории, либо сам сервис. В общем чтобы в найденных элементах сделать так
Найденный элемент 1
Найденный элемент 2

[KOPC1886]

чтобы при нажатии на элемент произошел переход по ссылке которую я сформирую

[Никита Гущин]

KOPC1886: используйте ng-href директиву - https://docs.angularjs.org/api/ng/directive/ngHref . Но причем тут автокомплит)))

[KOPC1886]

iNikNik: Так не, мне с сервера возвращается массив. Мне нужно значения массива вставить в ссылку.

[KOPC1886]

iNikNik: нашел другой автокомплит, angucomplete-alt


в контроллере написал

$scope.selectedCountry = function(selected) {
$rootScope.showServices(1, event);
};

$scope.countries = [
{name: 'Afghanistan', code: 'AF'},
{name: 'Aland Islands', code: 'AX'},
{name: 'Albania', code: 'AL'},

но $scope.selectedCountry = function(selected) {
$rootScope.showServices(1, event);
}; срабатывает не когда я нажал на один из найденных элементов, а когда я просто ввел что то в поиск

[KOPC1886]

а нужно чтобы только при нажатии срабатывал

[Никита Гущин]

KOPC1886: Я не очень понимаю, что Вы собираетесь с автокомплитом сделать. Объясните в двух словах? По мне так автокомплит нужен, чтобы когда ты вводишь что-то в поле, остаток слова\фразы подставился автоматически а дальше ты уже жмешь ентер, или найти

[KOPC1886]

А я хочу чтобы не по ентеру, а по нажатию на элемент.

[Никита Гущин]

KOPC1886: ну я так понимаю, что после выбора элемента он попадет к Вам в selectedObject (в angucomplete), и Вы просто можете сделать $location.path('/newValue') на основе выбранного объекта.

[KOPC1886]

iNikNik: сделал!) Спасибо Большое за помощь!) Если что, буду писать!))))

[KOPC1886]

iNikNik: $location.path('/#/catalog/122/780') что то не срабатывает.
Может быть из-за этого ?
servicesCatalog.run(function($rootScope, $http, $location, $route) {
$rootScope.ajax = false;
$rootScope.load_catalog = true;

var original = $location.path;
$location.path = function (path, reload) {
if (reload === false) {
var lastRoute = $route.current;
var un = $rootScope.$on('$locationChangeSuccess', function () {
$route.current = lastRoute;
un();
});
}
return original.apply($location, [path]);
};
});

[KOPC1886]

iNikNik: исправил ошибку. $location.path('/catalog/122/780') убрал решетку