Angular #开始 #生成项目包 #启动项目 #项目执行流程 #组件 #{{}} #指令 #自定义指令 #管道 #生命周期 #TypeScript #传参 #服务 #ionic
一.开始工作
官方网站：https://angular.cn/
1.Angular开发 与 Vue开发相同, 都需要安装脚手架; 然后使用脚手架来生成项目包.
2.node版本需要最新版本; //版本在12以上即可
a).npm默认的下载源在国外, 会导致国内使用较慢甚至无法下载 检查当前下载源,
npm config get registry //如果不是taobao 就设置中国镜像
b).设置中国镜像
npm config set registry http://registry.npm.taobao.org/
全局安装angular脚手架：
1.npm i -g @angular/cli //如果电脑曾经安装过,此步骤可能出现报错：关键词 file exists
2.ng v //检测是否安装完 会显示版本号
常见错误：
1.window 新的 powerShell 工具不支持运行脚本 //使用CMD
2.已安装再次安装会覆盖 但是cmd权限不够 不允许覆盖 就会报错 //手动删除已安装的包 C:\Users\xxx\AppData\Roaming\npm\node_modules\@angular
二.生成项目包
1.ng n xxx //xxx包名
2.安装完毕后有3种场景 //是否安装git软件 不影响使用
1.安装git工具的电脑 并 初始化过 //Successfully initialized git.
2.安装git工具的电脑 但 没初始化过 //会提示 初始化 user.name 和 user.email
3.没有安装git的电脑 // √ Packages installed successfully.
三.启动项目
1.vue的项目启动：npm run serve 启动之后,使用localhost:8080/ //可以使用
2.angular项目启动命令：ng serve //简化写法：ng s //启用服务器+自动开默认浏览器 显示网页 ng s -o //访问localhost:4200显示项目页面
代码提示插件：
四.项目执行流程
1.启动命令：ng serve //开启服务器软件,默认名称 4200--端口
2.访问：localhost:4200
3.服务器的默认设定：如果不指定访问的文件名字，默认index.html
index.html
webpack 打包工具
1.全自动化的打包工具,由angular脚手架自动进行了配置
2.配置：打包时 引入main.ts 文件到 index.html
main.ts
1.后缀名ts:TypeScript 语言的缩写 //JS语言的升级版本,添加了更多易用的特性
2.此文件引入了 ./app/app.module.ts 文件
五.组件
组件由.css .html .ts 三个文件组成
1.创建组件文件夹里面包含3个文件.css .html .ts
2.写代码
3.ts文件负责引入html和css //ng-component
4.app.modules.ts 引入注册组件
1.Angular项目是SPA项目：单页面应用 //整个网站只有一个根页面, 其中的内容是通过 路由进行切换的
2.Angular组件不同于vue //vue是单文件 //angular 包含.html .css .ts 跟微信小程序差不多
3.组件使用时,必须注册组件
组件快速生成：
1.组件的制作方式是固定操作: (1)制作组件的文件夹 (2)制作3个文件 (3)在ts文件中引入另外两个文件 (4)注册到全局中
快捷命令：
生成组件：ng generate component 组件名字 //简写 ：ng g c 组件名
六. {{}}
七.指令
属性指令绑定 ： [属性名]="值" //vue中 v-bind 简写 :属性名
事件绑定：(事件名)="方法名()" //vue中 v-on:事件名 或者 @事件名
双向绑定：[(ngModel)]="值"
重点注意事项：双向绑定功能模块默认不加载,所以无法使用,必须手动加载才可以
全局配置文件： app.module.ts
循环指令 <div *ngFor="let item of names">{{item}}</div> //vue v-for="(item,index) of items" :key="index"
<li *ngFor="let item of names; let i=index">{{i+1}},{{names[i]}}</li>
条件判断：*ngIf="" else //vue中的V-if
HTML展示：[innerHTML]="data" //v-html
动态风格样式： //vue中 :style="{属性名:值}" :class="{样式类名: true/false}" 通过true 和 false 来切换样式是否可用
style
class
八.自定义指令
生成自定义指令：ng generate directive 指令名 // ng g d 指令
九.管道
//vue中称为过滤器 filter
Angular不同于vue, 其默认提供了很多管道, 可以直接使用; 当然也有 自定义管道的方式
自定义管道
生成管道命令行：ng generate pipe 管道名 //ng g p 管道名
十.生命周期
vue中也存在相同的声明周期,组件从生成,内容更新,UI更新,最终的销毁过程:每个步骤触发对应的方法 --钩子函数
轮播图示例
十一. TypeScript
TypeScript 简称 TS, 我们项目中的 .ts 文件都是 TypeScript 语言书写的;
TypeScript 是微软公司 在 JavaScript 的基础上扩展开发的编程语言, 具备更多特性;
安装：npm i -g typescript
使用全局命令和局部命令的方式：
全局命令：直接写命令即可
ng xxx tscxxx
局部命令：脚手架生成的项目包 自带所有需要的命令 防止电脑旁本山没有安装命令一样使用
必须带npx 前缀
浏览器不支持ts文件,只识别html css js 需要转换 ts 为 js之后再运行
十二.传参
父子传参：vue中: 接收属性传参: props: ['name']
子父传参：
vue 关键词:$emit
做法分两步：
1.通过父子传参的方式,把父的方法传递给子
2.子通过$emit触发父传入子中的方法,方法的参数是子的信息
通过此方式把子信息传递到父组件中
掌控子元素 : 把变量和组件关联到一起;然后就可以利用变量 来操作组件并掌握组件的状态
vue中: <组件 ref="变量" /> 使用: this.refs.变量名 就是对应的组件
十三. 服务
vuex 相同, 进行全局状态管理,在多个组件分享状态
新的命令行：生成服务文件
ng generate service 服务名 //简写:ng g s 服务名
十四.网络请求
vue 中使用 axios发送网络请求
angular 使用自带的网络服务来发送网络请求
十五. ionic
vue 手机端UI组件库: mintUI/vantUI/uniApp...
ionic 基于angular 的UI组件库 https://ionicframework.com/
脚手架安装：npm i -g @ionic/cli
生成项目包：ionic start 包名 类型 //示例：ionic start ionicApp blank
类型的可选值:
* blank 空包, 最简单的
* tabs 带 标签导航器
* sidemenu 带侧边栏导航器
启动：到项目的根目录下, 即ionicApp目录下, 执行.
ionic serve //简写: ionic s
官方网站:
https://ionicframework.com/
组件库:
https://ionicframework.com/docs/components
标准写法：
插件：代码提示
按钮：
徽章：
图标：https://ionicons.com/
卡片：
栅格：
练习：新闻
弹出框：
输入框:
横向滚动：
