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 进行抽象，而且对表单模型的访问是异步的。 在测试过程中，模板驱动表单的抽象也会参与测试。而测试响应式表单需要更少的准备代码，并且当测试期间修改和验证表单模型与数据模型时，不依赖变更检测周期。
-
浙公网安备 33010602011771号