Angular routing is not working

Question

I know there are a lot of questions about the routing not working in AngularJS. I have the same problem and after going through hundreds of answers I decided to post this question yet again. I have three files which are in the root folder in c:\intepub\wwwroot\angular\ and this means I am testing it under IIS. Now my problem is that when I put this URL in the browser: http://localhost/angular/index.html, browser redirects it to: http://localhost/angular/index.html#/ and the text on the page is: Testing routes

However, according to the code, it should go to login.html. And when I put http://localhost/angular/index.html#/test it still shows the same text: Testing routes.

Any ideas?

Thanks

The code is shown below:

index.html

<!DOCTYPE html>
<html ng-app="app">
<head></head>
<body>
    <div>
        Testing routes
        <div ng-view=""></div>
    </div>

    <script src="dep/angular/angular.js"></script>
    <script src="dep/angular/angular-route.js"></script>

    <script>
        var app = angular.module('app', ['ngRoute']);

        app.config(appRouter);

        function appRouter($routeProvider, $locationProvider)
        {
            $routeProvider
                .when('/',
                    {
                        templateURL: 'login.html'
                    })
                .when('/test',
                    {
                        templateURL: 'test.html'
                    })
                .otherwise({tempate: "otherwise"});
        }
    </script>
</body>
</html>

login.html

<div>
    Login Page
</div>

test.html

<div>
    Test page
</div>

akn · Accepted Answer · 2014-02-26 10:24:48Z

2

Use templateUrl instead of templateURL

Here are properties for $routeProvider: http://docs.angularjs.org/api/ngRoute/provider/$routeProvider

Here is simply tutorial how to use it: http://docs.angularjs.org/tutorial/step_07

edited Feb 26, 2014 at 10:24

answered Feb 26, 2014 at 5:58

akn

3,7221 gold badge29 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

c-smile · Accepted Answer · 2014-02-25 07:12:58Z

0

In the way you've defined your markup:

   <div>
        Testing routes
        <div ng-view=""></div>
    </div>

it will always show "Testing routes" as NG puts view content inside <div ng-view=""> element. You should change it to something suitable.

answered Feb 25, 2014 at 7:12

c-smile

27.6k8 gold badges66 silver badges91 bronze badges

1 Comment

huber.duber Over a year ago

Even by removing the text it doesn't work. The new markup looks like this: <div><div ng-view=""></div></div>

Ramesh Rajendran · Accepted Answer · 2014-02-25 07:18:35Z

0

Try this, You have missed controller

function appRouter($routeProvider, $locationProvider)
        {
            $routeProvider
                .when('/',
                    {
                        templateURL: 'login.html',controller: 'loginCtrl'
                    })
                .when('/test',
                    {
                        templateURL: 'test.html',controller: 'testCtrl'
                    })
                .otherwise({tempate: "otherwise"});
        }

login.html

<div ng-controller="loginCtrl">
    Login Page
</div>

Test.html

<div ng-controller="testCtrl">
    Test Page
</div>

Must set the Set as start up page ti index page

enter image description here

Right Click the index.html page in Solution explorer> Click the set as start page option in shown popup.

edited Feb 25, 2014 at 7:18

answered Feb 25, 2014 at 6:54

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

10 Comments

huber.duber Over a year ago

Tried your suggestion, same problem.

Ramesh Rajendran Over a year ago

Please set a set as start page in index page, then try it

huber.duber Over a year ago

Can you please elaborate a bit. I didn't get it.

Ramesh Rajendran Over a year ago

What the page for your default page?

Ramesh Rajendran Over a year ago

Updated my answer, Pleasee see it mow

|

Collectives™ on Stack Overflow

Angular routing is not working

3 Answers 3

Comments

1 Comment

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related