Jak zintegrować AngularUI z AngularJS?


79

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ć.

Odpowiedzi:


63

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.


W rzeczywistości krok 1 jest opcjonalny w zależności od używanych dyrektyw, a krok 5 jest po prostu niepoprawny, ponieważ tylko włączenie ui.directivesspowoduje zgłoszenie błędów, gdy ui.configzostanie przywołane. Zamiast tego powinieneś zawsze dołączać uii po prostu usuwać dyrektywy / filtry, których nie chcesz.
ProLoser

Hmm, jeśli się nie mylę, krok 5 jest poprawny, ponieważ oba ui.directivesi są ui.filterszależne od ui.configmodułu. Ale oczywiście, mógł tylko wspomnieć o uimodule.
pkozlowski.opensource

Oto przykład integracji angular-ui, angular
Robert Christian

@martinpaulucci Wygląda zaktualizowany jsfiddle jest również uszkodzony
wmitchell

Dołączenie jQuery zachęci do manipulacji DOM. To nie koniec świata, ale może zniechęcić Cię do rozwiązywania problemów w sposób kątowy.
RevNoah

21

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.


A teraz używaj twitter-boostrap-css v2.3.1 lub czegoś podobnego, a nie v3.
SunnyRed

3
Jestem tu trochę zdezorientowany. angular-ui-bootstrap i
angular

11

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.


3

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.


+1 za uświadomienie mi, że wstrzykiwałem niewłaściwy moduł. Instalowałem 'angular-ui' przez bower i próbowałem wstrzyknąć 'ui.bootstrap'. Dwie odrębne rzeczy.
saiyancoder

1

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',.....]);

to są instrukcje dla Angular UI Bootstrap
Zach Lysobey,
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.