angularjs – “无法实例化模块ui.router”

发布时间：2020-12-17 17:26:18 所属栏目：安全来源：网络整理

导读：问题很简单,答案可能很明显,但我真的无法找出这里出了什么问题. JSFIDDLE 如您所见,没有生成链接且没有加载视图. 我已经研究了相关的问题(例如this one),但它没有多大用处. 的index.html nav class="navbar navbar-inverse" role="navigation" div class="na

问题很简单,答案可能很明显,但我真的无法找出这里出了什么问题.

JSFIDDLE

如您所见,没有生成链接且没有加载视图.

我已经研究了相关的问题(例如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) {

        $urlRouterProvider.otherwise('/home');

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

      }]);
      //]]>

    </script>

  </body>
</html>

编辑#2

看起来这是JSFiddle的外部资源而不是ui-router的问题.

Working example

解决方法

您必须在index.html中包含angular-ui-router

您可以添加以下内容：

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

这是工作JSFIDDLE

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!