Angular 学习笔记

几个常用命令

npm + ng

npm i --save 包名:软件依赖 npm i --save-dev 包名 : 开发依赖

ng new 项目名 : 新建 Angular 项目

ng build -prod: 生产环境编译 ng serve: 启动开发服务器

json-server : 用于快速搭建 REST API 的利器

安装: npm i -g json-server
创建mock数据

mock数据
使用json-server ./mock/data.json 启动服务
启动服务

在浏览器打开http://localhost:3000/user, 就可以获取到之前创建的mock数据

浏览器查看数据
http://localhost:3000服务器home页面
服务器home页面
支持 GET, POST, PUT, PATCH, DELETE等 REST 命令

几种常见的 API 测试工具

• 使用 Postman 测试常用的 API
• 使用 VSCode 的 REST Client 插件

常见问题解决

• 安装 @angular/cli 出现错误
  先删除掉原有的安装
  npm uninstall -g @angular/cli
  再清除掉缓存
  npm cache clean
  再次重新安装
  npm install -g @angular/cli
  直到安装过程没有错误为止...

创建工程, style 使用 scss

1. ng new taskmgr -si --style=scss taskmgr为项目名称
2. 接着安装依赖类库
   npm install
3. 创建模块:
   ng g m core
ng g m shared
4. 生成header 组件
   ng g c core/header --spec=false (--spec=false): 暂时先不创建测试文件

flex 放大 缩小 基线的宽度高度

例如: flex: 1 0 auto

Material UI组件库

优点: 兼容性好, 可扩展性强, 可测试性好, 对主题的支持好
缺点:目前组件仍不算丰富, 只有 Material 风格
安装 material: npm i --save @angular/material@2.0.0