All TalkersCode Topics

Follow TalkersCode On Social Media - A Social Media Network for developers Join Now ➔

How To Redirect To Another Page In Angularjs

Last Updated : Mar 11, 2024

How To Redirect To Another Page In Angularjs

In this tutorial we will show you the solution of how to redirect to another page in angularjs, here we needs to call $location and $window object to collect path of information then we can easily redirect to that path of webpage.

$window service which refers to the browser window object and $location in angualarjs basically uses window.location service.

The $location is used to read or change the URL in the browser and it is used to reflect that URL on our page.

Step By Step Guide On How To Redirect To Another Page In Angularjs :-

Here using $window and $location service we redirect to any webpage location too easily.

In our program we created button for redirection when user clicks on ‘Redirect’ button it loads location() function in controller we defined this function with parameters ‘$scope, $window and $location’.

Defined one variable ‘url’ for store ‘designation webpage path’ then url pointed by ‘window.location.href’ so it will redirect to that designation page.

<!DOCTYPE html>
<script src=""></script>
                var app=angular.module("myapp",[]);
                app.controller("ctrl", function($scope,$window,$location){
                        var url="";
        <div ng-app="myapp" ng-controller="ctrl">
            <button ng-click="location()">Redirect</button>
  1. <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
  2. The<html> tag is used to indicate the beginning of HTML document.
  3. As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
  4. This file contains angularjs is distributed as a javascript file and added to webpage must added by using <script> tag.
  5. In controller we created ‘app’ variable used to store our application and in application we need to append controller ‘ctrl’ to the application ‘app’ variable for access all elements and we defined function with parameters ‘$scope, $window, $location’.
  6. Within that using $scope object we defined our function ‘location()’, here in variable ‘url’ we stored where to redirect that location path is given. Then using ‘window.location.href’ we redirected successfully.
  7. Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
  8. <body> tag is beginning of main coding part because it contains coding of entire website blocks and elements described here.
  9. In <div> tag we declared our ng-app ‘myapp’ it defines our application and controller ‘ctrl’ within that we defined button ‘Redirect’ when user clicks on this button it loads location() function and redirect to ‘google’ page.
  10. Both </body> ,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.

Conclusion :-

In conclusion now we are able to know how to use if condition using angularjs. When we executing angularjs file some of those needs internet connection because we used some external library supports so we need to use internet connection when you’re facing problems.

In our program when user clicks on ‘Redirect’ button we will redirect to ‘google’ website by $window and $location service so our result we can see at webpage browser when we executing.

I hope this tutorial on how to redirect to another page in angularjs helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Ashish

Ashish is a dynamic and motivated individual with a passion of programming and an experienced programmer having 3+ years of experience in various languages like Java, Python, HTML, CSS, JavaScript, jQuery and various frameworks like Bootstrap

Follow Ashish On Linkedin 🡪