Insert bootstrap carousel in AngularJS SPA Page

Index.html

>
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js">script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.js">script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.1/ui-bootstrap-tpls.min.js">script>
<script src="app.js">script>
head>
<body ng-app="app">
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav navbar-left">
<a href="#home">Homea>
<a href="#page">Pagea>
ul>
div>
nav>
<div class="col-xs-12" id="view" ng-view>div>
body>
html>

App.js

var app = angular.module("app", ['ngRoute', 'ui.bootstrap']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/home.html',
controller: 'SlideController'
})
.when('/home/:slide', {
//introducing parameter here, https://docs.angularjs.org/api/ngRoute/provider/$routeProvider
templateUrl: 'pages/home.html',
controller: 'SlideController'
})
.when('/page', {
templateUrl: 'pages/page.html',
controller: 'SlideController'
})
.otherwise({
redirectTo: '/page'
});
});
function Ctrl($scope,$route,$routeParams) {
//see injecting additionaly to have acces to them
$scope.slides = [];
$scope.slides.push({
url: '#home',
image: 'http://placekitten.com/300/200'
});
$scope.slides.push({
url: '#home',
image: 'http://placekitten.com/307/200'
});
$scope.slides.push({
url: '#home',
image: 'http://placekitten.com/302/200'
});
$scope.slides.push({
url: '#home',
image: 'http://placekitten.com/305/200'
});
$scope.setActive = function(idx) {
$scope.slides[idx].active = true;
};
//runing every tim controller is accessed
$scope.setActive($route.current.params.slide || 0);
}
app.controller('SlideController', function($scope) {
});

style.cs

a {
padding: 15px;
font-size: 20px;
text-decoration: none;
}

home.html

<div ng-controller="Ctrl">
lt;div carousel interval="3000">
<div slide ng-repeat="slide in slides" active="slide.active">
<img ng-src="{{slide.image}}" style="margin: auto;">
<div class="carousel-caption">
<h4>Slide {{$index}}h4>
<a href="{{slide.url}}">View Morea>
div>
div>
div>
<button ng-click="setActive(1)">View Second Slidebutton>
div>

Page.html

<h2>A different viewh2>
<a href="#home/1">View Second Slidea>
<a href="#home/3">View Last Slidea>

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Bidyasagar Mishra7y ago
Index.html
>
<html>
<head>

  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
  <link rel="stylesheet" href="style.css" />

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js">script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.js">script>
  <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.1/ui-bootstrap-tpls.min.js">script>
  <script src="app.js">script>
head>

<body ng-app="app">

  <nav class="navbar navbar-default">
    <div class="container">
      <ul class="nav navbar-nav navbar-left">
        <a href="#home">Homea>
         <a href="#page">Pagea>
      ul>
    div>
  nav>

  <div class="col-xs-12" id="view" ng-view>div>


body>

html>
App.js
var app = angular.module("app", ['ngRoute', 'ui.bootstrap']);

app.config(function($routeProvider) {
  $routeProvider

  .when('/', {
    templateUrl: 'pages/home.html',
    controller: 'SlideController'
  })

  .when('/home/:slide', {
    //introducing parameter here, https://docs.angularjs.org/api/ngRoute/provider/$routeProvider
    templateUrl: 'pages/home.html',
    controller: 'SlideController'
  })

  .when('/page', {
    templateUrl: 'pages/page.html',
    controller: 'SlideController'
  })
    .otherwise({
      redirectTo: '/page'
    });
});



function Ctrl($scope,$route,$routeParams) {
            //see injecting additionaly to have acces to them

  $scope.slides = [];
  $scope.slides.push({
    url: '#home',
    image: 'http://placekitten.com/300/200'
  });
  $scope.slides.push({
    url: '#home',
    image: 'http://placekitten.com/307/200'
  });
  $scope.slides.push({
    url: '#home',
    image: 'http://placekitten.com/302/200'
  });
  $scope.slides.push({
    url: '#home',
    image: 'http://placekitten.com/305/200'
  });

  $scope.setActive = function(idx) {
    $scope.slides[idx].active = true;
  };

  //runing every tim controller is accessed
  $scope.setActive($route.current.params.slide || 0);

}

app.controller('SlideController', function($scope) {


});
style.cs
a {
  padding: 15px;
  font-size: 20px;
  text-decoration: none;
}
home.html
<div ng-controller="Ctrl">

lt;div carousel interval="3000">
     <div slide ng-repeat="slide in slides" active="slide.active">
       <img ng-src="{{slide.image}}" style="margin: auto;">
       <div class="carousel-caption">
         <h4>Slide {{$index}}h4>
         <a href="{{slide.url}}">View Morea>
       div>
     div>
   div>

   <button ng-click="setActive(1)">View Second Slidebutton>

   div>
Page.html
<h2>A different viewh2>

<a href="#home/1">View Second Slidea>
<a href="#home/3">View Last Slidea>
0