[Angular] 在Ubuntu和Visual Studio Code上开始创建新的Angular（2）应用程序

2 年 ago
科, 颖
2 minutes

创建新的应用程序

请在合适的目录下输入以下命令。

ng new angular-tour-of-heroes

文件将如下所示被创建。

CREATE angular-tour-of-heroes/README.md (1036 bytes)
CREATE angular-tour-of-heroes/angular.json (3692 bytes)
CREATE angular-tour-of-heroes/package.json (1326 bytes)
CREATE angular-tour-of-heroes/tsconfig.json (384 bytes)
CREATE angular-tour-of-heroes/tslint.json (2805 bytes)
CREATE angular-tour-of-heroes/.editorconfig (245 bytes)
CREATE angular-tour-of-heroes/.gitignore (503 bytes)
CREATE angular-tour-of-heroes/src/environments/environment.prod.ts (51 bytes)
CREATE angular-tour-of-heroes/src/environments/environment.ts (631 bytes)
CREATE angular-tour-of-heroes/src/favicon.ico (5430 bytes)
CREATE angular-tour-of-heroes/src/index.html (306 bytes)
CREATE angular-tour-of-heroes/src/main.ts (370 bytes)
CREATE angular-tour-of-heroes/src/polyfills.ts (3194 bytes)
CREATE angular-tour-of-heroes/src/test.ts (642 bytes)
CREATE angular-tour-of-heroes/src/assets/.gitkeep (0 bytes)
CREATE angular-tour-of-heroes/src/styles.css (80 bytes)
CREATE angular-tour-of-heroes/src/browserslist (375 bytes)
CREATE angular-tour-of-heroes/src/karma.conf.js (964 bytes)
CREATE angular-tour-of-heroes/src/tsconfig.app.json (194 bytes)
CREATE angular-tour-of-heroes/src/tsconfig.spec.json (282 bytes)
CREATE angular-tour-of-heroes/src/tslint.json (314 bytes)
CREATE angular-tour-of-heroes/src/app/app.module.ts (314 bytes)
CREATE angular-tour-of-heroes/src/app/app.component.css (0 bytes)
CREATE angular-tour-of-heroes/src/app/app.component.html (1141 bytes)
CREATE angular-tour-of-heroes/src/app/app.component.spec.ts (1005 bytes)
CREATE angular-tour-of-heroes/src/app/app.component.ts (207 bytes)
CREATE angular-tour-of-heroes/e2e/protractor.conf.js (752 bytes)
CREATE angular-tour-of-heroes/e2e/src/app.e2e-spec.ts (318 bytes)
CREATE angular-tour-of-heroes/e2e/src/app.po.ts (208 bytes)
CREATE angular-tour-of-heroes/e2e/tsconfig.e2e.json (213 bytes)

git init和npm install都会为您完成。非常方便。

进入创建的目录并启动开发服务器。

cd angular-tour-of-heroes
ng serve

在浏览器中访问 http://localhost:4200/。
使用ng serve命令并加上–open选项，会自动在默认浏览器中打开。

image.png

Angular组件

在浏览器中显示的页面是一个应用壳。
这个壳由名为AppComponent的组件控制。
组件是Angular应用的基础部件。
组件负责将数据显示在屏幕上，接收用户输入，并根据输入执行某些操作。

在src/app文件夾中，有三個檔案構成了AppComponent。

    1. app.component.ts – 这是一个用TypeScript编写的组件类。

app.component.html – 这是一个用HTML编写的组件模板。

app.component.css – 这是组件的私有样式。

更改应用程序的标题

打开src/app/app.component.ts文件，修改title属性。


import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // `title` プロパティを変更します。
  // `title` プロパティはテンプレートである `app.component.html` 内で参照されています。
  title = 'Tour of Heroes';
}

我也会更改模板。

<!--
  自動生成されたコードを消して、<h1>だけにします。
-->
<h1>{{title}}</h1>

生成了一个空的CSS文件src/app/app.component.css，通过它我们可以描述应用程序的整体样式。

我能做到这种事情。

image.png
bannerAds