3.2 Configuration build Angular app--Simple note storage app

Source: Internet
Author: User
Tags node server

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:

    1. Storing notes in a JSON file
    2. Show, create, modify, and delete notes
    3. Use the markdown format in your notes
    4. 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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.