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

Source: Internet
Author: User

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.

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.