Angular目录结构分析
app.module.ts详解、以及Angular中创建组件、组件详解、 绑定数据
目录结构分析目录结构分析
文件 说明
|--E2e 应用的端对端(e2e)测试,用 Jasmine 写成并用 protractor 端对端测试运行器测试。
|--Node_modules 依赖包
|--Src
|--App Angular应用文件
|--App.module.ts
|---App.component.ts
|--assets 资源文件
|--environments 环境配置:开发、部署
|--index.html 应用的宿主页面。 它以特定的顺序加载一些基本脚本。 然后它启动应用,将根AppComponent放置到自定义<my-app>标签里。
|--main.ts 项目的入口文件
|--polyfills.ts 处理浏览器兼容问题
|--angular.json Cli配置文件
|--.editorconfig 统一代码风格工具配置,不支持的需要安装插件
|--.gitignore Git配置文件
|--karma.conf.js 在测试指南中提到的 karma 测试运行器的配置。
|--package.json 项目指定npm依赖包
|--tsconfig.app.json Typescript编译配置
|--tsconfig.spec.json Typescript测试编译配置
|--tsconfig.json Typescript编译配置
|--tslint.json Typescript语法检查器
详情参考:https://www.angular.cn/guide/file-structure
#app.module.ts、组件分析
#app.module.ts
定义 AppModule,这个根模块会告诉 Angular 如何组装该应用。 目前,它只声明了 AppComponent。 稍后它还会声明更多组件。
#自定义组件
创建组件:
ng g component components/header 组件内容详解:
#app.component.ts组件分析
Angular应用中,模板指的的是@Component装饰器的template或templateUrl指向的HTML页面 例如:
import { Component } from '@angular/core';
interface Course {
id:number,
description:string
}
@Component({
selector: 'app-root',
// templateUrl: './app.component.html',
template:`
<div class="course">
<span class="description">{{courseObj.description}}</span>
</div>
`,
styleUrls: ['./app.component.css']
})
export class AppComponent{
title = 'ng-module-routes';
id:number = 1;
description:string = 'sss';
public courseObj: Course = {
id: 1,
description: "Angular For Beginners"
};
}
很明显Angular不是简单地用一个字符串来处理模板。 那么这是如何工作的?
Angular不会生成HTML字符串,它直接生成DOM数据结构
实际上,Angular把组件类中的数据模型应用于一个函数(DOM component renderer)。 该函数的输出是对应于此HTML模板的DOM数据结构。
一旦数据状态发生改变,Angular数据检测器检测到,将重新调用 该DOM component renderer。
mvvm
Mvvm定义MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。
- 【模型】指的是后端传递的数据。
- 【视图】指的是所看到的页面。
- 【视图模型】mvvm模式的核心,它是连接view和model的桥梁。
它有两个方向:
- 一是将【模型】转化成【视图】,即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。
- 二是将【视图】转化成【模型】,即将所看到的页面转化成后端的数据。
实现的方式是:DOM 事件监听。这两个方向都实现的,我们称之为数据的双向绑定。
#总结
在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信,ViewModel通常要实现一个observer观察者,当数据发生变化,ViewModel能够监听到数据的这种变化,然后通知到对应的视图做自动更新,而当用户操作视图,ViewModel也能监听到视图的变化,然后通知数据做改动,这实际上就实现了数据的双向绑定。
并且MVVM中的View 和 ViewModel可以互相通信。MVVM流程图如下:
#angular 组件 以及组件里面的模板
#Angular 绑定数据
#数据文本绑定
Angular 中使用{{}}绑定业务逻辑里面定义的数据
{{}}
<div class="title"> {{title}}</div>
{{userinfo.username}} {{message}} {{student}}
#angualr模板里面绑定属性
<div [title]="student">
张三
</div>
#angualr模板里面绑定Html
<span [innerHTML]='content' class="red"></span>
#angualr模板里面允许做简单的运算
1+2={{1+2}}
#数据循环 *ngFor
#*ngFor 普通循环
<ul>
<li *ngFor="let item of list">{{item}}</li>
</ul>
#循环的时候设置 key
<ul>
<li *ngFor="let item of list;let key=index;">
{{key}}---{{item.title}}
</li>
</ul>
#条件判断语句 *ngIf
<div *ngIf="flag">
<img src="assets/images/02.png" />
</div>
<div *ngIf="!flag">
<img src="assets/images/01.png" />
</div>
<ul>
<li *ngFor="let item of list;let key=index;">
<span *ngIf="key==1" class="red">{{key}}---{{item.title}}</span>
<span *ngIf="key!=1">{{key}}---{{item.title}}</span>
</li>
</ul>
#条件判断语句 *ngSwitch
<span [ngSwitch]="orderStatus">
<p *ngSwitchCase="1">
表示已经支付
</p>
<p *ngSwitchCase="2">
支付并且确认订单
</p>
<p *ngSwitchCase="3">
表示已经发货
</p>
<p *ngSwitchCase="4">
表示已经收货
</p>
<p *ngSwitchDefault>
无效订单
</p>
</span>
#属性[ngClass]
<div class="red">
ngClass演示 (尽量不要用dom来改变class)
</div>
<div [ngClass]="{'blue':true,'red':false}">
ngClass演示
</div>
<div [ngClass]="{'orange':flag,'red':!flag}">
ngClass演示
</div>
<strong>循环数组,让数组的第一个元素的样式为red ,第二个为orange,第三个为blue</strong>
<ul>
<li *ngFor="let item of list;let key=index;" [ngClass]="{'red':key==0,'orange':key==1,'blue':key==2}">
{{key}}---{{item.title}}
</li>
</ul>
#属性[ngStyle]
<p style="color:red">我是一个p标签</p>
<p [ngStyle]="{'color':'blue'}">我是一个p标签</p>
<p [ngStyle]="{'color': attr}">我是一个p标签 </p>
#管道
类似于vue2的filtter
{{today | date:'yyyy-MM-dd HH:mm ss'}}
#执行事件(click)
home.component.html
<strong>{{title}}</strong>
<button (click)="run()">执行事件</button>
<button (click)="setData()">执行方法改变属性里面的数据</button>
<button (click)="runEvent($event)">执行方法获取事件对象</button>
home.component.ts
run(){
console.log('这是一个自定义方法')
console.log(this.title);
}
setData(){
this.title='我是一个改变后的title';
}
// $event
runEvent(event){
//ionic必须这样写
let dom:any=event.target;
dom.style.color="red";
}
#表单事件 事件对象
home.component.ts
keyDown
<input type="text" (keydown)="keyDown($event)" />
<br>
keyUp:
<input type="text" (keyup)="keyUp($event)" />
home.component.ts
keyDown(e){
if(e.keyCode==13){
console.log('按了一下回车')
}else{
//e.target 获取dom对象
console.log(e.target.value);
}
}
keyUp(e){
if(e.keyCode==13){
console.log(e.target.value);
console.log('按了一下回车');
}
}
#双向数据绑定–MVVM 只是针对表单
<input [(ngModel)]="inputValue">
- 在app.module.ts导入FormsModule
- 并在imports导入
import { FormsModule } from '@angular/forms';
....
imports: [ /*配置当前模块运行依赖的其他模块*/
FormsModule
],
使用:
<input type="text" [(ngModel)]='keywords' />
{{keywords}}
<button (click)="changeKeywords()">改变keywords的值</button>