基础要求

·        Node.js

·        Git

Angular 开发环境配置方式

·        基于 Angular Quickstart

o   https://github.com/angular/qu...

·        基于 Angular CLI

o   npm install -g@angular/cli

 

IDE

·        WebStorm

·        VS Code

·        VS 2015、 VS 2017

 

 

1.      到Node.js官网下载最新安装包，安装Node.js。

安装完毕使用node –v 和 npm –v 指令查看安装结果。

   

 

 

 

 

2.      使用npm 指令安装Angular/cli。

执行npm install –g @angular/cli，会下载安装包，需要等一会。

安装完毕执行ng –v指令查看安装结果，出现Angular的版本号，到此为止，Angular的开发环境我们就搭建好了。

npm是从国外网站现在各种安装包，有的内容可能需要翻墙才能下载，也可以安装国内的镜像，执行如下命令即可：

npm install -g cnpm --registry=https://registry.npm.taobao.org 

移除淘宝镜像：

npm remove -g cnpm--registry=https://registry.npm.taobao.org

 

3.      使用ng new 项目名创建一个新的angular项目。

进入D:\Angular\Demo目录执行 ng new auction指令创建新项目。

4.      项目创建完毕，使用WebStrom打开项目所在文件夹，以下是angular cli 命令行工具生成出来的目录结构，命令行工具是按照一定的规则去生成项目目录，如果改变这些文件的位置，或者重命名这些文件，有可能会导致命令行工具的一些命令不能使了，所以除非你明确的知道你在干什么，否则不要改这些文件。

5.      项目结构分析 

a)        e2e：端到端的测试目录，包含基本的测试桩，是用来做测试的。

b)        src：应用源代码目录，是我们写代码的地方。

c)        .angular-cli.json：是一个json文件，是angular命令行工具的一个配置文件，如果我们需要引用第三方的包，如jQuery，Bootstrap都是通过修改这个文件实现的。

d)        .editorconfig：是我们的IDEWebStrom的配置文件，和我们项目没关系。

e)        .gitignore： 是git的一个配置文件，和我们项目没关系。

f)         karma.conf.js： karma是一个单元测试的执行器，用来执行自动测试的，这是karma的配置文件。

g)        package.json：是一个标准的npm工具的配置文件，在这个文件里面说明了你当前这个应用所使用的第三方依赖包，在创建项目的时候，就会根据这个文件去下载第三方的依赖包，下载完成之后，他会把这些依赖包放在node_modules目录下。

这里需要注意的是，下载的默认的依赖包都会放在node_modules目录下，我们自己写的代码不要放在这个目录下面。

h)        protractor.conf.js：这个文件和karma.conf.js有点类似，也是一个做自动化测试的配置文件。

i)          readme.md：命令行工具生成的一个标准说明文件，包含你怎么去构建，怎么去测试，怎么去运行它等等。

j)          tslint.json：这个是tslint的一个配置文件，它是用来定义TypeScript代码质量检查的一些规则的，这个也不用去改，它已经按照标准的规则去改了。

k)        最后介绍src目录，如果这个目录的内容你不知道干什么用的，建议你不要去动它。src目录下是应用的一系列源码文件。

6.      关于src目录的介绍

a)        app目录：这个目录包含我们应用的组件和模块，我们要写的代码，绝大部分代码都写在这个目录里面。

b)        assets目录：空的一个文件夹，他是用来存静态资源的，比如说图片等资源都是放在这个目录下面。

c)        environment目录：Angular是支持多环境开发的，比如说在开发环境、测试环境和生产环境共用一套代码，然后把这些环境不同的配置，比如服务的地址，在开发环境和生产环境是不一样的，把这些东西都写在不同的环境配置文件里面，然后他在编译的时候会把相应环境的配置文件编译到你的代码里面去。

d)        index.html：是整个应用的根html，就是应用起来，需要第一个访问的就是这个文件。在body里面就一个标签<app-root></app-root>。

e)        main.ts：是Web应用脚本执行的入口点，Angular通过这个文件来启动整个项目。

f)         ployfills.ts：这个是用来导入一些必要的库，导入这些库干嘛用？ 主要是使Angular可以运行在一些老版本的浏览器上。

g)        style.css： 一个空的样式文件，这个用来放你的一些全局的css样式。

h)        test.ts: 和karma等一样，是用来做自动化测试的。

i)          tsconfig.app.json： 是TypeScript编译器的一个配置文件，这个也是按照Angular的标准配好了，大家不用去改他就可以。

好，现在我们对命令行工具生产的代码有了一个大概的了解，然后让我们把经历集中在最关键的几个文件上。

7.      关于app目录下核心文件的介绍

一个应用要运行至少要有一个模块（根模块）和一个组件（主组件），命令行工具已经帮我们都生成好了，在看代码之前我们先来了解一下与组件相关的基本概念。

Ø  第一个概念叫组件元数据装饰器，简称装饰器，@Component()装饰器用来告诉Angular框架如何处理一个TypeScript类，@Component()装饰器包含多个属性，这些属性的值叫做元数据，Angular会根据这些元数据的值来渲染组件，并执行组件的逻辑。

Ø  第二个概念叫模板Template，我们通过组件自带的模板来定义组件的外观，模板以html文件的形式存在，告诉Angular如何来渲染组件，一般来说，模板看起来很像html，但是我们可以在模板中使用Angular的数据绑定语法来呈现控制器中的数据。

Ø  第三个概念就是控制器Controller，控制器就是一个普通的TypeScript类，他会被@Component装饰器来装饰，控制器会包含组件所有的属性和方法，绝大多数的页面逻辑都是写在控制器里的（业务逻辑最好是封装在服务类内），控制器通过数据绑定与模板来通讯，模板展现控制器的数据，控制器处理模板上发生的事件。

前面介绍的这三个概念，被称作组件的三个必备元素，所有的组件都必然包含这三个要素，下面我们来详细的分析一下。

 

a)        app.component.ts：首先让我们来看一下组件app.component.ts，他是整个应用的基础，你可以把他理解为一个地基，我们会在他上面建起我们的应用。

Ø  import { Component } from '@angular/core';这是一个import，他从@angular/core的核心模块里面引入了一个叫做Component的装饰器。

Ø  @Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
}) 用这个装饰器定义了一个组件，以及组件的元数据。这里用到了一个概念叫做组件元数据装饰器，所有的组件都必须使一个@Component装饰器来注解，前面带一个@符的东西叫做装饰器，

Ø  export class AppComponent {title = 'app';
} 就是一个标准的TypeScript类，这个类叫做控制器，他里面只有一个属性叫做title，控制器是指一个被@Component装饰器装饰的类，他包含与模板相关的属性和方法，与页面相关的大部分逻辑都是编写在这个控制器里面的，我们看到这个控制器里面有一个title属性，这个属性里面的值最终会展示到浏览器的页面中。在这里类里面一点框架的痕迹都没有，实际上AppComponent就是一个普通的TypeScript类，直到我们告诉Angular，他是一个组件，要告诉Angular，AppComponent是一个组件，需要把一些元数据附加到这个类上，在TypeScript中，我们用装饰器来附加元数据，装饰器里面的属性就叫元数据，通过@Component装饰器把这些元数据附加到AppComponent这个类上面，Angular就知道了，我要把他编程Angular框架中的一个组件。@Component()这个东西就叫做组件元数据装饰器。元数据会告诉Angular如何把这个AppComponent类处理成一个Angular的组件。

好，接下来我们来看一下这几个元数据

Ø  selector：是css的选择器，这个属性说明这个组件可以通过<app-root></app-root>这样的html标签来调用。在前面的index.html文件中，他里面就有这样一个<app-root> 标签，他的意思是在这个地方来展现<app-root>这个标签中的内容。

Ø  templateUrl：指定了一个html文件作为组件内容的模板，最终在index.html文件上<app-root>这个标签的位置，将展示这个模板html文件里面的内容。这是与组件相关的第二个概念，叫模板，如果没有模板，一个组件就不能叫做组件，模板是组件的必备属性，模板，也就是这个html定义了用户最终看到的页面的布局和内容。

Ø  styleUrls：指向了一组css样式文件，你可以在样式文件中编写这个组件模板用到的css样式

b)        app.component.html：AppComponent组件的模板。

<h1>Welcome to {{title}}!
</h1>  

其中双大括号括起来的title属性，这里用到了Angular里面的另一个概念，叫做数据绑定，Angular的数据绑定是模板的各个部分与控制器的各个部分互相作用的一种机制，我们往html中添加绑定标记来告诉Angular，如何把二者给联系起来，就是把模板和控制器联系起来，这个用双大扩号括起来的title属性就是最常见的将组件中的值绑定到模板中的方法，叫做插值表达式，在实际运行时，Angular框架会用AppComponent类中的title属性的值替换掉双大括号里面的titile，后面我们会频繁的用这个表达式来显示数据，后面我们还会介绍其他三种其他方式，叫属性绑定，事件绑定和双向绑定。

好，以上我们就看了命令行工具为我们生成的Component，他只是生成了组件的必备要素。

接下来我们先看一下组件的其他一些可选的元素，如输入属性，提供器和生命周期钩子。

Ø  @Inputs：输入属性是用来接收外部传入进来的数据的，输入属性使得父组件可以直接传递数据给子组件，Angular程序其实就是一个Angular组件树，这个输入属性允许你在组件树中传递数据，使用属性绑定，可以将父组件中的属性值绑定到子组件的输入属性上，后面我们会演示他的用法。

Ø  providers：是用来做依赖注入的，我们在组件中用到的服务，需要在提供器中注册，这个概念我们会在后面详细的来讲。

Ø  生命周期钩子： 在一个组件从创建到销毁的过程中有多个钩子（就是一系列事件）可以被用来触发执行各种业务逻辑，比如你可以在组件被实例化以后执行一段初始化的逻辑，从后台读取一些数据进到这个组件里面去。

Ø  样式表：组件可以关联一些样式表文件来提供一些组件专用的样式，但是这个东西是可选的，没有样式表，只有模板也是可以的。

Ø  动画：angular提供了一个动画包来方便我们创建与组件相关的动画效果，如淡入淡出等等。

Ø  输出属性：他和前面的输入属性是相对的，输出属性用来定义一些其他组件可能会感兴趣的事件，或者用来在组件间共享数据。

c)       app.module.ts:与AppComponent类似，模块也是一个带着装饰器的TypeScript类。

在这个类里面，最上面是一组import，引入这个模块需要的东西，然后用@NgModule这样一个装饰器声明了一个模块，在这个模块的声明中，首先使用declarations属性声明了模块中有什么东西，现在这个模块中只有一个组件，就是AppComponent，注意在这个属性里面只能声明组件，指令和管道；其次使用imports属性声明了应用要正常运转还需要什么东西，也就是AppModule这个模块依赖的其他模块，有的版本会声明三个Angular框架提供的三个模块其中，BrowserModule是开发Web应用的一个必选依赖，就是浏览器模块，因为你最终的应用要跑在浏览器里面，这个模块就是必须要选的一个依赖，FormsModule是处理表单的模块。HttpModule模块提供http服务的，你引用了这些模块就可以在你的应用里面使用这些模块所提供的组件、指令和服务；providers属性默认是空的，他用来声明模块中提供了什么样的服务，这里只能声明服务；bootstrap属性声明了模块的主组件是什么，在后面介绍启动过程的时候会详细解释这个属性的意义。

好，到这里我们就已经看完了命令行工具生成的所有的模块和组件，后面我们来讲一下一个angular应用是如何启动的。

抱歉，本来打算第二章直接开始搭建英雄指南的，但是考虑到一些元素所以先讲了一下开发环境的搭建和一些基础知识。从下一章开始我们将开始慢慢的开始搭建一个小的

项目