【angular教程240107】04 Dom及表单双向数据绑定，ToDoList+service 服务+实现数据的持久化

05 Angular中Dom操作以及表单（ input、checkbox、radio、select、 textarea ）结合双休数据绑定实现在线预约功能

0快捷键

输入法快速切换
：shitf + alt
半角全角 ctrl+空格

Angular表单 Dom获取表单值以及双向数据绑定

1. Angular表单 Dom获取表单值以及双向数据绑定

1.1 首先新建一个项目

新建一个form组件

1.2 布局组件页面

form.componnet.html

<h2>人员登记系统</h2>
<div class="people_list"><ul><li>姓 名：<input type="text" id="username" [(ngModel)]="peopleInfo.username" value="fonm_input" /></li><li>性 别：<input type="radio" value="1" name="sex" id="sex1" [(ngModel)]="peopleInfo.sex"> 男<input type="radio" value="2" name="sex" id="sex2" [(ngModel)]="peopleInfo.sex"> 女</li><li>城 市：<select name="city" id="city" [(ngModel)]="peopleInfo.city"><option [value]="item" *ngFor="let item of peopleInfo.cityList">{{item}}</option></select></li><li>爱 好：<span *ngFor="let item of peopleInfo.hobby;let key=index;"><input type="checkbox" [id]="'check'+key" [(ngModel)]="item.checked" /> <label [for]="'check'+key">{{item.title}}</label>&nbsp;&nbsp;</span></li><li>备 注：<textarea name="mark" id="mark" cols="30" rows="10" [(ngModel)]="peopleInfo.mark"></textarea></li></ul><button (click)="doSubmit()" class="submit" style="width: 200px; border-radius: 5px;">获取表单的内容</button><br><br><br><br><pre><!-- 通过json把 peopleInfo信息格式化展示出来-->{{peopleInfo | json}} </pre>
</div>

1.3 美化页面

form.component.css```
css
h2 {
text-align: center;
}

.people_list {
width: 400px;
margin: 40px auto;
padding: 20px;
border: 1px solid #eee;
}

li {
height: 50px;
line-height: 50px;
}
.fonm_input {
width: 300px;
height: 28px;
}
.submit {
width: 100px;
height: 30px;
float: right;
margin-right: 50px;
margin-top: 120px;
}

style.css```css/* 定义公共样式 */
* {/* 消除游览器默认内外边距 */padding: 0px;margin: 0px;
}
/* 取消列表默认的格式 */
ul,
ol {list-style-type: none;
}

1.4 定义数据

form.components.ts

import { Component, OnInit } from '@angular/core';@Component({selector: 'app-form',templateUrl: './form.component.html',styleUrls: ['./form.component.css'],
})
export class FormComponent implements OnInit {public peopleInfo: any = {username: '',sex: '2',cityList: ['北京', '上海', '深圳'],city: '上海',hobby: [{title: '吃饭',checked: false,},{title: '睡觉',checked: false,},{title: '敲代码',checked: true,},],mark: '',};constructor() {}ngOnInit() {}doSubmit() {console.log(this.peopleInfo);}
}

1.4 运行项目
命令行在当前项目目录输入：

ng serve --open

1.4 补充,使用dom操作获取元素的值(不推荐使用,推荐使用双向数据绑定)

news.component.html

<input type="text" value="你知道我的值吗???" id="myValue" (click)="getValue()">

news.component.ts

  public getValue(): void {let inputValue: any = document.getElementById('myValue');alert(inputValue.value);}
1

06 Angular实现一个完整的toDoList（待办事项）以及类似京东App搜索缓存数据功能【前面知识综合练习】

1. Angular–实现类似京东App搜索缓存功能实现&服务实现数据的持久化

1.1 京东App

1.2 Angular实现类似京东App搜索缓存功能实现

1.2.1 导入双向数据绑定的模块

app.module.ts

import { NgModule } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { FormsModule } from ‘@angular/forms’; // 导入模块
import { AppComponent } from ‘./app.component’;
import { SearchComponent } from ‘./components/search/search.component’;

@NgModule({
declarations: [AppComponent, SearchComponent],
imports: [BrowserModule, FormsModule], // 声明模块
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}

1.2.2 绘制页面

search.component.html

1.2.3 美化页面

search.component.css

.search {
width: 400px;
margin: 20px auto;
}
input {
margin-bottom: 20px;

width: 300px;
height: 32px;
border: 2px solid orchid;
border-radius: 5px;
}
button {
height: 32px;
width: 80px;
border-radius: 5px;
background-color: skyBlue;
}

1.2.4 声明数据和定义方法

search.component.ts

import { Component, OnInit } from ‘@angular/core’;

@Component({
selector: ‘app-search’,
templateUrl: ‘./search.component.html’,
styleUrls: [‘./search.component.css’],
})
export class SearchComponent implements OnInit {
public keyword: string;
public historyList: any[] = [];

constructor() {}

ngOnInit() {}

doSearch() {
// 数据查重
if (this.historyList.indexOf(this.keyword) == -1) {
this.historyList.push(this.keyword);
}
// 搜索后，输入栏设置为空
this.keyword = ‘’;
}

deleteHistroy(key) {
// 从historyList里面移除该数据
this.historyList.splice(key, 1);
}
}

1.3 服务实现数据的持久化

刚刚的页面虽然看起来功能实现了，但是这时候如果我们刷新了页面那么所有的数据都会消失，如果我们想要数据在刷新后依旧存在。这时候我们就需要用到服务了。

如果你还不清楚什么是服务，那么请看 Angular服务

1.3.1 创建服务

命令行在当前项目目录输入:

ng g service my-new-service

创建到指定目录下面
ng g service services/storage

1.3.2 配置服务

app.moudule.ts

import { NgModule } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { FormsModule } from ‘@angular/forms’;
import { AppComponent } from ‘./app.component’;
import { SearchComponent } from ‘./components/search/search.component’;
import { TodolistComponent } from ‘./components/todolist/todolist.component’;

import { StorageService } from ‘./services/storage.service’; // 引入服务
@NgModule({
declarations: [AppComponent, SearchComponent, TodolistComponent],
imports: [BrowserModule, FormsModule],
providers: [StorageService], // 配置服务
bootstrap: [AppComponent],
})
export class AppModule {}

1.3.3 在组件当中定义方法

storage.service.ts

import { Injectable } from ‘@angular/core’;

@Injectable({
providedIn: ‘root’,
})
export class StorageService {
constructor() {}
// 设置数据
set(key: string, value: any) {
localStorage.setItem(key, JSON.stringify(value));
}
get(key: string) {
// return ‘this is a service’;
return JSON.parse(localStorage.getItem(key));
}
// 删除数据
remove(key: string) {
localStorage.removeItem(key);
}
}

1.3.4 在组件当中使用方法

search.component.ts

import { Component, OnInit } from ‘@angular/core’;
// 引入服务类
import { StorageService } from ‘…/…/services/storage.service’;
// 实例化服务类可以这么使用，但是不推荐
/* var service = new StorageService();
service.get(); */
@Component({
selector: ‘app-search’,
templateUrl: ‘./search.component.html’,
styleUrls: [‘./search.component.css’],
})
export class SearchComponent implements OnInit {
public keyword: string;
public historyList: any[] = [];

constructor(public storage: StorageService) {}

// 页面刷新会触发这个生命周期函数
ngOnInit() {
var searchlist: any = this.storage.get(‘searchlist’);
// 如果searchlist存在的话，就赋值给historyList
if (searchlist) {
this.historyList = searchlist;
}
}

doSearch() {
if (this.historyList.indexOf(this.keyword) == -1) {
this.historyList.push(this.keyword);
// 通过set方法来指定this的指向
this.storage.set(‘searchlist’, this.historyList);
}
this.keyword = ‘’;
}

deleteHistroy(key) {
this.historyList.splice(key, 1);
// 通过set方法来指定this的指向
this.storage.set(‘searchlist’, this.historyList);
}
}

1.3.5 重新运行程序

先在控制台输入在当前项目目录输入 Ctrl+C 结束当前服务

然后控制台输入在当前项目目录输入:
ng serve --open

1.4 自己写的search 组件服务的代码

1 服务

import { Injectable } from '@angular/core';
@Injectable({providedIn: 'root'
})
export class StorageService {// StorageService 实际上是一个类 用的时候要 先实例化 再使用其中的方法constructor() { }set(key:any,value:any){localStorage.setItem(key,JSON.stringify(value))};
/* localStorage.setItem(key, JSON.stringify(value))：这个函数调用将一个值存储到浏览器的本地存储中。
localStorage：这是一个API，允许您在Web浏览器中保存键/值对。在localStorage中存储的数据即使在浏览器窗口关闭后也会持续存在。
.setItem(key, value)：这个方法用于将值存储到localStorage中。它接受两个参数：
key：一个字符串，用作存储数据的唯一标识符。
value：要存储的数据。由于localStorage只能存储字符串，因此如果您想存储对象或数组，您需要将它们转换为JSON字符串。
JSON.stringify(value)：这个函数将一个JavaScript对象或值转换为JSON字符串。由于localStorage只能存储字符串，如果您要存储的内容不是简单的字符串，这一步是必需的。 */get(key:any){// return   `this is a  service`;return JSON.parse(localStorage.getItem(key)||"nnull")}remove(key: any){localStorage.removeItem(key);}
}

2 ts文件

import { Component, OnInit } from '@angular/core';
import { StorageService } from 'src/app/services/storage.service';
/* 不推荐  
var mystorage = new StorageService();
console.log(mystorage.get());*/
@Component({selector: 'app-search',templateUrl: './search.component.html',styleUrls: ['./search.component.scss'],
})
export class SearchComponent implements OnInit {public keyword: string = '';//定义一个数据，并进行初始化 赋空值 ，防止ts进行非空判断后报错public historyList: any[] = [];//定义一个数组，并进行初始化 赋空值 ，防止ts进行非空判断后报错public doSearch() {if (this.historyList.indexOf(this.keyword) == -1) {this.historyList.push(this.keyword);}console.log(this.keyword);this.keyword = '';//清空输入栏的功能//this.mystorage.set(`searchlist`, this.historyList);}public eachValueDelet(e: any) {console.log('删除前数组的长度:', this.historyList.length);console.log('删除数据的角标:', e);// 删除数据this.historyList.splice(e, 1);console.log('删除后数组的长度:', this.historyList.length);this.mystorage.set(`searchlist`, this.historyList);}// 使用服务 推荐constructor(public mystorage: StorageService) {//  let a = this.mystorage.get();//  console.log(a);//  alert(a);}ngOnInit(): void {console.log('页面刷新会触发这个生命周期函数');var newsearchlist = this.mystorage.get(`searchlist`);if(newsearchlist){this.historyList=newsearchlist;}}
}

3 html


<hr />
<div class="search"><h3>2 通过双向数据绑定 进行值获取</h3><input type="text" [(ngModel)]="keyword" /><button (click)="doSearch()">搜索</button><hr /><ul><li *ngFor="let each of historyList  let mykey=index"  >{{ each }}----- <button (click)="eachValueDelet(mykey)">删除</button> </li></ul>
</div>

07 Angular中的服务以及自定义服务以及完善toDoList（待办事项案例）(27分6秒)

Angular–实现ToDoList（事件清单）& 服务实现数据的持久化

1. Angular–实现ToDoList（事件清单）& 服务实现数据的持久化

1.1 ToDoList

ToDoList是一款非常优秀的任务管理软件，用户可以用它方便地组织和安排计划。
该软件短小精悍，仅有一个数百 KB 的可执行文件就能完成所有功能，并且界面设计优秀，
初级用户也能够快速上手。

具体功能：

ToDoList 帮你把要做的事情列出来，一项一项，类似思维导图。
最明显的好处是强迫自己整理出任务的每个部分，理顺后按部就班的完成，提高效率。
当然了习惯是需要慢慢养成了，开始使用 ToDoList 这样的软件会觉得很费劲，但坚持下来你就能体会到管理软件带来的便捷了。所以需要坚持。

1.2 Angular实现ToDoList（事件清单）