微信小程序页面制作_AngularJS之页面跳转Route实例代码

2021-01-12

AngularJS之页面跳转Route实例代码       本篇文章主要介绍了AngularJS之页面跳转Route ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

AngulagJs的页面使用Route跳转

1.除了引用AngularJs.js外,还要引用路由JS, "~/Scripts/angularjs/angular-route.js"

2.通过$routeProvider定义路由,示例

var testModule = angular.module('testModule', ['ngRoute']);
testModule.config(['$routeProvider', function ($routeProvider) {
 $routeProvider.when('/2', {//'/2'定义的路由路径,以后通过此路径访问,通常定义为短路径
 templateUrl: "/home/index2",//"/home/index2" mvc的访问路径(如此例),也可是具体的页面路径,如“"
 controller:'testController'//路由跳转的controller,后面必须定义此控制器
 $routeProvider.when('/3', {
 templateUrl: "/home/index3",
 controller:'testController'

3.使用路由跳转,结合ng-view做spa

3.1  在JS中使用$location进行跳转,如示例,在需要的时候调用goToIndex2即可

testModule.controller("testController", ["$scope", "$location", function ($scope, $location) {
 $scope.goToIndex2 = function () {
 $location.path("/2")

3.2 在html代码中使用href="#path"来进行跳转

 html 
 head 
 meta name="viewport" content="width=device-width" / 
 title Index1 /title 
 @Styles.Render("~/Content/css/base")
 @Scripts.Render("~/script/base")
 script src="~/scripts/ngmoudle/app.js" /script 
 /head 
 body 
 div ng-app="testModule" ng-controller="testController" 
 header 
 h1 This is Index1 /h1 
 button type="button" ng-click="goToIndex2()" Index2 /button 
 a href="#/3" Index3 /a !--通过heft="#path"方式进行跳转-- 
 a href="#/2" Index2 /a 
 /header 
 div ng-view 
 /div 
 footer PAGE FOOTER /footer 
 /div 
 /body 
 /html 

 4.关于Angularjs版本不得不说的问题(追加部分),“/"变”%2F”问题

新的项目直接使用Nuget获取Angularjs后,发现按照以上的写法,不能跳转了,表现症状为 a href="#/2" Index2 /a 点击之后,发现浏览器地址变为“#%22”,“/"变”%2F”导致路由不能跳转了,一顿猛查和调试,才发现AngularJs自1.6版本后对地址做了特别处理 知道原因后,解决问题也很简单,在Angular中声明用回旧有方式即可。

可参见

testModule.config(['$locationProvider', function($locationProvider) {
 $locationProvider.hashPrefix('');
testModule.config(['$locationProvider', function($locationProvider) { $locationProvider.hashPrefix(''); }]);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




扫描二维码分享到微信

在线咨询
联系电话

400-888-8866