Angular6.x - 1. 对官方示例项目Tour of Heroes的总结

架构

1. 通过app.module.ts来进行个功能部分的管理和整合
2. app.component.ts为整个应用的根组件，标签名为app-root，其他组件一般应该是该组件的子组件
3. 使用Module来进行系统内部的一些操作，如示例中给出的路由功能，添加文件app-routing.module.ts，使用标签router-outlet来展示待路由的内容
4. 使用Component来向用户展示数据，并获取用户输入
5. 使用Service进行依赖注入，并可作为组件之间的信息传递手段
6. 使用Rxjs进行异步数据操作

指令和装饰器

1. 通过{{ variableName }}向HTML中单向绑定数据，可用在单独区域或属性值内。双花括号内可以通过管道进行内置或自定义的格式处理，如大小写转换等
2. 通过[(ngModel)]="variableName"进行双向数据绑定，需要先引入FormsModule
3. 重复指令
4. ...
5. 条件指令*ngIf
6. 事件绑定(click)="onSelect(hero)"
7. 属性值绑定[class.selected]="hero === selectedHero"
8. 模板引用#attr，可以在HTML模板中用于获取元元素
9. 路由指令routerLink
10. 父组件向子组件传值，子组件通过@Input()接收
11. 服务通过@Injectable()配置，在需要类的构造函数中填写参数进行依赖注入，非常类似于aspNetCoreMVC

总结

1. 和直接大概算用过一下的Vue2.x相比，Angular的集成程度高了好几倍……起码不用CLi手动创一个组件出来应该是要出错的，更接近一个MVC框架
2. Angular的数据异步通信直接集成了Rxjs，占据了学习成本的一个大头
3. 服务和DI还好，毕竟之前看了一点aspNetCore，对完整的架构还有一点理解
4. module暂时确实不太清楚
5. 急需一些练习

官方的架构概览部分

架构

• NgModules是构建程序的基本区块，为Components提供编译上下文。Angular应用由Modules组成，至少有一个用于引导的根模块，并有许多功能模块。
• Components定义视图
• Services提供不直接与视图管理的特定功能，采用依赖注入模式
• 使用Decorators来标记Components和Services的元数据
• Component类的元数据关联模板和样式
• Service类的元数据提供了Angular所需信息
• Angular提供了路由服务以在组件之间切换

模块

NgModule声明了编译上下文，专用于划分出的功能单元。
根模块AppModule提供应用程序的引导机制
NgModule可以从其他模块导入功能
将代码组织到不同的功能模块有助于管理复杂应用程序的开发及可重用性的设计，也允许利用lazy-loading

组件

@Component()将类标识为组件，并提供模版和相关的元数据。

模版，指令和数据绑定

模版将HTML和Angular标记结合，在发送HTML前更改内容。
模版指令提供程序逻辑。
绑定将应用数据和DOM连接，包括事件绑定和属性绑定。
模版可以通过管道来格式化显示的值，如日期、货币等。

服务和依赖注入

对于与特定视图无关的数据，以及需要跨组件共享的数据或逻辑，可以创建服务类。
依赖注入可以保持组件类的简洁。组件不直接从服务器获取数据、验证用户输入、或登录到控制台，而是委托给服务。

路由

路由器将类似URL的路径映射到视图而不是页面。当用户执行操作（例如单击链接）以在浏览器中加载新页面时，路由器会拦截浏览器的行为，并显示或隐藏视图层次结构。