4
問題は単純で、答えはおそらくかなり明白ですが、ここで何がうまくいかないのか本当に分かりません。"モジュールui.routerのインスタンス化に失敗しました"
あなたが見ることができるように、何のリンクが生成されず、何のビューがロードされません。
私も関連する問題を調べましたが（例：this one）、これはあまり役に立たなかったです。私は私が私の中に外部のリソース]タブでui-routerが含まれていることを言及している必要があります
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'
});
}]);
EDIT
フィドル。
これは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>
EDIT＃2
これはJSFiddleの外部リソースに問題があるのではなく、UI-ルータだったように思えます。
私の編集をご覧ください。 – Pascal
@Pascal jsfiddleが外部リソースをどのようにロードするかは、おそらく問題になります。そのセクションを使用すると、jsコードよりもui.routerの依存関係がロードされるようです。ロードすると、ui.routerが何であるかがわかりません。 – fbid
@Pascalこれを手動で ''にロードしても動作します。あなたのページは、あなたが[ここ]（https://jsfiddle.net/12crh8er/4/）を見ることができるように、ちょうどjsfiddleなものだと思われます。 – fbid