Twitter Bootstrap Question posted in

Twitter bootstrap – How to load Angular UI Bootstrap and dependencies

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']);
Tags:

3

Answers


  1. 0

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

     var myApp = angular.module('myApp', ['ui.router','ui.sortable']);
    Login or Signup to reply.
  2. 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

    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search