How to integrate AngularUI to AngularJS?

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.

Solution 1:

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.

Solution 2:

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>

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

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

Let the magic commence.

Solution 3:

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.

Solution 4:

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

Solution 5:

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',.....]);