I am using Chrome and have set up node server that is listening on port 8080 and provides all listed files. Angular app.js suppose to show the content of StuffView.html (simple text).
index.html :
<!doctype html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>angular</title>
<link rel="icon" href="">
<link rel='stylesheet' href="css/style.css">
<script src="libs/angular/angular.js"></script>
<script src="libs/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="js/controllers/StuffController.js"></script>
</head>
<body>
<div>
<a ng-href = "#/stuff"> show stuff </a>
<ng-view></ng-view>
</div>
</body>
</html>
app.js:
angular
.module( 'app', [ 'ngRoute' ] )
.config( function( $routeProvider ) {
$routeProvider.when( '/stuff', {
templateUrl : "views/StuffView.html",
controller : "stuffController"
} );
} );
StuffView.html:
<H1>Hello from Stuff View! {{hello}}</H1>
where {{hello}} comes from stuffController :
angular
.module( 'app' )
.controller( 'stuffController', stuffController );
function stuffController( $scope ) {
$scope.hello = 'Hello from stuffController! ';
}
When I click the link, the address in browser changes to http://localhost:8080/#!#%2Fstuff and nothing gets displayed.
No errors in the console. What am I missing?
please refer to this link for
ngRoutemodule use. Do not use 'ng-href' directory in your static case, instead try: