适用于angular 2.0 及以上版本
前言 :在上一篇文章里面我们体验了创建一个空白Angular框架,但是要想真正入门Angular,概念知识是必不可少,今天一起学习,共勉。
一、基本概念
以下讲解部分摘抄至官网
1、什么是NgModule(模块)
① 官方解释: Angular 应用是模块化的,它拥有自己的模块化系统,称作 NgModule。 一个 NgModule 就是一个容器,用于存放一些内聚的代码块,这些代码块专注于某个应用领域、某个工作流或一组紧密相关的功能。 它可以包含一些组件、服务提供商或其它代码文件,其作用域由包含它们的 NgModule 定义。 它还可以导入一些由其它模块中导出的功能,并导出一些指定的功能供其它 NgModule 使用。
② 个人理解: 我们可以在NgModule在这个容器内存放组件、插件等以供全局使用。
2、什么是component(组件)
① component又称组件,是Angular框架中的最小单位,可重复使用
② 每个component中都包装有独立的html,js,css文件(仅对本component生效)
3、什么是service(服务)
① 官方解释: 应该将服务器获取数据、验证用户输入或直接往控制台中写日志等工作委托给各种服务。通过把各种处理任务定义到可注入的服务类中,你可以让它被任何组件使用。 通过在不同的环境中注入同一种服务的不同提供商,你还可以让你的应用更具适应性。
② 个人理解: 将从API请求数据、登录验证、公用性强的方法写到服务里面以供重复使用
4、什么是dependency injection(依赖注入)
① 官方解释: DI 被融入 Angular 框架中,用于在任何地方给新建的组件提供服务或所需的其它东西。 组件是服务的消费者,也就是说,你可以把一个服务注入到组件中,让组件类得以访问该服务类。在 Angular 中,要把一个类定义为服务,就要用 @Injectable() 装饰器来提供元数据,以便让 Angular 可以把它作为依赖注入到组件中。 同样,也要使用 @Injectable() 装饰器来表明一个组件或其它类(比如另一个服务、管道或 NgModule)拥有一个依赖。
② 个人理解: 如下图的service中会自带@Injectable() 装饰器表示他是为可以作为依赖注入到组件
二、结构型指令
官方解释: 结构型指令的职责是 HTML 布局。 它们塑造或重塑 DOM 的结构,比如添加、移除或维护这些元素。
1、*ngIf 判断指令
当*ngIf 后面的变量值为true展示元素,为false销毁元素
<div *ngIf="testFlag">啦啦啦</div>
2、*ngFor 循环指令
*ngFor 循环指令用来循环元素,请参考以下案例
html文件:
<table>
<thead>
<tr><td>序号</td><td>英文名</td></tr>
</thead>
<tbody>
<tr *ngFor="let item of list; let i = index">
<th>{{i+1}}</th>
<th>{{item}}</th>
</tr>
</tbody>
</table>
js文件:
list = ["Mio","Neeko","abby"] ;
css文件:
table,th,td{
border: 1px solid black;
border-collapse: collapse;
}
运行结果:
三、数据展示
1、{{}} 双大括号绑定到html页面
html文件:
<p>{{test}}</p>
js文件:
test = "我显示出来啦" ;
2、[ ] 绑定DOM属性
在元素属性加上[]就可以绑定使用变量,但是只能做数据显示,不能双向流动
html文件:
<input [value]="test"/>
<p>{{test}}</p>
js文件:
test = "我被绑定啦" ;
3、( ) 事件绑定
angular框架 html 文件支持所有html事件
html文件:
<button (click)="changeTest()">点我</button>
<p>{{test}}</p>
js文件:
test = "我被绑定啦" ;
changeTest(){
this.test = "我被改变啦" ;
}
点击前:
点击后:
4、[(ngModel)] 双向绑定
① 使用前提,需要在app.module.ts中引入FormsModule
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
// [(ngModel)]使用前提
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
// [(ngModel)]使用前提
FormsModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
② 使用方式如下
html文件:
<input [(ngModel)]="test"/>
<p>{{test}}</p>
js文件:
test = "我被绑定啦" ;
初始页面:
更新输入框值后:
结论: [(ngModel)]双向绑定可以将在UI输入的值更新给变量
结尾的话: 通过今天的学习,我们可以做一些简单的页面数据处理现实,具体操作后续学习吧,拜~❤