Practical Use of Axure to design apps and use WebStorm for development (3)-building the page architecture, axurewebstorm

Practical Use of Axure to design apps and use WebStorm for development (3)-building the page architecture, axurewebstorm
In this article, we will continue to introduce the development in WebStorm to implement the functional requirements of the App. Just like building a house, the first step is to outline the Page Structure of the entire project, first let the pages flow, and then refine each page.

All the project code is placed in the initialization project created in the https://github.com/zhangsichu/DeliveryApp at the same time in the previous article, also Tag TheInitialProject, you can use Git checkout this Tag, you can also go directly: https://github.com/zhangsichu/DeliveryApp/releases/tag/TheInitialProject to download the initial project code, get the initial ionic created Project.

Git checkout TheInitialProject

In this App, we use Ionic as the basic engineering framework. Ionic is built based on AngularJS, so the first step is to set the page routing and URL first. Create the service and controller of the project, and add route settings in app. js. In AngularJS, the ng-app name is ddApp.

1. Add services. js and controllers. js under the js directory and add references in index.html.

A) Declare the ddApp. services Module under service. js.

Angular. module (ddApp. services, []);

B) Declare the ddApp. controllers Module in controller. js.

Angular. module (ddApp. controllers, [ddApp. services])

C) Add Module dependencies in app. js

Angular. module (ddApp, [ionic, ddApp. services, ddApp. controllers])

D) add a Javascript file reference to index.html.

<Script src = "js/app. js"> </script>
<Script src = "js/services. js"> </script>
<Script src = "js/controllers. js"> </script>

In this step, you can run the following ionic serve

Ionic serve

View the current page in the browser

2. Add routes and feature pages

A) add the app route in app. js.

The code is very simple. Set the status of the Url in the App and the page to be accessed. You also need to create the templates folder and the corresponding page file under the www directory.
B) modify controller. js to add an empty Controller.
After the corresponding html under templates is created, you need to write an empty controller for each page under controllers. js. We will implement the actual business functions later.

C) Modify index.html
Modify App to navigate view
 
In this step, you can run the following ionic serve

Ionic serve

Access http: // localhost: 8100/#/login or http: // localhost: 8100/#/login in the browser to see the effect.

3. Make the Page Dynamic

Function pages have been created, and now you have to write functions in the page to make the Page Dynamic.
Add a button to each page and add the function code to the corresponding Controller. For example, add a Login button on the login page to add functions to it.

<H1> Login <Button ng-click = "doLogin ();"> log on </button>

Add the page Jump function in the Controller.

The final page.
 
The Code completed at this step can be downloaded at: https://github.com/zhangsichu/DeliveryApp/releases/tag/AllPages. You can also execute git checkout AllPages

Git checkout AllPages

Original link http://zhangsichu.com/blogview.asp? Content_Id = 157

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.