angularjs的路由原理你知道嗎？這裡有angularjs路由的詳細原理

這篇文章主要的向大家介紹了關於angularjs的路由原理，還有angularjs的路由使用的步驟，沒太深入，大家應該都能看得懂。接下來就讓我們一起來看這篇文章吧

一、我們來看看angularjs的簡介：

AngularJS 路由機制是由ngRoute模組提供，它允許我們將視圖分解成佈局和模板視圖，根據url變化動態的將模板視圖載入到佈局中，從而實現單頁面應用的頁面跳躍功能。

二、再看看AngularJS中的url

在單頁WEB應用的url中加入了#號，#號代表網頁的一個位置，其右邊的所有內容，就是用來標示該位置的識別碼。 #號及後面的內容稱為url中的hash片段，它們都不會發送到服務端，下面三個url，向服務端請求的地址都是一樣的。如果只改變#號後面的內容，刷新不會導致網頁的重載。

http://www.php.cn/

http://www.php.cn/#123

http://www.php.cn/ #123/456

三、現在說說路由的使用：

1.引入檔案並註入依賴

由於從1.2版本開始，AngularJS已經將ngRoutes從核心程式碼中剝離出來成為獨立的模組。因此我們需要安裝並在模組聲明中註入對ngRoute的依賴，才能在AngularJS應用中正常使用路由功能。 （想看更多angularjs相關的知識，就到PHP中文網AngularJs學習手冊欄位）

<script src="angular-route.min.js"></script>
var app = angular.module("myApp",[&#39;ngRoute&#39;]);

2.建立一個佈局範本

#之所以要建立佈局模板，是為了告訴AngularJS應該將佈局渲染到何處。透過ng-view指令，我們可以精確的指定模板視圖在DOM中的渲染位置。

<div ng-app="myApp">
    <a ng-href="#/music">音乐</a>
    <a ng-href="#/movie">电影</a>
    <a ng-href="#/novel">小说</a>
    <a ng-href="#/other">其他</a>
    <div ng-view></div>
</div>

3.建立一些範本檢視

myMusic.html

<p>这里是音乐界面啦</p>

myMovie.html

<p>这里是电影界面啦</p>

myNovel.html

<p>这里是小说界面啦</p>

home.html

<p>我是首页界面</p>

4.定義路由表

app.config(['$routeProvider',function($routeProvide) {
    $routeProvide
        .when('/',{templateUrl:"home.html"})
        .when('/music',{templateUrl:"myMusic.html"})
        .when('/movie',{templateUrl:"myMovie.html"})
        .when('/novel',{templateUrl:"myNovel.html"})
        .otherwise({redirectTo:'/'});
}]);

好了，以上就是這篇文章的全部內容了（想看更多angularjs相關的知識，推薦到PHP中文網AngularJS學習手冊欄位學習），有問題的可以在下方留言提問

【小編推薦】

#angularjs和Vue有哪些差別？ angularjs與Vue的比較詳情

angularjs的優點有哪些？這裡有你必須了解的angularjs七大優點

以上是angularjs的路由原理你知道嗎？這裡有angularjs路由的詳細原理的詳細內容。更多資訊請關注PHP中文網其他相關文章！