AngularJS之页面跳转Route

时间 2019-11-16

原文原文链接

AngulagJs的页面使用Route跳转css

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

2.经过$routeProvider定义路由，示例angularjs

var testModule = angular.module('testModule', ['ngRoute']);

testModule.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/2', {//'/2'定义的路由路径，之后经过此路径访问，一般定义为短路径
        templateUrl: "/home/index2",//"/home/index2"是路由实际访问的路径，能够是asp.net mvc的访问路径（如此例），也但是具体的页面路径，如“test/test.html"
        controller:'testController'//路由跳转的controller,后面必须定义此控制器
    });

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

}]);

3.使用路由跳转，结合ng-view作spa浏览器

3.1 在JS中使用$location进行跳转，如示例，在须要的时候调用goToIndex2便可mvc

testModule.controller("testController", ["$scope", "$location", function ($scope, $location) {

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

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

<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" class="btn btn-default" ng-click="goToIndex2()">Index2</button>
            <a href="#/3" class="btn btn-default">Index3</a><!--经过heft="#path"方式进行跳转-->
            <a href="#/2" class="btn btn-default" >Index2</a>
               </header>
        <div ng-view>

        </div>
        <footer>PAGE FOOTER</footer>
    </div>
</body>
</html>

4.关于Angularjs版本不得不说的问题（追加部分），“/"变”%2F”问题asp.net

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

可参见 http://stackoverflow.com/questions/41211875/angularjs-1-6-0-latest-now-routes-not-workingspa

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

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