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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。