How to integrate AngularUI to AngularJS?
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
buildfolder) - Include any jQuery plugins for the directives you are planning to use
- Declare dependencies on the angular-ui modules (
ui.directivesorui.filtersdepending 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.
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.
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.