Angular入门第一课

2 年 ago

2 minutes

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

从这里更加深入

$ ng serve --open

然而，在其他网站上，我看到了“欢迎使用应用！”的字样，下面显示了一个巨大的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中的标题，显示的字符串也会随之改变。
我只写了一点概述，下一次我会给出更详细的解释。