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

    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(''); }]);
  • 相关阅读:
    java new 关键字到底做了什么?
    (转载)Eclipse中使用SVN
    图标常用网站
    正则表达式之RegExp对象
    表单验证之日期大小验证
    表单验证之正则表达式
    表单验证之JQuery Validate控件
    (转载)SVN使用说明
    oracle中group by 和order by同时存在时
    Oracle用户密码过期问题解决
  • 原文地址:https://www.cnblogs.com/Zhangqwr/p/7729301.html
Copyright © 2020-2023  润新知