如何将AngularUI集成到AngularJS?


79

很抱歉这个愚蠢的问题,每个人都知道如何开始使用AngularUI吗?我已经从Github下载了它,并阅读了README中的说明,但是仍然不明白我该怎么做。

Answers:


63

整合步骤:

  • 包括jQuery和jQuery-ui(最好从CDN提供)
  • 包含角度(如果是CDN,则最好包含)
  • 包括angular-ui JS / CSS(目前仅托管在GitHub存储库中的build文件夹中)
  • 包括您计划使用的指令的所有jQuery插件
  • 声明对angular-ui模块的依赖性(ui.directivesui.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/的源代码,其中有所有指令的实时示例。


实际上,步骤1是可选的,具体取决于您使用的指令,而步骤5则是不正确的,因为仅包含时ui.directivesui.config在引用时引发错误。相反,您应该始终包含ui并删除不想要的指令/过滤器。
ProLoser 2013年

嗯,如果我没有记错的第5步是正确的,因为真正的既ui.directivesui.filters上得到了依赖ui.config模块。但是可以肯定的是,它只能提及该ui模块。
pkozlowski.opensource,2013年

这是一个集成angular-ui,angular-strap,jquery和更多内容的示例-github.com/robertjchristian/angular-enterprise-seed
Robert Christian

@martinpaulucci似乎更新的jsfiddle也已损坏
wmitchell 2013年

包括jQuery将鼓励DOM操作。这不是世界末日,但它可能使您不愿以角度解决问题。
RevNoah 2014年

21

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

让魔术开始。


到目前为止,请使用twitter-boostrap-css v2.3.1或类似的名称,而不要使用v3。
2013年

3
我在这里有点困惑。angular-ui-bootstrap和angular-ui是两个不同的项目
Zach Lysobey 2014年

11

我认为缺少的是插件-您必须添加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并未提到需要包含插件。


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文档中包含的文件要多(如果可以将其称为文档...)

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


+1使我意识到自己注入了错误的模块。我正在通过凉亭安装“ angular-ui”,并尝试注入“ ui.bootstrap”。两件分开的事情。
saiyancoder

1

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

角度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',.....]);

这些都说明,角UI引导
扎克Lysobey
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.