79

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

4

5 回答 5

63

集成步骤：

  • 包括 jQuery 和 jQuery-ui（最好从 CDN 提供）
  • 包含角度（如果来自 CDN，最好包含）
  • 包含 angular-ui JS/CSS（目前仅托管在 GitHub 仓库中的build文件夹中）
  • 包括您计划使用的指令的任何 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/的来源，其中有所有指令的实时示例。

于 2012-09-18T09:27:39.357 回答
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">

让魔术开始。

于 2013-05-03T18:00:44.040 回答
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 没有提到需要包含插件。

于 2012-11-17T22:56:54.427 回答
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 文档中看起来要多得多（如果您可以将其称为文档...）

于 2013-02-27T21:43:03.697 回答
1

The instructions are in the readme.md file at their official github repository

Angular UI

Alternatively, the way you can find out how to integrate is to open the angular-ui js file (example: ui-bootstrap-tpls-0.6.0.js) and in the first line, you will notice the following statement

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

Based on the above code, you need to inject 'ui.bootstrap' into your module.

  angular.module('myFancyApp', ['ui.bootstrap','other_deps',.....]);
于 2013-10-28T23:46:48.550 回答