时间戳

首页 > 解决方案 > 如何修复html页面不呈现

javascript - 如何修复html页面不呈现

问题描述

在我的应用程序中，我有一个博客主页/列表/添加页面，这些页面可以完成其受人尊敬的部分。BlogHome 或 home.html 只会显示我的名字和控制器中的消息。主页没有显示我在控制器中的信息，但它正在为其他页面加载我的导航菜单。没有显示角度 home.html 中的信息，但是 home.html 之外的导航栏正在浏览器中加载。

app_client/blogApp.js

var app = angular.module('blogApp', ['ngRoute']);

/* Route Provider */
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/home.html',
controller: 'HomeController',
controllerAs: 'vm'
})
//other controllers are also here
.otherwise({redirectTo: '/'}); 
});

app.controller('HomeController', function HomeController() {
var vm = this;
vm.pageHeader = { title: "Cameron Whislers Blog Site" };
vm.message = "Welcome to my Blog Site";
});

//other controllers are here

/* REST Functions */
function getBlogs($http) {
return $http.get('/api/blogs');
}

function readBlog($http, blogid) {
return $http.get('/api/blogs/' + blogid);
}

function updateBlog($http, blogid, data) {
return $http.put('/api/blogs/' + blogid , data);
}

function addBlog($http, data) {
return $http.post('/api/blogs', data);
}

function deleteBlog($http, blogid) {
return $http.delete('/api/blogs/' + blogid);
}

app_client/index.html

<!DOCTYPE html>
<html ng-app="bloggerApp">
<head>
<script src="/js/angular.min.js"></script>
<script src="/js/angular-route.min.js"></script>
<script src="/js/angular-ui-router.min.js"></script>
<link rel="stylesheet" href="/stylesheets/style.css" />
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/fontawesome-all.css">
</head>
<body>

<!-- Navigation -->
<nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-primary">
<a class="navbar-brand" href="/">My Blog</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="/blogList">List Blogs</a>
<a class="nav-item nav-link active" href="/blogAdd">Add Blog</a>
</div>
</div>
</nav>

<!-- Angular Templates -->
<script type="text/ng-template" id="pages/home.html">
<p></p>
<h2>{{vm.pageHeader.title}}</h2>
<h4>{{vm.message}}</h4>
</script>

//lots more html code for the respected list/add/edit/delete

<!-- Angular View (dynamic content goes here) -->
<div ng-view></div>

<script src="/js/bloggerApp.js"></script>
</body>
</html>

标签： javascripthtmlangularjsexpress

解决方案

您是否确保所有标签都已关闭？根据我的经验，我的页面不会加载，因为我忘记关闭我的标签。

推荐阅读