如何安装 Angular 6
最快速简捷的方法是通过 Angular CLI ,即命令行窗口。
安装之前， 你需要yarn包管理器或者节点包管理器。为了检测你是否有npm(Node Package Manager), 你需要在控制台或者命令行中输入
> npm -v
如果电脑不识别这条命令，你需要安装NodeJS. 安装成功之后，在控制台或命令行中重新输入上条命令，即可成功进入NPM。
现在我们可以通过NPM 去安装Angular CLI.
> npm install -g @angular/cli
安装之后运行 ng-v, 你将会得到版本号。
CLI安装之后，我们可以通过它创建一个新版Angular 6 的项目：
> ng new ng6-proj --style==scss --routing
为了检验所有适用的命令，在命令行中运行 ng.
CLI 生成新项目之后，你可以hop into：
> cd ng6-proj
如果你使用的是VS code, 你可以通过代码启动代码编辑器。 若要在浏览器中启动项目，需要如下操作:
> ng serve -o
Angular 6 项目结构
Angular6中的文件结构大致如下：
>e2e
> node_modules
> src
> app
...a bunch of files
...a bunch of files
/src/app 文件夹用来存储组件和服务。/src文件夹中的index.html和 styles.css文件，用来放置全局css（rulesets) 。/src/assets文件夹用来放置（assets）诸如图片。现在没有/dist/文件夹，建项目的时候会自动生成。
Angular6 模块文件
在我们处理组件之前，我们需要先看一看/src/app/app.module.ts文件。ts 即 TypeScript。简而言之，TypeScript为JavaScript提供了（强型检查）。
app.module.ts 文件内容大致如下：
import { BrowserModule } from'@angular/platform-browser';
import { NgModule } from'@angular/core';
import { AppRoutingModule } from'./app-routing.module';
import { AppComponent } from'./app.component';
@NgModule({
declarations:[
AppComponent
],
imports:[
BrowserModule,
AppRoutingModule
],
providers:[],
bootstrap:[AppComponent]
})
export class AppModule{}
当你使用CLI生成组件和服务时，它会自动更新此文件以导入，并且将其添加到@NGModule装饰器中。组件被添加到声明数组中，服务被添加为供应商中。程序中可以添加多个import.
Angular 6 组件
Angular 6 中的组件提供了该独立应用的基础构建模块。当我们使用Angular CLI 去生成新项目时，它会自动创建一个单独的组件。
当你使用CLI 去生成组件时，它创建了4个文件：
> src
> app
app.component.html
app.component.scss (or .css)
app.component.spec.ts
app.component.ts
*此HTML文件是与该组件相关联的HTML模板。
*此SCSS/CSS是与该组件的相关CSS（rulesets）
*.spec.ts 文件目的为测试。
*.ts文件实际是组件文件。
打开app.components.ts文件:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls:['./app.component.scss']
})
export class AppComponent {
title = 'app';
}
@component 装饰器是一个带有关联属性/值对的对象，它定义了与此组件相关联的重要内容。举个例子，选择器：'app-root' ，它为该组件提供了唯一标识符，用于app中的其他领域。templateUrl 和 styleUrls 为该组件的HTML 和 CSS 文件所在位置。此处还可以添加其他属性。
最后，为该组件文件的逻辑部分，定义了属性，依赖注入和方法。
在控制台运行如下：
> ng generate component sidebar
CREATE src/app/sidebar/sidebar.component.html (26 bytes)
CREATE src/app/sidebar/sidebar.component.spec.ts (635 bytes)
CREATE src/app/sidebar/sidebar.component.ts (274 bytes)
CREATE src/app/sidebar/sidebar.component.scss (0 bytes)
UPDATE src/app/app.module.ts (479 bytes)
这里， 我们通过CLI生成一个名为sidebar的组件。 它输出生成的四个文件，以及更新的应用程序模块文件。
运行如下命令以生成其他三个组件：
> ng g c posts
> ng g c users
> ng g c details
现在一共生成了五个组件，你要知道它们彼此之间如何作用，以及与应用程序的关联。
Angular 6 模板
app 中都有一个工具栏，工具栏中的组件由CLI 生成。
打开src/app/app.component.html文件，里面是由CLI 生成的样板HTML文件，以及暂时能在浏览器中查看的内容。删除所有内容并且输入如下：
<div id="container">
<app-sidebar></app-sidebar>
<div id="content">
<router-outlet></router-outlet>
</div>
</div>
我们已经将所有东西都封装在（），你将会看到名为app-sidebar的定制HTML元素。
当CLI 生成sidebar组件时，使得组件的选择器为app-sidebar。
/src/app/sidebar/sidebar.component.ts --在组件装饰器中。这就是如何将一个组件嵌入到另一个组件中，因此在组件的HTML文件中定义的一切都将显示在 <app-sidebar></app-sidebar>被定义的地方。
另一个重要的元素为router-outlet。当我们添加（路由标志）时--同时在/src/app中生成路由文件，CLI 将添加该router-outlet元素。
让我们转到/src/app/sidebar/sidebar.component.html文件来定义sidebar模板：
<nav>
<ul>
<li>
<a routerLink="">
<i class="material-icons">supervised_user_circle</i>
</a>
</li>
<li>
<a routerLink="posts">
<i class="material-icons">message</i>
</a>
</li>
</ul>
</nav>
这里使用了routerLink （引导用户到不同的路由），而不用href。
我们还需要使用 Material Icons，这里需要先引用import。
保存该文件然后打开/src/index.html,并在<head>标签中添加如下代码：
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,700"
rel="stylesheet">
Angular 6 CSS
使用CSS使应用更美观。首先打开/src/style.css。这里定义的所有CSS/Sass 将应用于每一个组件的HTML模板，然而特定组件的CSS文件只应用于该组件的HTML模板。
添加如下的rulesets:
body{
margin:0;
background:#F2F2F2;
font-family:'Montserrat', sans-serif;
height:100vh;
}
#container{
display:grid;
grid-template-columns:70px auto;
height:100%;
#content{
padding:30px 50px;
ul{
list-style-type:none;
margin:0;padding:0;
li{
background:#fff;
border-radius:8px;
padding:20px;
margin-bottom:8px;
a{
font-size:1.5em;
text-decoration:none;
font-weight:bold;
color:#00A8FF;
}
ul{
margin-top:20px;
li{
padding:0;
a{
font-size:1em;
font-weight:300;
}
}
}
}
}
}
}
这里用到了一些我们没有定义过的元素。
接下来，打开sidebarCSS文件/src/app/sidebar/sidebar.component.scss:
nav{
background:#2D2E2E;
height:100%;
ul{
list-style-type:none;
padding:0;
margin:0;
li{
a{
color:#fff;
padding:20px;
display:block;
}
.activated{
background-color:#00a8ff;
}
}
}
}
Angular 6 服务
对于用户组件，我们将从公共API中获取用户列表。为此，我们将使用CLI 生成服务。
Angular 6 可以通过应用程序的不同组件放置可重用的代码。
在控制台输入：
> ng generate service data
打开新的服务文件：/src/app/data.service.ts:
import{Injectable}from'@angular/core';
@Injectable({
providedIn:'root'
})
exportclassDataService{
constructor(){}
}
它看起来与常规的组件很像。在顶部定义imports，以及导出的类中的方法和属性。
服务文件的目的是通过Angular 6 HTTP客户端与API 进行（communicate）。
Angular 6 HTTP 客户端
网友评论