[SOLVED] Angular ng-href doesn't work

Angular ng-href doesn't work

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?

Solution

please refer to this link for ngRoute module use. Do not use 'ng-href' directory in your static case, instead try:

<a href = "#/stuff"> show stuff </a>