gpt4 book ai didi

angularjs - "Failed to instantiate module ui.router"

转载 作者:行者123 更新时间:2023-12-05 00:56:02 25 4
gpt4 key购买 nike

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

JSFIDDLE

如您所见,没有生成链接,也没有加载 View 。

我也研究了相关问题(例如 this one ),但没有多大用处。

索引.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>

应用程序.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在我的 fiddle 的“外部资源”选项卡中。

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

关于angularjs - "Failed to instantiate module ui.router",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36978477/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com