I'm facing a problem in which my views are n't showing the values on the main page. I am trying to create a SPA(Single Page Application) using Angular JS.
I've kept the three html pages (main,about and blog).html in a separate folder named pages.
Everytime I run this application the contents written in three html pages (main,about and blog).html invisible to me..
Kindly re-view my code and tell me what's my mistake
What I have tried:
My main page(index.html)
<!DOCTYPE html>
<title>
<h1>Home</h1>
<h3>{{message}}</h3>
<h1>Blog</h1>
<h3>{{message}}</h3>
<h1>About</h1>
<h3>{{message}}</h3>
Home
Blog
About
My script page
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/home.html',
controller: 'HomeController'
})
.when('/blog', {
templateUrl: 'pages/blog.html',
controller: 'BlogController'
})
.when('/about', {
templateUrl: 'pages/about.html',
controller: 'AboutController'
})
.otherwise({ redirectTo: '/' });
});
app.controller('HomeController', function ($scope) {
$scope.message = 'Hello from HomeController';
});
app.controller('BlogController', function ($scope) {
$scope.message = 'Hello from BlogController';
});
app.controller('AboutController', function ($scope) {
$scope.message = 'Hello from AboutController';
});
my home.html page
Home
{{message}}
my blog.html page
Blog
{{message}}
my about.html page
About
{{message}}
Submit an article or tip