Menu
I'm learning AngularJS right now and I'm doing a simple web application that involves the use of ng-view directive. But as I try to run my codes, nothing appears on my Chrome browser, as if the ng-view was not really working. My index.html file is shown below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Route Sample</title>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
</head>
<body ng-app="routeApp">
<h1>Sample Routing | ng-view directive</h1>
<div class="container">
<ul>
<li><a href="#Angular">Angular JS Topics</a></li>
<li><a href="#Node">Node JS Topics</a></li>
</ul>
</div>
<div class="container-ngView">
<div ng-view></div>
</div>
<script>
var app=angular.module('routeApp', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/Angular', {
templateUrl: 'angular.html',
controller: 'AngularCtrl',
})
.when('/Node', {
templateUrl: 'node.html',
controller: 'NodeCtrl',
});
}]);
app.controller('AngularCtrl', function($scope){
$scope.tutorial = [
{Name:"Controllers", Description :"Controllers in action"},
{Name:"Models", Description :"Models and binding data"},
{Name:"Directives", Description :"Flexibility of Directives"}
]
});
app.controller('NodeCtrl', function($scope){
$scope.tutorial = [
{Name:"Promises", Description :"Power of Promises"},
{Name:"Event", Description :"Event of Node.js"},
{Name:"Modules", Description :"Modules in Node.js"}
]
});
</script>
</body>
</html>And this is my angular.html file
<h2>Anguler</h2>
<ul ng-repeat="ptutor in tutorial">
<li>Course : {{ptutor.Name}} - {{ptutor.Description}}</li>
</ul>And this is my node.html file
<h2>Node</h2>
<ul ng-repeat="ptutor in tutorial">
<li>Course : {{ptutor.Name}} - {{ptutor.Description}}</li>
</ul>I did try to separate my js script file from my main html file but the result is still the same. I dunno what to do and where to find the problem. I hope you could help me with this one. Thank you!
884
asked Apr 12 '26 07:04
You need to reference the ngRoute module script after AngularJS. Simply swap them around.
Additionally you are using AngularJS 1.6.X, which have different hash-bang in URL. You need to change your href from # to #!.
Here is a working example:
var app = angular.module('routeApp', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/Angular', {
templateUrl: 'angular.html',
controller: 'AngularCtrl',
})
.when('/Node', {
templateUrl: 'node.html',
controller: 'NodeCtrl',
});
}]);
app.controller('AngularCtrl', function($scope) {
$scope.tutorial = [{
Name: "Controllers",
Description: "Controllers in action"
},
{
Name: "Models",
Description: "Models and binding data"
},
{
Name: "Directives",
Description: "Flexibility of Directives"
}
]
});
app.controller('NodeCtrl', function($scope) {
$scope.tutorial = [{
Name: "Promises",
Description: "Power of Promises"
},
{
Name: "Event",
Description: "Event of Node.js"
},
{
Name: "Modules",
Description: "Modules in Node.js"
}
]
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Route Sample</title>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
</head>
<body ng-app="routeApp">
<h1>Sample Routing | ng-view directive</h1>
<div class="container">
<ul>
<li><a href="#!Angular">Angular JS Topics</a></li>
<li><a href="#!Node">Node JS Topics</a></li>
</ul>
</div>
<div class="container-ngView">
<div ng-view></div>
</div>
<script type="text/ng-template" id="angular.html">
<h2>Angular</h2>
<ul ng-repeat="ptutor in tutorial">
<li>Course : {{ptutor.Name}} - {{ptutor.Description}}</li>
</ul>
<a href="#!/">Back</a>
</script>
<script type="text/ng-template" id="node.html">
<h2>Node</h2>
<ul ng-repeat="ptutor in tutorial">
<li>Course : {{ptutor.Name}} - {{ptutor.Description}}</li>
</ul>
<a href="#!/">Back</a>
</script>
</body>
</html>Use npm (node package manager) in sublime to install http-sever package. Then you can rstart the web server which would bring up your app
npm install -g http-server
Following configuration in package.json file under scripts:
"start": "http-server -a localhost -p 8000 -c-1"
Then run below command from root of your project:
Command : npm start (from root of project)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With