• 起步
  • 安装@angular/cli
  • 创建一个新项目
  • 运行这个应用
• 骨架
  • src 文件夹
  • 根目录
  • 应用是如何启动的

Angular系列教程:

• Angular4第二课 – 基本概念解析
• Angular4第三课 – 从Heroes的栗子看Angular

One framework. Mobile & desktop.^来源

而Angular是什么呢？我看到这句话

Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges.^来源

上面说，Angular是一个框架，还整合了声明式模板、依赖注入和端对端工具。具体点呢？

Angular is a framework for building client applications in HTML and either JavaScript or a language like TypeScript that compiles to JavaScript.^来源

这一段的描述就很到位了。告诉我们，Angular是使用HTML和JavaScript来构建客户端(前端)应用的框架。

之前有写过AngularJS相关的博客，但是被我一直雪藏在_drafts中。最近开始感觉，Angular经过重构之后，又开始焕发新生了。

新一版只以Angular命名，以区分旧版AngularJS，新版的每次更新都冠以数字后缀，社区目前已经更新到Angualr 4.0版本，这篇博客也是在这个版本的基础之上的。

Angular整合了TypeScript，但这并不意味着你一定需要使用TypeScript，但是它能极大地提高开发效率，所以也是非常建议的。

Angular的学习可能会分成好几节来介绍，这一节主要介绍非常非常简单的概念和起步的内容。

学了Angular，还是非常建议官方网站。

起步

开始使用Angular，首先要安装Node和npm，这个不赘述。然后安装TypeScript。

然后，安装命令行工具。

安装@angular/cli

Angular4中命令行工具版本名称为@angular/cli。旧版angular-cli已经被移除或建议弃用。

λ npm install -g @angular/cli

创建一个新项目

我们使用下面的命令来创建一个Angular应用，并生成相应的骨架。

λ ng new angular-hello-world

你会看到如下信息:

installing ng
  create .editorconfig
  create README.md
  create src\app\app.component.css
  create src\app\app.component.html
  create src\app\app.component.spec.ts
  create src\app\app.component.ts
  create src\app\app.module.ts
  create src\assets\.gitkeep
  create src\environments\environment.prod.ts
  create src\environments\environment.ts
  create src\favicon.ico
  create src\index.html
  create src\main.ts
  create src\polyfills.ts
  create src\styles.css
  create src\test.ts
  create src\tsconfig.app.json
  create src\tsconfig.spec.json
  create src\typings.d.ts
  create .angular-cli.json
  create e2e\app.e2e-spec.ts
  create e2e\app.po.ts
  create e2e\tsconfig.e2e.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tsconfig.json
  create tslint.json
Installing packages for tooling via npm.

请稍等(不是片刻，是很长一段时间，因为它在安装依赖)。一旦安装结束，就会看到一条成功信息。

运行这个应用

我们运行以下命令:

λ ng serve --open

--open或-o这个选项指的是完成后直接打开浏览器，并定位到http://localhost:4200/。

打开浏览器，输入地址http://localhost:4200/。你会看到如下结果。

骨架

仔细研究文件骨架对我们理解整个应用有很多好处。首先，是我们的src文件夹。

src 文件夹

所有的应用程序代码应该位于这个文件夹下。所有的Angular组件、模板、样式、图片以及你的应用所需的任何东西都处于这个文件夹。而这个文件夹之外的文件都是为构建应用提供支持的。它的结构如下:

│  favicon.ico
│  index.html
│  main.ts
│  polyfills.ts
│  styles.css
│  test.ts
│  tsconfig.app.json
│  tsconfig.spec.json
│  typings.d.ts
│
├─app
│      app.component.css
│      app.component.html
│      app.component.spec.ts
│      app.component.ts
│      app.module.ts
│
├─assets
│      .gitkeep
│
└─environments
        environment.prod.ts
        environment.ts

用途如下:

根目录

根目录下除src外的文件是用来构建、测试、维护、文档化和发布应用的。和scr放在同意目录下，表示他们是同级生。

│  .angular-cli.json
│  .editorconfig
│  .gitignore
│  hello.txt
│  karma.conf.js
│  package.json
│  protractor.conf.js
│  README.md
│  tsconfig.json
│  tslint.json
│  
├─e2e
│      app.e2e-spec.ts
│      app.po.ts
│      tsconfig.e2e.json
└─src

用途如下:

应用是如何启动的

在上面，我们知道，我们使用下面的命令来启动一个Angular应用:

λ ng serve

每个应用都有一个入口点，而Angular是如何映射的呢？

我们的应用是使用Angualr CLI构建的，而这个CLI是基于Webpack。

当我们运行该命令，首先，ng为查阅angular-cli.json文件，在上面的解释中，我们知道这个文件是Angular CLI的配置文件，我们试图在这个文件中找到应用的入口。我们查看该文件的具体内容:

//angular-cli.json
...
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
...

可以看到，入口文件就是main.ts。这与我们描述的所一致。

然后，我们打开main.ts，看看有什么:

//main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module'; //look here
import { environment } from './environments/environment';

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

platformBrowserDynamic().bootstrapModule(AppModule); //and look here

我们又发现，这个应用的入口点会bootstrap(引导)一个根模块AppModule。而在第五行，说明这个根模块是由./app/app.module.ts文件提供的。

我们知道，AppModule是用来声明组件和组装应用的。让我们打开app.module.ts文件，看看它是怎么做到的。

//app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

欸！！！这里有一个@NgModule。NgModule是Angular的一个模块系统，当引导一个应用时，不是直接引导一个组件，而是创建一个NgModule，它指向你要加载的组件。

这个注解@NgModule有三个属性:

• declaraitons 指定了该模块中定义的组件，我们这个初始程序只有一个根组件，就是AppComponent
• imports 描述了该模块有哪些依赖。我们正在创建一个浏览器应用，因此导入了BrowserModule
• bootstrap 告诉Angular，当使用该模块引导应用时，将谁加载为顶层组件。这里我们只有一个组件，就是AppComponent

然后，我们看第五行，我们的这个AppComponent组件是由./app.component.ts文件提供的。而./app.component.{ts,html,css}就会渲染出我们的页面。

到现在为止，整个启动过程就结束了。啧啧啧，好厉害的样子。