How to integrate AngularUI to AngularJS?

前端未结

关注

 5  1991

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

相关标签:

5条回答

感动是毒

2020-12-02 06:28
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',.....]);
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
名媛妹妹

2020-12-02 06:30
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/

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:
```
<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/

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...)

Anyway I hope this is helpful to you or others.
0 讨论(0)
发布评论:

提交评论
- 加载中...
星月不相逢

2020-12-02 06:37
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:
```
    <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.
0 讨论(0)
发布评论:

提交评论
- 加载中...
谎友^

2020-12-02 06:51
As of 3rd of May 2013, here are the steps:

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

Let the magic commence.
0 讨论(0)
发布评论:

提交评论
- 加载中...
后悔当初

2020-12-02 06:52
Steps to integrate:
- Include jQuery and jQuery-ui (best served from a CDN)
- Include angular (it is the best to include if from a CDN)
- Include angular-ui JS / CSS (currently only hosted in the GitHub repository in the build folder)
- Include any jQuery plugins for the directives you are planning to use
- Declare dependencies on the angular-ui modules (ui.directives or ui.filters depending on what you are planning to use).
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:
```
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):
```
<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/

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.
0 讨论(0)
发布评论:

提交评论
- 加载中...