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。 稍后它还会声明更多组件。avactor

#自定义组件

https://cli.angular.io/

创建组件:

ng g component components/header 组件内容详解:avactor

#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流程图如下: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">
  1. 在app.module.ts导入FormsModule
  2. 并在imports导入
import { FormsModule } from '@angular/forms'; 
....
imports: [ /*配置当前模块运行依赖的其他模块*/
FormsModule
],

使用:

<input type="text" [(ngModel)]='keywords' />
{{keywords}}
<button (click)="changeKeywords()">改变keywords的值</button>