如何将AngularUI集成到AngularJS？

对不起，这个愚蠢的问题，每个人都知道如何开始使用AngularUI？ 我已经从Github下载了它，并阅读了自述文件中的说明，但仍然不明白我必须做什么。

整合步骤：

  • 包括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']);

一旦所有的依赖包括在内，并configuration了一个模块，你就可以开始了。 例如，使用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/的源代码，那里有所有指令的实例。;

截至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">

让魔法开始。

我认为缺less的是插件 – 您必须添加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没有提到需要包含插件，这让我感到很惊讶。

嗨，我写了一篇文章，专门针对PHP语法突出显示如何做到这一点。 文章在这里： http : //neverstopbuilding.net/how-to-integrate-codemirror-with-angular-ui/

事情的核心是正确的configuration： 

 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文档看来（如果你可以称之为文档…）

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

这些指令位于其官方github存储库的readme.md文件中

Angular UI

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

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

基于上面的代码，你需要注入'ui.bootstrap'到你的模块中。 

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

有缺陷的angular度ui bootstrap指令模板

你可以覆盖AngularUI Bootstrap中的特定模板？

在自定义事件上启用angular-ui工具提示

如何用Angular.js实现分页/表格布局？

如何从任何地方closuresAngular UI Modal

Angular js – route-ui添加默认参数

使用哪一个，AngularUI Bootstrap或AngularStrap？

无法在angularjs中获得textarea值

如何使用HTML内容创buildAngularJS UI引导popup窗口？

如何在ui-router中使用ui-sref传递参数给控制器