Ne lisez pas la documentation avant de vous lancer, démarrage rapide d'Angular.
Ensuite, démarrez~
Prérequis
Installez Node, vous devez faire attention à la version, node 6.9.x et npm 3.x.x.
Ensuite, installez Angular CLI globalement.
npm install -g @angular/cli
Créer un projet
ng new ng-first
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) .
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
Créer du service
Gardez la formation, un de plus.
ng g service services/storage
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.
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) .
É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é.
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)]
],
})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.
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 ! !
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.
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)
}
}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é !
<!--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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
