1. 安装angular-cli
   npm install -g angular-cli@latest

2. 创建新文件(路径上不能有中文)
   ng new 新文件名

3. 查看端口并运行文件,自动打开网页
   ng serve -o(或在package.json里面做修改设置)
   --port XXXX指定端口号(否则默认4200)

4. 项目文件概览

   • 所有的Angular组件、模板、样式、图片以及应用所需的任何东西都在src文件中。src之外的文件都是为构建应用提供支持用的。

• src文件夹

src
——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
——favicon.ico
——index.html
——main.ts
——polyfills.ts
——styles.css
——test.ts
——tsconfig.app.json
——tsconfig.spec.json

• src文件夹

  • app/app.component.{ts,html,css,spec.ts}
    使用HTML模板、CSS样式和单元测试定义AppComponent组件。 它是根组件，随着应用的成长它会成为一棵组件树的根节点。
  • app/app.module.ts
    定义AppModule，这个根模块会告诉Angular如何组装该应用。 目前，它只声明了AppComponent。 稍后它还会声明更多组件。
  • assets/*
    这个文件夹下你可以放图片等任何东西，在构建应用时，它们全都会拷贝到发布包中。
  • environments/*
    这个文件夹中包括为各个目标环境准备的文件，它们导出了一些应用中要用到的配置变量。 这些文件会在构建应用时被替换。
  • index.html
    这是别人访问你的网站是看到的主页面的HTML文件。 大多数情况下你都不用编辑它。 在构建应用时，CLI会自动把所有js和css文件添加进去，所以你不必在这里手动添加任何 <script> 或 <link> 标签。
  • main.ts
    这是应用的主要入口点。
  • polyfills.ts
    不同的浏览器对Web标准的支持程度也不同。 填充库（polyfill）能帮我们把这些不同点进行标准化。
  • styles.css
    这里是你的全局样式。
  • test.ts
    这是单元测试的主要入口点。 它有一些你不熟悉的自定义配置，不过你并不需要编辑这里的任何东西。
  • tsconfig.json
    TypeScript编译器的配置文件。

• 其他文件

my-app
——e2e
————app.e2e-spec.ts
————app.po.ts
————tsconfig.e2e.json
——node_modules/...
——src/...
——.angular-cli.json
——.editorconfig
——.gitignore
——karma.conf.js
——package.json
——protractor.conf.js
——README.md
——tsconfig.json
——tslint.json

• 其他文件
  • e2e/
    在e2e/下是端到端（end-to-end）测试。
  • .angular-cli.json
    Angular CLI的配置文件。 在这个文件中，我们可以设置一系列默认值，还可以配置项目编译时要包含的那些文件。
  • .editorconfig
    给你的编辑器看的一个简单配置文件，它用来确保参与你项目的每个人都具有基本的编辑器配置。
  • karma.conf.js
    给Karma的单元测试配置，当运行ng test时会用到它。
  • protractor.conf.js
    给Protractor使用的端到端测试配置文件，当运行ng e2e的时候会用到它。
  • tsconfig.json
    TypeScript编译器的配置，你的IDE会借助它来给你提供更好的帮助。
  • tslint.json
    给TSLint和Codelyzer用的配置信息，当运行ng lint时会用到。 Lint功能可以帮你保持代码风格的统一。

5. 创建新的component并自动加入
   ng generate component 名称 --inline-template --inline-style

   • 可以缩写为 : ng g c 名称 -it -is
     其中 -it 和 -is 分别表示html和css都写在js内

6. 根模块app.module.ts

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';
import { LoginComponent } from './login/login.component';

@NgModule({
  declarations: [//声明顶层组件
    AppComponent,
    LoginComponent
  ],
  imports: [//辅助模块
    BrowserModule, //浏览器的必备服务和指令
    FormsModule, //表单处理和双向绑定
    HttpModule //Http请求和响应的服务
  ],
  providers: [],//本模块中注入的服务
  bootstrap: [AppComponent]//作为引导性组件,放入index.html的对应位置
})
export class AppModule { }

6. 添加事件

      <form>
        <input type='text' #usernameRef>
        <button (click)='hello(usernameRef.value)'>submit</button>
      </form>

#usernameRef称为引用

7. 创建新的service并自动加入
   ng g s core\auth

8. 使用DI（依赖性注入）