这篇笔记主要是以网上的一个视频教程为基础,记录视频中的实践操作,主要实现了一个类似于京东搜索和toDoList的操作,其中包括的知识点主要是Angular组件如何调用服务,以及通过服务实现Angular前端数据的持久化。
先看最终的效果,说明,这个只是根据视频的一个Angular的示例,前端的样式几乎没有,重点是学习Angular的知识点。
在第一个搜索demo中,输入框中每次输入内容后,点击搜索,则下面的历史列表中会记录搜索的历史,当然也可以删除,同时数据会记录到localStorage中,页面刷新后仍然可以看到。
第二个toDoList示例中,在输入框中输入代办事项后,回车,则在代办列表中多了条记录,勾选复选框后,代办事项变更为已办事项,同样数据会保存在localStorage中,页面刷新后,数据依然可看。
1、创建项目及组件
ng new angulardemo
ng g c demo/search
ng g c demo/todolist
2、编写search组件代码,这里直接贴代码:
search.component.css
h2{
text-align: center;
}
.search{
width: 400px;
margin: 20px auto;
}
.search input{
margin-bottom: 20px;
width: 300px;
height: 30px;
}
.search button{
width: 80px;
height: 32px;
}
.search ul li{
list-style-type: none;
}
search.component.ts
import { Component, OnInit } from '@angular/core';
import {StorageService} from '../services/storage.service';
@Component({
selector: 'app-search',
templateUrl: './search.component.html',
styleUrls: ['./search.component.css']
})
export class SearchCompon