AngularJS之页面跳转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"是路由实际访问的路径,可以是asp.net mvc的访问路径(如此例),也可是具体的页面路径,如“test/test.html"
           controller:'testController'//路由跳转的controller,后面必须定义此控制器
       });
       $routeProvider.when('/3', {
           templateUrl: "/home/index3",
           controller:'testController'
       })

   }]);

AngularJS,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" 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>

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

相关文章