开发环境搭建
先通过一个demo来熟悉angular的使用。
首先确保开发环境中已经安装了npm和node.js。
安装angular-cli
npm install -g @angular/cli
这是angular框架的脚手架,帮我们创建项目。
安装typescript
npm install -g typescript
这是Angular框架中默认使用的JS语法。
不过在新建项目时也会自动下载,所以这步也可以跳过。
新建项目
ng new angular-demo
这里就是angular cli在帮我们搭建整个项目了,过程稍长,因为要下载模版和一些依赖。
如果是已经建好了项目的文件夹,也可以直接在控制台进入该文件夹然后ng init angular-demo
启动项目
进入项目目录
cd angular-demo
启动
ng serve --open
这样就会自动在浏览器中打开项目了。
默认是使用4200端口,若想要更改端口号的话
ng serve --port 4201
还有一些其他的ng serve命令:
--dry-run: boolean
, 默认为 false, 若设置 dry-run 则不会创建任何文件
--verbose: boolean
, 默认为 false
--link-cli: boolean
, 默认为 false, 自动链接到 @angular/cli 包
--skip-install: boolean
, 默认为 false, 表示跳过 npm install
--skip-git: boolean
, 默认为 false, 表示该目录不初始化为 git 仓库
--skip-tests: boolean
, 默认为 false, 表示不创建 tests 相关文件
--skip-commit: boolean
, 默认为 false, 表示不进行初始提交
--directory: string
, 用于设置创建的目录名,默认与应用程序的同名
--source-dir: string
, 默认为 ‘src’, 用于设置源文件目录的名称
--style: string
, 默认为 ‘css’, 用于设置选用的样式语法 (‘css’, ‘less’ or ‘scss’)
--prefix: string
, 默认为 ‘app’, 用于设置创建新组件时,组件选择器使用的前缀
--mobile: boolean
, 默认为 false,表示是否生成 Progressive Web App 应用程序
--routing: boolean
, 默认为 false, 表示新增带有路由信息的模块,并添加到根模块中
--inline-style: boolean
, 默认为 false, 表示当创建新的应用程序时,使用内联样式
--inline-template: boolean
, 默认为 false, 表示当创建新的应用程序时,使用内联模板
angular-cli命令
ng generate class my-new-class // 新建 class
ng generate component my-new-component // 新建组件
ng generate directive my-new-directive // 新建指令
ng generate enum my-new-enum // 新建枚举
ng generate module my-new-module // 新建模块
ng generate pipe my-new-pipe // 新建管道
ng generate service my-new-service // 新建服务
单元测试
ng test
angular-cli默认配置了karma
测试框架
端到端测试
ng e2e
打包项目
ng build
注意
创建项目时,node-sass模块可能下载失败,npm 安装 node-sass 依赖时,会从 github.com 上下载 .node 文件。由于国内网络环境的问题,这个下载时间可能会很长,甚至导致超时失败。
可以更换npm为淘宝源的cnpm下载。