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

Question 1

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

Question 2

Шаги по интеграции:

Включите 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/, где есть живые примеры всех директив.

Question 3

По состоянию на 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">

Позвольте магии начаться.

Question 4

Я думаю, чего не хватает, так это плагинов - вам нужно добавить скрипты плагинов jquery и 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 не упоминает о необходимости включения плагинов.

Question 5

Привет, я написал статью о том, как это сделать для подсветки синтаксиса 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 (если вы можете назвать это документацией ...)

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

Question 6

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

Угловой интерфейс

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

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

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

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