CODEWITHSUNDEEP
javascripthtmlangularjsexpress
CamWhis
CamWhis

Reputation: 17

how to fix html page not rendering

In my application I have a blog home/list/add pages that do their respected parts. BlogHome or home.html will just show my name and a message that is in the controller. The home page is not displaying information that I have in the controller, but it is loading my navigation menu for the other pages. The information in the angular home.html is not being displayed but the nav bar which is outside the home.html is loading up in the browser.

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>

Upvotes: 0

Views: 97

Answers (1)

wiktor
wiktor

Reputation: 26

Have you made sure all your tags are closed? In my experience, my page wouldn't load because I forgot to close my tags.

Upvotes: 1

Related Questions