Wenn Sie mit Angular beginnen, kennen Sie wirklich die Angular-Version von ToDoList?

Dieser Artikel stellt den Einstieg in AngularJS vor. Dies ist ein Artikel für den Einstieg in AngularJS. Wenn Sie AngularJS noch nicht verstehen, können Sie diesen Artikel jetzt lesen.
(1) Grundkenntnisse

Lesen Sie nicht zuerst die Dokumentation, bevor Sie loslegen, Angular-Schnellstart.

Dann starten~

Voraussetzung
1. Install Node, Sie müssen auf die Version achten, Node 6.9.x und npm 3.x.x.

   
   

Dann installieren Sie Angular CLI global.

2. npm install -g @angular/cli

Projekt erstellen

3. ng new ng-first

Entwicklungsserver starten

4. cd ng-first
   ng serve --open

   Der Browser öffnet automatisch http://localhost:4200 / , sah das ng-Zeichen, warst du so aufgeregt

   (Handbuch lustig)

   .

Komponente erstellen
5. Dieser Vorgang erstellt die Datei direkt und konfiguriert sie in der Stammkomponente.

   ng g component components/todolist

   
   

   

Dienst erstellen
6. Formation beibehalten, noch einer.

   ng g service services/storage

   
   
Lass uns unsere Fähigkeiten ausprobieren und Hallo sagen
7. Gemäß der internationalen Praxis sagen wir zuerst Hallo!

   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>

   
   Fahren Sie fort und definieren Sie eine Variable msg in todolist.component.ts. Diese Syntax ist die Standardroutine von ts. (Manuell mein Gesicht bedecken, eigentlich bin ich nicht sehr gut darin)

   //todolist.component.ts
   export class TodolistComponent implements OnInit {
     public msg: any = 'Hello World !';
   
     constructor() { }
   
     ngOnInit() {
     }
   
   }

   Daten in todolist.component.html binden

   //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.

(2) HTML- und CSS-Teil

Das ist nicht wichtig, es steht nicht im Mittelpunkt dieses Artikels, öffnen Sie einfach die Konsole und kopieren Sie es (

Wie schamlos

). 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;}}

rrree

Nach dem Kopieren sollte die Seite so aussehen.

Okay, das Obige ist unnötiges Vorspiel (Handbuch lustig)
. (3) Implementieren Sie die Funktion von ToDoList

Studieren Sie den js-Quellcode auf ToDoList. Die allgemeine Logik besteht darin, dass der Benutzer ein erledigtes Attribut hinzufügt Der Wert ist „false“, was darauf hinweist, dass der Vorgang ausgeführt wird. Klicken Sie auf die Schaltfläche „Fertig“, und das Attribut „Fertig“ ändert sich in „True“, was darauf hinweist, dass der Vorgang abgeschlossen ist. und kann gelöscht werden. Nach der Aktualisierung des Browsers sind die Daten weiterhin vorhanden, da localStorage von HTML5 verwendet wird.

Die Funktion zum Hinzufügen von Aufgabenelementen

Deklarieren von Aufgabenvariablen

/*src/styles.css*/
body {margin:0;padding:0;font-size:16px;background: #CDCDCD;}

rrree

[(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 = '';       //清空输入框
    }
  }
}

Hinzugefügte Elemente in einer Schleife wiedergeben

Integrierte Anweisung *ngFor hinzufügen, um die Liste in einer Schleife zu durchlaufen.

<!--todolist.component.html-->
<header>
  <section>
    <label>ToDoList</label>
    <input>
  </section>
</header>

Sie können die hinzugefügten Elemente sehen.

Wechseln Sie, ob das Element abgeschlossen ist, und löschen Sie das Element

Binden Sie die Ereignisse „changeTodo, deleteTodo“

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-Website

AngularJS Development Manual
, um mehr zu erfahren) Zu diesem Zeitpunkt feiert localStorage sein Debüt! !

StorageService-Dienst erstellen

Um den gleichen Code nicht mehr immer wieder zu kopieren, müssen wir einen einzelnen wiederverwendbaren Datendienst erstellen und ihn in die Komponenten einfügen, die ihn in der Mitte benötigen.

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}}

        -     
  

Um den Dienst zu nutzen, injizieren Sie ihn einfach.

  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

Verwenden Sie this.storage, um den gekapselten Dienst zu nutzen.

Speichern Sie die Daten nach jedem Vorgang. Ist das nicht ein bisschen nutzlos?

//storage.service.ts
export class StorageService {

  constructor() { }
  
  setItem(key, value) {
    localStorage.setItem(key, JSON.stringify(value))
  }
  getItem(key) {
    return JSON.parse(localStorage.getItem(key))
  }

}

Initial event

Die Hook-Methode der OnInit-Schnittstelle heißt ngOnInit und Angular ruft sie sofort nach dem Erstellen der Komponente auf.

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!

还有页脚的clear按钮

<!--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!