How to use Angular Bootstrap in MVC5?

Question

Try to use the "Tab" features build by the Angular & Bootstrap I download the latest script for both Angular Angular-UI Bootstrap and link the bootstrap.css to my page However it still doesn't load the correct output> Do I still need initiate the Angular ng-controller? Anyone can help here is my code. Here is the source script code

    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/angular-ui/ui-bootstrap.min.js"></script>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />

HTML Code

     <div ng-app ng-controller="TabsDemoCtrl">
      <tabset justified="true">
        <tab heading="Justified">Justified content</tab>
        <tab heading="SJ">Short Labeled Justified content</tab>
        <tab heading="Long Justified">Long Labeled Justified content</tab>
       </tabset>
      </div>

Bottom script excute code

 <script>
  var TabsDemoCtrl = function ($scope) {
     $scope.tabs = [
       { title: 'Dynamic Title 1', content: 'Dynamic content 1' },
       { title: 'Dynamic Title 2', content: 'Dynamic content 2', disabled: true }
     ];

     $scope.alertMe = function () {
         setTimeout(function () {
             alert('You\'ve selected the alert tab!');
         });
     };
 };
 </script>

Let me know if i still need this to wrap the execute script up

        angular.module('detailapp', [])
        .controller('TabsDemoCtrl', function ($scope) {

       });

Error:

GET http://localhost:51491/House/Details/template/tabs/tab.html 404 (Not Found)       angular.js:8980
 (anonymous function) angular.js:8980
  sendReq angular.js:8766
 $http.serverRequest angular.js:8486
  processQueue angular.js:12018
  (anonymous function) angular.js:12034
   Scope.$eval angular.js:13202
    Scope.$digest angular.js:13014
    Scope.$apply angular.js:13306
       bootstrapApply angular.js:1499
         invoke angular.js:4099
           doBootstrap angular.js:1497
        bootstrap angular.js:1517
        angularInit angular.js:1411
        (anonymous function) angular.js:24258
        l jquery?v=EEZBCVzQe1TpkEUeLfjEm53wpuqSSXGjiXFWAVaewp81:1
        s.fireWith jquery?v=EEZBCVzQe1TpkEUeLfjEm53wpuqSSXGjiXFWAVaewp81:1
        i.extend.ready jquery?v=EEZBCVzQe1TpkEUeLfjEm53wpuqSSXGjiXFWAVaewp81:1
        a jquery?v=EEZBCVzQe1TpkEUeLfjEm53wpuqSSXGjiXFWAVaewp81:1
        Error: [$compile:tpload] Failed to load template: template/tabs/tab.html
        http://errors.angularjs.org/1.3.0-rc.0/$compile/tpload?            p0=template%2Ftabs%2Ftab.html
            at http://localhost:51491/Scripts/angular.js:80:12
            at handleError (http://localhost:51491/Scripts/angular.js:14858:17)
            at processQueue (http://localhost:51491/Scripts/angular.js:12018:27)
            at http://localhost:51491/Scripts/angular.js:12034:27
            at Scope.$eval (http://localhost:51491/Scripts/angular.js:13202:28)
            at Scope.$digest (http://localhost:51491/Scripts/angular.js:13014:31)
            at Scope.$apply (http://localhost:51491/Scripts/angular.js:13306:24)
            at done (http://localhost:51491/Scripts/angular.js:8797:47)
            at completeRequest (http://localhost:51491/Scripts/angular.js:9012:7)
            at XMLHttpRequest.xhr.onreadystatechange                         (http://localhost:51491/Scripts/angular.js:8951:11)

You need to reference ui.bootstrap as a dependency in your main module angular.module('detailapp', ['ui.bootstrap']) — ms87
– ms87, Commented Sep 18, 2014 at 4:53
Exactly what is the point of your TabsDemoCtrl? None of its members are being utilised for anything. What output are you getting and why do you believe it isn't correct? — Phil Degenhardt
– Phil Degenhardt, Commented Sep 18, 2014 at 5:15
Well if it implement correctly I should see 3 tab all clickable to switch to different content right? But it doesnt show no matter I initiate the controller or remove all the ng-controller — Ricc
– Ricc, Commented Sep 18, 2014 at 5:21

Ricc · Accepted Answer · 2014-09-18 06:01:05Z

1

So I find the error first, the boostrap download in nuget page doesnt work You have to use the other one

<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>

Such as this Then initial your Controller in

 angular.module('myapp', ['ui.bootstrap'])
    .controller('TabsDemoCtrl', function ($scope, $http, $window) {
        $scope.tabs = [
         { title: 'tab1', content: 'Justified content' },
         { title: 'tab2', content: 'Dynamic content 2', disabled: true },
         { title: 'tab3', content: 'Dynamic content 3', }
        ];

    });

answered Sep 18, 2014 at 6:01

Ricc

3413 gold badges6 silver badges16 bronze badges

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

Collectives™ on Stack Overflow

How to use Angular Bootstrap in MVC5?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related