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.

pkozlowski.opensource
  • 117,202
  • 60
  • 326
  • 286

5 Answers5

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.

isherwood
  • 58,414
  • 16
  • 114
  • 157
pkozlowski.opensource
  • 117,202
  • 60
  • 326
  • 286
  • 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 '13 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 '13 at 19:10
  • Here is an example of integrating angular-ui, angular-strap, jquery, and a bit more - https://github.com/robertjchristian/angular-enterprise-seed – Robert Christian Mar 11 '13 at 01:19
  • @martinpaulucci seems like the updated jsfiddle is also broken – wmitchell Jul 10 '13 at 17:05
  • 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. – RevNoah Mar 10 '14 at 14:25
  • @RevNoah The directives from the original angular-ui repo, for which this answer was written, were wrapping jQuery / jQuery UI plugins, so you don't have an option. I mean, if you want to use those directives you have to include jQuery. Everyone agrees that avoiding jQuery is desirable for AngularJS apps, when can do without it, but if you can't - you can't. BTW, you can also write "bad AngularJS code" without including jQuery.... – pkozlowski.opensource Mar 10 '14 at 14:50
  • My mistake. Once again, I confused AngularUI with the more lightweight Angular UI Bootstrap library; not the first time. It's been a struggle avoiding jQuery but I've been successful so far. It's important to me but it might not be important enough to other developers. As I said, it's not the end of the world. One of the things I really love about Angular is how flexible it is, and how willing it is to let you break the "rules". – RevNoah Mar 12 '14 at 17:13
  • in nuget package manager : `PM> Install-Package Angular.UI` (for more information including determining dependencies here is the [nuget page](https://www.nuget.org/packages/Angular.UI/0.4.0) ) – ablaze Sep 15 '14 at 18:48
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.

durilka
  • 1,399
  • 1
  • 10
  • 22
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.

spracketchip
  • 850
  • 2
  • 10
  • 18
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...)

Nimantha
  • 6,405
  • 6
  • 28
  • 69
  • +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. – saiyancoder Feb 02 '14 at 04:21
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',.....]);
user6123723
  • 10,546
  • 18
  • 67
  • 109