Insert bootstrap carousel in AngularJS SPA Page

Question

How to insert bootstrap carousel in AngularJS SPA Page.. please solve this problem ....

Bidyasagar Mishra · Answer

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" > Home a > a href = "#page" > Page a > 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 More a > div > div > div > button ng-click = "setActive(1)" > View Second Slide button > div > Page.html h2 > A different view h2 > a href = "#home/1" > View Second Slide a > a href = "#home/3" > View Last Slide a >