npm install -g @angular/cli
ng new ng-first
cd ng-first ng serve --open
Der Browser öffnet automatisch http://localhost:4200 / , sah das ng-Zeichen, warst du so aufgeregt
(Handbuch lustig).
ng g component components/todolist
ng g service services/storage
Fügen Sie die benutzerdefinierte Komponente app-todolist in app.component ein. Dieser Name hängt vom Selektor ab: „app-todolist“ in todolist.component.ts.
<!--app.component.html--> <app-todolist></app-todolist>
//todolist.component.ts
export class TodolistComponent implements OnInit {
public msg: any = 'Hello World !';
constructor() { }
ngOnInit() {
}
}
//todolist.component.html
<h3> {{msg}} </h3>/*todolist.component.css*/
h3{
text-align: center;
color: #369;
}Zum Browser wechseln, auf Thump klicken Bumm, bumm!
Wow, kommen wir zum Punkt.
). Dies ist HTML. Kopieren Sie es direkt nach todolist.component.html und entfernen Sie ungenutzten Code.
<!--todolist.component.html--> <header> <section> <label>ToDoList</label> <input> </section> </header> <section> <h2>正在进行 <span>1</span> </h2> <ol> <li> <input> <p>记得吃药</p> <a>-</a> </li> </ol> <h2>已经完成 <span>1</span> </h2> <ul> <li> <input> <p>记得吃饭</p> <a>-</a> </li> </ul> </section> <footer> Copyright © 2014 todolist.cn <a>clear</a> </footer>
Dies ist der CSS-Stil. Kopieren Sie ihn direkt nach todolist.component.css und kopieren Sie den Textstil nach „styles.css“ im src-Verzeichnis.
/*todolist.component.css*/
header {height:50px;background:#333;background:rgba(47,47,47,0.98);}
section{margin:0 auto;}
label{float:left;width:100px;line-height:50px;color:#DDD;font-size:24px;cursor:pointer;font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;}
header input{float:right;width:60%;height:24px;margin-top:12px;text-indent:10px;border-radius:5px;box-shadow: 0 1px 0 rgba(255,255,255,0.24), 0 1px 6px rgba(0,0,0,0.45) inset;border:none}
input:focus{outline-width:0}
h2{position:relative;}
span{position:absolute;top:2px;right:5px;display:inline-block;padding:0 5px;height:20px;border-radius:20px;background:#E6E6FA;line-height:22px;text-align:center;color:#666;font-size:14px;}
ol,ul{padding:0;list-style:none;}
li input{position:absolute;top:2px;left:10px;width:22px;height:22px;cursor:pointer;}
p{margin: 0;}
li p input{top:3px;left:40px;width:70%;height:20px;line-height:14px;text-indent:5px;font-size:14px;}
li{height:32px;line-height:32px;background: #fff;position:relative;margin-bottom: 10px;
padding:0 45px;border-radius:3px;border-left: 5px solid #629A9C;box-shadow: 0 1px 2px rgba(0,0,0,0.07);}
ol li{cursor:move;}
ul li{border-left: 5px solid #999;opacity: 0.5;}
li a{position:absolute;top:2px;right:5px;display:inline-block;width:14px;height:12px;border-radius:14px;border:6px double #FFF;background:#CCC;line-height:14px;text-align:center;color:#FFF;font-weight:bold;font-size:14px;cursor:pointer;}
footer{color:#666;font-size:14px;text-align:center;}
footer a{color:#666;text-decoration:none;color:#999;}
@media screen and (max-device-width: 620px) {section{width:96%;padding:0 2%;}}
@media screen and (min-width: 620px) {section{width:600px;padding:0 10px;}}Nach dem Kopieren sollte die Seite so aussehen.
. (3) Implementieren Sie die Funktion von ToDoList
Die Funktion zum Hinzufügen von Aufgabenelementen
/*src/styles.css*/
body {margin:0;padding:0;font-size:16px;background: #CDCDCD;}[(ngModel)] ist eine Angular-Syntax zum Binden von Aufgaben an ein Eingabefeld. Sein Datenfluss ist bidirektional: vom Attribut zum Eingabefeld und vom Eingabefeld zurück zum Attribut.
Bei diesem Schritt hat die Konsole einen Fehler gemeldet.
Die Lösung besteht darin, dass wir uns für die Verwendung des FormsModule-Moduls entscheiden müssen.//todolist.component.ts
export class TodolistComponent implements OnInit {
public todo: any = '';
public todoList = [];
constructor() { }
ngOnInit() {
}
addTodo(e) {
let todoObj = {
todo: this.todo,
done: false
}
if (e.keyCode == 13) { //表示回车按钮
this.todoList.push(todoObj);
this.todo = ''; //清空输入框
}
}
}<!--todolist.component.html--> <header> <section> <label>ToDoList</label> <input> </section> </header>
Sie können die hinzugefügten Elemente sehen.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; //NgModel lives here
@NgModule({
imports: [
BrowserModule,
FormsModule //import the FormsModule before binding with [(ngModel)]
],
})Das zu seinde Element Hinzugefügte und abgeschlossene Elemente werden in zwei Arrays unterteilt (oder in einem Array platziert und dann basierend auf dem Wert von „Fertig“ gesteuert, ob sie angezeigt werden sollen), aber ich denke, es ist einfacher, in zwei Arrays zu arbeiten.
<h2>正在进行
<span>{{todoList.length}}</span>
</h2>
<ol>
<li>
<input>
<p>{{item.todo}}</p>
<a>-</a>
</li>
</ol>An diesem Punkt ist diese Funktion abgeschlossen~
Warten Sie, aktualisieren Sie die Seite. Hoppla, die Elemente, die Sie gerade eingegeben haben, sind verschwunden. (Wenn Sie mehr erfahren möchten, besuchen Sie die chinesische PHP-WebsiteAngularJS Development Manual
, um mehr zu erfahren) Zu diesem Zeitpunkt feiert localStorage sein Debüt! !
StorageService-Dienst erstellen
In Schritt 6 von (1) Grundfertigkeiten hat uns angle-cli beim Erstellen eines Dienstes bereits dabei geholfen, die Grundstruktur eines Dienstes zu generieren.Erstellen Sie Dienste und nutzen Sie sie überall.
<h2>正在进行
<span>{{todoList.length}}</span>
</h2>
<ol>
<li>
<input>
<p>{{item.todo}}</p>
<a>-</a>
</li>
</ol>
已经完成
{{doneList.length}}
{{item.todo}}
- public doneList = []; //再声明一个已完成的数组
deleteTodo(index, done) {
if (done) {
this.todoList.splice(index, 1);
} else {
this.doneList.splice(index, 1);
}
}
changeTodo(index, done) {
if (done) {
var tempTodo = this.todoList[index]
this.doneList.push(tempTodo);
this.todoList.splice(index, 1);
} else {
var tempDone = this.doneList[index]
this.todoList.push(tempDone);
this.doneList.splice(index, 1);
}
}Okay, wir können es problemlos und gerne nutzen.
Daten in localStorage speichern
//storage.service.ts
export class StorageService {
constructor() { }
setItem(key, value) {
localStorage.setItem(key, JSON.stringify(value))
}
getItem(key) {
return JSON.parse(localStorage.getItem(key))
}
}Mein Verständnis ist, dass es der Montage in Vue ähnelt?
//todolist.component.ts
import { StorageService } from '../../services/storage.service' //导入服务
...
constructor(private storage: StorageService) { } //注入服务Dann sind Sie fertig!
<!--todolist.component.html--> <footer> Copyright © 2014 todolist.cn <a>clear</a> </footer>
clearData() {
localStorage.clear();
this.todoList = [];
this.doneList = [];
}还有拖拽排序的的功能，不写了。
好了，以上就是本篇文章的内容（想看更多就到PHP中文网AngularJS使用手册中学习），有问题的可以在下方留言提问。
Das obige ist der detaillierte Inhalt vonWenn Sie mit Angular beginnen, kennen Sie wirklich die Angular-Version von ToDoList?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Welche Möglichkeiten gibt es, Shell-Skripte auszuführen?
Die Hauptgefahren von Trojanern
Vorteile des Spring Boot Frameworks
Eine vollständige Liste häufig verwendeter öffentlicher DNS
Vergleichen Sie die Ähnlichkeiten und Unterschiede zwischen zwei Datenspalten in Excel
Regelmäßige Verwendung von grep
Was ist der Rückgabewert der Funktion?
Wie zeichnet man ein Pert-Diagramm?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
