Jak zintegrować AngularUI z AngularJS?

Question 1

Przepraszam za głupie pytanie, czy wszyscy wiedzą, jak zacząć korzystać z AngularUI? Pobrałem go z Githuba i przeczytałem instrukcję w README, ale nadal nie rozumiem, co mam zrobić.

Question 2

Kroki do integracji:

Uwzględnij jQuery i jQuery-ui (najlepiej obsługiwane z CDN)
Uwzględnij kątowy (najlepiej, jeśli pochodzi z CDN)
Uwzględnij angular-ui JS / CSS (obecnie hostowany tylko w repozytorium GitHub w buildfolderze)
Dołącz wszystkie wtyczki jQuery dla dyrektyw, których planujesz użyć
Zadeklaruj zależności na modułach angular-ui ( ui.directiveslub w ui.filterszależności od tego, czego planujesz użyć).

Większość opisanych kroków dotyczy tylko uwzględnienia zależności JS / CSS. Jedyną „trudną” częścią jest zadeklarowanie zależności od modułu ui. *, Możesz to zrobić w następujący sposób:

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

Po uwzględnieniu wszystkich zależności i skonfigurowaniu modułu możesz rozpocząć pracę. Na przykład użycie dyrektywy ui-date jest tak proste, jak (zwróć uwagę na ui-date):

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

Oto kompletny jsFiddle pokazujący, jak korzystać z dyrektywy ui-date: http://jsfiddle.net/r7UJ2/11/

Możesz również rzucić okiem na źródła http://angular-ui.github.com/, gdzie są aktualne przykłady wszystkich dyrektyw.

Question 3

Oto kroki od 3 maja 2013 r .:

zawierać

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

register ui

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

upewnij się, że myFancyAppjest taki sam jak w twoim<html ng-app="myFancyApp">

Niech zacznie się magia.

Question 4

Myślę, że brakuje wtyczek - musisz dodać skrypty wtyczek jquery i css, aby niektóre dyrektywy angular-ui działały. Na przykład dyrektywa codemirror wymaga:

    <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" />

Zaskoczyło mnie, że angular-ui.github.com nie wspomina o konieczności dołączania wtyczek.

Question 5

Cześć, napisałem artykuł o tym, jak to zrobić dla podświetlania składni PHP. Artykuł jest tutaj: http://neverstopbuilding.net/how-to-integrate-codemirror-with-angular-ui/

Istotą rzeczy jest poprawna konfiguracja:

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"; ?>';
}

Na przykład następujący fragment kodu HTML:

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

Możesz zobaczyć całą konfigurację jsfiddle tutaj: http://jsfiddle.net/jrobertfox/RHLfG/2/

pkozlowski.opensource ma rację, jest o wiele więcej plików, które trzeba załączyć, niż się wydaje z dokumentacji AngularUI (jeśli można to nazwać dokumentacją ...)

W każdym razie mam nadzieję, że jest to pomocne dla Ciebie lub innych.

Question 6

Instrukcje znajdują się w pliku readme.md w ich oficjalnym repozytorium github

Angular UI

Alternatywnie, sposobem, w jaki możesz dowiedzieć się, jak przeprowadzić integrację, jest otwarcie pliku angular-ui js (przykład: ui-bootstrap-tpls-0.6.0.js) i w pierwszym wierszu zauważysz następującą instrukcję

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

Bazując na powyższym kodzie, musisz wstrzyknąć „ui.bootstrap” do swojego modułu.

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