Angular 学习笔记

date

Sep 2, 2020

slug

angular-learn-notes

status

Published

`Angular` 中引入 `Service` 层概念 (依赖注入)

💡

官方：组件不应该直接获取或保存数据，它们不应该了解是否在展示假数据。它们应该聚焦于展示数据，而把数据访问的职责委托给某个服务。

Angular 中的依赖注入

比较于前端应用中的状态管理，Vue 中有 Vuex 进行管理，React 可以利用 Redux 和 Mobx

Service 层可以进行全局依赖注入（@Injectable({ providedIn: 'root' })）或者为单个Moudel (@Injectable({ providedIn: UserModule })) 注入

不同于 Vue 和 React 中一切皆组件的概念，在 Angular 中更为注重 Moudel 形式，Moudel 可以包含组件、服务、指定、过滤器等等

Service: 本质是一个类，在服务类中封装的是经常用到的数据和方法。

有一些内置的服务，我们可以进行二次封装会用 $http $log $filter $Timeout 和 $interval

`Angular` 中的生命周期

对Angular中的生命周期钩子的理解 - 掘金

简单点来说生命周期钩子就是Angular中一个组件从被创建当销毁期间的一些有意义的关键时刻.这些关键时刻在Angular中被Angular核心模块@angular/core暴露出来,赋予了我们在它们发生时采取行动的能力. 其中:ngOnInit()、ngAfterContent…

https://juejin.cn/post/6844903489169031182

管道转换数据

管道是用来对数据进行筛选、过滤、格式化

Angular - 用管道转换数据

`Observable.subscribe()`概念

异步的概念？

与 Promise 的区别，对比 Async await

父子组件传值用

指令

在 Angular 中，通过扩展 HTML 的属性，比如：

Vue 和 Angular 类似，React 是通过 JSX 的形式来进行操作

还可以进行自定义指令

作用域

每个 controller 下的 $scope 产生不同的作用域

根作用域：ng-app 所在的标签内

如何开发

Angular中开发模式：

在Angular开发时，八大组成部分：

练习demo

Angular Getting Started

https://itxcc-ng-shop.web.app/

AngularTourOfHeroes

https://angular-tour-of-heroes-mocha.vercel.app/

Firebase配置：https://console.firebase.google.com/project/web-app-5d739/settings/general/web:YzRlNzA5NGQtMDkzNi00MDhlLTk2NWQtMjk3NWY5MTI4NGI0

Q&A

部署 `Firebase` 会出的问题

Firebase login 连接失败的问题：

原因应该是开了代理的问题，但不开代理又不能连谷歌，所以把电脑环境和终端环境都设置为全局代理

环境：Mac电脑，使用 shadowsocksX-NG-R8，开启全局代理

或者修改 .zshrc

vi ~/.zshrc ，端口号是 shadowsocksX-NG-R8 中 HTTP 代理的端口号

运行

参考链接

Angular - Angular 文档简介

Angular 学习资源清单

Updated Aug 15, 2023

前端知识点总结——Angular

前端知识点总结——Angular 一、Angular概述基于命令行的开发方式？ {代码...} angular.cn 中文angular.io 正式官网angular.cn/guide/styleguide 风格指南 1、...

https://segmentfault.com/a/1190000014175073

Angular 学习笔记

Angular 中引入 Service 层概念 (依赖注入)

Angular 中的生命周期