Как интегрировать AngularUI в AngularJS?

Извините за глупый вопрос, все знают, как начать использовать AngularUI? Я загрузил его из Github и прочитал инструкцию в README, но все еще не понимаю, что мне нужно делать.

Ответ 1

Шаги для интеграции:

Включить jQuery и jQuery-ui (лучше всего от CDN)
Включить angular (лучше всего включить, если из CDN)
Включить angular -ui JS/CSS (в настоящее время размещается только в репозитории GitHub в папке build)
Включить любые плагины jQuery для директив, которые вы планируете использовать
Объявлять зависимости от модулей angular -ui (ui.directives или ui.filters в зависимости от того, что вы планируете использовать).

В большинстве описанных шагов речь идет только о зависимостях JS/CSS. Единственной "сложной" частью является объявление зависимостей от модуля ui. *, Вы можете сделать это следующим образом:

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

После включения всех зависимостей и настройки модуля вы готовы к работе. Например, использование директивы ui-date так же просто (обратите внимание на ui-date):

<input name="dateField" ng-model="date" ui-date>

Вот полный jsFiddle, показывающий, как использовать директиву ui-date: http://jsfiddle.net/r7UJ2/11/

Вы также можете посмотреть источники http://angular-ui.github.com/, где есть живые примеры из всех директив.

Ответ 2

По состоянию на 3 мая 2013 года выполните следующие шаги:

включить

    <script src="angular.min.js"></script>
    <script src="ui-bootstrap-tpls-0.3.0.min.js"></script>

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

убедитесь, что myFancyApp совпадает с <html ng-app="myFancyApp">

Пусть начинается волшебство.

Ответ 3

Я думаю, что не хватает плагинов - вам нужно добавить скрипты jquery plugin и css для некоторых директив angular -ui. Например, для директивы codemirror требуется:

    <script src="http://codemirror.net/lib/codemirror.js" type="text/javascript"></script>
    <script src="http://codemirror.net/lib/util/runmode.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css" type="text/css" />

Удивительно, что angular -ui.github.com не упоминает, что нужно включать плагины.

Ответ 4

Привет, я написал статью специально о том, как это сделать для выделения синтаксиса PHP. Статья находится здесь: http://neverstopbuilding.net/how-to-integrate-codemirror-with-angular-ui/

В основе вещей лежит правильная настройка:

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

myApp.value('ui.config', {
    codemirror: {
            mode: 'text/x-php',
        lineNumbers: true,
        matchBrackets: true
    }
});

function codeCtrl($scope) {
    $scope.code = '<?php echo "Hello World"; ?>';
}

Для чего-то вроде следующего фрагмента HTML:

<div ng-app="myApp">
    <div ng-controller="codeCtrl">
        <textarea ui-codemirror ng-model="code"></textarea>
    </div>
</div>

Здесь вы можете увидеть весь jsfiddle, указанный здесь: http://jsfiddle.net/jrobertfox/RHLfG/2/

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

В любом случае я надеюсь, что это поможет вам или другим людям.

Ответ 5

Инструкции находятся в файле readme.md в официальном репозитории github

Angular Пользовательский интерфейс

В качестве альтернативы, вы можете узнать, как интегрировать, открыть файл angular -ui js (пример: ui-bootstrap-tpls-0.6.0.js), и в первой строке вы заметите, что следующий оператор

angular.module("ui.bootstrap", [...deps...])

Основываясь на приведенном выше коде, вам нужно ввести "ui.bootstrap" в ваш модуль.

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