【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>
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>
{{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（事件清单）
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 绘制页面
todolist.component.html
待办事项：
-
{{ each.title }}--{{
each.status
}}--
已完成事项：
-
{{ each.title }}--{{
each.status
}}--
1.2.3 美化页面
todolist.component.css
.todolist {
width: 400px;
margin: 20px auto;
}
.formInput {
margin-bottom: 20px;
width: 300px;
height: 32px;
border: 2px solid orchid;
border-radius: 5px;
}
h2{
text-align: center;
}
1.2.4 声明数据和定义方法
todolist.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-todolist',
templateUrl: './todolist.component.html',
styleUrls: ['./todolist.component.scss'],
})
export class TodolistComponent {
[x: string]: any;
public keyword: string = '';
//定义一个数据，并进行初始化 赋空值 ，防止ts进行非空判断后报错
public historyList: any[] = [];
//定义一个数组，并进行初始化 赋空值 ，防止ts进行非空判断后报错
//--------------todolist
public todolist: any[] = [
{
title: 123,
status: 1,
},
{
title: 456,
status: 0,
},
];
doAdd(e: any) {
if (e.keyCode == 13) {
if (!this.todolistHasKeyword(this.todolist, this.keyword)) {
this.todolist.push({
title: this.keyword,
status: 0, //0表示代办事项 1表示已完成事项
});
this.keyword = '';
} else {
alert('数据已经存在');
this.keyword = '';
}
}
}
eachValueDelet(e: any) {
this.todolist.splice(e, 1);
}
//如果数组里面有是否含有重复数据返回true 否则返回false
todolistHasKeyword(todolist: any, keyword: any) {
// 如果keyword为空，则返回false
if (!keyword) return false;
for (var i = 0; i < todolist.length; i++) {
if (todolist[i].title == keyword) {
return true;
}
}
return false;
}
}
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 {
// 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);
}
}
1.3.4 在组件当中使用方法
用到this一定要注意this指向，尤其是在foreach和定时器里面，this指向的是window，如果要指向当前实例，一种方法是箭头函数，另外一种方法是set（）函数。
todolist.component.ts
import { Component, OnInit } from '@angular/core';
//引入服务
import { StorageService } from '../../services/storage.service';
@Component({
selector: 'app-todolist',
templateUrl: './todolist.component.html',
styleUrls: ['./todolist.component.css'],
})
export class TodolistComponent implements OnInit {
public keyword: string;
public todolist: any[] = [];
constructor(public storage: StorageService) {}
ngOnInit() {
var todolist: any = this.storage.get('todolist');
if (todolist) {
this.todolist = todolist;
}
}
doAdd(e) {
if (e.keyCode == 13) {
if (!this.todolistHasKeyword(this.todolist, this.keyword)) {
this.todolist.push({
title: this.keyword,
status: 0, //0表示代办事项 1表示已完成事项
});
this.keyword = '';
this.storage.set('todolist', this.todolist); //用到this一定要注意this指向
} else {
alert('数据已经存在');
this.keyword = '';
}
}
}
deleteData(key) {
this.todolist.splice(key, 1);
this.storage.set('todolist', this.todolist);
}
//如果数组里面有keyword返回true 否则返回false
todolistHasKeyword(todolist: any, keyword: any) {
//异步 会存在问题
// todolist.forEach(value => {
// if(value.title==keyword){
// return true;
// }
// });
if (!keyword) return false;
for (var i = 0; i < todolist.length; i++) {
if (todolist[i].title == keyword) {
return true;
}
}
return false;
}
checkboxChage() {
console.log('事件触发了');
this.storage.set('todolist', this.todolist);
}
}
todolist.component.ts我自己写的
import { Component, OnInit } from '@angular/core';
// import + providers: [StorageService],再在组件中 引入服务 ，constructor内 进行 服务的类的 实例化
import { StorageService } from 'src/app/services/storage.service';
@Component({
selector: 'app-todolist',
templateUrl: './todolist.component.html',
styleUrls: ['./todolist.component.scss'],
})
export class TodolistComponent implements OnInit {
[x: string]: any;
public keyword: string = '';
//定义一个数据，并进行初始化 赋空值 ，防止ts进行非空判断后报错
public historyList: any[] = [];
//定义一个数组，并进行初始化 赋空值 ，防止ts进行非空判断后报错
//--------------todolist
public todolist: any[] = [
{
title: 123,
status: 1,
},
{
title: 456,
status: 0,
},
];
doAdd(e: any) {
if (e.keyCode == 13) {
if (!this.todolistHasKeyword(this.todolist, this.keyword)) {
this.todolist.push({
title: this.keyword,
status: 0, //0表示代办事项 1表示已完成事项
});
this.keyword = '';
this.storage0.set(`todolist`, this.todolist);
/* 将 todolist 数组保存到浏览器的 localStorage 中。这里是详细解释：
this.storage0: 这个表达式假设您已经在您的 Angular 组件中创建了一个名为 storage0 的 StorageService 实例。通常，这通过 Angular 的依赖注入系统完成。
.set('todolist', this.todolist): 这是在 StorageService 中定义的一个方法，用于将数据存储到 localStorage。set 方法接受两个参数：
第一个参数是键名 'todolist'，这是您在 localStorage 中保存数据时使用的标识符。
第二个参数 this.todolist 是要保存的数据，这里是您的待办事项数组。 */
} else {
alert('数据已经存在');
this.keyword = '';
}
}
}
eachValueDelet(e: any) {
this.todolist.splice(e, 1);
console.log("事件触发了");
this.storage0.set(`todolist`, this.todolist);
}
//如果数组里面有是否含有重复数据返回true 否则返回false
todolistHasKeyword(todolist: any, keyword: any) {
// 如果keyword为空，则返回false
if (!keyword) return false;
for (var i = 0; i < todolist.length; i++) {
if (todolist[i].title == keyword) {
return true;
}
}
return false;
}
// 使用公共的类 服务 进行实例化
constructor(public storage0: StorageService) {
// let s = this.storage0.get();
// console.log(s);
// alert("todolist:"+s);
}
ngOnInit(): void {
console.log('todolost 页面刷新会触发这个生命周期函数');
var todolist = this.storage0.get(`todolist`);
if (todolist) {
this.todolist = todolist;
}
}
checkboxChange(){
console.log("事件触发了");
this.storage0.set(`todolist`, this.todolist);
}
}
todolist.component.html
<h2>todoListh2>
<div class="todolist">
<input class="form_input" type="text" [(ngModel)]="keyword" (keyup)="doAdd($event)" />
<hr>
<h3>待办事项h3>
<ul>
<li *ngFor="let item of todolist;let key=index;" [hidden]="item.status==1">
<input type="checkbox" [(ngModel)]="item.status" (change)="checkboxChage()" /> {{item.title}} ------
<button (click)="deleteData(key)">Xbutton>
li>
ul>
<h3>已完成事项h3>
<ul>
<li *ngFor="let item of todolist;let key=index;" [hidden]="item.status==0">
<input type="checkbox" [(ngModel)]="item.status" (change)="checkboxChage()" /> {{item.title}} ------
<button (click)="deleteData(key)">Xbutton>
li>
ul>
div>
todolist.component.html我自己写的
<h2>todolisth2>
<div class="todolist">
<input
class="formInput"
type="text"
[(ngModel)]="keyword"
(keyup)="doAdd($event)"
/>
<hr />
<h3>待办事项：h3>
<ul>
<li
*ngFor="let each of todolist; let mykey = index"
[hidden]="each.status == 1"
>
<input type="checkbox" [(ngModel)]="each.status" (change)="checkboxChange()" />{{ each.title }}--{{
each.status
}}-- <button (click)="eachValueDelet(mykey)" (change)="checkboxChange()">xbutton>
li>
ul>
<h3>已完成事项：h3>
<ul>
<li
*ngFor="let each of todolist; let mykey = index"
[hidden]="each.status == 0"
>
<input type="checkbox" [(ngModel)]="each.status" />{{ each.title }}--{{
each.status
}}-- <button (click)="eachValueDelet(mykey)">xbutton>
li>
ul>
div>