Angular入门笔记

小菜牛_
229 阅读9分钟
  1. 指令：
    • 结构型指令：*ngFor、*ngIf：可用于添加或删除元素，这会提高性能，特别是在一些大的项目中有条件地包含或移除一大堆带有数据绑定的HTML ngFor：ngFor指令上下文中的index属性在每次迭代中返回该条目的从零开始的索引。可以在模板输入变量中捕获index，并在模板中使用它。
    • 属性型指令：ngModel、ngStyle、ngClass、ngSwitch
  2. 插值语法：{{}}
    • 表达式的上下文可以是模板变量、指令的上下文变量、组件的成员，以模板变量为最优先，其次是指令的上下文变量，最后是组件成员
    • 表达式可以调用宿主组件中的方法
    • 模板表达式：不能使用具有或可能引发副作用的JS表达式
    • 应用程序和业务逻辑限制在组件中，这样才更容易开发和测试
    • Angualr会在每个变更检测周期后执行模板表达式，变更检测周期会被多种异步活动（Promise解析，HTTP结果，定时器事件，按键或鼠标移动）触发
  3. 属性绑定（是一种单向数据绑定）：[] 一次性字符串初始化应该省略[] 模板引用变量：#heroInput，对模板中DOM元素的引用。模板引用变量通常是对模板中DOM元素的引用，它还可以引用指令（包含组件）、元素、TemplateRef或Web Component
  • 属性绑定和插值绑定：当元素属性为非字符串的数据时，只能使用属性绑定

  1. 事件绑定：(click)="share()"

    • A组件发出一个事件:<button (click)="notify.emit()">Notify Me
    • 在事件绑定中，Angular会为目标事件设置事件处理器。当事情发生时，这个处理器会执行模板语句。典型的模板语句通常涉及到响应事件执行动作的接收器，如从HTML控件中取值，并存入模型。绑定会通过名叫$event的事件对象传递关于此事件的信息（包括数据值）
    • 指令使用Angular EventEmmitter来触发自定义事件。指令创建一个EventEmitter实例，并把它作为属性暴露出来。指令调用EventEmitter.emit(playload)来触发事件，可以传入任何东西作为消息载荷。父指令（父组件）通过绑定这个属性来监听事件，并通过$event对象来访问载荷。

  2. Angular组件：

    • 组件类：处理数据和功能
    • HTML模板：决定UI
    • 组件专属样式：定义外观

  3. [routerLink]用于控制链接元素

  4. 服务：服务是一个类的实例，它可以借助Angular的依赖注入系统来让应用中的任何一个部件都使用它，可以在应用中的任何一个部件之间共享数据。

    • 服务存在的价值：Angular将组件和服务区分开，以提高模块性和复用性。通过把组件中和视图有关的功能与其他类型的处理分离开，可以使得组件类更精简、高效。
    • 从服务器获取数据、验证用户输入或直接往控制台中写日志等处理任务委托给服务，从而被任何组件使用。

  5. async管道：从数据流中返回最新值，并在所属组件的生命周期内持续返回。当Angular销毁该组件时，async管道会自动停止。

  6. 搭建环境：

    • 安装Angular CLI：npm install -g @angular/cli
    • 创建工作空间：ng new my-app
    • 初始应用：cd my-app -> ng service --open|-o
    • 创建文件：ng g component/service/module/class ng g module app-routing --flat[把文件置于src/app下] --module=app[注册到appModule的imports数组中]

  7. |：管道可用于格式化字符串、日期、金额和其他显示数据 ?：安全导航运算符，对属性路径中出现null或undefined值进行保护

  8. 双向数据绑定：[(ngModel)]="hero.name"，意味着DOM中发生的变化（如用户的选择）同样会反应回程序数据中

    • 双向绑定会做两件事：1、设置特定的元素属性；2、监听元素的变更事件
    • 双向绑定语法实际上是属性绑定和事件绑定的语法糖
    • ngModel输入属性会设置该元素的值，并通过ngModelChange的输出属性来监听元素值的变化

  9. CSS类绑定机制：[class.selected]="hero === selectedHero"

  10. 可观察对象Observable

  11. 路由的作用：

    • 在地址栏输入一个URL，导航到相应的页面
    • 点击页面上的链接，跳转到相应的页面
    • 点击浏览器的前进/后退按钮，在浏览器的历史中前后导航
    • 路由中的data属性是存放与该特定路由关联的任意数据的地方，每个激活的路由都可以访问data属性。可以借助data来存储页面标题，面包屑文本和其他只读静态数据等项目。可以尝试使用解析器守卫来检索动态数据。 路由器：会把类似URL的路径映射到视图而不是页面。当用户执行一个动作时（如点击链接），本应该在浏览器中加载一个新页面，但是路由器拦截了浏览器的这个行为，并显示或隐藏一个视图层次结构 订阅路由参数

    this.route.paramMap.subscribe(params => { this.product = products[+params.get('productId')]; });

    Route属性：

    • path：用来匹配浏览器地址栏中URL的字符串
    • component：导航到该路由时，路由器应该创建的组件 路由出口：告诉路由器要在哪里显示路由的视图

    // Location服务在浏览器的历史栈中后退一步 this.location.back()

  12. MVC:模型-视图-控制器；MVVM：模型-视图-模型

  13. 区分DOM的property和HTML的attribute

  14. @Input装饰器：允许将数据从父组件输入到子组件 @Output装饰器：允许子组件向父组件发出数据：通常将@Output()属性初始化为Angular EventEmitter，然后子组件必须引发一个事件，以便父组件知道发生了某些变化并将值作为事件从组建中向外流出：

    • @Output（）——一个装饰器函数，它将该属性标记为把数据从子级传递到父级的一种方式；
    • EventEmitter()——事件发射器，可发射任意类型的数据；
    • 示例： 父组件html模板中引用<app-item-output (newItemEvent)="addItem(event)"></app-item-output>，事件绑定(newItemEvennt)="addItemEvent"告诉angular将子组件的newItemEvent事件链接到父组件中的方法addItem()， 以及将子组件通知父组件的事件作为addItem()的参数，event包含用户在子模板UI中键入到中的数据

  15. 通讯a：

    • 直接的父子关系，父组件直接访问子组件的public属性和方法
    • 直接的父子关系，借助@Input和@Output进行通讯
    • 没有直接关系，借助Service单例进行通讯
    • 利用cookie和localStorage进行通讯
    • 利用Session进行通讯

  16. 表单：Angular响应式表单有两个部分：组件中用于存储和管理表单的对象，以及表单在模板中的可视化

  17. 模块：NgModule为组件声明了编译的上下文环境，将其组件和一组相关代码（如服务）关联起来，形成功能单元

    • 根模块：AppModule，提供用来启动应用的引导机制
    • @NgModule()装饰器的属性：
      • declarations（可声明对象表）：属于本NgModule的组件、指令、管道；
      • imports（导入表）：本模块中的组件模板所需的类的模块，如BrowserModule；
      • exports（导出表）：能在其他模块的组件模板中使用的可声明对象的子集
      • providers：向全局服务中贡献服务的创建器，这些服务能被本应用的任何部分使用（首选方式：在组件级别指定服务提供商）
      • bootstrap：应用的主视图，是应用中所有其他视图的宿主，Angular创建它并插入index.html宿主页面（只有根模块才设置这个属性）
    • 所有惰性加载的模块都是路由特性模块。惰性加载的路由特性模块不应该被任何模块导入，否则就会被急性加载，破坏了惰性加载的设计用途。
    • 服务既可以在根注入器中被提供，也可以在特定的模块中。在模块中提供服务是首选方法，因为当没有人注入它时，该服务就可以被摇树优化掉。如果没办法指定在哪个模块中提供这个服务，也可以在module.ts中为该服务声明一个提供者。
    • ng g m orders --route orders --module app.module
    • Chrome浏览器中通过开发者工作中的NetWork，确认模块是否是惰性加载。惰性加载的模块的chunk文件会出现且仅出现一次。
    • 预加载。

  18. 元数据：即Angular的应用所需要的文件和库

  19. 构造函数：保持构造函数的简洁（在构造函数中初始化变量，不是最佳实践，改在ngOnInit生命周期中执行）

  20. 所有标准的DOM事件对象都有一个target属性，通过target.value可返回该元素的当前内容

  21. Http：

    • httpClient的subscribe中无回调函数也需要订阅，调用subscribe()方法会执行可观察对象，这时才会真正发起请求。

  22. 摇树优化：摇树优化指一个编译器选项，意思是把应用中未引用过的代码从最终生成的包中移除。如果提供者是可摇树优化的，Angular编译器就会从最终的输出内容中移除应用代码中从未用过的服务。这会显著减小打包体积。

    • 理想情况下，如果应用没有注入服务，它就不应该包含在最终输出中。 不过，Angular 要能在构建期间识别出该服务是否需要。 由于还可能用 injector.get(Service) 的形式直接注入服务，所以 Angular 无法准确识别出代码中可能发生此注入的全部位置，因此为保险起见，只能把服务包含在注入器中。 因此，在 NgModule 或 组件级别提供的服务是无法被摇树优化掉的。

  23. 生命周期顺序

    • OnChanges、DoCheck、AfterContentChecked和AfterViewChecked钩子会被多次调用，因此钩子中的逻辑需要尽可能的精简
    • OnDestory钩子可以用来释放那些不会被垃圾收集器自动回收的各类资源，如取消那么对可观察对象和DOM事件的订阅、停止定时器、注销该指令曾注册到的全局服务或应用服务器中的各种回调函数。
avatar
文章
阅读
粉丝