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

一、安装最新版本的 nodejs

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

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

1.使用npm 命令安装

npm install -g @angular/cli

2.安装cnpm

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

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

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

cd my-app //进入根目录
cnpm install //安装依赖
ng serve --open //启动项目

四、目录结构分析

1516095126(1).jpg

五、appModule.ts分析、组件分析

1、appModule.ts分析

1516095464(1).jpg

1516095492(1).jpg

2、组件分析

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

1516095726(1).jpg

创建组件

ng g component components/header

1516095846(1).jpg