這篇文章主要的向大家介紹了關於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",['ngRoute']);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中文網其他相關文章！
