How to use href correcly with Angular routing?

Question

Here, how I have configured the routing

var config = function (rp) {
    rp.when(
        '/docs',
        {
            templateUrl: 'Docs.htm'
        }
    );
};
config.$inject = ['$routeProvider'];
app.config(config);

then I added

<a href="#docs">Docs</a>

to my htm page.

when the link is clicked, URL is changed to

my_pagename.htm#!#docs

and it does not load the template.

but when I manually type the URL in location as

my_pagename.htm#!/docs (replaced hash symbol with '/')

it loads fine.

Can you please tell me the error here?

what is the proper way of specifying the href attribute, in order to work with angular routing? My angular version is 1.6.3

can you make a fiddle – CognitiveDesire Mar 27 '17 at 17:45 — CognitiveDesire, Mar 27 '17 at 17:45

score 0 · Answer 1 · answered Mar 27 '17 at 17:50

0

Why did you add # with href

try this

<a href="docs">Docs</a>

answered Mar 27 '17 at 17:50

CognitiveDesire

774
5
20

that way it goes to another page. – bula Mar 28 '17 at 02:54
@ddarz4u it would do if the router didn't intercept the request and do it's thing. – phuzi Apr 03 '17 at 12:25

score 0 · Accepted Answer · answered Apr 03 '17 at 11:53

0

I don't know the consequences, but I changed the hrefs to

    #!/<link>

Ex: #!/docs
    #!/contacts

and now they work fine.

note that I didn't change route paths in js file.

answered Apr 03 '17 at 11:53

bula

8,719
5
27
44

How to use href correcly with Angular routing?

2 Answers2