Angular前端编程框架的基础学习
中文学习网站为https://angular.cn,英文学习网站为https://angular.io。
Angular源码:https://github.com/angular/angular
Angular源码中关于指令的部分:https://github.com/angular/angular/tree/master/packages/common/src/directives
我的问题:
1.组件和组件类的区别?
2.DOM事件是什么概念?
3.模板和组件的区别?
答:模板(用户看到的)和组件(应用如何处理用户数据)之间的分离关注原则 the separation of concerns between the template (what the user sees) and the component (how the application processes user data).
4.事件绑定和属性绑定的区别?
5.端到端测试的程序怎么写?
6.在什么情况下需要组件交互?父组件和子组件。
基本的知识:
1. 创建新的Angular空间的命令是ng new 空间名,ng new
命令会提示你输入要在初始应用项目中包含哪些特性,请按 Enter 或 Return 键接受其默认值。
2. 启动应用服务器(serve the application),//cd 空间名 //ng serve --open。(The ng serve
command builds the app, starts the development server, watches the source files, and rebuilds the app as you make changes to those files.The --open
flag opens a browser to http://localhost:4200/
.)
3. 创建一个新的组件(component)的命令是 ng generate component 组件名,该命令还会把新的组件添加到 src/app/app.module.ts
文件中 @NgModule
的 declarations
列表中。
一个component的四个基本文件分别是
-
作为组件样式的 CSS 文件。
-
作为组件模板的 HTML 文件。
-
存放组件类的 TypeScript 文件。
-
组件类的测试文件。
4.在idea IDE中打开Angular Project时,需要在idea中配置node.js插件,参考链接http://www.jetbrains.com/help/idea/2016.3/node-js.html
Open the Settings / Preferences Dialog by pressing Ctrl+Alt+S or by choosing In the Node Interpreter field, specify the local Node.js interpreter to use. Choose the interpreter from the drop-down list or click and choose the interpreter in the dialog box that opens.The term local Node.js interpreter denotes a Node.js installation on your computer. The term remote Node.js interpreter denotes a Node.js installation on a remote host or in a virtual environment set up in a Vagrant instance.
5.用git命令定期commit项目,便于版本管理和版本回退。
Terminal中进入想要变成版本库的文件夹中,写
git init
想增加并提交文件夹中的全部内容,写
git add .
git commit -m "wrote a readme file" //-m
后面输入的是本次提交的说明
为了更好的保存项目开发内容,将项目推送到远程仓库,比如gitHub。参考资料https://www.liaoxuefeng.com/wiki/896043488029600/898732864121440
6. 让构造函数保持简单,只做初始化操作,比如把构造函数的参数赋值给属性。 构造函数不应该做任何事。 它当然不应该调用某个函数来向远端服务(比如真实的数据服务)发起 HTTP 请求。
7.端到端测试 ,用于确保所有的子组件都如预期般初始化并显示出来。E2E test that all children were instantiated and displayed as expected(component-interaction/e2e/src/app.e2e-spec.ts)
#####下面是学习记录#####
中文学习网站为https://angular.cn,英文学习网站为https://angular.io。
Angular源码:https://github.com/angular/angular
Angular源码中关于指令的部分:https://github.com/angular/angular/tree/master/packages/common/src/directives
1.[hero]="selectedHero"
是 Angular 的属性绑定语法。
这是一种单向数据绑定。从 HeroesComponent
的 selectedHero
属性绑定到目标元素的 hero
属性,并映射到了 HeroDetailComponent
的 hero
属性。
组件不应该直接获取或保存数据,它们不应该了解是否在展示假数据。 它们应该聚焦于展示数据,而把数据访问的职责委托给某个服务。
本节课,你将创建一个 HeroService
,应用中的所有类都可以使用它来获取英雄列表。 不要使用 new
来创建此服务,而要依靠 Angular 的依赖注入机制把它注入到 HeroesComponent
的构造函数中。
服务是在多个“互相不知道”的类之间共享信息的好办法。
3.监听Click事件
三步:添加click事件绑定,添加click事件处理器,修改详情模板。
当用户在主列表中点击一个英雄时,该组件应该在页面底部显示所选英雄的详情。监听英雄条目的点击事件,并更新英雄的详情。在html中绑定click事件
<li *ngFor="let hero of heroes" (click)="onSelect(hero)">(事件绑定语法)click
外面的圆括号会让 Angular 监听这个 <li>
元素的 click
事件。 当用户点击 <li>
时,Angular 就会执行表达式 onSelect(hero)
。onSelect(hero)在ts文件中的类class中写。
添加如下 onSelect()
方法,它会把模板中被点击的英雄赋值给组件的 selectedHero
属性。selectedHero: Hero; onSelect(hero: Hero): void { this.selectedHero = hero; }
最后在html中修改详情展示模板。
4.利用Master/Detail component主从组件
便于维护项目中的显示与组件的对应关系,不使主组件的html显示文件过于复杂,难以管理。
例子中,增加 HeroDetailComponent
,添加@Input hero属性,便于让外部的HeroesComponent
组件绑定到它。(HeroesComponent.html中)<app-hero-detail [hero]="selectedHero"></app-hero-detail>
[hero]="selectedHero"
是 Angular 的属性绑定语法。这是一种单向数据绑定。从 HeroesComponent
的 selectedHero
属性绑定到目标元素的 hero
属性,并映射到了 HeroDetailComponent
的 hero
属性。
现在,当用户在列表中点击某个英雄时,selectedHero
就改变了。 当 selectedHero
改变时,属性绑定会修改 HeroDetailComponent
的 hero
属性,HeroDetailComponent
就会显示这个新的英雄。
5.服务(Service)
组件不应该直接获取或保存数据,它们不应该了解是否在展示假数据。 它们应该聚焦于展示数据,而把数据访问的职责委托给某个服务。本节课,你将创建一个 HeroService
,应用中的所有类都可以使用它来获取英雄列表。 不要使用 new
来创建此服务,而要依靠 Angular 的依赖注入(dependency injection 详解网址https://angular.cn/guide/dependency-injection)机制把它注入到 HeroesComponent
的构造函数中。服务是在多个“互相不知道”的类之间共享信息的好办法。 你将创建一个 MessageService
,并且把它注入到两个地方:1.HeroService
中,它会使用该服务发送消息。2.MessagesComponent
中,它会显示其中的消息。
@Injectable 服务:@Injectable()
装饰器会接受该服务的元数据对象,就像 @Component()
对组件类的作用一样。
HeroService.getHeroes()
必须具有某种形式的异步函数签名。使用Observable对象。
6.DOM (Document Object Model)
7.调试
json
管道对调试绑定特别有用- Angular 的安全导航操作符 (
?.
) 是一种流畅而便利的方式,用来保护出现在属性路径中 null 和 undefined 值。 下例中,当currentHero
为空时,保护视图渲染器,让它免于失败。
The current hero's name is {{currentHero?.name}}
src/app/app.component.html
<p>The item's undeclared best by date is: {{$any(item).bestByDate}}</p>
$any()
转换函数可以和 this
联合使用,以便访问组件中未声明过的成员。
<p>The item's undeclared best by date is: {{$any(this).bestByDate}}</p>
$any()
转换函数可以用在绑定表达式中任何可以进行方法调用的地方。
- 每个宿主元素上只能有一个结构型指令。禁止多个结构型指令。 这种情况下有一个简单的解决方案:把
*ngIf
放在一个"容器"元素上,再包装进*ngFor
元素。 这个元素可以使用ng-container
,以免引入一个新的 HTML 层级。 <ng-container>
是一个由 Angular 解析器负责识别处理的语法元素。 它不是一个指令、组件、类或接口,更像是 JavaScript 中if
块中的花括号。Angular 的<ng-container>
是一个分组元素,但它不会污染样式或元素布局,因为 Angular 压根不会把它放进 DOM 中。- 自定义管道时,别忘了 `DECLARATIONS` 数组。你必须手动注册自定义管道。如果忘了,Angular 就会报告一个错误。 在前一个例子中你没有把
DatePipe
列进去,这是因为 Angular 所有的内置管道都已经预注册过了。 - 虽然你没有得到期望的行为,但 Angular 也没有出错。 这里只是用了另一种变更检测算法 —— 它会忽略对列表及其子项所做的任何更改。
this.heroes.push(hero);
当你往
heroes
数组中添加一个新的英雄时,这个数组的引用并没有改变。它还是那个数组。而引用却是 Angular 所关心的一切。 在它看来,这是同一个数组,没有变化,也就不需要更新显示。要修复它,就要创建一个新数组,把这个英雄追加进去,并把它赋给heroes
。 这次,Angular 检测到数组的引用变化了。它执行了这个管道,并使用这个新数组更新显示,这次它就包括新的飞行英雄了。 -
借助 JSON 管道进行调试。JsonPipe为你诊断数据绑定的某些神秘错误或为做进一步绑定而探查数据时,提供了一个简单途径。
-
Angular 开发组和一些有经验的 Angular 开发者强烈建议你:把你的过滤和排序逻辑挪进组件本身。 组件可以对外暴露一个
filteredHeroes
或sortedHeroes
属性,这样它就获得控制权,以决定要用什么频度去执行其它辅助逻辑。 你原本准备实现为管道,并在整个应用中共享的那些功能,都能被改写为一个过滤/排序的服务,并注入到组件中。 -
如果表单是应用程序的核心部分,那么可伸缩性就非常重要。能跨组件复用的表单模型是至关重要的。
-
响应式表单通过提供对底层 API 的访问和对表单模型的同步访问,让创建大型表单更轻松。
-
模板驱动表单专注于简单的场景,它不可重用、对底层 API 进行抽象,而且对表单模型的访问是异步的。 在测试过程中,模板驱动表单的抽象也会参与测试。而测试响应式表单需要更少的准备代码,并且当测试期间修改和验证表单模型与数据模型时,不依赖变更检测周期。
-