AngularJs code to navigate to another page in buttonclick

Question

AngularJs code to navigate to another page on a button click event. I have catch the button click event but cannot navigate to another page. The following is my code: HTML file:

<!DOCTYPE html>

<html>

<head>

<script src="js/angular.min.js"></script>

<script src="js/app/home.js"></script>

</head>

<body ng-app="myapp">

    <div ng-controller="TestCtrl">

      <button ng-click="clicked()">Click me!</button>

</body>

</html>

And the javascript file is:

var VLogin = angular.module('myapp',[]);

VLogin.controller('TestCtrl', ['$scope',function($scope) {

    $scope.clicked = function(){   

        $location.path('/test.html');
    }

}]);

Can anyone help me resolve my issue: stackoverflow.com/questions/38546218/… — Ankit
– Ankit, Commented Jul 25, 2016 at 2:38

SDK · Accepted Answer · 2014-09-29 16:30:25Z

12

Try like as shown below...

In html,

 <button ng-click="clicked()">Click</button>

In JS,

 $scope.clicked = function(){
       window.location = "#/test.html";
 }

I hope it helps you...

answered Sep 29, 2014 at 16:30

SDK

1,5421 gold badge17 silver badges31 bronze badges

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

3 Comments

Bibin Jose Over a year ago

SDK: Yes its work for me.. But in the path i have to change like this : window.location = "../www/index.html";

SDK Over a year ago

dont forget to accept this answer if you find it useful:-)

Nikita Dhiman Over a year ago

hi, I want the button to redirect to another component's html page. how can that be done?

Abhishek Jain · Accepted Answer · 2014-09-29 12:57:56Z

4

You can use $location.path('/newPageUrl') to navigate to new page.

Read here for more information on $location.

Edit: The correct controller code would be (after adding $location as a dependency):-

VLogin.controller('TestCtrl', ['$scope', '$location',function($scope, $location) {

$scope.clicked = function(){   

    $location.path('/test.html');
}

}]);

edited Sep 29, 2014 at 12:57

answered Sep 29, 2014 at 11:01

Abhishek Jain

2,97724 silver badges35 bronze badges

3 Comments

Bibin Jose Over a year ago

Abhishek Jain: I have used the $location.path('/newPageUrl') code but it's not working for me.

Teq1 Over a year ago

You have to pass $location service to controller

Teq1 Over a year ago

But use absolute path redirection with $window Here you have it: plnkr.co/edit/nClPD7mFdF4Rz2VmhZSJ?p=preview

Community · Accepted Answer · 2017-05-23 10:30:54Z

1

If you want to navigate to another page onclick I suggest using good old 'link'

<a href="/another-page">Go to another page</a>

Unless you have to do something before redirection than use $location service proposed by Abhishek Jain

edited May 23, 2017 at 10:30

CommunityBot

11 silver badge

answered Sep 29, 2014 at 11:40

Teq1

6311 gold badge7 silver badges20 bronze badges

3 Comments

Bibin Jose Over a year ago

Teq1:I want to navigate inside button click event function.

Teq1 Over a year ago

@BibinJose using my solution you do :) But as I mentioned use good old href unless you have to do something before redirection than use $location service which is better to test.

Lars Over a year ago

@Teq1 can't put a inside or outside of button - htmlangular validation fails

Collectives™ on Stack Overflow

AngularJs code to navigate to another page in buttonclick

3 Answers 3

3 Comments

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related