Angular入门第一课

Angular是JavaScript框架之一。目前我正在学习中,打算以自学的形式分几次进行关于Angular的发布。
使用上,Angular与Vue.js有一些相似之处,但Angular建议使用TypeScript(一种改进了JavaScript使其更易读懂的语言,编译后变成JavaScript) ,所以我也打算单独写一篇关于TypeScript的文章。顺便说一下,Angular最初被称为AngularJS,后来由于推荐使用TypeScript而变成了Angular(所以虽然前面写的是JavaScript框架,但更准确的说法可能是前端框架)。
另外,Vue. js的入门文章是第1篇,第2篇,第3篇(不久后将迁移到这里)。

    建立环境

通常,Angular的设置通常使用名为”Angular CLI”的命令行工具进行。大致流程如下。

i) 安装 Node.js
暂时来说,如果是 Mac 的话

$ brew install nodebrew

可以的。如果没有安装Homebrew,首先需要安装它。
如果是Windows系统,可以从Node.js官方网站下载安装程序,并使用它来安装。

ii) 安装TypeScript

$ npm install -g typescript

由于Node.js安装后应该可以使用npm,因此我们将使用npm进行安装。可能需要使用sudo命令。

安装Angular CLI

$ npm install -g @angular/cli

同样地,使用npm来安装这个。这样,你就可以使用ng命令来使用Angular的命令行工具了。

iv) 创建一个项目
例如,我们来创建一个名为AngularTest1的项目。

$ ng new AngularTest1
スクリーンショット 2019-04-07 22.34.54.png

从这里更加深入

$ ng serve --open
スクリーンショット 2019-04-07 22.37.27.png

然而,在其他网站上,我看到了“欢迎使用应用!”的字样,下面显示了一个巨大的Angular图标,不知道是不是版本不同呢?或者是我在某个地方操作出错了(汗)。

2. 简要解释源代码的内容

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>AngularTest1</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/app.module';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
}
<h1>
  {{title}}
</h1>

在最顶层的index.html文件中有一个名为app-root的东西,它是一个组件,在Vue.js中也有类似的概念,就像一个部件一样。在main.ts中调用了app/app.module.ts,在app/app.module.ts中调用了app/app.component.ts,在app/app.component.ts中定义了实际的组件,这样的流程。因此,如果更改app/app.component.ts中的标题,显示的字符串也会随之改变。
我只写了一点概述,下一次我会给出更详细的解释。