Angularjs &引用；未能实例化模块ui.router“；_Angularjs

Angularjs &引用；未能实例化模块ui.router“；

angularjs

Angularjs &引用；未能实例化模块ui.router“；,angularjs,Angularjs,问题很简单，答案可能很明显，但我真的不知道这里出了什么问题如您所见，不会生成任何链接，也不会加载任何视图我也研究过相关的问题（例如），但没有多大用处 index.html 编辑我应该提到的是，我在小提琴的“外部资源”选项卡中包含了这些内容这就是JSFIDLE生成的内容： <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8">

问题很简单，答案可能很明显，但我真的不知道这里出了什么问题

如您所见，不会生成任何链接，也不会加载任何视图

我也研究过相关的问题（例如），但没有多大用处

index.html

编辑

我应该提到的是，我在小提琴的“外部资源”选项卡中包含了这些内容

这就是JSFIDLE生成的内容：

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


ui.router是一个单独的模块。您需要下载它并包含一个脚本，例如从
有一个默认的angular router，但这个可能也应该作为一个单独的脚本添加。
您必须在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>



这是AngularJS的客户端单页应用程序路由框架。SPA（单页应用程序）路由框架在用户浏览应用程序时更新浏览器的URL
拨弄
你的意思是？例如，但你可以直接从本地下载并提供服务。用github的引用更新了答案。似乎没有添加它。如果您看到网络选项卡，请尝试检查它。您可以尝试直接在html中添加引用，而不是依赖JSFIDLE。@Pascal这很可能是JSFIDLE如何加载外部资源的问题。似乎使用该部分会使ui.router依赖项的加载时间比js代码的加载时间长，所以加载时不知道是什么ui.routeris@Pascal即使您在页面的中手动加载它，它也能工作，正如您所看到的，因此我怀疑这只是一个JSFIDLE问题。@Pascal将您的ui.router URL更改为
<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>

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

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