AngularJs code to navigate to another page when buttonclick

Question

Hi I am new for AngularJs, I am trying to navigate from one page to another when tapped on button and I followed the below code for my requirement but it's not working.

Html files--->

index.html,main.html,london.html,paries.html,others.html

Js files-->

AngularFile.js,Others.js

I kept button on london.html file.

When I taped on it I wanted to navigate from london.html file to others.html file, but where did I make a mistake?

Can some on help me please?

index.html:-

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

<head>
<script src="angularFile.js"></script>
<script type="others.js"></script>
</head>

<body ng-app="myApp">

<p><a href="#/!main">main</a></p>
<a href="#!london">City 1</a>
<a href="#!paris">City 2</a>

<p>Click on the links.</p>

<p>Note that each "view" has its own controller which each gives the "msg" variable a value.</p>

<div ng-view></div>

</body>
</html>

london.html:

   {{msg}}

<input type="Button" ng-click="changeMe()" value="Go to other"/>
others.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<h1>Wel come to Others page</h1>
</body>
</html>

angularFile.js

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider

    .when("/main", {
        templateUrl : "main.htm",
    })
    .when("/london", {
        templateUrl : "london.htm",
        controller : "londonCtrl"
    })
    .when("/paris", {
        templateUrl : "paris.htm",
        controller : "parisCtrl"
    });
});

others.js:

     app.controller("londonCtrl", function ($scope,$location) {
        $scope.msg = "I love London";
        $scope.changeMe = function(){
          $location.path('/others')
        };
    })

;

Can you please explain what issue are you facing. Like is there some error in the console. Or the exact behavior? — karan3112
– karan3112, Commented Feb 26, 2018 at 8:57
please see others.js file when i tapped on button i want to navigate to others.html page — Krish
– Krish, Commented Feb 26, 2018 at 9:02
If others.html is a seperate page without angular. You can achieve this using simple javascript like window.location = 'others.html' — karan3112
– karan3112, Commented Feb 26, 2018 at 9:05

Marcus Höglund · Accepted Answer · 2018-02-26 09:17:49Z

1

You need to register the view in the $routeProvider setup

app.config(function($routeProvider) {
    $routeProvider

    .when("/main", {
        templateUrl : "main.htm",
    })
    .when("/london", {
        templateUrl : "london.htm",
        controller : "londonCtrl"
    })
    .when("/others", {
        templateUrl : "others.html"
    })
    .when("/paris", {
        templateUrl : "paris.htm",
        controller : "parisCtrl"
    });
});

then go to it $location.path('/others');

Here's a sample plunker

edited Feb 26, 2018 at 9:17

answered Feb 26, 2018 at 9:03

Marcus Höglund

16.9k11 gold badges54 silver badges72 bronze badges

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

8 Comments

Krish Over a year ago

let me try and will tell result

Marcus Höglund Over a year ago

@Krish updated my answer with a plunker. have a look at that. It's the same solution as in the provided answer

Krish Over a year ago

i am not asking like what your shown in plunker ,i have button in london.html file when i taped on it then i want to navigate from london file to others file

Marcus Höglund Over a year ago

@Krish please check the plunker again. Added the button plnkr.co/edit/2qshqGLPlj34fPkK7ip4?p=preview

Krish Over a year ago

its working but i am confused about what is mist-ck in my code please let me know if you don't mind

|

Collectives™ on Stack Overflow

AngularJs code to navigate to another page when buttonclick

Html files--->

Js files-->

index.html:-

london.html:

angularFile.js

others.js:

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Html files--->

Js files-->

index.html:-

london.html:

angularFile.js

others.js:

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related