Angular學習筆記（2）

時間 2019-12-01

原文原文鏈接

AngularJS 路由

AngularJS 路由容許咱們經過不一樣的 URL 訪問不一樣的內容。css

經過 AngularJS 能夠實現多視圖的單頁 Web 應用（single page web application，SPA）。
一般咱們的URL 形式爲 http://runoob.com/first/page，但在單頁 Web 應用中 AngularJS 經過 #! + 標記實現，html

例如：web

http://runoob.com/#!/first
http://runoob.com/#!/second
http://runoob.com/#!/third  注意 Angular1.6 以前的版本是經過 # + 標記 實現路由。

當咱們點擊以上的任意一個連接時，向服務端請的地址都是同樣的 (http://runoob.com/)。由於 #!號以後的內容在向服務端請求時會被瀏覽器忽略掉。因此咱們就須要在客戶端實現 #! 號後面內容的功能實現。 AngularJS 路由就經過 #! + 標記幫助咱們區分不一樣的邏輯頁面並將不一樣的頁面綁定到對應的控制器上。瀏覽器

實例：app

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJS 路由實例 - 菜鳥教程</title>
<script src="https://cdn.bootcss.com/angular.js/1.7.0/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.7.0/angular-route.min.js"></script>
</head>
<body ng-app='routingDemoApp'>
 
    <h2>AngularJS 路由應用</h2>
    <ul>
        <li><a href="#!/">首頁</a></li>
        <li><a href="#!/computers">電腦</a></li>
        <li><a href="#!/printers">打印機</a></li>
        <li><a href="#!/blabla">其餘</a></li>
    </ul>
     
    <div ng-view></div>
    <script>
        angular.module('routingDemoApp',['ngRoute'])
        .config(['$routeProvider', function($routeProvider){
            $routeProvider
            .when('/',{template:'這是首頁頁面'})
            .when('/computers',{template:'這是電腦分類頁面'})
            .when('/printers',{template:'這是打印機頁面'})
            .otherwise({redirectTo:'/'});
        }]);
    </script>
</body>
</html>

實例解析：ide