「無法實例化模塊ui.router」

問題很簡單，答案可能很明顯，但我真的無法找出這裏出了什麼問題。「無法實例化模塊ui.router」

正如你所看到的，不再產生聯繫，並沒有意見被加載。

我已經調查相關問題藏漢（例如this one），但它並沒有太大的用處。

的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' 
     }); 

}]);

編輯

我應該提到，我包括在外部資源選項卡ui-router我小提琴。

這是得到由的jsfiddle產生：

<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>

編輯＃2

看起來這是用的jsfiddle的外部資源的問題，而不是UI的路由器。

Working example

來源

2016-05-02 Pascal

你必須包括在您的index.html

角UI路由器例如，您可以添加：

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

這裏是工作JSFIDDLE

來源

2016-05-02 08:53:29 fbid

請參閱我的編輯。 – Pascal

@Pascal這很可能是jsfiddle如何加載外部資源的問題。看起來，使用該部分使ui.router依賴加載之後比你的js代碼，所以當它加載它不知道什麼ui.router是 – fbid

@Pascal它工作，即使你手動加載它的''你的頁面，就像你可以看到[這裏]（https://jsfiddle.net/12crh8er/4/），所以我懷疑它只是一個jsfiddle的東西。 – fbid

ui.router是單獨的模塊。您需要下載它幷包含一個腳本，例如從here

有一個默認的角度路由器，但一個可能應該作爲一個單獨的腳本，以及下載。

來源

2016-05-02 08:50:38

你的意思是http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js？例如 – Pascal

，但您可以從本地下載並提供服務。更新了參考github的答案。 –

請參閱我的編輯。 – Pascal

角UI-Router是一個客戶端 - 用於AngularJS的應用程序路由框架。當用戶在應用程序中導航時，SPA（用於單頁應用程序）的路由框架更新瀏覽器的URL。

Check this小提琴

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

來源

2016-05-02 08:55:41 byteC0de

請參閱我的編輯。 – Pascal

@Pascal將您的ui.router URL更改爲https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js – byteC0de

查看此https：// jsfiddle .NET/3vhwnur4 / – byteC0de

「無法實例化模塊ui.router」

回答

相關問題