Angular JS中的路由

時間 2019-12-11

原文原文鏈接

前言javascript

　

本章節將爲你們介紹 AngularJS 路由。AngularJS 路由容許咱們經過不一樣的 URL 訪問不一樣的內容。經過 AngularJS 能夠實現多視圖的單頁Web應用（single page web application，SPA）。css

1.1 Angular JS路由基礎知識講解

在AngularJS中使用路由：
    1. 導入路由文件：angular-route.js

   2. 在主模塊中注入"ngRoute"。 html

angular.module("app",["ngRoute"])

   3. 將超連接改寫爲路由格式。 --> "#/標記"
     java

   <a href="#/">首頁</a>   //首頁直接使用 #/ 表示
   <a href="#/page1">page1</a>  //其餘頁面"#/標記" 表示

4. 在頁面的合適位置，添加ng-view，用於承載路由打開的頁面： web

 <div ng-view></div> //或者 <ng-view></ng-view>

該 div 內的 HTML 內容會根據路由的變化而變化。

5. 在config配置階段，注入$routeProvider，進行路由配置：app

.config(function($routeProvider){
    $routeProvider
    .when("/",{template:'<h1 style="color:red;">這是首頁</h1>'})
    .when("/page1",{templateUrl:"page.html",controller:"ctrl1"})
    .when("/page2",{templateUrl:"page.html",controller:function($scope){
        $scope.text = "這是ctrl不知道是幾控制器！！"
    }})
    .when("/page3",{templateUrl:"page.html"})
    .when("/page4",{})
    .otherwise({redirectTo:"/"})
})

AngularJS 模塊的 config 函數用於配置路由規則。經過使用 configAPI，咱們請求把$routeProvider注入到咱們的配置函數而且使用$routeProvider.whenAPI來定義咱們的路由規則。ide

$routeProvider 爲咱們提供了 when(path,object) & otherwise(object) 函數按順序定義全部路由，函數包含兩個參數:函數

第一個參數是 URL 或者 URL 正則規則。
第二個參數是路由配置對象。

1.2.1路由設置對象

AngularJS 路由也能夠經過不一樣的模板來實現。測試

$routeProvider.when 函數的第一個參數是 URL 或者 URL 正則規則，第二個參數爲路由配置對象。url

路由配置對象語法規則以下：

$routeProvider.when(url,{ template:string, //在ng-view中插入簡單的html內容 templateUrl:string, //在ng-view中插入html模版文件 controller:string,function / array, //在當前模版上執行的controller函數 controllerAs:string, //爲controller指定別名 redirectTo:string,function, //重定向的地址 resolve:object<key,function> //指定當前controller所依賴的其餘模塊 });

1.2.2參數說明

① template：自定義HTML模板，會直接將這段HTML記載到ng-view中；

.when("/page3",{templateUrl:"page.html"})

② templateUrl：導入外部的HTML模板文件。爲了不衝突，外部的HTML應該是一個代碼片斷，即只保留body之內的部分。

.when("/page1",{templateUrl:"page.html",controller:"ctrl1"})

③ controller：在當前HTML模板上，執行的controller函數。會生出新的做用域$scope. 能夠接受字符串(聲明好的controller名字),也能夠直接接受函數。

.when("/page1",{templateUrl:"page.html",controller:"ctrl1"})

　　注意：使用ng-view打開的頁面，controller中的做用域是屬於當前頁面做用域的子做用域！！依然符合Angular中父子做用域"能讀不能寫"的要求！
  　　因此：若是須要在ng-view中修改當前做用域的變量，必須把這個變量聲明爲對象的屬性！！
  　　
④ redirectTo：重定向。通常用於.otherwise()中，用於重定向回首頁！

.otherwise({redirectTo:"/"})

2.1 自定指令

AngularJS容許用戶自定義指令！！
例如： <div ng-view></div> 或 <ng-view></ng-view>
1. 使用.directive()聲明一個自定義指令；
2. 定義指令時，指令名必須使用駝峯命名法；而調用指令時，用"-"連接
    .directive("huangGe") --> <huang-ge><huang-ge>
    .directive("huangge") --> <haungge><huangge>
3. 定義指令時，對象中使用的屬性：
     ① template: 調用指令時，生成的模板
     ② restrict: 用於聲明指令容許的調用方式：
       E->容許標籤名代表 A->容許屬性調用   C->容許類名調用   M->容許註釋調用
    默認值爲：EA
    若是須要註釋調用，必須再添加一個屬性：replace:true,並且註釋調用前必須添加"directive:" eg:

.directive("jiangHao",function(){
    return {
        restrict : "EACM",
        replace:true,
        template:"<h1>這是一個自定義指令</h1>",
        
    }
})

3.1 實例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            ul{
                overflow: hidden;
            }
            li{
                width: 100px;
                height: 40px;
                text-align: center;
                float: left;
                line-height: 40px;
                list-style: none;
                cursor: pointer;
            }
            li a{
                text-decoration: none;
                color: black;
            }
            li:hover{
                background-color: yellow;
            }
            #div1{
                width: 1000px;
                height: 500px;
                margin: 20px auto;
                border: 2px solid red;
            }
        </style>
    </head>
    
    <body ng-app="app" ng-controller="ctrl">
        
        <ul>
            <li><a href="#/">首頁</a></li>
            <li><a href="#/page1">page1</a></li>
            <li><a href="#/page2">page2</a></li>
            <li><a href="#/page3">page3</a></li>
            <li><a href="#/page4">page4</a></li>
        </ul>
        <div id="div1" ng-view></div>
        <jiang-hao></jiang-hao>
        <div jiang-hao></div>
        
        <div class="jiang-hao"></div>                   
    </body>
    
    <script src="js/angular.js" type="text/javascript"></script>
    <script src="js/angular-route.js" type="text/javascript"></script>
    <script type="text/javascript">
    
angular.module("app",["ngRoute"])
.config(function($routeProvider){
    $routeProvider
    .when("/",{template:'<h1 style="color:red;">這是首頁</h1>'})
    .when("/page1",{templateUrl:"page.html",controller:"ctrl1"})
    .when("/page2",{templateUrl:"page.html",controller:function($scope){
        $scope.text = "這是ctrl不知道是幾控制器！！"
    }})
    .when("/page3",{templateUrl:"page.html"})
    .when("/page4",{})
    .otherwise({redirectTo:"/"})
})
.controller("ctrl",function($scope){
    $scope.test = "這是一段測試文字！";
    $scope.obj = {
        test:"這是一個測試對象！"
    }
})
.controller("ctrl1",function($scope){
    $scope.text = "這是ctrl1控制器！";
})

 */
.directive("jiangHao",function(){
    return {
        restrict : "EACM",
        replace:true,
        template:"<h1>這是一個自定義指令</h1>",
        
    }
})





    </script>
    
</html>