In this section, we will learn how to apply angular features by building a simple note storage application that can load and modify a simple set of notes. The features used in this application are:
- Storing notes in a JSON file
- Show, create, modify, and delete notes
- Use the markdown format in your notes
- Simultaneous editing and previewing markdown
The app already contains the underlying HTML and CSS code, and a simple restful server written in node to manage notes so we can focus on angular instead of APIs. The focus of our study is how to add angular and learn about its important features.
3.2.1 Getting project Files
First, we need to get the file for the project, which can be obtained from Git and execute the following command:
$ git clone https://github.com/ionic-in-action/chapter3.git(Clone Chapter3 repository)
$ cd Chapter3(switch to Chapter3 directory)
$ git checkout step1(check out step1 tag)
(If you don't want to use Git, you can download the file directly: Https://github.com/ionic-in-action/chapter3/archive/step1.zip)
3.2.2 Starting the development server
Since this project is powered by a restful server, you need to master some Nodejs knowledge. In the project Server.js file, you can see a simple restful server, developed based on the Express.js framework, because you need long-term management of your notes, and the RESTful API allows apps to read, create, edit, and delete notes from the list. The server can also load the file into the browser via HTTP requests, and ionic serve is running your ionic application this way.
It is important to note that:
- The server is running on Port 3000;
- The server accepts the request and modifies the notes in the list according to the URL and HTTP method;
- The server uses the JSON file as the database (Data/notes.json), you can use the other database according to your own situation;
If the server is not running, you are missing some of the required node packages, workaround, enter the project directory in the terminal, run the NPM install,npm to check the dependency list and download dependencies.
Then enter the command $ node Server to start the server, if you need to terminate the server can press Ctrl+s or close the command window directly.
3.2 Configuration build Angular app--Simple note storage app