Как интегрировать 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',.....]);

Answer 1

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

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

Answer 3

На самом деле, шаг 1 является необязательным в зависимости от того, какие директивы вы используете, а шаг 5 просто неверен, поскольку только включение ui.directivesвызовет ошибки при ui.configобращении. Вместо этого вы всегда должны включать uiи просто удалять директивы / фильтры, которые вам не нужны.

ProLoser

Answer 4

Хм, если я не ошибаюсь, шаг 5 на самом деле правильный, так как оба ui.directivesи имеют ui.filtersзависимость от ui.configмодуля. Но, конечно, можно было упомянуть только uiмодуль.

pkozlowski.opensource

Answer 5

Вот пример интеграции angular-ui, angular-strap, jquery и др. - github.com/robertjchristian/angular-enterprise-seed

Роберт Кристиан

Answer 6

@martinpaulucci, похоже, обновленный jsfiddle тоже сломан

wmitchell

Answer 7

Включение jQuery будет способствовать манипулированию DOM. Это не конец света, но это может помешать вам решать проблемы угловатым способом.

RevNoah

Answer 8

21

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

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

дурилка
источник

И на данный момент используйте twitter-boostrap-css v2.3.1 или что-то подобное, а не v3.

SunnyRed

3

Я здесь немного запутался. angular-ui-bootstrap и angular-ui - два разных проекта

Zach Lysobey

Answer 9

И на данный момент используйте twitter-boostrap-css v2.3.1 или что-то подобное, а не v3.

SunnyRed

Answer 10

3

Я здесь немного запутался. angular-ui-bootstrap и angular-ui - два разных проекта

Zach Lysobey

Answer 11

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

Answer 12

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

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

Answer 13

+1 за то, что заставил меня понять, что я вводил не тот модуль. Я устанавливал angular-ui через bower и пытался ввести ui.bootstrap. Две разные вещи.

saiyancoder

Answer 14

Инструкции находятся в файле 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',.....]);

Answer 15

это инструкции для Angular UI Bootstrap

Zach Lysobey

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

Ответы: