AngularJS之页面跳转Route实例代码
AngulagJs的页面使用Route跳转
1.除了引用AngularJs.js外,还要引用路由JS,"~/Scripts/angularjs/angular-route.js"
2.通过$routeProvider定义路由,示例
vartestModule=angular.module('testModule',['ngRoute']); testModule.config(['$routeProvider',function($routeProvider){ $routeProvider.when('/2',{//'/2'定义的路由路径,以后通过此路径访问,通常定义为短路径 templateUrl:"/home/index2",//"/home/index2"是路由实际访问的路径,可以是asp.netmvc的访问路径(如此例),也可是具体的页面路径,如“test/test.html" 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"来进行跳转
Index1 @Styles.Render("~/Content/css/base") @Scripts.Render("~/script/base")ThisisIndex1
Index2 Index3 Index2
4.关于Angularjs版本不得不说的问题(追加部分),“/"变”%2F”问题
新的项目直接使用Nuget获取Angularjs后,发现按照以上的写法,不能跳转了,表现症状为
可参见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('');}]);
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。