Angular ng-href doesn't work

Question

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?

@devqon when I drop the hashtag then it will be treated as server request, i get response from node server Cannot GET /stuff (404 error) - the link shouldn't be treated as the server request. — mtx, Jan 16 '17 at 12:14
remove the blanks. '%2F' is html encoding for a blank char. Just make it href='#/stuff' — brewsky, Jan 16 '17 at 12:19
@brewsky no whitespace is in the #/stuff, %2F is for "/" slash — mtx, Jan 16 '17 at 12:38
It should work from your given code, what is the version of router, and can you provide a fiddle? — Sravan, Jan 16 '17 at 13:00
@Sravan please see Andriy [plunker] (https://plnkr.co/edit/QY8QBykgdpCUIpxQC35m?p=preview) from reply - it worked 1.5.8 angular.js and 1.4.8 angular-route.js . I have used latest 1.6.1 angular and angular-route and it does not work. Thank you. — mtx, Jan 16 '17 at 13:06

score 0 · Answer 1 · answered Jan 16 '17 at 12:10

0

I think you have used ng-href in wrong way see the angular documentation for ng-href for the same.

https://docs.angularjs.org/api/ng/directive/ngHref

You should create a variable called path for pathforstuffand then use that variable like below.

var pathforstuff="stuff";

<a ng-href="#/{{pathforstuff}}"/>Take Me Somewhere</a>

answered Jan 16 '17 at 12:10

Jalpesh Vadgama

13,653
19
72
94

I created AppController with `$scope.stuffPath = "stuff"`, and used `show stuff` the controllers is managing the
in body of index.html. I get the same error as previously. BTW when in [angular doc webpage](https://docs.angularjs.org/api/ng/directive/ngHref) and clicking link-3 and link-6 from example I get 404 from angular site.
– mtx Jan 16 '17 at 12:27
If you want to use it with scope then use root scope see the link- http://www.java2s.com/Tutorials/AngularJS/AngularJS_Tutorial/Buildin-Directives/ng_href.htm – Jalpesh Vadgama Jan 16 '17 at 19:01

Andriy · Accepted Answer · 2017-01-16T13:28:01.503

0

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>

edited Jan 16 '17 at 13:28

answered Jan 16 '17 at 12:21

Andriy

14,781
4
46
50

switching to "href" only unfortunately did not change anything. – mtx Jan 16 '17 at 12:45
1

please check my plunker https://plnkr.co/edit/QY8QBykgdpCUIpxQC35m?p=preview, I added your code with only href, works as expected – Andriy Jan 16 '17 at 12:52
indeed it works in your example, however you have used 1.5.8 version of angular.js and 1.4.8 of angular-route.js - it is not working when you put 1.6.1 version – mtx Jan 16 '17 at 13:01
1

I see, it stops working if I update angular to 1.6, but it still works with if I use HTML5 mode ($locationProvider.html5Mode(true)), see my new plunker: https://plnkr.co/edit/Ks85iLHUJfT13IB8Qmql?p=preview. I also checked change log of Angukar at https://github.com/angular/angular.js/blob/master/CHANGELOG.md, the only thing I found was "allow ngView to be included in an asynchronously loaded template" and "implement resolveRedirectTo", but it did not help. If HTML5 mode does not fit your needs, consider switching to ui-router module – Andriy Jan 16 '17 at 13:34
I have moved to 1.5.x version for angular and angular-route and it works, but still I think it requires fixing in 1.6.x. Is it always required to set `$locationProvider.html5Mode(true)` in config? – mtx Jan 16 '17 at 14:41
`html5Mode` is a method of `$locationProvider`, angular providers are configurable during config state and are used for general for the app purposes. I personally prefer URLs without hashes and other signs, '$locationProvider.html5Mode(true)' setting enables router to have such clean URLs – Andriy Jan 16 '17 at 15:08

Angular ng-href doesn't work

2 Answers2