2、Angular4.x 安装以及使用

目录
一、安装最新版本的nodejs

二、全局安装 Angular CLI 脚手架工具(只需要安装一次)。

三、创建项目

四、目录结构分析

五、Hello Angular 4.0 以及 app.module.ts、组件分析

一、安装最新版本的nodejs

注意：请先在终端/控制台窗口中运行命令 node -v 和 npm -v， 来验证一下你正在运行 node 6.9.x 和 npm 3.x.x 以上的版本。 更老的版本可能会出现错误，更新的版本则没问题。

Windows10环境下安装Nodejs、cnpm 请参考https://blog.csdn.net/wing_93/article/details/78573820

二、全局安装 Angular CLI 脚手架工具(只需要安装一次)。

1. 使用 npm命令安装

npm install -g @angular/cli

1. 安装cnpm

npm 可能安装失败建议先用npm 安装一下cnpm 用淘宝镜像安装
https://npm.taobao.org/

npm install -g cnpm --registry=https://registry.npm.taobao.org

1. 使用 cnpm命令安装

cnpm install -g @angular/cli

三、创建项目

1. 打开cmd 找到你要创建项目的目录
2. 创建项目

   ng new 项目名称 创建一个项目
   ng new my-app

3. 进入刚才创建的项目里面启动服务

cd my-app
cnpm install //安装依赖
ng serve --open

四、目录结构分析

1.项目创建完成后的目录结构：

2.src目录结构：

五、Hello Angular 4.0 以及 app.module.ts、组件分析

1. app.module.ts

定义AppModule，这个根模块会告诉Angular如何组装该应用。 目前，它只声明了AppComponent。 稍后它还会声明更多组件。

//Angular 模块类描述应用的部件是如何组合在一起的。 每个应用都至少有一个 Angular 模块，也就是根模块， 
// 用来引导并运行应用。 你可以为它取任何名字。常规名字是AppModule。 也就是 app.module.ts文件
/*引入组件*/ 
import { BrowserModule } from '@angular/platform-browser'; /*BrowserModule，浏览器解析的模块*/ 
import { NgModule } from '@angular/core'; /*angualrjs核心模块*/ 
import { FormsModule } from '@angular/forms'; /*表单数据绑定 表单验证需要的模块*/ 
import { HttpModule } from '@angular/http'; /*数据请求模块*/
import { AppComponent } from './app.component'; /*根组件*/ 
/*@NgModule装饰器将AppModule标记为 Angular 模块类（也叫NgModule类）。 
@NgModule接受一个元数据对象，告诉 Angular 如何编译和启动应用。*/ 
@NgModule({ 
    declarations: [ /*引入当前项目运行的的组件*/ AppComponent ], 
    imports: [ /*引入当前模块运行依赖的其他模块*/ BrowserModule, FormsModule, HttpModule ], 
    providers: [], /*定义的服务 回头放在这个里面*/ 
    bootstrap: [AppComponent] /* 指定应用的主视图（称为根组件） 通过引导根AppModule来启动应用 ，这里一般写的是根组件*/ }) /*根模块不需要导出任何东西， 因为其它组件不需要导入根模块。 但是一定要写*/ 
    export class AppModule { }

2.自定义组件

https://github.com/angular/angular-cli

创建组件：

ng g component components/header

组件内容详解：

import { Component, OnInit } from '@angular/core'; /*引入angular核心*/
@Component({ 
    selector: 'app-header', /*使用这个组件的名称*/ 
    templateUrl: './header.component.html', /*html模板*/ 
    styleUrls: ['./header.component.css'] /*css样式*/ 
})
export class HeaderComponent implements OnInit { /*实现接口*/
    constructor() { /*构造函数*/
    }
    ngOnInit() { /*初始化加载的生命周期函数*/ 
    } 
}