如何将AngularUI集成到AngularJS中?

时间:2022-09-26 11:22:21

Sorry for the silly question, does everyone know how to start using AngularUI? I've downloaded it from Github and read the instruction in README but still don't understand what I have to do.

不好意思问个傻问题,大家都知道如何开始使用AngularUI吗?我从Github上下载了它,阅读了README中的说明,但仍然不明白我要做什么。

5 个解决方案

#1


62  

Steps to integrate:

步骤集成:

  • Include jQuery and jQuery-ui (best served from a CDN)
  • 包括jQuery和jQuery-ui(最好来自CDN)
  • Include angular (it is the best to include if from a CDN)
  • 包含角(最好包含CDN)
  • Include angular-ui JS / CSS (currently only hosted in the GitHub repository in the build folder)
  • 包含angular-ui JS / CSS(目前仅托管在构建文件夹中的GitHub存储库中)
  • Include any jQuery plugins for the directives you are planning to use
  • 为您计划使用的指令包括任何jQuery插件
  • Declare dependencies on the angular-ui modules (ui.directives or ui.filters depending on what you are planning to use).
  • 声明对angular-ui模块(ui)的依赖关系。指令或ui。过滤器取决于您计划使用什么)。

Most of the outlined steps are just about including JS/CSS dependencies. The only "tricky" part is to declare dependencies on a ui.* module, you can do it like this:

大多数概述的步骤仅仅包括JS/CSS依赖项。惟一“棘手”的部分是声明对ui的依赖项。*模块,你可以这样做:

var myApp = angular.module('myApp',['ui.directives']);

Once all the dependencies are included and a module configured you are ready to go. For example, using the ui-date directive is as simple as (notice the ui-date):

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

<input name="dateField" ng-model="date" ui-date>

Here is the complete jsFiddle showing how to use the ui-date directive: http://jsfiddle.net/r7UJ2/11/

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

You might also want to have a look at the sources of the http://angular-ui.github.com/ where there are live examples off all the directives.

您可能还想了解http://angular-ui.github.com/的源代码,其中有来自所有指令的实时示例。

#2


21  

As of 3rd of May 2013, here are the steps:

从2013年5月3日开始,以下是步骤:

include

包括

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

register ui

注册界面

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

make sure myFancyApp is the same as in your <html ng-app="myFancyApp">

确保myFancyApp与中的一样

Let the magic commence.

让魔法开始。

#3


11  

I think what is missing is plugins - you've got to add the jquery plugin scripts and css for some angular-ui directives to work. For example the codemirror directive needs:

我认为缺少的是插件——你必须添加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" />

It's a surprise to me that angular-ui.github.com doesn't mention needing to include plugins.

令我惊讶的是,angular-ui.github.com没有提到需要包含插件。

#4


3  

Hi I wrote an article specifically on how to do this for for PHP syntax highlighting. The article is here: http://neverstopbuilding.net/how-to-integrate-codemirror-with-angular-ui/

你好,我专门写了一篇关于如何为PHP语法突出显示做这个的文章。文章在这里:http://neverstopbuilding.net/how- integratedcodemirr -with-angular-ui/

The core of things is getting the configuration right:

事情的核心是正确配置:

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"; ?>';
}

For something like the following HTML snippet:

对于以下的HTML片段:

<div ng-app="myApp">
    <div ng-controller="codeCtrl">
        <textarea ui-codemirror ng-model="code"></textarea>
    </div>
</div>

You can see the whole jsfiddle of the set up here: http://jsfiddle.net/jrobertfox/RHLfG/2/

您可以看到这里的整个jsfiddle: http://jsfiddle.net/jrobertfox/RHLfG/2/。

pkozlowski.opensource is right, there are a lot more files that you need to include than it seems from the AngularUI documentation (if you can call it documentation...)

pkozlowski。opensource是对的,你需要包含的文件比AngularUI文档要多得多(如果你可以称之为documentation…)

Anyway I hope this is helpful to you or others.

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

#5


1  

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

说明书上有说明。md文件在他们的官方github存储库中

Angular UI

角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-ui js文件(例如:ui-bootstrap-tpl -0.6.0.js),在第一行中,您将注意到以下语句

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

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

根据上面的代码,您需要注入'ui。引导到你的模块。

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

#1


62  

Steps to integrate:

步骤集成:

  • Include jQuery and jQuery-ui (best served from a CDN)
  • 包括jQuery和jQuery-ui(最好来自CDN)
  • Include angular (it is the best to include if from a CDN)
  • 包含角(最好包含CDN)
  • Include angular-ui JS / CSS (currently only hosted in the GitHub repository in the build folder)
  • 包含angular-ui JS / CSS(目前仅托管在构建文件夹中的GitHub存储库中)
  • Include any jQuery plugins for the directives you are planning to use
  • 为您计划使用的指令包括任何jQuery插件
  • Declare dependencies on the angular-ui modules (ui.directives or ui.filters depending on what you are planning to use).
  • 声明对angular-ui模块(ui)的依赖关系。指令或ui。过滤器取决于您计划使用什么)。

Most of the outlined steps are just about including JS/CSS dependencies. The only "tricky" part is to declare dependencies on a ui.* module, you can do it like this:

大多数概述的步骤仅仅包括JS/CSS依赖项。惟一“棘手”的部分是声明对ui的依赖项。*模块,你可以这样做:

var myApp = angular.module('myApp',['ui.directives']);

Once all the dependencies are included and a module configured you are ready to go. For example, using the ui-date directive is as simple as (notice the ui-date):

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

<input name="dateField" ng-model="date" ui-date>

Here is the complete jsFiddle showing how to use the ui-date directive: http://jsfiddle.net/r7UJ2/11/

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

You might also want to have a look at the sources of the http://angular-ui.github.com/ where there are live examples off all the directives.

您可能还想了解http://angular-ui.github.com/的源代码,其中有来自所有指令的实时示例。

#2


21  

As of 3rd of May 2013, here are the steps:

从2013年5月3日开始,以下是步骤:

include

包括

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

register ui

注册界面

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

make sure myFancyApp is the same as in your <html ng-app="myFancyApp">

确保myFancyApp与中的一样

Let the magic commence.

让魔法开始。

#3


11  

I think what is missing is plugins - you've got to add the jquery plugin scripts and css for some angular-ui directives to work. For example the codemirror directive needs:

我认为缺少的是插件——你必须添加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" />

It's a surprise to me that angular-ui.github.com doesn't mention needing to include plugins.

令我惊讶的是,angular-ui.github.com没有提到需要包含插件。

#4


3  

Hi I wrote an article specifically on how to do this for for PHP syntax highlighting. The article is here: http://neverstopbuilding.net/how-to-integrate-codemirror-with-angular-ui/

你好,我专门写了一篇关于如何为PHP语法突出显示做这个的文章。文章在这里:http://neverstopbuilding.net/how- integratedcodemirr -with-angular-ui/

The core of things is getting the configuration right:

事情的核心是正确配置:

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"; ?>';
}

For something like the following HTML snippet:

对于以下的HTML片段:

<div ng-app="myApp">
    <div ng-controller="codeCtrl">
        <textarea ui-codemirror ng-model="code"></textarea>
    </div>
</div>

You can see the whole jsfiddle of the set up here: http://jsfiddle.net/jrobertfox/RHLfG/2/

您可以看到这里的整个jsfiddle: http://jsfiddle.net/jrobertfox/RHLfG/2/。

pkozlowski.opensource is right, there are a lot more files that you need to include than it seems from the AngularUI documentation (if you can call it documentation...)

pkozlowski。opensource是对的,你需要包含的文件比AngularUI文档要多得多(如果你可以称之为documentation…)

Anyway I hope this is helpful to you or others.

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

#5


1  

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

说明书上有说明。md文件在他们的官方github存储库中

Angular UI

角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-ui js文件(例如:ui-bootstrap-tpl -0.6.0.js),在第一行中,您将注意到以下语句

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

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

根据上面的代码,您需要注入'ui。引导到你的模块。

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

相关文章