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
orui.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存储库中
角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
orui.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存储库中
角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',.....]);