<ui-view>不显示我的模板
我正在进行我的第一个AngularJS项目，并且对为什么我的模板没有显示感到困惑。我怀疑我的检查点没能掩盖什么。然而，我已经使用复制和粘贴他们的指令，仍然不能让我的模板显示。
Index.html (这里)
<!DOCTYPE html>
<html ng-app="blocJams"> <!-- ng-app activates angular blocJams module (found in scripts/app.js) -->
<head lang="en">
<meta charset="UTF-8">
<title>Bloc Jams Angular</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,800,600,700,300"> <!-- CDN -->
<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" type="text/css" href="/styles/normalize.css">
<link rel="stylesheet" type="text/css" href="/styles/main.css">
<link rel="stylesheet" type="text/css" href="/styles/landing.css">
<link rel="stylesheet" type="text/css" href="/styles/collection.css">
<link rel="stylesheet" type="text/css" href="/styles/album.css">
<link rel="stylesheet" type="text/css" href="/styles/player_bar.css">
</head>
<body>
<nav class="navbar"> <!-- navigation bar -->
<a href="index.html" class="logo">
<img src="assets/images/bloc_jams_logo.png" alt="bloc jams logo">
</a>
<div class="links-container">
<a href="collection.html" class="navbar-link">collection</a>
</div>
</nav>
<ui-view></ui-view>
// also tried <div ui-view></div> too
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> <!-- angulars source script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script> <!-- UI Router Source -->
<script src="/scripts/app.js"></script>
</body>
</html>app.js (模块)
(function() {
function config($stateProvider, $locationProvider) {
$locationProvider
.html5Mode({
enabled: true,
requireBase: false
});
$stateProvider
.state('landing', {
url: '/',
templateUrl: '/templates/landing.html'
});
.state('album', {
url: '/album',
templateUrl: '/templates/album.html'
}
angular
.module('blocJams', ['ui.router'])
.config(config);
})();landing.html (3个模板中的一个)
<section class="hero-content">
<h1 class="hero-title">Turn the music up!</h1>
</section>
<section class="selling-points container clearfix">
<div class="point column third">
<span class="ion-music-note"></span>
<h5 class="point-title">Choose Your Music</h5>
<p class="point-description">The world is full of music; why should you have to listen to music that someone else chose?</p>
</div>
<div class="point column third">
<span class="ion-radio-waves"></span>
<h5 class="point-title">Unlimited, streaming, ad-free</h5>
<p class="point-description">No arbitrary limits. No distractions</p>
</div>
<div class="point column third">
<span class="ion-iphone"></span>
<h5 class="point-title">Mobile enables</h5>
<p class="point-description">Listen to your music on the go. This streaming service is available on all mobile platforms</p>
</div>
</section>想知道我做错了什么，以及为什么我的<ui-view> directive没有在localhost上显示内容:3000。我在检查元素时没有显示任何错误。
进一步排除故障
当我从配置函数中注释掉$stateProvider时，$locationProviders .html5Mode将返回为app.js:6 Uncaught TypeError: Cannot read property 'html5Mode' of undefined。或者，如果我评论了$locationProviders，离开了$stateProvider，我就得到了app.js:12 Uncaught TypeError: $stateProvider.state is not a function。谢谢
回答 2
Stack Overflow用户
发布于 2016-08-25 20:38:56
不知何故，我的上述所有代码都是正确的，我的问题是从我的main.css文件夹中的一个错误中发现的：
body {
background-image: url(..assets/images/blurred_backgrounds/blur_bg_3.jpg);
...
}并将assets/...更改为/assets/..
body {
background-image: url(../assets/images/blurred_backgrounds/blur_bg_3.jpg);
...
}不知道为什么检查时没有提示错误，否则我会把它张贴在上面。
Stack Overflow用户
发布于 2016-08-25 20:57:15
这是因为您已经将您的登陆页面url作为/。要创建默认路由，您应该将$urlRouterProvider注入您的配置函数，并将默认路由设置如下
(function() {
function config($stateProvider, $locationProvider,$urlRouterProvider) {
$locationProvider
.html5Mode({
enabled: true,
requireBase: false
});
$urlRouterProvider.otherwise('/');
$stateProvider
.state('landing', {
url: '/',
templateUrl: '/templates/landing.html'
});
.state('album', {
url: '/album',
templateUrl: '/templates/album.html'
}
angular
.module('blocJams', ['ui.router'])
.config(config);
})();https://stackoverflow.com/questions/39137118
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号