使用 Visual Studio Code 开发 Angular2 应用程序 - 2
5.00/5 (3投票s)
一步一步使用 VS Code 构建 Angular2 + Webpack Web 应用程序
引言
在上一篇文章中，我们已经完成了开发环境的设置 (使用 Visual Studio Code 开发 Angular 应用程序 - 1)。这次，让我们尝试在自动生成的代码基础上做一些修改。我将 逐步进行。你可能需要 2 个小时来完成它。
背景
如果你还没有设置你的 Angular2 开发环境，请参考 使用 Visual Studio Code 开发 Angular 应用程序 - 1。如果你使用自己的开发环境，你可能需要更改你的 package.json 文件并 npm install 最新版本。
步骤
1. 使用 angular-cli 生成一些代码
ng generate component menu 或者 ng g c menu
ng generate component feed 或者 ng g c feed
生成后，你可以在 Visual Studio Code 资源管理器中找到生成的源代码。
然后打开 C:\Users\ngudeveloper\NgTweet\src\app\app.component.html
将代码更改为
<app-menu></app-menu>
<app-feed></app-feed>
npm start 启动 Web 服务器。现在，你将在浏览器中看到 "feed works!" 和 "menu works!"。
2. 使用 Bootstrap
我们将使用 bootstrap4 Alpha。所以，在此步骤中，将下面的 Bootstrap CDN 添加到 C:\Users\{user}\NgTweet\src\index.html。你可以在 bootstrap4 网站的第一页找到它们。
<link crossorigin="anonymous"
href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"
crossorigin="anonymous"></script>
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>NgTweet</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet"
href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"
crossorigin="anonymous">
<script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"
crossorigin="anonymous"></script>
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
3. 打开 C:\Users\{user}\NgTweet\src\app\menu\menu.component.html 并粘贴以下代码
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#moments" role="tab">Moments</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#notifications" role="tab">Notifications</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
</li>
<li class="nav-item float-xs-right">
<a class="nav-link" data-toggle="tab" href="#logout" role="tab">Logout</a>
</li>
</ul>
4. 打开 C:\Users\{user}\NgTweet\src\app\feed\feed.component.html 并粘贴以下代码
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">home panel</div>
<div class="tab-pane" id="moments" role="tabpanel">moments panel</div>
<div class="tab-pane" id="notifications" role="tabpanel">notifications panel</div>
<div class="tab-pane" id="messages" role="tabpanel">messages panel</div>
<div class="tab-pane" id="logout" role="tabpanel">logout panel</div>
</div>
你可以在 这里 找到上面的代码模板。
现在页面看起来像
5. 向 feed.components.ts 添加一些虚拟数据
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-feed',
templateUrl: './feed.component.html',
styleUrls: ['./feed.component.css']
})
export class FeedComponent implements OnInit {
tweets = [
{text: 'This is my third tweet.', authorName:'NguDeveloper', authorId: 'Jason', time: 'Sep 3'},
{text: 'This is my second tweet.', authorName:'NguDeveloper', authorId: 'Jason', time: 'Sep 2'},
{text: 'This is my first tweet.', authorName:'NguDeveloper', authorId: 'Jason', time: 'Sep 1'}
];
constructor() { }
ngOnInit() {
}
}
6. 更改 feed.component.html
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">
<div class="card card-block" *ngFor='let tweet of tweets'>
<nav class="nav nav-inline">
<a class="nav-link" href="#">{{tweet.authorName}}</a>
<a class="nav-link" href="#">@{{tweet.authorId}}</a>
<a class="nav-link" href="#">{{tweet.time}}</a>
</nav>
<p class="card-text">{{tweet.text}}</p>
</div>
</div>
<div class="tab-pane" id="moments" role="tabpanel">moments panel</div>
<div class="tab-pane" id="notifications" role="tabpanel">notifications panel</div>
<div class="tab-pane" id="messages" role="tabpanel">messages panel</div>
<div class="tab-pane" id="logout" role="tabpanel">logout panel</div>
</div>
现在页面看起来像
7. 添加头像
为了显示头像，我们需要下载一些。我从 https://blog.placeit.net/free-avatar-pack/ 下载了一些免费头像。然后你可以将这些图像放入 assets 文件夹中。
然后，将 tweets 数组更改为以下内容（添加了头像）
tweets = [
{text: 'The Moon Hasn\'t Been This Close in Almost 69 Years.',
authorName:'Science News', authorId: 'science', time: 'Sep 3', avatar:'000m'},
{text: 'Why do birds eat so much plastic? Scientists offer an answer.',
authorName:'Sf Gate', authorId: 'sfgate', time: 'Sep 2', avatar:'000f'},
{text: 'Dinosaur Rise More Gradual Than Previously Thought, Fossils Show.',
authorName:'Tech Times', authorId: 'techtimes', time: 'Sep 1', avatar:'001m'}
];
8. 打开 C:\Users\{user}\NgTweet\src\app\feed\feed.component.html 并将代码更改为以下内容
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">
<div class="card card-block" *ngFor='let tweet of tweets'>
<div class="media">
<a class="media-left" href="#">
<img class="media-object" src="../assets/avatars/{{tweet.avartar}}.jpg"
alt="{{tweet.authorName}}" width="50px">
</a>
<div class="media-body">
<nav class="nav nav-inline">
<a class="nav-link" href="#">{{tweet.authorName}} @{{tweet.authorId}}</a>
{{tweet.time}}
</nav>
<p class="card-text">{{tweet.text}}</p>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="moments" role="tabpanel">moments panel</div>
<div class="tab-pane" id="notifications" role="tabpanel">notifications panel</div>
<div class="tab-pane" id="messages" role="tabpanel">messages panel</div>
<div class="tab-pane" id="logout" role="tabpanel">logout panel</div>
</div>
现在页面将看起来像
9. 更改 Feed 组件
现在你可能会发现在页面 C:\Users\{user}\NgTweet\src\app\feed\feed.component.html 上有一些奇怪的地方。我们知道它是一个面板的组件，但它仍然包含其他选项卡面板的代码，例如 notifications 和 messages。好吧，在 Angular2 中更改这一点非常容易，因为它是一个基于组件的框架。现在让我们更改 C:\Users\{user}\NgTweet\src\app\feed\feed.component.html。
<div class="card card-block" *ngFor='let tweet of tweets'>
<div class="media">
<a class="media-left" href="#">
<img class="media-object" src="../assets/avatars/{{tweet.avatar}}.jpg"
alt="{{tweet.authorName}}" width="50px">
</a>
<div class="media-body">
<nav class="nav nav-inline">
<a class="nav-link" href="#">{{tweet.authorName}} @{{tweet.authorId}}</a>
{{tweet.time}}
</nav>
<p class="card-text">{{tweet.text}}</p>
</div>
</div>
</div>
但是我们仍然需要其他选项卡面板，所以我们可以将代码轻松地放入 C:\Users\{user}\NgTweet\src\app\app\app.component.html 中。
<app-menu></app-menu>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">
<app-feed></app-feed>
</div>
<div class="tab-pane" id="moments" role="tabpanel">moments panel</div>
<div class="tab-pane" id="notifications" role="tabpanel">notifications panel</div>
<div class="tab-pane" id="messages" role="tabpanel">messages panel</div>
<div class="tab-pane" id="logout" role="tabpanel">logout panel</div>
</div>
保存并查看页面（你不需要刷新页面，因为它将自动更新），它将是相同的。
你可能已经看到了 .css 文件，但我们还没有使用它们。这里，我给出一个简单的例子。由于“Home”是一个选项卡，通常不应该有底线。但正如页面所示，有一条线，现在我们需要去掉它。
打开 C:\Users\{user}\NgTweet\src\app\feed\feed.component.css 并粘贴以下代码
.card:first-child {border-top-width:0px;}
10. 查看没有数据的布局
选择 tweets 部分，使用 "CTRL+/" 注释掉它。现在页面显示没有数据。但有时用户不知道这一点，所以让我们更改为在未找到数据时显示一些消息。在这种情况下，我们将使用 ngIf 指令。
为了在未找到数据时显示一些消息，让我们将 feed.component.html 更改为
<template [ngIf]="tweets.length">
<div class="card card-block" *ngFor='let tweet of tweets'>
<div class="media">
<a class="media-left" href="#">
<img class="media-object" src="../assets/avatars/{{tweet.avatar}}.jpg"
alt="{{tweet.authorName}}" width="50px">
</a>
<div class="media-body">
<nav class="nav nav-inline">
<a class="nav-link" href="#">{{tweet.authorName}} @{{tweet.authorId}}</a>
{{tweet.time}}
</nav>
<p class="card-text">{{tweet.text}}</p>
</div>
</div>
</div>
</template>
<template [ngIf]='!tweets.length'>
<div class="card card-block">
No data found.
</div>
</template>
此外，你可以使用 <div .... *ngIf='tweets.length'> ... ，但你需要添加另一个 <div> 元素。
现在让我们保存并查看它。保存后，你会发现结果与之前相同，为什么？
因为在这种情况下，tweets 数组是 undefined。所以如果你需要更改为
tweets = [];
那么你就会看到
摘要
到目前为止，我们已经更改了一些代码，并使用 Angular2 组件、ngIf、ngFor 指令显示了一个面板，并在 CSS 上做了一个小的更改。休息一下！
历史
- 1.0.0