理解 angular2 基础概念和结构 ----angular2系列（二)

发布时间：2020-12-17 10:38:17 所属栏目：安全来源：网络整理

导读：Module Component Template Metadata Data Binding Directive Service Dependency Injection ? 本文简单介绍一下，这些知识点，以浅入的方式理解angular2的基础概念和结构。 Angular 是模块化的. Modules 导出 classes,function,values ，以便在其他模块导

Module
Component
Template
Metadata
Data Binding
Directive
Service
Dependency Injection

? 本文简单介绍一下，这些知识点，以浅入的方式理解angular2的基础概念和结构。

Angular 是模块化的.
Modules 导出 classes,function,values ，以便在其他模块导入使用.
angular应用由模块组成，每个模块都做此模块相关的事情

?组件、方法、类、服务等，他们都可以成为模块。

module基本使用

　　自定义一个模块文件和main入口文件：

　　　　app.component.ts

　　　　main.ts

export class AppComponent { } //新建?app.component.ts 并导出当前自定义模块：

import { AppComponent } from './app.component'; //在入口文件main.ts 引用自定义模块app.component：

import { Component } from 'angular/core'; //引入angular自带模块Component：

引用自定义模块，需要加上路径，ng会根据路径找到模块，而框架本身的模块不需要路径，它会自动匹配到相应模块。

学习过node的，相信都应该理解。

　　在angular2中，Component 是我们构建页面元素和逻辑的主要方式，而在angular1中要实现这些需要directives,controllers和scope。

import {Component} from 'angular2/core'@Component({
selector: 'my-component'<span style="color: #000000;">,template: '

Hello my name is {{name}}. <button (click)="sayMyName()">Say my name

'<span style="color: #000000;">
})
export class MyComponent {
constructor() {
<span style="color: #0000ff;">this.name = 'Max'<span style="color: #000000;">
}
sayMyName() {
console.log('My name is',<span style="color: #0000ff;">this<span style="color: #000000;">.name)
}
}

　　selector 指定了自定义标签，template配置好了dom元素、绑定了数据和事件， this实际代替了angular1中的scope

　　最后，在html里我们可以用标签创建当前Component。

　　angular2 的 html template大部分还是一般的html，只是会混合一些框架可识别的属性或者指令，比如：()、{}、 {{}}、 [()] 等。实际就和一般的模板引擎差不多

Hero List

Pick a hero from the list

　　什么是元数据？元数据是关于数据的组织、数据域及其关系的信息。

在angular2中，如下例：

selector、templateUrl、directives、providers 他们都是元数据

import {Component} from 'angular2/core''hero-list''app/hero-list.component.html'

　　template,metadata,component 相互作用组成视图，而metadata就是关联组件和模板的数据。

　　用过angular的一个特色就是双向绑定，这个在ng1里就已经赫赫有名了。

　　如下图，

图中告知了数据的流动方向，

　　{{value}}和[property]='value'，变量绑定在Component中，只要在Component中控制变量值改变，dom中就会更新，它是单向的。

　　(event)是事件绑定，是单向的，在dom中触发，从而告知Component。

　　[(ng-model)]或者[(ngModel)]实现双向绑定， angular1中，我们要实现双向绑定是用ng-model="xx"，angular2中从用法上来说确实只是多加了两个括号。

　　angular2中有个通用规则，ng-model ngModel，中线分割和驼峰命名相等。

?　　angular模板是动态的，渲染模板的时候dom根据directive的规则转换并渲染。

//*ngFor循环遍历heroes

　　以上这些都是angular2自带的指令。

　　我们也可以自己定义指令。

　　单从概念上来说，angular1和2的指令几乎是一样的。他们改变的不过是写法和使用方式。

?　　几乎一切我们开发的代码都可以算是服务。比如：一个特定的class、一个工具类或者一个组件。

服务就是一个概念，angular本身没有为它实现什么基类。angular只是让我们遵循一个规则，按照规则，我们写出我们想要的实质代码，

组成一个个小的服务，最后通过框架把它们组成我们的应用。这些服务都通过?“依赖注入”（Dependency Injection) 的方式为我们的应用提供服务。

　　“依赖注入”连接和应用在整个框架，当你想在一个“组件”里使用一个“服务”时，你需要通过“依赖注入”的方式，把服务载入到当前组件，

并在组件申明使用它。有两种方法

　　第一种：

bootstrap(AppComponent,[TheService]);

　　这样直接把这个service注入到整个app里面。然后这个app-component包括它所有的子模块都能使用 TheService这个service。

在Angular2里面所有的service是单例的，一旦在当前模块生成了单例service，它的子模块都将共同使用它。他们都将操作同一个service。

　　如果需要每个子模块都使用唯一的service，就要使用第二种方式：

'hero-editor'

　　在component的providers里面直接注入service。

　　“依赖注入” 就是把我们需要的服务提供给我们应用的其他服务，让它们之间能够相互使用。

　　我们这里大致介绍了下angular2的结构和这八个基础知识，从入门来说，我们仅仅是了解一些浅显的知识。

搞清楚基本结构和它们之间的关系，有利于后期的深入学习和使用。

通过本文，再实践一下angular2官网的??会不会要好理解一些了呢？

最后附一张总结图：

　　以上图片来自angular2官网，内容经过本人理解过滤，此文仅仅是学习笔记分享,理解不深，有望后续更新。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

理解 angular2 基础概念和结构 ----angular2系列（二)

Hero List

（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!