關於AngularJs中的路由學習總結

時間 2019-12-08

原文原文鏈接

AngularJs中的路由，應用比較普遍，主要是容許咱們經過不一樣的url訪問不一樣的內容，可實現多視圖的單頁web應用。下面看看具體怎麼使用。html

關於路由 angularjs

一般咱們的URL形式爲http://jtjds.cn/first/page，但在單頁web應用中angularjs經過#+標記實現，好比下面的頁面，將是下文中的路由列子。
web

http://192.168.1.109:8000/angular-program/src/main.html#/pagetable/page1
http://192.168.1.109:8000/angular-program/src/main.html#/pagetable/page2
http://192.168.1.109:8000/angular-program/src/main.html#/pagetable/page3

當咱們點擊以上任一一個連接時，向服務器請求的地址都是http://192.168.1.109:8000/angular-program/src/main.html ，而＃號以後的內容在向服務器端請求時會被瀏覽器忽略掉，因此咱們在客戶端實現＃號後面的功能實現便可。簡單來講，路由經過＃＋標記幫助咱們區分不一樣邏輯頁面，並將其綁定到對應的控制器上。npm

每一個頁面均有一個控制器控制，經過路由，從而將不一樣的頁面展現出來。跨域

如何使用路由？瀏覽器

新建main.html服務器

<!doctype html>
<html ng-app="myapp">
     <head>
         <meta charset="utf-8">
         <script src="angular.min.js"></script>
         <script src="angular-ui-router.min.js"></script>         
         <script src="app.js"></script>
     </head>
     <body> 
        <!-- 引入angularjs框架和ui-router框架，引入app.js框架 -->
        <h1>AngularJS 路由跳轉</h1> 
        <div ui-view=""></div>     --展現page.html的頁面內容
    </body>
</html>

新建pagetable.html頁面app

<!DOCTYPE html>
<div>
     <div>
         <span style="width:100px" ui-sref=".page1"><a href="">首頁</a></span>
         <span style="width:100px" ui-sref=".page2"><a href="">關於我</a></span>
         <span style="width:100px" ui-sref=".page3"><a href="">留言板</a></span>
     </div>
     <div>
          <div ui-view=""></div>  －－展現page1,page2,page3頁面的內容
     </div>
</div>

新建page1.html頁面框架

<!DOCTYPE html>
        <div>
            <div>
               <h1>11111111111111111111</h1>
            </div>
        </div>

新建page2.html頁面ide

<!DOCTYPE html>
<div>
    <div>
       <h1>22222222222222222</h1>
    </div>
</div>

新建page3.html頁面

<!DOCTYPE html>
        <div>
            <div>
               <h1>333333333333333</h1>
            </div>
        </div>

app.js內容

var app=angular.module("myapp",['ui.router']);//聲明angualrjs模塊，並把ui-router傳人angularjs模塊
app.config(function ($stateProvider, $urlRouterProvider) { //聲明把$stateprovider和$urlrouterprovider路由引擎做爲函數參數傳人,爲應用程序配置路由
     $urlRouterProvider.otherwise("/pagetable"); 
     $stateProvider    
        .state("pagetable", {
            url: "/pagetable",
            templateUrl: "pagetable.html"  //第一個顯示出來的頁面
        })
        .state("pagetable.page1", {
            url:"/page1",
            templateUrl: "page1.html" //
        })
        .state("pagetable.page2", {
            url:"/page2",
            templateUrl: "page2.html"
        })
        .state("pagetable.page3", {
            url:"/page3",
            templateUrl: "page3.html"
        });
});

下面解釋下配置路由的意思。angularjs使用UI－rooter將其傳人angularjs模塊。OK，咱們將項目運行起來，若是時本地直接打開的話，在非safari下面運行，會出現跨域的問題，咱們來看下。即只有在safari下才能正常打開，以本地的file://開頭的在其它瀏覽器下是不能打開文件的。主要是js同源策略的影響。

那麼如何將項目運行在服務器上跑起來呢？提供一個工具：https://www.npmjs.com/package/anywhere 可實現簡單頁面運行。具體安裝看文檔說明。OK，如今讓咱們啓動項目，

如今讓咱們看下運行的效果：以下圖所示

點擊不一樣的連接，下面將會顯示不一樣的頁面。那麼簡單的路由跳轉就完成啦。簡單來首，路由問題，比較簡單，即如何控制多個頁面在同一頁面下跳轉？

做者：婷風

出處：http://www.cnblogs.com/jtjds/p/5743855.html

若是您以爲閱讀本文對您有幫助，請點一下「推薦」按鈕，您的「推薦」將是我最大的寫做動力！歡迎各位轉載，可是未經做者本人贊成

轉載文章以後必須在文章頁面明顯位置給出做者和原文鏈接不然保留追究法律責任的權利。