Getting started with Angular, do you really know the Angular version of ToDoList?-JS Tutorial-php.cn

This article introduces how to get started with angularjs. This is an article for getting started with angularjs. If you still don’t understand angularjs, you can read this article now.

(1) Basic skills

Don’t read the documentation before jumping into the trap, Angular quickstart.
Then open~

Prerequisites
When installing Node, you need to pay attention to the version, node 6.9.x and npm 3.x.x.
Then install Angular CLI globally.
```
npm install -g @angular/cli
```
Copy after login
Create project
```
ng new ng-first
```
Copy after login
Start the development server
```
cd ng-first
ng serve --open
```
Copy after login
The browser automatically opens http://localhost:4200/ , saw the ng symbol, are you so excited(manual funny).
Create component
This operation will directly create the file and configure it in the root component.
```
ng g component components/todolist
```
Copy after login
Create service
Keep formation, one more.
```
ng g service services/storage
```
Copy after login
Let’s try our best and say hello
In accordance with international practice, let’s say hello first!
Insert the custom component app-todolist in app.component. This name depends on the selector: 'app-todolist' in todolist.component.ts.
```

<app-todolist></app-todolist>
```
Copy after login
Continue and define a variable msg in todolist.component.ts. This syntax is the default routine of ts. (Manual face covering, actually I am not very good at ts)
```
//todolist.component.ts
export class TodolistComponent implements OnInit {
  public msg: any = 'Hello World !';

  constructor() { }

  ngOnInit() {
  }

}
```
Copy after login
Bind data in todolist.component.html
```
//todolist.component.html
<h3> {{msg}} </h3>
```
Copy after login
```
/*todolist.component.css*/
h3{
  text-align: center;
  color:  #369;
}
```
Copy after login
Switch to the browser, bang Thump thump thump!

Wow, let’s get to the point.

(2) HTML and CSS part

This is not important, it is not the focus of this article, just open the console and copy it (So shameless ).

This is html, copy it directly to todolist.component.html and remove some unused 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>

Copy after login

This is the css style, copy it directly to todolist.component.css, and copy the body style to styles.css in the src directory.

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

Copy after login

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

Copy after login

After copying, the page should look like this.
Getting started with Angular, do you really know the Angular version of ToDoList?
Okay, the above is unnecessary foreplay (manual funny) .

(3) Implement the function of ToDoList

Study the js source code on ToDoList. The general logic is that after the user enters the to-do item, add a done attribute. The default value is false, indicating that it is in progress. ; Click the Done button, and the done attribute changes to true, indicating that it is completed. and can be deleted. After the browser refreshes, the data still exists because HTML5's localStorage is used.

The function of adding to-do items

Declare todo variables

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

Copy after login

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

Copy after login

[(ngModel)] is an Angular syntax used to bind todo to the input box. Its data flow is bidirectional: from the attribute to the input box, and from the input box back to the attribute.

At this step, the console reported an error.
The solution is that we must choose to use the FormsModule module.

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

Copy after login

Items added in the loop

Add the built-in instruction *ngFor to loop the list.

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

Copy after login

You can see the added items.
Getting started with Angular, do you really know the Angular version of ToDoList?

Switch whether the item is completed and delete the item

Bind changeTodo, deleteTodo events

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

Copy after login

{{item.todo}}
-

The items to be added and completed items are divided into two arrays (or placed in one array, and then controlled whether to display based on the value of done), but I think it is easier to operate in two.

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

  }

Copy after login

At this point, this function is completed~
Wait, refresh the page, Oops, the items just entered are gone. (If you want to see more, go to the PHP Chinese website AngularJS Development Manual to learn)

At this time, localStorage makes its debut! !

Create StorageService service

In order to no longer copy the same code over and over again, we need to create a single reusable data service and inject it into those components that need it. middle.

In step 6 of (1) Basic Skills, when creating a service, angular-cli has already helped us generate the basic structure of a service.
Create services for easy use anywhere.

//storage.service.ts
export class StorageService {

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

}

Copy after login

To use the service, just inject it.

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

Copy after login

Okay, we can use it easily and happily.

Save data to localStorage

Use this.storage to use the encapsulated service.
The data must be saved after each operation. Isn’t it a bit useless~

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

Copy after login

Initial event

The hook method of the OnInit interface is called ngOnInit, and Angular calls it immediately after creating the component.

My understanding is that it is similar to mounted in 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
    }
  }

Copy after login

Then, you’re done!

还有页脚的clear按钮

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

Copy after login

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

Copy after login

说在后面的话

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

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

The above is the detailed content of Getting started with Angular, do you really know the Angular version of ToDoList?. For more information, please follow other related articles on the PHP Chinese website!