基本概念
Angular 由TypeScript 书写。Angular核心功能、可选功能作为TypeScript类库实现。
- 基本构造块： NgModule------------提供编译上下文环境
- Angular应用由一组 NgModule定义
- Angular应用至少有一个根模块，通常还有特性模块
- 模块、组件、服务都是使用装饰器的类
模块
NgModule为组件集声明编译上下文环境。NgModule将组件和组件使用的服务等关联起来，形成功能单元。
根模块(AppModule),提供启动应用的引导机制。
- NgModule可以相互导入
- NgModule可以导出功其他的NgModule使用
- 功能单元复用---复用性设计
- NgModule是按需加载，减少应用启动时需要加载代码的代码体积
组件
Angular应用至少有一个组件，即根组件， 根组件连接组件树和DOM。
- 组件定义一个类
- 组件中包含应用的数据和应用的逻辑
- 组件与HTML 模板关联， HTML模板定义了组件的视图
- 使用@Component() 装饰器，表示紧跟着装饰器的那个类是一个组件
- @Component() 装饰器，提供模板和组件专属的元数据
装饰器是一些用于修饰JavaScript类的函数。
@Component({
selector: 'app-heros', // 组件的选择器（CSS 元素选择器）
templateUrl: './heros.component.html', // 组件模板文件的位置。
styleUrls: ['./heros.component.css'] // 组件私有 CSS 样式表文件的位置
})
模板、指令、数据绑定
模板组合了HTML 和 Angular标记。Angular标记在HTML元素展示之前，修改HTML。
模板中的Angular指令提供程序逻辑。
Angular标记中的绑定标记将数据绑定到DOM。
- 数据绑定
- 事件绑定： (click)， （input）等响应用户的点击和输入事件
- 属性绑定: {{}} ，<a [hero]="selectedHero">, 绑定数据到DOM
- HTML和DOM渲染之前，Angular根据应用数据和逻辑运行模板中的指令，解析绑定到DOM的表达式，修改HTML元素和DOM。
- 模板可以使用管道转换要显示的数据。{{today | date}}、 {{title | uppercase}}等，使用管道格式化页面数据的展示
服务
- 服务：与特定的视图无关，封装跨组件共享的数据或逻辑
- 组件把诸如从服务器获取数据、验证用户数据、日志输出等委托给各种服务处理
- 服务使用@Injectable()装饰器, 服务类紧跟在装饰器之后
@Injectable({
providedIn: 'root' // 用根注入器将你的服务注册成为提供者
})
路由
Angular的Router模块提供的服务：定义不同状态之间导航的路径，定义不同视图层次之间导航的路径。
路由把类似URL的路径映射到视图，不是映射到页面。
路由实现了基于浏览器的导航约定：
- 地址栏输入URL，导航到相应的页面
- 页面中点击链接，导航到新的页面
- 点击前进、后退，在浏览历史中向前或向后
依赖注入
把服务注入到组件中，让组件类可以访问服务类。
依赖不一定是服务，可能是函数或值。
