Як інтегрувати 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

Кутовий інтерфейс користувача

Крім того, спосіб дізнатись, як інтегрувати, - це відкрити файл angular-ui js (приклад: ui-bootstrap-tpls-0.6.0.js), і в першому рядку ви помітите наступне твердження

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

Виходячи з наведеного вище коду, вам потрібно ввести 'ui.bootstrap' у ваш модуль.

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