如何将 AngularUI 集成到 AngularJS？

对于这个愚蠢的问题很抱歉，是否每个人都知道如何开始使用 AngularUI？我已经从 Github 下载了它，并阅读了 README 中的指令，但仍然不明白我必须做什么。

48395 次浏览
小开

整合步骤:

  • 包括 jQuery 和 jQuery-ui (最好通过 CDN 提供)
  • 包括角(它是最好的包括如果从 CDN)
  • 包括 angle-ui JS/CSS (目前只驻留在 build文件夹中的 GitHub 存储库中)
  • 包含您计划使用的指令的任何 jQuery 插件
  • 根据您计划使用的模块声明依赖项(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/的源代码，其中包含所有指令的实时示例。

小开

我认为缺少的是插件——你必须添加 jquery 插件脚本和 css 来使一些 angle-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 居然没有提到需要包含插件。

小开

嗨，我写了一篇关于如何为 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 文档(如果可以称之为文档的话...)中看起来要多得多

小开

截至2013年5月3日，步骤如下:

包括

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

注册用户界面

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

确保 myFancyApp和你的 <html ng-app="myFancyApp">是一样的

让魔法开始吧。

小开

指令在他们的官方 github 存储库的 readme.md 文件中

角形用户界面

或者，您可以找到如何集成的方法是打开 angle-ui js 文件(例如: ui-bootstrap-tpls-0.6.0)。Js) ，并且在第一行中，您将注意到以下语句

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

基于以上代码，您需要在模块中注入‘ ui.bootstrap’。

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

提交答案