Wie kann ich AngularUI in AngularJS integrieren?

Question 1

Entschuldigung für die dumme Frage, weiß jeder, wie man AngularUI benutzt? Ich habe es von Github heruntergeladen und die Anleitung in README gelesen, verstehe aber immer noch nicht, was ich tun muss.

Question 2

Integrationsschritte:

Schließen Sie jQuery und jQuery-ui ein (am besten von einem CDN bedient)
Winkel einschließen (am besten einschließen, wenn von einem CDN)
Fügen Sie Angular-UI-JS / CSS hinzu (derzeit nur im GitHub-Repository im buildOrdner gehostet ).
Fügen Sie alle jQuery-Plugins für die Anweisungen ein, die Sie verwenden möchten
Deklarieren Sie Abhängigkeiten von den Angular-UI-Modulen ( ui.directivesoder ui.filtersje nachdem, was Sie verwenden möchten).

Bei den meisten der beschriebenen Schritte geht es lediglich darum, JS / CSS-Abhängigkeiten einzuschließen. Der einzige "knifflige" Teil besteht darin, Abhängigkeiten von einem UI. * -Modul zu deklarieren. Sie können dies folgendermaßen tun:

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

Sobald alle Abhängigkeiten enthalten und ein Modul konfiguriert sind, können Sie loslegen. Zum Beispiel ist die Verwendung der UI-Date-Direktive so einfach wie (beachten Sie die ui-date):

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

Hier ist die vollständige jsFiddle, die zeigt, wie die UI-Date-Direktive verwendet wird: http://jsfiddle.net/r7UJ2/11/

Vielleicht möchten Sie auch einen Blick auf die Quellen von http://angular-ui.github.com/ werfen, wo es Live-Beispiele aller Richtlinien gibt.

Question 3

Ab dem 3. Mai 2013 sind hier die Schritte:

einschließen

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

registriere ui

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

Stellen Sie sicher, dass myFancyAppes das gleiche ist wie in Ihrem<html ng-app="myFancyApp">

Lass die Magie beginnen.

Question 4

Ich denke, was fehlt, sind Plugins - Sie müssen die JQuery-Plugin-Skripte und CSS hinzufügen, damit einige Angular-UI-Anweisungen funktionieren. Zum Beispiel benötigt die Codemirror-Direktive:

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

Es ist eine Überraschung für mich, dass angular-ui.github.com nicht erwähnt, dass Plugins enthalten sein müssen.

Question 5

Hallo, ich habe einen Artikel speziell darüber geschrieben, wie dies für die Hervorhebung der PHP-Syntax gemacht wird. Der Artikel ist hier: http://neverstopbuilding.net/how-to-integrate-codemirror-with-angular-ui/

Der Kern der Dinge ist die richtige Konfiguration:

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

Für so etwas wie das folgende HTML-Snippet:

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

Sie können die gesamte jsfiddle des Setups hier sehen: http://jsfiddle.net/jrobertfox/RHLfG/2/

pkozlowski.opensource ist richtig, es gibt viel mehr Dateien, die Sie einschließen müssen, als es aus der AngularUI-Dokumentation hervorgeht (wenn Sie es Dokumentation nennen können ...)

Wie auch immer, ich hoffe, das ist hilfreich für Sie oder andere.

Question 6

Die Anweisungen befinden sich in der Datei readme.md in ihrem offiziellen Github-Repository

Angular UI

Alternativ können Sie herausfinden, wie Sie integrieren können, indem Sie die Datei angle-ui js öffnen (Beispiel: ui-bootstrap-tpls-0.6.0.js). In der ersten Zeile wird die folgende Anweisung angezeigt

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

Basierend auf dem obigen Code müssen Sie 'ui.bootstrap' in Ihr Modul einfügen.

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