Warum Modul " ui.bootstrap' ist nicht verfügbar?

Ich versuche dieses einfache tutorial, um zu versuchen, UI Bootstrap:
https://scotch.io/tutorials/how-to-correctly-use-bootstrapjs-and-angularjs-together

Aber ich bin, läuft in zwei Probleme.

SyntaxError: erwartet Ausdruck, hab '<' in ui-bootstrap-1.3.3.js:5:0

Dies ist das erste problem. Ich habe nicht bearbeitet, nichts in der Datei, aber es sagt unerwartetes token für die erste Zeile <!DOCTYPE html>

Ist und das andere ist als unten:

Fehler: [$Injektor:modulerr] Fehler beim instanziieren Modul app durch:
[$Injektor:modulerr] Fehler beim instanziieren Modul ui.bootstrap durch:
[$Injektor:nomod] Modul 'ui.bootstrap' ist nicht verfügbar! Sie entweder falsch geschrieben den Namen des Moduls oder vergessen es zu laden. Wenn die Registrierung eines Moduls sicherzustellen, dass Sie Abhängigkeiten angeben, wie das zweite argument.

Sah ich die Antworten auf alle Fragen, einige von Ihnen vorschlagen, auch die anderen Abhängigkeiten, während andere vorschlagen, um sicherzustellen, dass die Reihenfolge der Abhängigkeiten. Alles versucht, aber keine Freude.

Unten ist meine html-und js-code. Bitte haben Sie einen Blick

HTML

<html>
<head>
<style type="text/css"> 
            @import "css/bootstrap.css";
            @import "css/style.css";
        </style>
        <script src="js/angular.js"></script>
        <script src="js/angular-animate.js"></script>
        <script src="js/angular-touch.js"></script>
        <script src="js/ui-bootstrap-1.3.3.js"></script>
        <script src="js/app.js"></script>
</head>
<body>
<div class="container" ng-app="app" ng-controller="mainController">

  <div class="text-center">
    <p>Example of Angular and the normal Bootstrap JavaScript components</p>
    <p class="text-success">This will work</p>
  </div>

  <h2>Buttons</h2>
  <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary" ng-model="bigData.breakfast" btn-checkbox>
      Breakfast
    </label>
    <label class="btn btn-primary" ng-model="bigData.lunch" btn-checkbox>
      Lunch
    </label>
    <label class="btn btn-primary" ng-model="bigData.dinner" btn-checkbox>
      Dinner
    </label>
  </div>

  <pre><code>{{ bigData | json }}</code></pre>

  <h2>Collapse</h2>

  <a href="#" class="btn btn-primary" ng-click="isCollapsed = !isCollapsed">
    Toggle Panel
  </a>

  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a href="#" ng-click="isCollapsed = !isCollapsed">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div collapse="isCollapsed">
      <div class="panel-body">Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>

  <pre><code>{{ isCollapsed }}</code></pre>

</div>
</body>
</html>

angular.module('app', ['ngAnimate', 'ngTouch', 'ui.bootstrap'])

.controller('mainController', function($scope) {

  //BUTTONS ======================

  //define some random object
  $scope.bigData = {};

  $scope.bigData.breakfast = false;
  $scope.bigData.lunch = false;
  $scope.bigData.dinner = false;

  //COLLAPSE =====================
  $scope.isCollapsed = false;

});

Nicht wissen, was falsch läuft.

Bearbeiten
Version details wie folgt

Bootstrap v3.3.6

eckig

angular-animate

Winkel-touch
alle sind mit version AngularJS v1.5.3

Scheint ein bug im ui-bootstrap
für den zweiten Fehler, den Sie installieren müssen, um ui-bootstrap und in Ihr Projekt einbinden.
soni installieren? Nicht nur das herunterladen der js-Datei und das hinzufügen es per script-tag genug? Gibt es eine standalone-installation etwas?
Ja es ist die gleiche. Mein Fehler. Sie können versuchen, hinzufügen von einem anderen ui-bootstrap-Datei mittels download von woanders.
Tut ui.bootstrap.js laden? konnte Sie sehen, dass js-Datei aus chrome-debugger?
was ist Ihre angular.js version?
Singh es ist 1.5.3
scheint, wie ui-bootstrap-1.3.3 Datei nicht Hinzugefügt bekommen. können Sie bitte sicherstellen, dass Sie oder bieten plunker für Sie?

InformationsquelleAutor Vikas Prasad | 2016-07-08

2

Stellen Sie sicher ui-bootstrap-1.3.3 richtig geladen ist in Ihrem app.

Finden arbeiten plunker unten:

http://plnkr.co/edit/evG4XQ9ih9Cx0d1WF6YU?p=preview
- Ich fand es eine schnelle Lösung. Es scheint die Datei, wenn Sie heruntergeladen auf meinen system nicht funktioniert. Aber wenn ich mich beziehe, der link: <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script> es funktioniert. So jetzt habe ich gerade ersetzt uibootstarp import-Zeile. Rest der Importe sind wie Sie waren
- Froh, dass Ihr problem behoben ist. Bitte korrigieren Sie die Antwort, wenn es dir hilfreich ist.
- Aber können Sie plesae helfen, warum das Kontrollkästchen oder den Zusammenbruch sind nicht wie erwartet funktioniert. Auf der tutorial-website, wenn wir den aktivieren/deaktivieren Sie jedes Element, das dasselbe ist, sofort in die json-Ausgabe. Ebenso für den Zusammenbruch, der Ausgang ändert sich auf " true/false der Inhalt wird jedoch nicht immer zusammengebrochen hier, aber auf der tutorial-Webseite seine arbeiten völlig in Ordnung. Irgendeine Idee?
- Finden Sie die aktualisierte plunker : plnkr.co/Bearbeiten/evG4XQ9ih9Cx0d1WF6YU?p=Album Vorhören Gehen thorgh der Dokumentation. Sie haben eine sehr gut Dokumentation
- Seine immer noch die gleichen. Änderungen nicht wider da. Auch Zusammenbruch nicht funktioniert??
- Überprüfen Sie jetzt.
- Lassen Sie uns weiter, diese Diskussion im chat.
InformationsquelleAutor Varit J Patel
2

Ihnen fehlt ui-bootstrap-tpls.js Datei.

fügen Sie diese Datei in Ihre Seite ein.

siehe Beispiel arbeiten plunkr

InformationsquelleAutor Durgpal Singh
0

In meinem Fall, in einer legacy-Anwendung (AngularJS 1.3), es war, weil ich angular-ui-bootstrap zu bower.js eher als package.js.

Nachdem ich legte es um package.js lief npm install kopiert einige source-Verzeichnis, und Hinzugefügt, um die Einfuhren, hat es funktioniert.
```
import '../js/dependencies/ui-bootstrap-tpls-0.14.3.min'
```
Ist es wohl nicht der richtige Weg, es zu tun, obwohl.

Ich denke, dass es importiert werden soll, aus bower_modules.
```
import '../bower_components/angular-ui-bootstrap/???';
```
Aber, die Bower-hosting funktioniert nicht mehr und ein Versuch, die Installation über bower install schlägt mit HTTP 502.

Außerdem, was ist seltsam, es funktionierte , es sei denn, ich registrierte Anbieter:
```
.config(['$tooltipProvider', function ($tooltipProvider) { ...
```
Diese Weise, Eckig begann zu Klagen, dass '$tooltipProvider' ist nicht bekannt.

Hoffe das hilft, obwohl ich nicht viel wissen über das alte AngularJS, so nehmen Sie es als potentiell mittelmäßige Lösung.

InformationsquelleAutor Ondra Žižka

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.