2

I'm experimenting with the Angular UI Bootstrap libraries (specifically modal) but I'm having trouble getting the right versions of each library loaded in the right order, but I keep coming up against the No module: template/accordion/accordion-group.html error. I've switched back to Bootstrap 2.3 but it's still there. My application header is below, can anyone spot any wrong versions or JS files out of order? I'm also using Angular UI Sortable, hence its inclusion.

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

    <script src="http://code.angularjs.org/1.0.2/angular.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css">

    <link rel="stylesheet" href="style.css" />
</head>

My app declaration looks like this:

var app = angular.module('myModule', ['ui', 'ui.bootstrap']);

Edit

I managed to get it working like this:

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>

    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-sortable/0.13.2/sortable.min.js"></script>

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css">

    <link rel="stylesheet" href="style.css" />
</head>

and

var app = angular.module('myModule', ['ui.sortable', 'ui.bootstrap']);
Improve this question
3
  • It is not correct to use BOTH the angular-ui AND Angular UI Bootstrap libraries. The former wraps jQuery UI and the latter wraps Bootstrap CSS. Pick one. Commented Sep 29, 2015 at 0:05
  • Because I'm trying to use Sortable (github.com/angular-ui/ui-sortable) from the Angular UI libraries and Modal (angular-ui.github.io/bootstrap) from the Bootstrap libraries in the same app. Is this not possible? Commented Sep 29, 2015 at 9:18
  • What are you trying to sort? Perhaps there's a way to not try and use both. Commented Sep 29, 2015 at 18:30

3 Answers 3

Reset to default
4

did you download all the files? according to their docs

Files to download

Build files for all directives are distributed in several flavours: minified for production usage, un-minified for development, with or without templates. All the options are described and can be downloaded from here. It should be noted that the -tpls files contain the templates bundled in JavaScript, while the regular version does not contain the bundled templates. For more information, check out the FAQ here and the README here.

Alternativelly, if you are only interested in a subset of directives, you can create your own build.

Whichever method you choose the good news that the overall size of a download is very small: <76kB for all directives (~20kB with gzip compression!)

Looks like your error is with a template not begin available or loaded. Maybe you missed the download which packaged the templates. In your case the accordian template isn't being loaded.

After reading the FAQs I'm also wondering if having both angular-ui cdns is causing your problem. The angular-ui is loading first without templates and then your loading angular-ui-bootstrap with templates.

Angular-ui-bootstrap FAQ

This project comes with several deliverables described here: https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files If the roles of those files are not clear for you just pick ui-bootstrap-tpls-[version].min.js, but be sure to include only one file in your project.

You're showing this 

<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>

Try just loading 

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>

More info on the builds from github

the excerpt i'm reading is

Now it should be clear that files with the -tpls in their name have bootstrap-specific templates bundled with directives. For people who want to take all the directives and don't need to customize anything the solution is to grab a file named ui-bootstrap-tpls-[version].min.js. If, on the other hand default templates are not what you need you could take ui-bootstrap-[version].min.js and provide your own templates, taking the default ones (https://github.com/angular-ui/bootstrap/tree/master/template) as a starting point.

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

1 Comment

Great, that got me pretty close. In the end I found this example (plnkr.co/edit/TGIeeEbbvJwpJ3WRqo2z?p=preview) which loads the Sortable library only (not the full Angular UI) after the full Bootstrap library. I'll update my question with my final header in case anyone else needs it.
1

Did you add 'ui.router' and 'ui.sortable' as dependency in your app.js file ? 

 var myApp = angular.module('myApp', ['ui.router','ui.sortable']);
Improve this answer

1 Comment

I'm not using ui.router, but I have tried using both 'ui.sortable' and just 'ui' as a dependency without any luck.
0

I would use a package manager such as Bower or WebPack to manage your client side dependencies.

According to the Angular UI docs you only need to add: AngularJS and Bootstrap CSS. No need for jQuery.

And then you should initialize your Angular App module with ui.bootstrap dependency:

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

== UPDATE

According to this example, this should be everything you need:

index.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<script src="https://rawgithub.com/angular-ui/ui-sortable/master/src/sortable.js"></script>

```

app.js

var myapp = angular.module('sortableApp', ['ui.sortable']);

Let me know if this helps you

Improve this answer

3 Comments

Yes, I saw the documentation. I've the regular Bootstrap js but Sortable (angular-ui.github.io/ui-sortable) requires jQuery so that has to stay. I'm still getting the error without the Bootstrap js.
This project is still just testing modules for suitability at the moment and not a production system so I don't really want to do a big switchover to Node unless I absolutely have to.
Thanks, but that doesn't help with the Bootstrap problem - it's still complaining about the accordion template.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.