“无法实例化模块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”

回答

相关问题