ToDo List in Angular CLI

I’ve been developing my projects with React JS since I started coding. Although I had no experience working on Angular, I was wondering about other frameworks like Angular and Vue.Js. As a person who likes improving myself, learning new things, and implementing them into my codes, creating a TODO list with Angular CLI was exciting for me.

I had a chance to evaluate the positive and negative sides between ReactJS and AngularCLI during this process. Maybe I can write another blog post about the differences between each other. However, I just want to focus on configuring Angular CLI and developing the app with a mock Json file in this post.

First of all, I will start with what tools I use while developing this project and what the necessary steps are.

This project was generated with Angular CLI version 11.2.1. Angular Material was used for creating a button and checkbox in the table while I used a mocked Json file for the backend provider. Moreover, this project supports GET/POST/DELETE/PUT requests.

Let’s Start…

For using some tools inside of Angular CLI, I had to the highest version of Node. Therefore, firstly I had to upgrade my node so I installed the latest version of Node. Later, I could install Angular CLI(version 11.2.1.).

Node.js

• Before starting to install Angular CLI, check your version of Node by running “node -v” in the terminal.
• If your Node.js version’s below 8.x or 10.x. You should install the highest version of Node.js. https://nodejs.org/en/download/

Install the Angular CLI and Create Todo list app

By following the steps written below, you can create an app called todolist-angular.

While installing Angular CLI, you can select the stylesheet’s type (CSS, SASS, or SCSS) and angular routing preference.

npm install -g @angular/cli → (Download once is enough for all angular cli projects)

cd todolist-angular

code .

ng serve

You can see the project structure by opening the folder in the Visual Studio as seen below.

It is important to decide where to start when starting the project. I started the project by making the HTML page with Angular Material.

In order not to occupy a large space in the “app.module.ts” file. I created a “material / material.module.ts” file to import the required tools from Angular Material. After running “ ng add @angular/material” in the terminal, it was ready to work with Angular Material.

I completed the front end part with some codes in HTML and CSS but I needed a backend and API to save data, delete or update status. ( You can see

If you only focused on the front end part, like in this project, you can set up mocked Json file and continue other tasks thanks to mocked Json.

Installation of mock Json file

First of all, we need to have data, namely the Json file containing the information.

1. For this, we need to install the Json-server included in the npm package.

npm install — save json-server

(If you get an error during installation, try to install globally. the problem will be resolved.)

2. Create api/db.json to follow the contents.

(add db.json file inside api folder)

The api / db.json file defines the endpoint of our API. For example, we can think of it as a / todoitems endpoint calling things to do.

3. To create a roadmap, we need to create the api/routes.json file. And we need to add the following code snippet into the file.

{

“/api/*”: “/$1”

}

The reason we created this file is that there are Json files with more than one data and we create a route to pull whichever one we need.

If we typed $ 2 instead of $ 1, and if there were Json with 2 data, it would fetch the data from the second Json file.

4. We add “api”: “json-server api/db.json — routes api/routes.json — no-cors=true” manually into the package.json file.

Briefly, it says to go to the db.json file inside the api folder as json-server and follow the routes.json inside the api folder as the route.

4.a. Write npm run api in terminal to test what we do.

And when you click on http: // localhost: 3000 / todoitems, you will be able to view the data in the db.json file in your browser.

5. To provide communication with Mock API in Angular CLI; Add the HttpClientModule setup to the app.module.ts file.

6. Add the HttpClient to the App.component.ts file.

After adding; It is ready for GET, POST, PUT and DELETE functions.

6.a. To test if it works, create a property named todoitems $ and return it with a GET request.

6.b. Write a small test code on the html page. (See below)

7. If you return ng serve — open in the terminal, you will probably not be able to see the data in the browser or in <div>. Because your Angular application and your backend are not on the same domain. (While XMLHttpRequest is trying to access data on ‘http: // localhost: 3000 / todoitems’, ‘http: // localhost: 4200’ blocks because of the CORS policy.)

8. To solve the CORS problem;

a. Write http://localhost:3000/api/todoitems instead of /api/todoitems.

b. Create Proxy.conf.json file and add localhost:3000 like below.

c. After adding “proxyConfig”: “proxy.conf.json” inside angular.json file , It completes the setup and works.

d. Restart the server and see the value in the browser.

Using Postman

Another way for testing is to use postman after the 4th step.

When you fill in the blank with http://localhost:3000/todoitems and select the GET, POST, PUT and DELETE request method, you can see your data as a Json file.

If your requests work in Postman, you can understand that you install mock Json correctly and you can do these requests in your own code.

After all those steps you should create functions for adding, changing, and deleting a value in Json file and connected these functions on the html page like the example below.

Conclusion

Congratulations! You can see that your page is working correctly in the browser.

I hope this post helps someone out there, if you want to see the repo, https://github.com/ceydaulubas/ToDoList-Angular-CLI-FakeBackEnd

Thanks for reading☺️