zoukankan      html  css  js  c++  java
  • Angularv4入门篇1

    国庆时按照官网的tutorial写了遍官方示例,一知半解,不明白angular的服务的服务为何要单独抽离出来、angular应用是如何启用的。近期打算看下angular的文档部分,然后梳理遍以理解angular的架构思想。

    下面是一些需要明确的关键概念:

    • angular:编写客户端应用的前端框架,官方推荐用angular/cli脚手架来进行开发,并且最新的angular版本使用ts语言。
    • 组件(component):负责控制屏幕一小块区域,也可以叫做视图(view)。
    • 模块(module): 每个 Angular 应用至少有一个模块(根模块),习惯上命名为AppModule。根模块在一些小型应用中可能是唯一的模块,大多数应用会有很多特性模块,每个模块都是一个内聚的代码块专注于某个应用领域、工作流或紧密相关的功能。
    • 模板: 组件通过模板来定义视图,模板以html的模式告诉angular如何渲染组件。与标准html不同的是,模板使用angular的模板语法,因此还能使用其他元素如*ngFor<my-component>等。
    • 元数据(metadata): 元数据告诉angular如何处理一个类。使用装饰器如@Component@Injectable@Input@Output添加元数据来指导angular的行为。比如export class MyComponent implements OnInit{} 是一个js的原生类,需要使用@Component(configObj)附加元数据来修饰这个类,这会将之标记成angular的组件。
    • 数据绑定(data binding): mvvm框架的核心功能。数据的变动会使UI更新,用户交互行为会修改数据,这使得创建应用程序的逻辑更为清楚。
    • 指令(directive):当angular渲染组件时,angular会根据指令提供的操作对dom进行转换。
    • 服务(service): 一般是一个类,具有专注、明确的用途。它应该做一个特定的事情,并把它做好,比如:日志服务、服务数据、消息总线等。
    • 依赖注入(Dependency injection):“依赖注入”是提供类的新实例的一种方式,还负责处理好类所需的全部依赖。大多数依赖都是服务。 Angular 使用依赖注入来提供新组件以及组件所需的服务。

    angular的架构设计

    这是angular的架构图。 ![架构图](https://files.cnblogs.com/files/benymor/angularmap.gif) angular用组件模块(Module Component)来构成应用程序,并向组件注入服务模块(Module Service)来向模块组件添加应用的逻辑部分,最终使用模块打包器来打包成最终的应用程序。组件模块的命名一般为```组件.component.ts```。 一般用模板(Template)来写页面部分,在脚手架中是使用扩展的语法来写html文件,模板名为```组件名.component.ts```,模板中可以写angular的指令(directive),并且可以绑定组件模块中的数据(属性绑定、事件绑定等)。 通过向组件注入(inject)服务,可让组件具有各类功能。 angular应用程序按组件来编写应用程序页面,页面的一小块区域就是一个组件,并且一般会把css与模板抽离成单独的文件。比如有一个分页组件,那么在```page-select```文件夹下会有```page-elect.component.ts```,```page-elect.component.html```,```page-elect.component.css```这么三个文件。写组件模块化意味着页面且的解耦,便于维护。 在所有页面组件都编写完成后,angular可以从引导根模块(一般命名为AppModule)来启动应用。

    模块

    angular是模块化的,angular有自己的模块系统NgModules,angular中的模块都是带有```@NgModule```装饰器的类,装饰器用来把元数据附加到类上。模块一般都是专注于某个应用领域、某一工作流、或者由一系列功能相近的功能构成的。简单根模块示例: ``` import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; @NgModule({ imports: [ BrowserModule,FormrModule,HttpModule,ApproutingModule ], providers: [ Logger,SqlServer,CalcServer ], declarations: [ AppComponent ], exports: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } ```
    • declarations - 声明本模块中拥有的视图类。Angular 有三种视图类:组件、指令和管道。程序编写的所有页面布局组件都需要在这里声明。
    • bootstrap - 指定应用的主视图(称为根组件),它是其他视图的宿主。只有根模块才能设置bootstrap属性。
    • providers 与服务(service)有关的类,它会在应用程序的其他部分都可访问。
    • imports 其他一些模块,它们能被declarations中的组件模板所使用。
    • exports 它是其他declarations的子集,对其他模块的组件模板可见且能使用。

    需要注意的是,angular的模块与js的模块系统完全不同且无关。不过在angular中它们是互补的。

    另外,angular提供了一组JS模块,可以把它们当作库模块。

    组件

    组件负责控制屏幕一小块区域,也可以叫做视图(view)。
    组件主要控制页面UI,创建一个angular组件需要从angular核心模块(@angular/clore)中引入component修改器,然后用它来修饰一个JS类,这样auglar就会知道这是一个组件。
    简单示例:

    @Component({
    
    selector : 'mycomponent',
    
    template : '<h2>测试</h2>',
    
    directives : [ComponentDetails]
    
    })
    
    export class TestComponent{...}
    

    @Component中的参数是这个组件的配置信息,比如:

    • template 模板,一般是用反引号`括起来的字符串。
    • templateUrl 模板的url,把一个文件当作该组件的模板。templateUrltemplate并与本质区别,但显然如果模板代码较多应使用templateUrl
    • selector 选择器,父组件使用该组件需要使用该选择器的中线命名法(dash-case),比如这个示例就是<my-component></my-component>。当页面发现一个<my-component> 元素时,就会创建一个该组件TestComponent的实例,然后将其渲染到<my-component>标记处。
    • directives组件用到的指令

    元数据

    比如```@Component```装饰器就是通过给一个js类附加相应的元数据来让angular知道它是一个组件。

    数据绑定

    MVVM框架的一大优点。想象Jquery时代是如何手动push和pull数据的。如果有多种途径可以改变某个值,那么数据的变动就会变得混乱且不方便跟踪。
    数据绑定有三个方向: 绑定到 DOM 、绑定自 DOM 以及双向绑定( to the DOM, from the DOM, or in both directions),具体有如下4种形式:

    • {{person.age}}插值表达式;
    • [name]属性绑定;
    • (click)事件绑定;
    • [(ngModel)]双向绑定。

    Angular 在每个 JavaScript 事件循环中处理所有的数据绑定,它会从组件树的根部开始,递归处理全部子组件。
    数据绑定也在父子组件的通讯间起到作用。但如果同级组件、或者多个组件间需要共享数据的话,只使用数据绑定会把事情弄的复杂。这时候就需要使用状态管理如ngrx和redux,在angular的官方示例中有专门的服务。
    数据绑定被人称作单向数据绑定(one-way data binding),因为只能从组件的数据流动到目标的元素,而不能从目标元素流动到组件的数据中。同样的,也不能用数据绑定来调用目标元素上的方法。

    指令

    严格来说组件就是一个指令,```@Component```装饰器实际就是一个```@Directive```装饰器。 此外还有其他两种类型的指令:结构型指令(structural directives)和(属性型指令(attribute directives)。 结构型指令通常在DOM中添加、移除和替换元素来修改布局,如```*ngIf```、```*ngFor```。 属性型指令修改一个现有元素的外观或行为。在模板中,它们看起来就像是标准的HTML属性,故名。比如```ngModel```实现了双向绑定,```Ngclass```用于添加或者移除CSS类,```NgStyle```用于添加或移除一组CSS样式。

    服务

    按照我的理解,服务是指将组件中的一些功能单独抽离出来,以保持组件的精简。 比如一个简单的购物车组件```Cart```,当然可以在其中定义大量的方法比如获取商品的详细信息的方法```getDetail```、判断仓库是否还有剩余你选中的商品```isRest```、根据你购物车中的商品给出推荐的搭配```match```,甚至还有对比购物车中商品在不同店铺中的价格等等各类功能。如果你想,你可以为一个购物车写上十几种方法,但现在这个组件就会显得很复杂。如果把这个方法抽离成独立的服务,比如商品信息获取服务、推荐搭配服务、价格比对服务等,单独写到一个文件中,再导入到组件,这就会显得比较简洁。 angular推荐的作法:组件只提供用户体验,它介于视图与应用逻辑之间,并把诸如写日志之类的任务委托给服务;服务本身不从服务器获得数据、不进行验证输入。 虽然这些要求不是强制性的,但显然将任务委托给服务能让代码更容易看懂些。

    依赖注入

    可以通过查看构造函数的参数类型得知需要哪些服务,比如以下示例类需要一个ServiceA服务: constructor(private service:ServiceA){}
    当 Angular 创建组件时,会首先为组件所需的服务请求一个注入器 (injector)。
    注入器维护了一个服务实例的容器,存放着以前创建的实例。 如果所请求的服务实例不在容器中,注入器就会创建一个服务实例,并且添加到容器中,然后把这个服务返回给 Angular。 当所有请求的服务都被解析完并返回时,Angular 会以这些服务为参数去调用组件的构造函数。 这就是依赖注入 。

  • 相关阅读:
    Rotation Kinematics
    离职 mark
    PnP 问题方程怎么列?
    DSO windowed optimization 代码 (4)
    Adjoint of SE(3)
    IMU 预积分推导
    DSO windowed optimization 代码 (3)
    DSO windowed optimization 代码 (2)
    OKVIS 代码框架
    DSO windowed optimization 代码 (1)
  • 原文地址:https://www.cnblogs.com/benymor/p/7643561.html
Copyright © 2011-2022 走看看