Как загрузить Угловой UT Bootstrap и зависимости

Я экспериментирую с библиотеками Ультра-UI Bootstrap (в частности, modal), но у меня возникают проблемы с получением правильных версий каждой библиотеки, загруженной в правильном порядке, но я продолжаю противостоять ошибка No module: template/accordion/accordion-group.html. Я переключился на Bootstrap 2.3, но он все еще там. Мой заголовок приложения ниже, может ли кто-нибудь обнаружить неправильные версии или JS-файлы в нерабочем состоянии? Я также использую Angular UI Sortable, следовательно, его включение.Как загрузить Угловой UT Bootstrap и зависимости

<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> 

    <script src="http://code.angularjs.org/1.0.2/angular.min.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script> 

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css"> 

    <link rel="stylesheet" href="style.css" /> 
</head>

Моя декларация приложение выглядит следующим образом:

var app = angular.module('myModule', ['ui', 'ui.bootstrap']);

Редактировать

мне удалось получить его работу, как это:

<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script> 

    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.min.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-sortable/0.13.2/sortable.min.js"></script> 

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css"> 

    <link rel="stylesheet" href="style.css" /> 
</head>

var app = angular.module('myModule', ['ui.sortable', 'ui.bootstrap']);

источник

2015-09-28 Mourndark

Неправильно использовать ОБОИХ УГЛОВЫЕ И УГЛОВЫЕ БИБЛИОТЕЧНЫЕ БИБЛИОТЕКИ. Первый обертывает jQuery UI, а последний обертывает Bootstrap CSS. Выбери один. – icfantv

Поскольку я пытаюсь использовать Sortable (https://github.com/angular-ui/ui-sortable) из Угловых библиотек пользовательского интерфейса и Modal (http://angular-ui.github.io/bootstrap/) из библиотеки Bootstrap в том же приложении. Разве это невозможно? – Mourndark

Что вы пытаетесь сортировать? Возможно, есть способ не попробовать и использовать оба. – icfantv

Вы загрузили все файлы? в соответствии с их документами

Файлы для загрузки

Постройте файлы для всех директивы распространяется в нескольких вариантах: минимизирован для использования производства, ип-минимизирован для развития, с или без шаблонов. Все варианты описаны и могут быть загружены отсюда. Следует отметить, что файлы -tpls содержат шаблоны , входящие в состав JavaScript, в то время как в обычной версии не содержатся в комплекте шаблоны. Для получения дополнительной информации ознакомьтесь с FAQ здесь и README здесь.

Альтернативно, если вас интересует только подмножество директив, вы можете создать свою собственную сборку.

Какой бы метод вы выбираете хорошие новости о том, что общий размер загрузки очень маленький: < 76kb для всех директив (! ~ 20kb с GZIP сжатия)

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

После прочтения часто задаваемых вопросов, я также задаюсь вопросом, вызывает ли у вас как угловые ui cdns проблемы. Угловая-ui загружает сначала без шаблонов, а затем загружает угловую-ui-bootstrap с помощью шаблонов.

Angular-ui-bootstrap FAQ

Этот проект поставляется с несколькими описанными здесь результатов: https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files Если роли этих файлов не ясны для вас просто выбрать щ-самозагрузки-tpls- [версия] .min.js , но обязательно включите только один файл в свой проект.

Ты показываешь этого

<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>

Попробуйте только загрузку

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>

Подробнее о сборках из github

выдержки я читаю это

Теперь должно быть ясно, что файлы с -tpls в их имени имеют шаблоны, зависящие от начальной загрузки, в комплекте с директивами. Для людей, которые хотят принять все директивы и не нуждаются в настройке решение должно захватить файл с именем ui-bootstrap-tpls- [version] .min.js. Если, с другой стороны, по умолчанию шаблоны не то, что вам нужно, чтобы вы могли принять Ui-bootstrap- [версия] .min.js и предоставить свои собственные шаблоны, принимая те, по умолчанию (https://github.com/angular-ui/bootstrap/tree/master/template) в качестве отправной точки .

источник

2015-09-28 21:12:32 Ravenous

Отлично, это меня очень близко. В конце я нашел этот пример (http://plnkr.co/edit/TGIeeEbbvJwpJ3WRqo2z?p=preview), который загружает только библиотеку Sortable (а не полный Угловой интерфейс) * после * полной библиотеки Bootstrap. Я обновлю свой вопрос своим финальным заголовком, если кому-то это понадобится. – Mourndark

Вы добавили 'ui.router' и 'ui.sortable' в качестве зависимости в файле app.js?

var myApp = angular.module('myApp', ['ui.router','ui.sortable']);

источник

2015-09-28 13:44:14

Я не использую '' ui.router'', но я попытался использовать как '' 'ui.sortable''', так и' 'ui''' как зависимость без везения. – Mourndark

Я хотел бы использовать менеджер пакетов, такой как Bower или WebPack для управления клиентской зависимости на сторону.

В соответствии с Angular UI docs вам осталось только добавить: AngularJS и Bootstrap CSS. Нет необходимости в jQuery.

И тогда вы должны инициализировать Угловой модуль App с ui.bootstrap зависимости:

angular.module('myModule', ['ui.bootstrap']);

== UPDATE

Согласно этому example, это должно быть все, что вам нужно:

index.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script> 
<script src="https://rawgithub.com/angular-ui/ui-sortable/master/src/sortable.js"></script>

`` `

app.js

var myapp = angular.module('sortableApp', ['ui.sortable']);

Позвольте мне знать, если это поможет вам

источник

2015-09-28 13:56:23

Да, я видел документацию. У меня есть обычный Bootstrap js, но Sortable (https://angular-ui.github.io/ui-sortable/) требует jQuery, чтобы он оставался. Я все еще получаю ошибку без Bootstrap js. – Mourndark

Этот проект по-прежнему просто тестирует модули на предмет соответствия на данный момент, а не на производственную систему, поэтому я не хочу делать большой переход к узлу, если только мне это не нужно. – Mourndark

@Mourndark обновил мой ответ. –

Как загрузить Угловой UT Bootstrap и зависимости

ответ

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