AngularJS - 视图：初学者指南

你好，未来的程序员们！今天，我们将深入AngularJS视图的精彩世界。如果你之前从未编写过一行代码，也不要担心——我将作为你的友好向导，带你走过这段旅程，就像我过去几年里为无数学生所做的那样。所以，拿起一杯咖啡（或者如果你喜欢，一杯茶），让我们开始吧！

AngularJS - Views

AngularJS中的视图是什么？

在我们深入了解细节之前，让我们先了解AngularJS中的视图是什么。可以将视图视为应用程序的“脸面”——它们是用户看到并与之交互的部分。在AngularJS中，视图基本上是HTML模板，用于显示数据并响应用户操作。

现在，让我们探索AngularJS为我们操作视图提供的工具。

ng-view指令：动态内容的窗口

ng-view是什么？

ng-view指令就像是你的AngularJS应用程序中的一个特殊窗口。它用于根据当前路由（或URL）显示不同的内容，而无需重新加载整个页面。酷吧？

如何使用ng-view

使用ng-view非常简单，只需将其添加到HTML中的一个元素即可。以下是一个例子：

<div ng-view></div>

就这样！这个div现在将作为一个容器，AngularJS将根据当前路由在其中加载不同的视图。

现实世界的例子

假设我们正在为一个书店构建一个简单的网站。我们的主页面可能看起来像这样：

<!DOCTYPE html>
<html ng-app="bookstoreApp">
<head>
<title>我的 awesome 书店</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>欢迎来到我的 awesome 书店</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>我的 awesome 书店</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>欢迎来到我的 awesome 书店</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}} by {{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: '杀死一只知更鸟', author: '哈珀·李'},
{title: '1984', author: '乔治·奥威尔'},
{title: '了不起的盖茨比', author: 'F. 斯科特·菲茨杰拉德'}
];
});
</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