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ć.
Kroki do integracji:
buildfolderze)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.
ui.directivesspowoduje zgłoszenie błędów, gdyui.configzostanie przywołane. Zamiast tego powinieneś zawsze dołączaćuii po prostu usuwać dyrektywy / filtry, których nie chcesz.ui.directivesi sąui.filterszależne odui.configmodułu. Ale oczywiście, mógł tylko wspomnieć ouimodule.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.
źródło
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.
źródło
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.
źródło
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',.....]);źródło