79

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.

Improve this question
0

5 Answers 5

Reset to default
63

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

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.
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.
Here is an example of integrating angular-ui, angular-strap, jquery, and a bit more - github.com/robertjchristian/angular-enterprise-seed
@martinpaulucci seems like the updated jsfiddle is also broken
Including jQuery will encourage DOM manipulation. It's not the end of the world but it may discourage you from solving problems in an angular way.
|
21

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.

Improve this answer

2 Comments

And as of now, use twitter-boostrap-css v2.3.1 or something similar and not v3.
I'm a bit confused here. angular-ui-bootstrap and angular-ui are two different projects
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:

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

Improve this answer

Comments

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/

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

Improve this answer

1 Comment

+1 for making me realize that I was injecting the wrong module. I was installing 'angular-ui' through bower and trying to inject 'ui.bootstrap'. Two separate things.
1

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

1 Comment

these are instructions for Angular UI Bootstrap

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.