angular4.x 安装、创建项目、 目录结 构介绍、创建组件

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

全局安装 AngularCLI 脚手架工具(只需 要安装一次)。

1. 使用 npm命令安装

npm install -g @angular/cli

2. 安装 cnpm

npm 可能安装失败建议先用 npm 安装一下 cnpm 用淘宝镜像安装

https://npm.taobao.org/

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

3. 使用 cnpm 命令安装 cnpm install -g @angular/cli

创建项目

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

2. 创建项目

ng new 项目名称 创建一个项目

ng new my-app –-routing //创建带路由的项目

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

cd my-app

cnpm install //安装依赖

ng serve --open

目录结构分析

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

app.module.ts

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

自定义组件

创建组件:ng g component components/header

组件内容详解: