Pour débuter avec Angular, connaissez-vous vraiment la version Angular de ToDoList ?

Cet article explique comment démarrer avec Angularjs. Il s'agit d'un article pour démarrer avec angularjs Si vous ne comprenez toujours pas Angularjs, vous pouvez lire cet article maintenant.

(1) Compétences de base

Ne lisez pas la documentation avant de vous lancer, démarrage rapide d'Angular.
Ensuite, démarrez~

1. Prérequis
   Installez Node, vous devez faire attention à la version, node 6.9.x et npm 3.x.x.

2. Ensuite, installez Angular CLI globalement.

   npm install -g @angular/cli

3. Créer un projet

   ng new ng-first

4. Démarrer le serveur de développement

   cd ng-first
   ng serve --open

   Le navigateur s'ouvre automatiquement http : //localhost:4200/, j'ai vu la marque ng, es-tu si excité (manuel drôle) .

5. Créer un composant
   Cette opération va directement créer le fichier et le configurer dans le composant racine.

   ng g component components/todolist

   

6. Créer du service
   Gardez la formation, un de plus.

   ng g service services/storage

7. Essayons nos compétences et disons bonjour
   Conformément aux pratiques internationales, disons d'abord bonjour !
   Insérez le composant personnalisé app-todolist dans app.component. Ce nom dépend du sélecteur : 'app-todolist' dans todolist.component.ts.

   <!--app.component.html-->
   <app-todolist></app-todolist>

   Continuer et définir une variable msg dans todolist.component.ts Cette syntaxe est la routine par défaut de ts. (Couvre-visage manuel, en fait je ne suis pas très bon en ts)

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

   Lier les données dans todolist.component.html

   //todolist.component.html
   <h3> {{msg}} </h3>

   /*todolist.component.css*/
   h3{
     text-align: center;
     color:  #369;
   }

   Switch au navigateur, boum boum boum !

   

   Wow, allons droit au but.

(2) Partie HTML et CSS

Ce n'est pas important, ce n'est pas l'objet de cet article, ouvrez simplement la console et copiez-la ( Comme c'est éhonté ).

Ceci est du HTML, copiez-le directement dans todolist.component.html et supprimez le code inutilisé.

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

Voici le style CSS, copiez-le directement dans todolist.component.css et copiez le style du corps dans styles.css dans le répertoire src.

/*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;}}

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

Après la copie, la page devrait ressembler à ceci.

D'accord, ce qui précède est des préliminaires inutiles (manuel drôle) .

(3) Implémentez la fonction de ToDoList

Étudiez le code source js sur ToDoList La logique générale est qu'une fois que l'utilisateur a saisi l'élément de tâche, ajoutez un attribut done La valeur par défaut. La valeur est fausse, indiquant qu'elle est en cours. Cliquez sur le bouton Terminé et l'attribut done devient vrai, indiquant qu'elle est terminée. et peut être supprimé. Après l'actualisation du navigateur, les données existent toujours car le localStorage de HTML5 est utilisé.

La fonction d'ajout d'éléments à faire

Déclarer des variables à faire

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

[(ngModel)] est une syntaxe angulaire pour lier une tâche à la zone de saisie . Son flux de données est bidirectionnel : de l'attribut à la zone de saisie, et de la zone de saisie à l'attribut.

A cette étape, la console a signalé une erreur.
La solution est qu'il faut choisir d'utiliser le module FormsModule.

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)]
  ],
  
})

Bouclez les éléments ajoutés

Ajoutez l'instruction intégrée *ngFor pour boucler la liste.

<h2>正在进行
    <span>{{todoList.length}}</span>
  </h2>
  <ol>
    <li>
      <input>
      <p>{{item.todo}}</p>
      <a>-</a>
    </li>
  </ol>

Vous pouvez voir les éléments ajoutés.

Changer si l'élément est terminé et supprimer l'élément

Lier changeTodo, les événements deleteTodo

  <h2>正在进行
    <span>{{todoList.length}}</span>
  </h2>
  <ol>
    <li>
      <input>
      <p>{{item.todo}}</p>
      <a>-</a>
    </li>
  </ol>
  
已经完成
    {{doneList.length}}
  
  

    
•              

  {{item.todo}}

        -     
  

seront ajouté Les éléments et les éléments terminés sont divisés en deux tableaux (ou placés dans un seul tableau, puis contrôlés s'ils doivent être affichés en fonction de la valeur de terminé), mais je pense qu'il est plus facile d'opérer en deux.

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

  }

À ce stade, cette fonction est terminée ~
Attendez, actualisez la page, Oups, les éléments que vous venez de saisir ont disparu. (Si vous souhaitez en savoir plus, rendez-vous sur le site PHP chinois Manuel de développement AngularJS pour en savoir)

En ce moment, localStorage fait ses débuts ! !

Créer un service StorageService

Afin de ne plus copier encore et encore le même code, nous devons créer un seul service de données réutilisable et l'injecter dans les composants qui en ont besoin au milieu.

À l'étape 6 de (1) Compétences de base, lors de la création d'un service, angulaire-cli nous a déjà aidé à générer la structure de base d'un service.
Créez des services et utilisez-les n'importe où.

//storage.service.ts
export class StorageService {

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

}

Pour utiliser le service, il suffit de l'injecter.

//todolist.component.ts
import { StorageService } from '../../services/storage.service'  //导入服务
...
constructor(private storage: StorageService) { } //注入服务

D'accord, nous pouvons l'utiliser facilement et avec plaisir.

Enregistrez les données sur localStorage

Utilisez this.storage pour utiliser le service encapsulé.
Enregistrez les données après chaque opération. N'est-ce pas un peu inutile~

  addTodo(e) {
    let todoObj = {
      todo: this.todo,
      done: false
    }

    if (e.keyCode == 13) {
      var tempList = this.storage.getItem('todoList');
      if (tempList) {
        tempList.push(todoObj)
        this.storage.setItem('todoList', tempList);
      } else {
        var tempData = []
        tempData.push(todoObj)
        this.storage.setItem('todoList', tempData);
      }
      this.todoList.push(todoObj);
      this.todo = '';
    }
  }
  
  deleteTodo(index, done) {
    if (done) {
      this.todoList.splice(index, 1);
      this.storage.setItem('todoList', this.todoList)
    } else {
      this.doneList.splice(index, 1);
      this.storage.setItem('doneList', this.doneList)
    }
  }
  
  changeTodo(index, done) {
    if (done) {
      var tempTodo = this.todoList[index]
      console.log(tempTodo)
      this.doneList.push(tempTodo);
      console.log(this.doneList)
      this.todoList.splice(index, 1);
      this.storage.setItem('todoList', this.todoList)
      this.storage.setItem('doneList', this.doneList)
    } else {
      var tempDone = this.doneList[index]
      this.todoList.push(tempDone);
      this.doneList.splice(index, 1);
      this.storage.setItem('todoList', this.todoList)
      this.storage.setItem('doneList', this.doneList)
    }
  }

Événement initial

La méthode hook de l'interface OnInit s'appelle ngOnInit, et Angular l'appelle immédiatement après la création du composant.

Je crois comprendre que c'est similaire au monté en vue ?

  ngOnInit() {
    this.initTodo();
  }
  initTodo() {
    var todoArr = this.storage.getItem('todoList');
    if (todoArr) {
      this.todoList = todoArr
    }
    var doneArr = this.storage.getItem('doneList');
    if (doneArr) {
      this.doneList = doneArr
    }
  }

Alors, vous avez terminé !

还有页脚的clear按钮

<!--todolist.component.html-->
<footer>
  Copyright © 2014 todolist.cn
  <a>clear</a>
</footer>

clearData() {
    localStorage.clear();
    this.todoList = [];
    this.doneList = [];
  }

说在后面的话

还有拖拽排序的的功能，不写了。

好了，以上就是本篇文章的内容（想看更多就到PHP中文网AngularJS使用手册中学习），有问题的可以在下方留言提问。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!