Home > Developer > JavaScript
AngularJS page Jump to the Route instance code, angularjsroute
Use Route to redirect AngulagJs pages
1. In addition to referencing AngularJs. js, you also need to reference the routing JS ,"~ /Scripts/angularjs/angular-route.js"
2. Use $ routeProvider to define a route. Example
Var testModule = angular. module ('testmodule ', ['ngroup']); testModule. config (['$ routeProvider', function ($ routeProvider) {$ routeProvider. when ('/2', {//'/2' defines the route path, which will be accessed later. It is usually defined as a short path templateUrl: "/home/index2 ", // "/home/index2" is the actual access path of the route, which can be the access path of asp.net mvc (in this example) or the specific page path, for example, "test/test.html" controller: 'testcontroller' // This controller must be defined later.}); $ routeProvider. when ('/3', {templateUrl: "/home/index3", controller: 'testcontroller'})}]);
3. Use route jump and ng-view for spa
3.1 use $ location in JS for redirection. For example, call goToIndex2 as needed.
testModule.controller("testController", ["$scope", "$location", function ($scope, $location) { $scope.goToIndex2 = function () { $location.path("/2") }}]);
3.2 use href = "# path" in html code to redirect
<Html>4. Question about Angularjs version (append part), "/" change "% 2F"
After the new project directly uses Nuget to obtain Angularjs, it is found that according to the above writing method, it cannot jump, symptoms: After clicking <a href = "#/2"> Index2 </a>, the browser address is changed to "# % 22 ", "/" changed "% 2F" causes the route to fail to jump. After a fierce query and debugging, it was found that AngularJs had made a special deal on the address after version 1.6, it is also easy to solve the problem. In Angular, declare the old method.
See http://stackoverflow.com/questions/41211875/angularjs-1-6-0-latest-now-routes-not-working
testModule.config(['$locationProvider', function($locationProvider) { $locationProvider.hashPrefix('');}]);testModule.config(['$locationProvider', function($locationProvider) { $locationProvider.hashPrefix(''); }]);The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
