Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 29 down vote favorite
13

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.

share|improve this question
13  
I don't think your question is silly. I've noticed with both AngularUI and AngularStrap, there really isn't much documentation about how to actually include it in an app. I guess they assume everyone using Angular is an expert. – Evan Zamir Jan 11 at 4:00

4 Answers

up vote 36 down vote

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/pkozlowski_opensource/aGpNf/6/

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.

share|improve this answer
Great answer & thanks for posting the link to angular-ui.github.com – Kevin Ortman Dec 30 '12 at 18:21
Actually, step 1 is optional depending on what directives you use and step 5 is just incorrect as only including ui.directives will throw errors when ui.config gets referenced. Instead, you should always include ui and just remove the directives / filters you don't want. – ProLoser Jan 15 at 18:39
Hmm, if I'm not mistaken step 5 is correct really since both ui.directives and ui.filters got dependency on the ui.config module. But sure, it could only mention the ui module. – pkozlowski.opensource Jan 15 at 19:10
Blah you're right, my bad. – ProLoser Jan 15 at 19:30
3  
Your jsfiddle has unfortunately stopped working. – Daniel Lidström Apr 16 at 13:09
show 4 more comments
up vote 5 down vote

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.

share|improve this answer
1  
Why the downvote? This is relevant info... – Timothy_Bone Dec 13 '12 at 6:28
up vote 1 down vote

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.

share|improve this answer
up vote 0 down vote

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.