使用angular-cli构建angular2

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文件添加进去，所以你不必在这里手动添加任何