AngularJs多重視圖和路由的使用

時間 2019-11-17

原文原文鏈接

使用AngularJs來作多重視圖和路由是在方便不過了，在開發過程當中，都有許多的頁面，而這些頁面都有相同的部分，好比頁面的頭部和尾部一般都是同樣的，變化的都是主體部分，還有就是一些後端管理的一些項目，一般不變的都是頭部，尾部和菜單部分，變化的都是右邊的內容部分，使用AngularJs的多重視圖和路由就能夠很方便的實現這樣的效果。在實現以前須要準備兩個文件，一個是angular的主JS文件，另外一個是angular的路由JS文件，以下：html

<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>

在頁面中引入這兩個JS文件就可使用angular了，這裏將實現這效果分爲以下幾步：angularjs

1.建立一個簡單的佈局文件後端

2.建立一個模塊，能夠寫在當前的佈局文件中也能夠新開一個js文件，爲了方便管理仍是分開好點數組

3.建立路由規則app

4.若是有用到控制器，再建立控制器

ide

接下來就具體來實現這個效果：佈局

1.編碼

<html>
    <meta charset="UTF-8">
    <script src="js/angular.min.js"></script>
    <script src="js/angular-route.min.js"></script>
    <title></title>
 
     <body>
    <header>
        <h1>頁面頭部</h1>
    </header>
    <!--這裏就是渲染其餘視圖的地方-->
    <div data-ng-view=""></div>
    <footer>
        <h1>頁面底部</h1>
    </footer>
    </body>
</html>

在angularjs中就是經過ng-view指令和路由結合在一塊兒。url

2.建立模塊spa

var mainApp=angular.module("main.app",['ngRoute']);

由於要使用路由，因此必須將ngRoute依賴加入進來

3.建立路由規則

mainApp.config(["$routeProvider",function($routeProvider){
    $routeProvider.when("/",{
        template:"<h1>內容部分</h1>"
    }).when("/index",{
        templateUrl:"index.html"
    }).otherwise({
        template:"<h2>這個是默認的模板哦</h2>"
    });
}]);

如上，咱們已經用when方法設置了兩個路由。otherwise方法會在沒有任何路由匹配時被調用，用它設置了一個默認的提示路由。能夠看出來，這裏有兩中路由，一個路由是使用的模板，另外一個是使用的模板路徑，其實在路由中還有不少的屬性能夠配置，好比配置controller,

resolve,redirectTo.

在路由中配置控制器，以下：

mainApp.config(["$routeProvider",function($routeProvider){
    $routeProvider.when("/",{
        template:"<h1>內容部分</h1>",
        controller:"MainController"
    });
}]);

也能夠寫成這樣

mainApp.config(["$routeProvider",function($routeProvider){
    $routeProvider.when("/",{
        template:"<h1>內容部分</h1>",
        controller:function($scope){}
    });
}]);

若是須要使用resolve,必須配置控制器，不然會報錯，若是使用resolve屬性，那麼angularjs會將屬性的鍵注入到配置的控制器中，使用以下：

mainApp.config(["$routeProvider",function($routeProvider){
    $routeProvider.when("/",{
        template:"<h1>內容部分{{name}}</h1>",
        controller:"MainController",
        resolve:{
            name:function(){
                return "張三";
            }
        }
    });
}]);

列表對象能夠是:

鍵：是注入到控制器中的名稱

工廠：能夠是一個服務工廠，也能夠是一個返回值

在控制器中是這樣獲取上面注入的鍵

mainApp.controller("MainController",["name","$scope",function(name,$scope){
    $scope.name=name;
}]);

redirectTo的使用，它的做用是作轉發，以下：

mainApp.config(["$routeProvider",function($routeProvider){
    $routeProvider.when("/",{
        template:"<h1>內容部分{{name}}</h1>",
        controller:"MainController",
        resolve:{
            name:function(){
                return "張三";
            }
        },
        redirectTo:"/index"
    }).when("/index",{
        templateUrl:"index.html"
    });
}]);

若是訪問的是第一個路由，由於裏面配置了redirectTo屬性，那麼就會轉到它所配置的路由上。

到這裏路由的配置就算完成了，若是須要獲取路由的參數，能夠經過控制器來獲取。

$routeParams：

可使用它來獲取路由參數，好比咱們將路由配置成以下格式：

mainApp.config(["$routeProvider",function($routeProvider){
    $routeProvider.when("/index/:name",{
        templateUrl:"index.html"
    });
}]);

那麼訪問的格式就是/index/zhangsan,這樣經過控制器來獲取的參數格式就是{"name":"zhangsan"},以下：

mainApp.controller("MainController",["$scope","$routeParams",function($scope,$routeParams){
    $scope.name=$routeParams;
}]);

$location服務，能夠用它來解析請求的URL中的相關信息，控制器使用以下：

mainApp.controller("MainController",["$scope","$<span style="font-family: Arial, Helvetica, sans-serif;">location</span>",function($scope,$<span style="font-family: Arial, Helvetica, sans-serif;">location</span>){
     
}]);

$location服務下有以下方法：

1.path();獲取當前頁面的路徑，也能夠設置一個新的路徑path("/")，這樣就修改成「/」的路由了

$location.path();//獲取

$location.path("/");//設置

2.replace()
若是你但願跳轉後用戶不能點擊後退按鈕（對於登陸以後的跳轉這種發生在某個跳轉以後的再次跳轉頗有用），AngularJS提供了replace()方法來實現這個功能：
$location.path('/home');
$location.replace();
// 或者
$location.path('/home').replace();

3.absUrl()
absUrl()方法用來獲取編碼後的完整URL：
$location.absUrl()

4.hash()
hash()方法用來獲取URL中的hash片斷：
$location.hash(); // 返回當前的hash片斷

5. host()
host()方法用來獲取URL中的主機：
$location.host();// 當前URL的主機

6. port()
port()方法用來獲取URL中的端口號：
$location.port();// 當前URL的端口

7. protocol()
protocol()方法用來獲取URL中的協議：
$location.protocol();// 當前URL的協議

8. search()
search()方法用來獲取URL中的查詢串：
$location.search();
咱們能夠向這個方法中傳入新的查詢參數，來修改URL中的查詢串部分：
// 用對象設置查詢
$location.search({name: 'Ari', username: 'auser'});
// 用字符串設置查詢
$location.search('name=Ari&username=auser');
search方法能夠接受兩個參數。
search（可選，字符串或對象）
這個參數表明新的查詢參數。hash對象的值能夠是數組。
paramValue（可選，字符串）
若是search參數的類型是字符串，那麼paramValue會作爲該參數的值覆蓋URL當中的對應
值。若是paramValue的值是null，對應的參數會被移除掉。

9. url()
url()方法用來獲取當前頁面的URL：
$location.url(); // 該URL的字符串
若是調用url()方法時傳了參數，會設置並修改當前的URL，這會同時修改URL中的路徑、
查詢串和hash，並返回$location。
// 設置新的URL
$location.url('/home?name=Ari#hashthing');
url()方法能夠接受兩個參數。
url（可選，字符串）
新的URL的基礎的前綴。

replace（可選，字符串）想要修改爲的路徑。