微客导航 » 文章资讯 » AngularJS之页面跳转Route实例代码

AngularJS之页面跳转Route实例代码

2024-02-27 20:34:03 259

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后，发现按照以上的写法，不能跳转了，表现症状为Index2点击之后，发现浏览器地址变为“#%22”，“/"变”%2F”导致路由不能跳转了，一顿猛查和调试，才发现AngularJs自1.6版本后对地址做了特别处理知道原因后，解决问题也很简单，在Angular中声明用回旧有方式即可。

可参见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('');}]);

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

返回顶部
3162201930
czq8825@qq.com

AngularJS之页面跳转Route实例代码

热门推荐

随机推荐