{"id":10586,"date":"2024-06-13T04:41:19","date_gmt":"2024-06-13T04:41:19","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=10586"},"modified":"2024-06-13T04:41:19","modified_gmt":"2024-06-13T04:41:19","slug":"redirect-to-another-page-in-angularjs","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/angular\/redirect-to-another-page-in-angularjs","title":{"rendered":"How to Redirect to Another Page Using AngularJS?"},"content":{"rendered":"

In angular 2+<\/h2>\n
\r\nimport RouterModule in module.ts file\r\nimport { RouterModule } from '@angular\/router';\r\n\r\nimport router module component.ts file\r\nimport { Router } from '@angular\/router';\r\n\r\nconstructor(private router:Router){}\r\n<\/pre>\n
\r\nin Angular 16+ for standalone \r\nimport { RouterModule, Router } from '@angular\/router';\r\nimport { inject } from '@angular\/core';\r\n\r\n\r\n@Component({\r\n  selector: 'my-router',\r\n  standalone: true,\r\n  imports: [\r\n  \t\t\t...,\r\n  \t\t\tRouterModule,\r\n  \t\t\t...\r\n  ],\r\n  templateUrl: '.\/my.component.html',\r\n  styleUrl: '.\/my.component.scss'\r\n})\r\nprivate router = inject(Router);\r\n<\/pre>\n
below code can used for angular 2+ and standalone<\/p>\n
\r\nyourFun(){\r\n\tthis.router.navigate(['\/myRoute']);\r\n\t\r\n\t\/\/to pass the parameter as slug\r\n\tthis.router.navigate(['\/myRoute', 'myId']); \r\n\t\/\/output will be like this www.https:\/\/localhost:4200\/myRoute\/myId\r\n\t\r\n\t\/\/to pass the parameter as query params\r\n\tthis.router.navigate([ url ], { queryParams: { myId:42 } })\r\n\t\/\/output will be like this www.https:\/\/localhost:4200\/myRoute?myId=42\r\n}\r\n\r\n\/\/for html\r\nin your ts file make it as public\r\nconstructor(public router:Router){}\r\nor\r\npublic router = inject(Router);\r\n\r\n\/\/normal redirection\r\n\r\n  Somewhere\r\n<\/a>\r\n\r\n\/\/redirection with queryParams\r\n\r\n  Somewhere\r\n<\/a>\r\n\r\n\/\/redirection with slug\r\n\r\n  Somewhere\r\n<\/a>\r\n<\/pre>\n
For angular js<\/h2>\n
1. Using $location.path()<\/h3>\n
The $location service in AngularJS is used to get or set the URL in the browser. To redirect using $location, you can inject the $location service into your controller or component and use the path() method to change the URL.<\/p>\n
\r\nangular.module('myApp', [])\r\n  .controller('MyController', ['$location', function($location) {\r\n    $location.path('\/newPage');\r\n  }]);\r\n<\/pre>\n
2. Using $window.location<\/h3>\n
If you want a full page reload during the redirection, you can use the $window service to manipulate the browser’s location.<\/p>\n
\r\nangular.module('myApp', [])\r\n  .controller('MyController', ['$window', function($window) {\r\n    $window.location.href = '\/newPage';\r\n  }]);\r\n<\/pre>\n
3. Using ngRoute with $location<\/h3>\n
First, configure your routes in the config block:<\/p>\n
\r\nangular.module('myApp', ['ngRoute'])\r\n  .config(['$routeProvider', function($routeProvider) {\r\n    $routeProvider\r\n      .when('\/home', {\r\n        templateUrl: 'home.html',\r\n        controller: 'HomeController'\r\n      })\r\n      .when('\/newPage', {\r\n        templateUrl: 'newPage.html',\r\n        controller: 'NewPageController'\r\n      })\r\n      .otherwise({\r\n        redirectTo: '\/home'\r\n      });\r\n  }]);\r\n<\/pre>\n
\r\nThen, use $location.path('\/newPage') to navigate to the new page:\r\n\r\nangular.module('myApp')\r\n  .controller('HomeController', ['$scope', '$location', function($scope, $location) {\r\n    $scope.redirectToNewPage = function() {\r\n      $location.path('\/newPage');\r\n    };\r\n  }]);\r\n\r\nIn your HTML, you can call the redirectToNewPage function:\r\n\r\n
\r\n