could route to different templates in angular

Question

Below is a HTML page, Couldn't get content when click on page 1

<html>
<head>
    <meta charset="utf-8" />
    <title></title>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js"></script>
                <script src="JavaScript.js"></script>
</head>
<body ng-app="myapp">
    <div class="Container">
        <nav class="navbar navbar-default">
            <ul class="navbar navbar-nav">
                <li>
                    <a href="#!Page1">Page 1</a>
                    <a href="#!Page2">Page 2</a>
                    <a href="">Page 3</a>
                </li>
            </ul>
        </nav>
    </div>

    <div ng-view></div>

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

app.config(function ($routeProvider){
    $routeProvider.when("/page1", {
        template :  <h1>Page 1</h1>
    })
        .when("/page2", {
            template: <h1>Page 2</h1>
        })
        .otherwise({
            template: <h1>note found</h1>
        })
});
    </script>

</body>
</html>

Is there any mistake in above code. Is issue with reference.

Can someone please correct it?

Page 3 will not show anything.

Maksym Petrenko · Accepted Answer · 2019-08-01 04:04:50Z

1

The first mistake you missed around quotes for templates in javascript code:

$routeProvider.when('/page1', {
    template :  '<h1>Page 1</h1>'
})
.when("/page2", {
    template: '<h1>Page 2</h1>'
})
.otherwise({
    template: '<h1>note found</h1>'
});

And no need to use a exclamation mark in links:

<a href="#/page1">Page 1</a>
<a href="#/page2">Page 2</a>
<a href="#">Page 3</a>

answered Aug 1, 2019 at 4:04

Maksym Petrenko

1,0631 gold badge7 silver badges15 bronze badges

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

3 Comments

Maksym Petrenko Over a year ago

@ShivaniPatel Can you write in details what not works?

Shivani Sonagara Over a year ago

I have past same code in w3cschools example. I will not work even for /page1, /page2 url

Maksym Petrenko Over a year ago

Working page with my corrections https://jsbin.com/dazebayawa/1

Shivani Sonagara · Accepted Answer · 2019-08-01 04:03:12Z

You can use redirectTo() method with otherwise() method. Also, have to put href="#" under <a> tag.

<!DOCTYPE html>
 <html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>

<body ng-app="myApp">

<p><a href="#/!">Main</a></p>

<a href="#!red">Red</a>
<a href="#!green">Green</a>

<a href="#">Oranger</a>
<div ng-view></div>

<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "main.htm"
    })
    .when("/red", {
        templateUrl : "red.htm"
    })
    .when("/green", {
        templateUrl : "green.htm"
    })
  .otherwise({redirectTo:'/'});
});
</script>

<p>Click on the links to navigate to "red.htm", "green.htm", "blue.htm", or back to "main.htm"</p>
</body>
</html>

Govind Sah · Accepted Answer · 2019-08-01 04:52:48Z

There are a couple of mistakes: First, in the href, you have used capital P whereas in route definition it's small letter i.e p, 2nd you do not need to use ! in the href i.e it should be like href=#page1 and the 3rd one is template should be as string i.e under single/double quote.

<html>
<head>
    <meta charset="utf-8"/>
    <title></title>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js"></script>
    <script src="JavaScript.js"></script>
</head>
<body ng-app="myapp">
<div class="Container">
    <nav class="navbar navbar-default">
        <ul class="navbar navbar-nav">
            <li>
                <a href="#page1">Page 1</a>
                <a href="#page2">Page 2</a>
                <a href="#">Page 3</a>
            </li>
        </ul>
    </nav>
</div>

<div ng-view></div>

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

    app.config(function ($routeProvider) {
        $routeProvider.when("/page1", {
            template: '<h1>Page 1</h1>'
        })
            .when("/page2", {
                template: '<h1>Page 2</h1>'
            })
            .otherwise({
                template: '<h1> note found </h1>'
            })
    });
</script>

</body>
</html>

Collectives™ on Stack Overflow

could route to different templates in angular

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related