[Ionic + AngularJS Development]-personal daily management App (1), ionicangularjs

[Ionic + AngularJS Development]-personal daily management App (1), ionicangularjs
Preface

In the past year, I have been engaged in many front-end mobile phone development. Thanks to the improvement in mobile phone performance and the popularity of 4G, I feel that using hybrid technology to develop mobile apps can already meet the needs of more and more application scenarios. At the beginning of the new year, I made a phased summary of what I learned in 2016, recording the development history of a self-made "small and cute" Hybrid App!

[Additional Reading 〗

Hybrid Development of Enterprise Mobile Application Development

The most popular "Stars" in the JavaScript field in 2016

Experience and summary of Hybrid development of Hybrid APP

 

App Preview

 

(* Fuzzy Personal Data)

 

Introduction

Personal Daily Management App (PDM (Personal Daily Management), a small data record tool in the big data age, which allows you to plan Daily accounting, activity records, and items, arrange personal consumption and office studies scientifically and reasonably.

 

Use Technology

Ionic + AngularJS + SQLite

[Additional Reading 〗

Learning and organizing AngularJS-core features

 

Design and development environment (Android)

• Install node
• Install Android SDK
• Install Python (the npm plug-in may be used later)
• Install cnpm (npm large and medium-sized Chinese edition, after installing node, run the command line: npm install-g cnpm)

[Additional Reading 〗

Build a development environment and create a project

 

Create an ionic Project

1 ionic start PDM

It was originally a command that could be done simply, but in China it won't be too good-the network is stuck for half a day. Here we will introduce another method of "tortuous project initiation", starting with command line splitting:

1 ionic start PDM --v1 --skip-npm2 cd PDM3 cnpm install --save

At this point, the project has been created, and the command line is in the directory of the project. Enter:

1  ionic serve

You can see the running effect of the official Tabs template.

Architecture Directory Overview

The main functions of the project are implemented under the www directory, focusing on the following files:

• Www/js/app. js -- initialize the project and customize various functions.
• Www/views/* -- this is the implementation code of each interface of the project (separated by a sub-directory on one interface. When an html file is used, the view is displayed, and the js file is the Controller code)

 

For details, see the source code file.

The running effect is as follows:

[Additional Reading 〗

Ionic example app directory structure description

Ionic project structure-project directory

 

* [Source code file]

 

Author: Ken