AngularJS之頁面跳轉Route實例代碼

更新時間：2017年03月10日 15:13:12 作者：風清云淡

本篇文章主要介紹了AngularJS之頁面跳轉Route ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

AngulagJs的頁面使用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進行跳轉，如示例，在需要的時候調(diào)用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>
</body>
</html>

4.關于Angularjs版本不得不說的問題（追加部分），“/"變”%2F”問題

新的項目直接使用Nuget獲取Angularjs后，發(fā)現(xiàn)按照以上的寫法，不能跳轉了，表現(xiàn)癥狀為 <a href="#/2">Index2</a> 點擊之后，發(fā)現(xiàn)瀏覽器地址變?yōu)椤?%22”，“/"變”%2F”導致路由不能跳轉了，一頓猛查和調(diào)試，才發(fā)現(xiàn)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(''); }]);

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Angular4.0動畫操作實例詳解
這篇文章主要介紹了Angular4.0動畫操作,結合實例形式詳細分析了Angular4.0動畫的原理、定義及使用等相關操作技巧,需要的朋友可以參考下
2019-05-05
angular4實現(xiàn)tab欄切換的方法示例
本篇文章主要介紹了angular4實現(xiàn)tab欄切換的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-10-10
AngularJs解決跨域問題案例詳解(簡單方法)
本文通過一個案例給大家介紹angularJs解決跨域問題，非常具有參考借鑒價值，感興趣的朋友一起學習吧
2016-05-05
angular使用TweenMax動畫庫的問題和解決方法
這篇文章主要給大家介紹了關于angular使用TweenMax的相關問題和解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-03-03
AngularJS基礎知識
這篇文章主要介紹了AngularJS基礎知識,包括AngularJS定義和特點以及構建AngularJS應用的方法，推薦給大家。
2014-12-12
詳解Angular 開發(fā)環(huán)境搭建
Angular 是一款開源 JavaScript 框架，使開發(fā)和測試變得更加容易,這篇文章主要介紹了詳解Angular 開發(fā)環(huán)境搭建,需要的朋友可以參考下
2017-06-06
用Angular實現(xiàn)一個掃雷的游戲示例
這篇文章主要介紹了用Angular實現(xiàn)一個掃雷的游戲示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-05-05
AngularJS ng-style中使用filter
這篇文章主要介紹了AngularJS ng-style中使用filter的相關資料,需要的朋友可以參考下
2016-09-09
AngularJs實現(xiàn)聊天列表實時刷新功能
這篇文章主要介紹了AngularJs實現(xiàn)聊天列表實時刷新功能,需要的朋友可以參考下
2017-06-06
Angular父子組件通過服務傳參的示例方法
這篇文章主要介紹了Angular父子組件通過服務傳參的示例方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-10-10