"Fehler beim Instanziieren des Moduls ui.router"

Das Problem ist einfach und die Antwort ist wahrscheinlich ziemlich offensichtlich, aber ich kann wirklich nicht herausfinden, was hier falsch läuft."Fehler beim Instanziieren des Moduls ui.router"

JSFIDDLE

Wie Sie sehen können, werden keine Links erzeugt und keine Ansichten geladen.

Ich habe verwandte Probleme auch untersucht (z. B. this one), aber es war nicht viel von Nutzen.

index.html

<nav class="navbar navbar-inverse" role="navigation"> 
    <div class="navbar-header"> 
    <a class="navbar-brand" ui-sref="#">AngularUI Router</a> 
    </div> 
    <ul class="nav navbar-nav"> 
    <li><a ui-sref="home">Home</a></li> 
    <li><a ui-sref="about">About</a></li> 
    </ul> 
</nav> 

<div class="container"> 
    <div ui-view></div> 
</div> 

<script type="text/ng-template" id="home.html"> 
    <div class="jumbotron text-center"> 
     <h1>Welcome</h1> 
     <p>This is the Home Page</p>  
    </div> 
</script>

app.js

var routerApp = angular.module('routerApp', ['ui.router']); 

routerApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { 

    $urlRouterProvider.otherwise('/home'); 

    $stateProvider 
     .state('home', { 
      url: '/home', 
      templateUrl: 'home.html' 
     }); 

}]);

EDIT

ich erwähnt habe, sollte, dass ich ui-router im externen Register Ressourcen enthalten in meinem Geige.

das ist, was wird von JSFiddle generiert:

<html> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script> 
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    </head> 
    <body ng-app="routerApp"> 
    <nav class="navbar navbar-inverse" role="navigation"> 
     <div class="navbar-header"> 
     <a class="navbar-brand" ui-sref="#">AngularUI Router</a> 
     </div> 
     <ul class="nav navbar-nav"> 
     <li><a ui-sref="home">Home</a></li> 
     <li><a ui-sref="about">About</a></li> 
     </ul> 
    </nav> 

    <div class="container"> 
     <div ui-view=""></div> 
    </div> 

    <script type="text/ng-template" id="home.html"> 
     <div class="jumbotron text-center"> 
     <h1>Welcome</h1> 
     <p>This is the Home Page</p> 
     </div> 
    </script> 

    <script type="text/javascript"> 
     //<![CDATA[ 

     var routerApp = angular.module('routerApp', ['ui.router']); 

     routerApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { 

     $urlRouterProvider.otherwise('/home'); 

     $stateProvider 
      .state('home', { 
      url: '/home', 
      templateUrl: 'home.html' 
      }); 

     }]); 
     //]]> 

    </script> 

    </body> 
</html>

EDIT # 2

Es scheint, wie dies ein Problem mit JSFiddle der externen Ressourcen eher als ui-Router.

Working example

Quelle

2016-05-02 Pascal

Sie müssen umfassen Winkel-ui-Router in Ihrem index.html

Sie können beispielsweise hinzufügen:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>

Hier ist die Arbeits JSFIDDLE

Quelle

2016-05-02 08:53:29 fbid

Bitte sehen Sie meine Bearbeitung. – Pascal

@Pascal ist es wahrscheinlich ein Problem mit wie jsfiddle externe Ressourcen lädt.Es sieht so aus, als ob die Verwendung dieses Abschnitts die ui.router-Abhängigkeit nach dem js-Code lädt, also wenn es geladen wird, weiß es nicht, was ui.router ist – fbid

@Pascal, es funktioniert sogar, wenn Sie es manuell laden in '' von Ihre Seite, wie Sie [hier] sehen können (https://jsfiddle.net/12crh8er/4/), so vermute ich, dass es nur eine Sache ist. – fbid

ui.router ist ein separates Modul. Sie müssen es herunterladen und ein Skript, z. Download von here

Es gibt einen standardmäßigen eckigen Router, aber dieser sollte wahrscheinlich auch als separates Skript hinzugefügt werden.

Quelle

2016-05-02 08:50:38

Sie meinen http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js? – Pascal

Zum Beispiel, aber Sie können es einfach herunterladen und von lokalen dienen. Die Antwort wurde mit dem Verweis auf den GitHub aktualisiert. –

Bitte sehen Sie meine Bearbeitung. – Pascal

Angular UI-Router ist ein client- Seite Einseitige Anwendung Routing-Framework für AngularJS.Routing-Frameworks für SPAs (Single Page Applications) aktualisieren die URL des Browsers, während der Benutzer durch die App navigiert.

Check this Geige

$stateProvider 
    .state('home', { 
     url: '/home', 
     templateUrl: 'home.html' 
    }).state('about', { 
     url: '/about', 
     templateUrl: 'about.html' 
    });

Quelle

2016-05-02 08:55:41 byteC0de

Bitte sehen Sie meine Bearbeitung. – Pascal

@Pascal ändern Sie Ihre ui.router URL zu https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js – byteC0de

überprüfen Sie diese https: // jsfiddle .net/3vhwnur4 / – byteC0de

"Fehler beim Instanziieren des Moduls ui.router"

Antwort

Verwandte Themen