淘先锋技术网

首页 1 2 3 4 5 6 7

Angular.js 环境搭建

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/[email protected] //可以指定版本安装，如安装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/[email protected] //可以指定版本安装，如安装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  // 新建服务

参考资料

Angular CLI 终极指南

Angular官方中文文档