Angular介绍 |
您所在的位置:网站首页 › angular历史页签 › Angular介绍 |
1. 概述
Angular 是一个使用 HTML、CSS、TypeScript 构建客户端应用的框架,用来构建单页应用程序。 Angular 是一个重量级的框架,内部集成了大量开箱即用的功能模块。 Angular 为大型应用开发而设计,提供了干净且松耦合的代码组织方式,使应用程序整洁更易于维护。 Angular 中文网 2. 架构预览Angular 应用是由一个个模块组成的,此模块指的不是ESModule,而是 NgModule 即 Angular 模块。 NgModule 是一组相关功能的集合,专注于某个应用领域,可以将组件和一组相关代码关联起来,是应用组织代码结构的一种方式。 在 Angular 应用中至少要有一个根模块,用于启动应用程序。 NgModule 可以从其它 NgModule 中导入功能,前提是目标 NgModule 导出了该功能。 NgModule 是由 NgModule 装饰器函数装饰的类。 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; @NgModule({ imports: [ BrowserModule ] }) export class AppModule { } 2.2 组件组件用来描述用户界面,它由三部分组成,组件类、组件模板、组件样式,它们可以被集成在组件类文件中,也可以是三个不同的文件。 组件类用来编写和组件直接相关的界面逻辑,在组件类中要关联该组件的组件模板和组件样式。 组件模板用来编写组件的 HTML 结构,通过数据绑定标记将应用中数据和 DOM 进行关联。 组件样式用来编写组件的组件的外观,组件样式可以采用 CSS、LESS、SCSS、Stylus 在 Angular 应用中至少要有一个根组件,用于应用程序的启动。 组件类是由 Component 装饰器函数装饰的类。 import { Component } from "@angular/core" @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"] }) export class AppComponent { title = "angular-test" }NgModule 为组件提供了编译的上下文环境。 import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], bootstrap: [AppComponent] }) export class AppModule { } 2.3 服务服务用于放置和特定组件无关并希望跨组件共享的数据或逻辑。 服务出现的目的在于解耦组件类中的代码,是组件类中的代码干净整洁。 服务是由 Injectable 装饰器装饰的类。 import { Injectable } from '@angular/core'; @Injectable({}) export class AppService { }在使用服务时不需要在组件类中通过 new 的方式创建服务实例对象获取服务中提供的方法,以下写法错误,切记切记!!! import { AppService } from "./AppService" export class AppComponent { let appService = new AppService() }服务的实例对象由 Angular 框架中内置的依赖注入系统创建和维护。服务是依赖需要被注入到组件中。 在组件中需要通过 constructor 构造函数的参数来获取服务的实例对象。 涉及参数就需要考虑参数的顺序问题,因为在 Angular应用中会有很多服务,一个组件又不可能会使用到所有服务,如果组件要使用到最后一个服务实例对象,难道要将前面的所有参数都写上吗 ? 这显然不合理。 在组件中获取服务实例对象要结合 TypeScript 类型,写法如下。 import { AppService } from "./AppService" export class AppComponent { constructor ( private appService: AppService ) {} }Angular 会根据你指定的服务的类型来传递你想要使用的服务实例对象,这样就解决了参数的顺序问题。 在 Angular 中服务被设计为单例模式,这也正是为什么服务可以被用来在组件之间共享数据和逻辑的原因。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |