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

2024-01-09 06:19:32

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（事件清单）

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

<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" />{{ each.title }}--{{
        each.status
      }}-- <button (click)="eachValueDelet(mykey)">x</button>
      <!--  -->
    </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)">x</button>
      <!--  -->
    </li>
  </ul>
</div>

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>todoList</h2>
<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)">X</button>
        </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)">X</button>
        </li>
    </ul>

</div>

todolist.component.html我自己写的

<h2>todolist</h2>
<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()">x</button>
      <!--  -->
    </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)">x</button>
      <!--  -->
    </li>
  </ul>
</div>

文章来源:https://blog.csdn.net/qq_53433382/article/details/135447383
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！

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

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

0快捷键

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

1.1 首先新建一个项目

1.2 布局组件页面

1.3 美化页面

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

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

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

1.1 京东App

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

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

1.2.2 绘制页面

1.2.3 美化页面

1.2.4 声明数据和定义方法

1.3 服务实现数据的持久化

1.3.1 创建服务

1.3.2 配置服务

1.3.3 在组件当中定义方法

1.3.4 在组件当中使用方法

1.3.5 重新运行程序

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

1 服务

2 ts文件

3 html

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

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

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

1.1 ToDoList

1.2 Angular实现ToDoList（事件清单）

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

1.2.2 绘制页面

1.2.3 美化页面

1.2.4 声明数据和定义方法

1.3 服务实现数据的持久化

1.3.1 创建服务

1.3.2 配置服务

1.3.3 在服务当中定义方法

1.3.4 在组件当中使用方法

todolist.component.ts

todolist.component.ts我自己写的

todolist.component.html

todolist.component.html我自己写的

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

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

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

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

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