Reputation: 441
please tell me why it isn't loading partials. I'm trying to do routing and inserting a partial templates into the layout HTML page when you click on a specific hyperlink such as Home, about or contact. I checked in every line of code and I didn't find the source of problem for not loading partials. Routes are doing fine, it just isn't loading. Here's my code:
index.html
<html ng-app="streamApp">
<head>
<meta charset="utf-8">
<!-- To ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>StreamTest App</title>
<!-- load bootstrap and fontawesome -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="styles/style.css"/>
</head>
<body ng-app="streamApp" ng-controller="MainController">
<div id="main">
<!-- including header -->
<div ng-include="'views/templates/header.html'"></div>
<!-- this is where content will be injected -->
<div id="container" style="margin-top: 50px;">
<ng-view></ng-view>
</div>
<!-- including footer -->
<div ng-include="'views/templates/footer.html'"></div>
</div>
</body>
<!-- Scripts -->
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="node_modules/angular-route/angular-route.min.js"></script>
<script src="app.js"></script>
<!-- Scripts End -->
</html>
app.js
// create the module named streamapp and include ngRoute for routing needs
var streamApp = angular.module('streamApp',['ngRoute']);
//configure app's routes
streamApp.config(['$routeProvider',function ($routeProvider) {
$routeProvider
//route for the home page
.when('/home', {
templateURL : 'views/partials/home.html',
controller : 'MainController'
})
//route for the about page
.when('/about', {
templateURL : 'views/partials/about.html',
controller : 'aboutController'
})
//route for the contact page
.when('/contact', {
templateURL : 'views/partials/contact.html',
controller : 'contactController'
})
.otherwise({
redirectTo: '/home'
});
}]);
// create the controller and inject Angular's $scope
streamApp.controller("MainController", function ($scope) {
// create a message to display in our view
$scope.home="Welcome Home!";
});
streamApp.controller("aboutController", function ($scope) {
// create a message to display in our view
$scope.about="Wanna hear about us! Here you are :)";
});
streamApp.controller("contactController", function ($scope) {
// create a message to display in our view
$scope.contact="Don't be shy to contact us!";
});
header.html
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="row">
<div class="navbar-header">
<a class="navbar-brand" href="#home">StreamTEST</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#home"><i class="fa fa-home"></i> Home</a></li>
<li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
<li><a href="#contact"><i class="fa fa-envelope"></i> Contact</a></li>
</ul>
</div>
</div>
</nav>
</header>
home.html
<div class="jumbotron text-center">
<h1>Home Page</h1>
<p>{{ home }}</p>
</div>
about.html
<div class="jumbotron text-center">
<h1>About Page</h1>
<p>{{ about }}</p>
</div>
contact.html
<div class="jumbotron text-center">
<h1>Contact Page</h1>
<p>{{ contact }}</p>
</div>
Upvotes: 0
Views: 33
Reputation: 5176
Remove ng-app
from your body element. You already have it on the outer html element.
I use ui-router instead of ngRoute, but they are very similar. A couple of things.
You need to set Html5Mode, which means you need to inject $locationProvider into your config and then issue:
$locationProvider.html5Mode(true)
You should set the base href in the <head>
section of your index.html with:
<base href="/" >
You might also want to try ng-href
instead of href
on your links.
Upvotes: 0
Reputation: 441
I had changed the default hash-prefix from '!' to empty string '' in app.js cause I'm using angularjs 1.6
$locationProvider.hashPrefix('');
Upvotes: 1