Copying the UI-Bootstrap code does not work? How do I use UI-Bootstrap?

Question

I am trying to use components from the http://angular-ui.github.io/bootstrap/ page and am basically copying the code exacctly just to get the framework. But it does not work seem to work, am I missing something general?

It is the exact same code and I have added the dependencies as far as I understand, which was the error in the other similar post.

For example with the carousel (ui.bootstrap.carousel), I copied the available html code into an html file index.html:

<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.3.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div ng-controller="CarouselDemoCtrl">
<div style="height: 305px">
<div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
  <div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
    <img ng-src="{{slide.image}}" style="margin:auto;">
    <div class="carousel-caption">
      <h4>Slide {{slide.id}}</h4>
      <p>{{slide.text}}</p>
    </div>
  </div>
</div>
</div>
<div class="row">
<div class="col-md-6">
  <button type="button" class="btn btn-info" ng-click="addSlide()">Add Slide</button>
  <button type="button" class="btn btn-info" ng-click="randomize()">Randomize slides</button>
  <div class="checkbox">
    <label>
      <input type="checkbox" ng-model="noWrapSlides">
      Disable Slide Looping
    </label>
  </div>
</div>
<div class="col-md-6">
  Interval, in milliseconds: <input type="number" class="form-control" ng-model="myInterval">
  <br />Enter a negative number or 0 to stop the interval.
</div>
</div>
</div>
</body>
</html>

The js code I have copied into a js file called example.js:

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope) {
$scope.myInterval = 5000;
$scope.noWrapSlides = false;
$scope.active = 0;
var slides = $scope.slides = [];
var currIndex = 0;

$scope.addSlide = function() {
var newWidth = 600 + slides.length + 1;
slides.push({
  image: '//unsplash.it/' + newWidth + '/300',
  text: ['Nice image','Awesome photograph','That is so cool','I love that'][slides.length % 4],
  id: currIndex++
});
};

$scope.randomize = function() {
var indexes = generateIndexesArray();
assignNewIndexesToSlides(indexes);
};

for (var i = 0; i < 4; i++) {
$scope.addSlide();
}

// Randomize logic below

function assignNewIndexesToSlides(indexes) {
for (var i = 0, l = slides.length; i < l; i++) {
  slides[i].id = indexes.pop();
}
}

function generateIndexesArray() {
var indexes = [];
for (var i = 0; i < currIndex; ++i) {
  indexes[i] = i;
}
return shuffle(indexes);
}

// http://stackoverflow.com/questions/962802#962890
function shuffle(array) {
var tmp, current, top = array.length;

if (top) {
  while (--top) {
    current = Math.floor(Math.random() * (top + 1));
    tmp = array[current];
    array[current] = array[top];
    array[top] = tmp;
  }
 }

return array;
}
});

For better readability you can also find the code here: https://plnkr.co/edit/YZULMBb0br4IuhV4dUug?p=preview

When I run it, it just shows this on the page:

Slide {{slide.id}}

Why?

The plunker link works. But how do I make it work locally in my html, js file? I.e. when I copy the code as described? — sandboxj, Dec 04 '16 at 18:55
When open my locally created html file with that code, it just shows Slide {{slide.id}} {{slide.text}} Is there something about using the code locally that I am missing? — sandboxj, Dec 04 '16 at 18:56
No I dont have teamviewer. Does it work for you when you would just copy the code into a local html, js file? — sandboxj, Dec 04 '16 at 18:59
Thanks so far. I dont need to have somethig pre-installed or? — sandboxj, Dec 04 '16 at 19:02
I am just right-click opening the html file with a browser. Is this the right way to do it? — sandboxj, Dec 04 '16 at 19:04
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/129746/discussion-between-sajeetharan-and-sandboxj). — Sajeetharan, Dec 04 '16 at 19:05

Sajeetharan · Accepted Answer · 2016-12-04T19:26:40.913

Try, adding http: before the links, plunker loads these references directly, but when you load the urls directly in browser it wont work.

Sometimes not necessarily because almost all browsers take that as the default protocol if the user does not specify it directly

You need to add http:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script> 
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.3.0.js"></script> 
<script src="example.js"></script> 
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

This solved the issue, thank you very much, Sajeetharan. – sandboxj Dec 04 '16 at 19:26 — sandboxj, Dec 04 '16 at 19:26

Copying the UI-Bootstrap code does not work? How do I use UI-Bootstrap?

1 Answers1