angular获取路由参数_Angular 架构概览

最新推荐文章于 2023-11-03 15:31:15 发布

weixin_39875503

最新推荐文章于 2023-11-03 15:31:15 发布

阅读量280

点赞数

文章标签： angular获取路由参数

Angular 是一个用 HTML 和 TypeScript 构建客户端应用的平台与框架，本身就是用 TypeScript 写成的。它将核心功能和可选功能作为一组 TypeScript 库进行实现，你可以把它们导入到你的应用中

NgModule

Angular 的基本构造块是 NgModule，它为组件提供了编译的上下文环境，NgModule 会把相关的代码收集到一些功能集中。Angular 应用就是由一组 NgModule 定义出的，一个应用至少会有一个用于引导(bootstrap)应用的根模块，通常还会有很多特性模块。

组件定义视图：视图是一组可见的屏幕元素，Angular 可以根据你的程序逻辑和数据来选择和修改它们，每个应用至少有一个根组件。
组件使用服务：服务会提供那些和视图不直接相关的功能。服务可以注入到组件中，让代码更加模块化、可服用，而且高效。
组件类的元数据将组件和一个用来定义视图的模板关联起来。模板把普通的 HTML 和指令与绑定标记（markup） 组合起来，Angular 就可以呈现 HTML 之前先修改这些HTML。
服务的元数据提供了一些信息，Angular 要用这些信息来让组件可以通过依赖注入（DI） 使用该服务

应用的组件通常会定义很多视图，并进行分级组织。Angular 提供 Router 服务来帮助定义视图之间的导航路径。

模块

Angular 定义了 NgModule，它和 JavaScript（ES2015）的模块不同而且有一定的互补性。 NgModule 为一个组件集声明了编译的上下文环境，它专注于某个应用领域、某个工作流或一组紧密相关的能力。 NgModule 可以将其组件和一组相关代码（如服务）关联起来，形成功能单元。

每个 Angular 应用都有一个根模块，通常命名为 AppModule。根模块提供了用来启动应用的引导机制。一个应用通常会包含很多功能模块。

像 JavaScript 模块一样，NgModule 也可以从其它 NgModule 中导入功能，并允许导出它们自己的功能供其它 NgModule 使用。比如，要在你的应用中使用路由器（Router）服务，就要导入 Router 这个 NgModule。

把你的代码组织成一些清晰的功能模块，可以帮助管理复杂应用的开发工作并实现可复用性设计。另外，这项技术还能让你获得惰性加载（也就是按需加载模块）的优点，以尽可能减小启动时需要加载的代码体积。

组件

每个 Angular 应用都至少有一个组件，也就是根组件，它会把组件树和页面中的 DOM 连接起来。每个组件都会定义一个类，其中包含应用的数据和逻辑，并与一个 HTML 模板相关联，该模板定义了一个供目标环境下显示的视图。

@Component() 装饰器表明紧随它的那个类是一个组件，并提供模板和该组件专属的元数据。

装饰器是一些用于修饰 JavaScript 类的函数。Angular 定义了许多装饰器，这些装饰器会把一些特定种类的元数据 附加到类上，以便 Angular 了解这些这些类的含义以及该如何使用它们。

不容易懂装饰器，这是装饰器的相关代码，希望能够辅助理解：

function superHero(isSuperhero) {
  return function(target) {
    target.isSuperhero = isSuperhero
  }
}

@superhero(true)
class MySuperheroClass(){}
console.log(MySuperheroClass.isSuperhero) // true

@superhero(false)
class MySuperheroClass(){}
console.log(MySuperheroClass.isSuperhero) // false

在angular中：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Tour of Heroes';
}

模板、指令和数据绑定

模板会把 HTML 和 Angular 的标记（markup）组合起来，这些标记可以在 HTML 元素显示出来之前修改它们。模板中的指令会提供程序逻辑，而绑定标记会把你应用中的数据和DOM 连接在一起。有两种类型的数据绑定：

事件绑定：响应用户输入，并更新应用的数据
属性绑定：从应用数据中计算出来的值插入到 HTML 中

在视图显示出来之前，Angular 会先根据你的应用数据和逻辑来运行模板中的指令并解析表达式，以修改 HTML 元素和 DOM。Angular 支持双向绑定，这意味着 DOM中发生的变化同样反映到程序的数据。

服务与依赖注入

对于与特定视图无关并希望组建共享的数据或者逻辑，可以创建服务类，服务类的定义通常紧跟在@Injectable()装饰器之后。该装饰器提供的元数据可以让你的服务作为依赖被注入到客户组件中。
**依赖注入（或DI）**让你可以保持组件类的精简和高效，有了DI,组件就不用从服务器获取数据、验证用户输入或者直接把日志写在控制台，而是会把这些任务委托给服务。