SoFunction
Updated on 2025-04-13

AngularJS page jump Route instance code

AngulagJs' pages are jumped using Route

1. In addition to reference, you also need to reference the route JS, "~/Scripts/angularjs/"

2. Define routes through $routeProvider, example

var testModule = ('testModule', ['ngRoute']);

(['$routeProvider', function ($routeProvider) {
 $('/2', {// The route path defined by '/2', which is later accessed through this path, is usually defined as a short path  templateUrl: "/home/index2",//"/home/index2" is the path to the route to actually access, which can be the access path of mvc (such as this), or a specific page path, such as "test/"  controller:'testController'//The controller for routing jump must be defined later });

 $('/3', {
  templateUrl: "/home/index3",
  controller:'testController'
 })

}]);

3. Use route jump and combine ng-view to make spa

3.1 Use $location to jump in JS. As an example, call goToIndex2 when needed.

("testController", ["$scope", "$location", function ($scope, $location) {

 $scope.goToIndex2 = function () {
  $("/2")
 }
}]);

3.2 Use href="#path" in html code to jump

<html >
<head>
 <meta name="viewport" content="width=device-width" />
 <title>Index1</title>
 @("~/Content/css/base")
 @("~/script/base")
 <script src="~/scripts/ngmoudle/"></script>
</head>
<body>
 <div ng-app="testModule" ng-controller="testController">
  <header>
   <h1>This is Index1</h1>
   <button type="button" class="btn btn-default" ng-click="goToIndex2()">Index2</button>
   &lt;a href="#/3" class="btn btn-default">Index3</a><!--Jump through heft="#path"-->   &lt;a href="#/2" class="btn btn-default" &gt;Index2&lt;/a&gt;
    &lt;/header&gt;
  &lt;div ng-view&gt;

  &lt;/div&gt;
  &lt;footer&gt;PAGE FOOTER&lt;/footer&gt;
 &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

4. The problem that has to be mentioned about the Angularjs version (append part), the "/"change"%2F" issue

After the new project uses Nuget to obtain Angularjs, it is found that according to the above writing method, it cannot be redirected. The symptoms are <a href="#/2">Index2</a>. After clicking, it is found that the browser address has changed to "#%22", "/"changed"%2F" and the route cannot be redirected. After checking and debugging, it was discovered that AngularJs has specially dealt with the address since version 1.6. After knowing the reason, it is very simple to solve the problem. You can just declare it in Angular to use the old method.

See/questions/41211875/angularjs-1-6-0-latest-now-routes-not-working

(['$locationProvider', function($locationProvider) {
 $('');
}]);

(['$locationProvider', function($locationProvider) { $(''); }]);

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.