以下是原文翻译成繁體中文的版本：

AngularJS - Views

# AngularJS - 視圖：初學者指南

你好，未來的程序员們！今天，我們將要深入AngularJS視圖的精彩世界。不僅僅是第一次寫代碼的你不必擔心 - 我將會是你的友好導遊，帶領你走過這段旅程，就像我這些年來為無數學生做的那樣。所以，來一杯咖啡（或者茶，如果你喜歡的話），我們開始吧！

## AngularJS中的視圖是什麼？

在我們深入細節之前，讓我們先了解AngularJS中的視圖是什麼。把視圖當作是應用程序的面孔 - 這是用戶看到的和交互的部分。在AngularJS中，視圖實質上是HTML模板，用於顯示數據和回應用戶操作。

現在，讓我們探討一下AngularJS為我們操作視圖提供了哪些工具。

## ng-view指令：動態內容的視窗

### ng-view是什麼？

`ng-view`指令就像是AngularJS應用程序中的一個特殊視窗。它是在當前路徑（或URL）更改時，應用程序顯示不同內容而不需要重新加載整個頁面的地方。酷炫吧？

### 如何使用ng-view

使用`ng-view`就像是在HTML元素中添加它一樣簡單。這裡有一個例子：

```html
<div ng-view></div>

就這樣！這個div現在將作為一個容器，AngularJS會根據當前路徑加載不同的視圖。

真實世界的例子

讓我們假設我們正在為一家書店建立一個簡單的網站。我們可能有一個看起來像這樣的主頁：

<!DOCTYPE html>
<html ng-app="bookstoreApp">
<head>
    <title>我的書店</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.js"></script>
</head>
<body>
    <h1>歡迎來到我的書店</h1>
    <div ng-view></div>
    <script src="app.js"></script>
</body>
</html>

在這個例子中，<div ng-view></div>將會是我們書店不同頁面（如書籍列表、單個書籍詳情等）顯示的地方。

ng-template指令：視圖的藍圖

ng-template是什麼？

如果ng-view是視窗，那麼ng-template就像是視窗中内容的藍圖。它允許你定義可重用的模板，AngularJS可以用來填充你的視圖。

如何使用ng-template

你通過給ng-template一個ID來使用它，然後在路由配置中引用這個ID。這裡有一個簡單的例子：

<script type="text/ng-template" id="book-list.html">
    <h2>我們的書籍</h2>
    <ul>
        <li ng-repeat="book in books">{{book.title}}</li>
    </ul>
</script>

這個模板定義了我們可以在視图中顯示的書籍列表。

$routeProvider服務：交通控制器

$routeProvider是什麼？

$routeProvider服務就像是應用程序中的交通控制器。它決定根據當前URL顯示哪個視圖。

如何使用$routeProvider

你通常在應用的配置階段配置$routeProvider。這裡有一個例子：

var app = angular.module('bookstoreApp', ['ngRoute']);

app.config(function($routeProvider) {
    $routeProvider
        .when('/', {
            template: '<h2>歡迎來到我們的書店！</h2>'
        })
        .when('/books', {
            templateUrl: 'book-list.html',
            controller: 'BookListController'
        })
        .otherwise({
            redirectTo: '/'
        });
});

在這個配置中：

當URL只是'/'時，它會顯示一個歡迎信息。
當URL是'/books'時，它會使用'book-list.html'模板和'BookListController'。
當遇到其他URL時，它會重定向到'/'。

完整的例子

讓我們把所有東西放在一起，以一個更完整的書店應用例子：

<!DOCTYPE html>
<html ng-app="bookstoreApp">
<head>
    <title>我的書店</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.js"></script>
</head>
<body>
    <h1>歡迎來到我的書店</h1>
    <nav>
        <a href="#!">首頁</a>
        <a href="#!books">書籍</a>
    </nav>
    <div ng-view></div>

    <script type="text/ng-template" id="book-list.html">
        <h2>我們的書籍</h2>
        <ul>
            <li ng-repeat="book in books">{{book.title}} 作者：{{book.author}}</li>
        </ul>
    </script>

    <script>
        var app = angular.module('bookstoreApp', ['ngRoute']);

        app.config(function($routeProvider) {
            $routeProvider
                .when('/', {
                    template: '<h2>歡迎來到我們的書店！</h2><p>查看我們令人驚艷的書籍收藏。</p>'
                })
                .when('/books', {
                    templateUrl: 'book-list.html',
                    controller: 'BookListController'
                })
                .otherwise({
                    redirectTo: '/'
                });
        });

        app.controller('BookListController', function($scope) {
            $scope.books = [
                {title: 'To Kill a Mockingbird', author: 'Harper Lee'},
                {title: '1984', author: 'George Orwell'},
                {title: 'The Great Gatsby', author: 'F. Scott Fitzgerald'}
            ];
        });
    </script>
</body>
</html>

這裡發生了什麼？

我們設置了一個基本的HTML結構，並且有鏈接來在視圖之間導航。
我們使用ng-template定義了我們書籍列表的模板。
我們使用$routeProvider配置了我們的路由。
我們創建了一個控制器來為我們的書籍列表提供數據。

當你運行這個應用並點擊"書籍"鏈接時，你會在ng-view div中看到書籍列表出現。神奇吧？

結論

好了，各位！我們已經開始進入AngularJS視圖的世界。我們學習了ng-view、ng-template和$routeProvider，以及它們如何一起工作來創建動態的單頁應用程序。

記住，學習編程就像學習騎自行車一樣 - 開始可能會有些晃動，但隨著練習，你會很快騎得飛快。持續實驗，持續學習，最重要的是，玩得開心！

指令/服務	目的	使用範例
ng-view	定義當前視圖顯示的位置	`<div ng-view></div>`
ng-template	定義可重用的模板	`<script type="text/ng-template" id="template-name.html">...</script>`
$routeProvider	為應用程序配置路由	`$routeProvider.when('/path', { templateUrl: 'template.html', controller: 'ControllerName' });`

未來的AngularJS大師，開心編程！

Credits: Image by storyset