angularjs - AngularUI を AngularJS に統合するには?

Question

ばかげた質問で申し訳ありませんが、誰もが AngularUI の使用を開始する方法を知っていますか? Github からダウンロードし、README の説明を読みましたが、何をしなければならないのかまだわかりません。

Answer 1

統合する手順:

• jQuery と jQuery-ui を含める (CDN からの提供が最適)
• angular を含める (CDN からの場合は含めるのが最適です)
• angular-ui JS / CSS を含めます (現在、buildフォルダー内の GitHub リポジトリでのみホストされています) 。
• 使用する予定のディレクティブ用の 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>

ui-date ディレクティブの使用方法を示す完全な jsFiddle は次のとおりです: http://jsfiddle.net/r7UJ2/11/

http://angular-ui.github.com/のソースも参照してください。ここには、すべてのディレクティブのライブ サンプルがあります。

Answer 2

不足しているのはプラグインだと思います.angular-uiディレクティブを機能させるには、jqueryプラグインスクリプトとcssを追加する必要があります. たとえば、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 3

こんにちは、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 ドキュメントから見えるよりも多くのファイルを含める必要があります (ドキュメントと呼べる場合)。