Angular2基础篇（一） 目录结构详解

一 使用Angular-CLI 快速构建Angular2应用

---

步骤一：环境准备

此博文所用环境如下：

工具	版本
node.js	v8.7.0
npm	v5.5.1
webStorm	2016.3
Angular CLI	1.7.4

注： 版本不一定需要严格一致， 但是建议使用 node 6.9.x 和 npm 3.x.x 以上的版本，以避免一些不必要的错误。
node.js 可到官网下载所需版本。
webStorm下载地址：链接: https://pan.baidu.com/s/10XSe0wfNBhOHDDLvCjpEfw 密码: ramh

      主要安装命令：

//国内使用npm太慢，可以使用npm淘宝镜像代替，支持 npm 除了 publish 之外的所有命令，下面的命令我们默认使用淘宝镜像。
$ npm install -g cnpm --registry=https://registry.npm.taobao.org

//安装脚手架，
cnpm install -g @Angular/cli

//如果以前装过，则需先卸载以前版本
cnpm uninstall -g @angular/cli
cnpm cache clean
ng -v
//若显示command not found则卸载干净
//安装指定版本
cnpm install -g @angular/cli@1.7.4

步骤二：创建新项目

ng new project-name
cd project-name
ng serve --open

Angular 默认端口为4200，如果端口被占用会出现以下错误，可以使用命令设置端口号：ng serve --port 4201

然后访问浏览器http://localhost:4200/，可以看到如下页面：

到此，一个简单的应用就创建好了，下面我们重点来看看Angular的目录结构。

二 Angular2目录结构解析

---

• Angular首层目录

.angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "my-app" //项目名称
  },
  "apps": [
    {
      "root": "src", //根目录
      "outDir": "dist", //build后的输出目录，默认dist
      "assets": [//记录资源文件夹，构建时复制到`outDir`指定的目录
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",//指定首页文件
      "main": "main.ts",//指定应用的入口文件
      "polyfills": "polyfills.ts",
      "test": "test.ts",//指定测试入口文件
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",//使用`ng generate`命令时，自动为selector元数据的值添加的前缀名
      "styles": [//引入全局样式，构建时会打包进来，常用于第三方库引入的样式
        "styles.css"
      ],
      "scripts": [],//引入全局脚本，构建时会打包进来，常用于第三方库引入的脚本
      "environmentSource": "environments/environment.ts",// 基础环境配置
      "environments": {//子环境配置
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {/// 执行`ng generate`命令时的一些默认值
    "styleExt": "css",//默认生成的样式文件后缀名
    "component": {}
  }
}

package.json

      npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目中所需的运行和开发环境。其实package.json文件就是一个json对象，该对象的每一个成员就是当前项目的一项设置，package.json主要配置项如下：

name：项目名称

version 版本号

description：npm包的描述，它可以帮助人们在使用npm search时找到这个包

homepage:项目主页的url

config：应用的配置项

author：作者

respository：资源仓库地址

licenses：授权方式

directories：目录

main：应用入口文件

bin：命令行文件

dependencries：项目应用运行依赖模块

devDependencies：项目应用开发环境依赖

engines：运行引擎，指明node.js运行所需要的版本

script：声明一系列npm脚本指令

private ：如果设置为true, 那么npm会拒绝发布它

      更加详细的解析： https://www.cnblogs.com/nullcc/p/5829218.html

tsconfig.json :TypeScript 编译器配置

TypeScript 是 Angular 应用开发中使用的主语言。浏览器不能直接执行 TypeScript 。它得先用 tsc 编译器转译 (transpile) 成 JavaScript ，而且编译器需要进行一些配置。

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",//编译输出目录
    "sourceMap": true,//编译时是否生成对应的source map文件
    "noImplicitAny": false,//为false时，如果编译器无法根据变量的使用来判断类型时，将用any类型代替
                           //为true时，将进行强类型检查，无法推断类型时，提示错误
    "module": "commonjs",
    "removeComments": true,//编译生成的JavaScript文件是否移除注释
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",//编译之后生成的JavaScript文件需要遵循的标准（es3、es5、es2015）
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ],
    "include":[//编译时需要包含的文件夹
      "ts"
          ],
    "exclude": [//编译时需要剔除的文件夹
      "js"
    ]
  }
}

• src目录
  

  app.component.ts

import { Component } from '@angular/core';//从angular的基础包@angular/core中引入组件模块（Component）

@Component({//组件装饰器,告诉angular如何创建组件
  selector: 'app-root',//该组件的Dom元素名称
  templateUrl: './app.component.html',//引入组件所需要的模板
  styleUrls: ['./app.component.css']//引入组件所需要的样式
})
export class AppComponent {//定义一个组件类,并对外输出该类,以便其它文件可以通过组件名称引用该组件
  title = 'app';
}

        app.module.ts

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


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


@NgModule({ //用于定义模块用的装饰器
  declarations: [//声明本模块依赖的组件、指令等
    AppComponent
  ],
  imports: [//导入本模块所需的其他模块
    BrowserModule  //注册了一些关键的Provider和通用的指令，在imports属性中配置，作为公用模块供全局调用
  ],
  exports:[],//导出本模块的组件、指令、模块等
  providers: [],//声明本模块的服务
  bootstrap: [AppComponent]//标记出引导组件，在Angular启动应用时，将被标记的组件渲染到模板中
})
export class AppModule { }

        main.ts

import { enableProdMode } from '@angular/core';//导入enableProdMode用来关闭angular开发者模式
//从angular浏览器模块中导入platformBrowserDynamic这个方法，这个方法告诉angular使用哪个模块来启动整个应用
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';//angular多环境支持

// 如果是工厂模式，就启动enableProdMode来关闭开发者模式
if (environment.production) {
  enableProdMode();
}

//调用platformBrowserDynamic().bootstrapModule()方法，来编译启动AppModule模块
platformBrowserDynamic().bootstrapModule(AppModule)
  // .catch(err => console.log(err));