Angular2+学习第2篇 cli 环境搭建过程

Angular-cli是angular团队针对Angular2提供的脚手架，用于环境搭建，运行等；具体参考Angular-cli GitHub

Angular的启动过程，需要先回答三个问题：

1. 启动时加载了哪个页面？
2. 启动时加载了哪些脚本？
3. 这些脚本到底做了什么事？

OK，让我们来打开.Angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "angular-reddit-test"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "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",
      "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": {
    "styleExt": "css",
    "component": {}
  }
}

apps的数组，数组中的对象有一个index属性，和一个main属性。

默认情况下：

index属性指向src（root属性）目录中的index.html，他是angular应用启动时加载的页面。

main属性指向了src下面的main.ts，他是angular应用启动时加载的脚本，main.ts负责引导angular应用启动。

我们来看一下main.ts，这里是一个angular应用的起点。

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

• import { enableProdMode } from '@angular/core'; 导入angular核心模块的enableProdMode方法，此方法用来关闭angular应用的开发者模式。
• import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 从浏览器模块中导入一个platformBrowserDynamic方法，这个方法会告诉angular使用哪个模块来启动应用。
• AppModule，也就是命令行工具生成的那个整个应用的主模块
• environment：环境配置，angular对多环境的一个支持。
• if (environment.production) {
    enableProdMode();
  } 如果当前是生产环境，就调用enableProdMode方法关闭开发者模式。
• platformBrowserDynamic().bootstrapModule(AppModule); 最后调用bootstrapModule()这个方法，传入AppModule作为启动模块来启动应用，是整个angular应用的起点，程序是通过这里来开始运行的。

angular在知道要用AppModule作为主模块以后，他会加载AppModule模块，然后angular会分析AppModule模块需要依赖哪些模块，并加载哪些模块。

在app.module.ts文件中我们会看中，AppModule模块会依赖BrowserModule、FormsModule和HttpModule模块，加载这些模块之后，会再分析这些模块需要依赖哪些模块，然后再去加载哪些模块，以此类推，直到加载完所有所需的模块。

当加载完以后，angular会在index.html文件中寻找启动模块指定的主组件对应的css选择器，也就是说启动后angular会在index.html文件中找<app-root>，会用主组件也就是AppComponent中指定的模板内容（app.component.html），用这里面的内容替换到<app-root>这个标签，在这个整个过程完成之前，页面将会展示<app-root>这个标签中的内容，也即时loading…这样的一个字符串。

启动程序：

ng serve 

开始编译应用，如果出现webpack：Compiled successful就代表编译成功了，我们就可以在浏览器中输入http://localhost:4200

 //设置不同端口
ng server --port **

--------------------------------------------------------------------

1.ng new命令，快速创建一个新的项目

$ ng new angular2_hello_world

2.运行应用

 ng serve

3. 制作Component

$ ng generate component **

-----------------------refrence-----------------------------------

 http://www.ituring.com.cn/book/tupubarticle/13538

 cli

什么是Angular-cli

简言之：就是NG团队自行维护的一个｀脚手架｀[内置单元测试及webpack2打包工具等]　－－　前身是ember-cli；

官网：https://cli.angular.io/ 
Github: https://github.com/angular/angular-cli 
npm: https://www.npmjs.com/package/angular-cli

范围	命令	作用
new	ng new new_project	初始化新项目
Component	ng g component my-new-component	新建一个组件
Directive	ng g directive my-new-directive	新建一个指令
Pipe	ng g pipe my-new-pipe	新建一个管道
Service	ng g service my-new-service	新建一个服务
Class	ng g class my-new-class	新建一个类
Interface	ng g interface my-new-interface	新建一个接口
Enum	ng g enum my-new-enum	新建一个枚举
Module	ng g module my-module	新建一个模块