1.安装Node.js
node.js下载地址是:https://nodejs.org/en/download/
下载后,默认安装即可。然后检查版本,确认安装成功。
1 检查node.js版本
node -v //若显示版本号,则说明安装成功
2 检查npm版本
npm -v //若显示版本号,则说明安装成功
2.安装Angular CLI
接下来安装Angular CLI,这里提供了两种安装方式:
1 普通安装
npm install -g @angular/cli //默认安装最新版本
npm install -g @angular/cli@4.2.6 //可以指定版本安装,如安装4.2.6
2 淘宝镜像安装
2.1 设置镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
2.2 镜像安装
cnpm install -g @angular/cli //默认安装最新版本
cnpm install -g @angular/cli@4.2.6 //可以指定版本安装,如安装4.2.6
下方提供了卸载的方法,以便卸载或重装其他版本
1 卸载当前的版本
npm uninstall -g @angular/cli
2 为确保卸载干净,清除缓存
npm cache clean
3 检查是否卸载干净
ng -v //若显示command not found则说明已经卸载干净了
3.新建Angular项目
进入项目所在的路径 (如将项目安装在D:\workspace)
D: //进入D盘
cd D:\workspace //进入项目所在的路径
创建新项目,然后默认安装angular的路由,默认使用css
1 普通安装
ng new 项目名 // 创建项目目录,并自动在项目目录下安装
2 淘宝镜像安装
ng new 项目名 --skip-install // 先跳过npm的安装
cd 项目名 // 进入项目的目录
cnpm install // 继续安装
4.运行Angular项目
进入项目目录(如将项目安装在D:\workspace\demo),用ng serve 命令运行项目
// 使用默认的地址(http://localhost:4200/)
ng serve
// 自定义IP,端口
ng serve --host IP地址 --port 端口号
// 查看更多参数
ng serve --help
然后访问:http://localhost:4200/,出现如下页面说明项目搭建成功
5.为Angular项目添加功能
1.添加组件
添加组件的命令
ng generate component 组件名 //在src/app下创建一个组件
ng generate component 指定目录/组件名 //在src/app下的指定目录下创建一个组件
可以简写为
ng g c 组件名 //在src/app下创建一个组件
ng g c 指定目录/组件名 //在src/app下的指定目录下创建一个组件
如,创建一个header组件,则会执行如下命令
ng generate component header
installing component
create src/app/header/header.component.css //创建CSS文件,用于设置组件的样式
create src/app/header/header.component.html //创建HTML文件,用于设置组件的模板
create src/app/header/header.component.spec.ts //创建Spec文件,包含组件相关的测试用例
create src/app/site-header/header.component.ts //创建TypeScript 文件,里面包含一个 Header 组件类和组件的元信息
update src/app/app.module.ts //更新app.module.ts文件,注册组件
2.添加其他
其他添加命令
ng generate class xxx // 新建 class
ng generate directive xxx // 新建指令
ng generate enum xxx // 新建枚举
ng generate module xxx // 新建模块
ng generate pipe xxx // 新建管道
ng generate service xxx // 新建服务
对应简写
ng g cl xxx // 新建 class
ng g d xxx // 新建指令
ng g e xxx // 新建枚举
ng g m xxx // 新建模块
ng g p xxx // 新建管道
ng g s xxx // 新建服务
参考资料