使用angular-cli搭建angular开发环境

angular项目环境配置：
步骤 1. 配置开发环境（node环境必须）
 请先在终端/控制台窗口中运行命令 node -v 和 npm -v;
 如果出现版本号则ok,并且确保验证一下版本号： node 8.x 和 npm 5.x 以上的版本。 更老的版本可能会出现错误，更新的版本则没问题。
 如果没有出现版本号，则到node.js官网上自动下载，node环境是集成了npm环境，npm是node的一个包管理工具

然后全局安装 Angular CLI。

npm install -g @angular/cli

查看angular CLI 是否安装成功：ng -v

步骤 2. 创建新项目

首先，选择一个工作目录，运行下列命令来生成一个新项目以及默认的应用代码：

ng new my-app   //my-app是你的项目名称

步骤 3. 启动开发服务器

进入项目目录，并启动服务器。

cd my-app
ng serve --open

ng serve 命令会启动开发服务器，监听文件变化，并在修改这些文件时重新构建此应用。

使用 --open（或 -o）参数可以自动打开浏览器并访问 http://localhost:4200/。

angular2项目结构：

angular-cli.json:配置项目的相关信息，包括版本号之类的
package.json：npm依赖包相关的包配置信息
tslint：一个标准化代码检查的工具
src：项目的核心文件
    index.html:首页
    polyfills.ts:项目中所必须的第三方js库以及angular-cli包含的信息
    main.ts：项目的启动
    app文件夹：
        app.module.ts:可以指定项目启动的组件；bootstrap中配置
组件中相关信息：
    app.component.html:可以理解为html代码    
    app.component.css:可以理解为css代码    
    app.component.ts:可以理解为js代码

        @Component是一个Angualr2的装饰器函数，用于为该组件指定 Angular 所需的元数据。

　　            selector选择器表示你之后再html代码里将以什么名字使用这个组件

　　            templateUrl表示组件的html代码，这里也可以使用template：`

123

`来使用内联模板

　　            styleUrls是样式地址数组，也可以使用 styles:['h1{font-size:28px;}']

        export class AppComponent {}组件的类，可以定义组件的行为等。

进入项目，使用Angular CLI创建新组件：
 cd my-app  
 ng generate component article   // 在src/app中创建article组件，并生成了ArticleComponent的三个文件

创建 HeroService
 cd my-app  
 ng generate service hero   //在 src/app/hero.service.ts 中生成 HeroService 

创建hero类
cd my-app
ng generate class hero

第一步：创建路由文件
ng generate module app-routing --flat --module=app
注释：--flat 把这个文件放进了 src/app 中，而不是单独的目录中。--module=app 告诉 CLI 把它注册到 AppModule 的 imports 数组中

使用Ant Design UI库
 ng add ng-zorro-antd 
安装完后，全局样式需要找到项目中的style.css  引入：@import '.././node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css';即可