Question

抱歉这个愚蠢的问题，大家都知道如何开始使用AngularUI吗？我从Github下载了它并阅读README中的说明但仍然不明白我必须做什么。

Answer 1

整合步骤：

包括jQuery和jQuery-ui（最好从CDN提供）
包含角度（最好包括来自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>

以下是完整的jsFiddle，展示了如何使用ui-date指令：http://jsfiddle.net/r7UJ2/11/

您可能还想查看http://angular-ui.github.com/的来源，其中包含所有指令的实例。

Answer 2

截至2013年5月3日，以下是步骤：

包括

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

注册ui

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

确保myFancyApp与您的<html ng-app="myFancyApp">

相同

让魔法开始。

Answer 3

我认为缺少的是插件 - 您必须添加jquery插件脚本和css以使某些angular-ui指令起作用。例如，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 4

您好我写了一篇专门针对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文档中看到的要多得多（如果可以称之为文档......）

无论如何，我希望这对你或其他人有所帮助。

Answer 5

说明位于官方github存储库的readme.md文件中

Angular UI

或者，您可以找到如何集成的方法是打开angular-ui js文件（例如：ui-bootstrap-tpls-0.6.0.js），在第一行中，您会注意到以下语句

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

根据上面的代码，你需要将'ui.bootstrap'注入你的模块。

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

如何将AngularUI集成到AngularJS？

5 个答案: