angularjs、angular

AngularJS核心概念与机制解析,

原创已于 2024-01-17 09:24:30 修改 · 104 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2023-05-14 22:09:55 首次发布

本文介绍了AngularJS的应用组成，包括View、Model、Controller和scope的概念，以及Angular与Vue的差异，如数据绑定和事件处理。还涉及到Angular的依赖注入机制，如何创建和注册服务。此外，讨论了AngularCLI的命令，如创建新应用和生成组件，以及路由和NgModel在表单中的作用。最后提到了HttpClient和响应拦截器的应用。

AngularJS 应用组成如下：

View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。

scope 是模型。

scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。

angular:

angular与vue的区别。
1. []为父组件传数据到子组件的Input, 对应vue的`:`父组件传值到子组件的prop
2. ()为子组件Output emit发送事件到父组件，对应vue的@子组件emit父组件

3. 双向绑定[()], 为了使双向数据绑定有效，@Output() 属性的名字必须遵循 inputChange 模式，其中 input 是相应 @Input() 属性的名字。比如，如果 @Input() 属性为 size，则 @Output() 属性必须为 sizeChange。表单元素进行双向绑定需要使用 NgModel
4. ng-content投射也就是插槽，对应vue的slot

angular依赖注入，如service注入到其他模块

假设有一个名为 HeroService 的类需要用作组件中的依赖项。

第一步是添加 @Injectable 装饰器以表明此类可以被注入。

下一步是提供它，以便让其在 DI 中可用。可以在多种地方提供依赖项：

在组件级别，使用 @Component 装饰器的 providers 字段。

在 NgModule 级别，要使用 @NgModule 装饰器的 providers 字段

在应用程序根级别，允许将其注入应用程序中的其他类。

ERROR Error: Default pack is not registered. 指定包未注册到app Module

gngular cli:

ng new app --routing true --default // 创建应用并带路由的

ng generate m routing-test --routing true // 创建module并带路由

ng generate c routing-test // 创建component

路由&导航：

tpl中导航使用 <a routerLink=""></a>为非刷新链接，跳转子路由。子页面显示在父tpl的router-outlet

NgModel

根据领域对象创建一个 FormControl 实例，并把它绑定到一个表单控件元素上。

关于第三方组件：

这些函数是打包时，angular cli 自动添加的。有时间可以研究下打包和发布第三方组件的原理。

i0.ɵɵngDeclareFactory：Compiles a partial pipe declaration object into a full pipe definition object.
i0.ɵɵngDeclareNgModule：Compiles a partial NgModule declaration object into a full NgModule definition object.

HttpClient拦截器的响应拦截：