如何将AngularUI集成到AngularJS?

79 angularjs angular-ui

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

pko*_*rce 63

集成步骤:

  • 包括jQuery和jQuery-ui(最好从CDN提供)
  • 包括角度(如果来自CDN,最好包括)
  • 包含angular-ui JS/CSS(目前仅托管在build文件夹中的GitHub存储库中)
  • 包含您计划使用的指令的任何jQuery插件
  • 声明对angular-ui模块的依赖(ui.directivesui.filters取决于您计划使用的内容).

大多数概述的步骤仅包括JS/CSS依赖项.唯一"棘手"的部分是声明ui.*模块的依赖关系,你可以这样做:

var myApp = angular.module('myApp',['ui.directives']);
Run Code Online (Sandbox Code Playgroud)

一旦包含所有依赖项并配置了模块,您就可以开始了.例如,使用ui-date指令就像(注意ui-date)一样简单:

<input name="dateField" ng-model="date" ui-date>
Run Code Online (Sandbox Code Playgroud)

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

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

  • 不幸的是,你的jsfiddle停止了工作. (7认同)

dur*_*lka 21

截至2013年5月3日,以下是步骤:

包括

    <script src="angular.min.js"></script>
    <script src="ui-bootstrap-tpls-0.3.0.min.js"></script>
Run Code Online (Sandbox Code Playgroud)

注册ui

    angular.module('myFancyApp', ['ui.bootstrap']);
Run Code Online (Sandbox Code Playgroud)

确保myFancyApp与你的相同<html ng-app="myFancyApp">

让魔法开始吧.

  • 我在这里有点困惑.angular-ui-bootstrap和angular-ui是两个不同的项目 (3认同)

spr*_*hip 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" />
Run Code Online (Sandbox Code Playgroud)

我很惊讶angular-ui.github.com没有提到需要包含插件.