Use Axure to design apps, use webstorm development – Build page architecture

In this article, we will continue to introduce the development in Webstorm to realize the functional requirements of the app. Just like building a house, the first step is to sketch out the page structure of the entire project first, let each page flow up, and then refine each page.
All the engineering code is placed in the HTTPS://GITHUB.COM/ZHANGSICHU/DELIVERYAPP and the initialization project created in the previous article, also tag theinitialproject, you can use Git checkout this tag , you can also go directly to: Https://github.com/zhangsichu/DeliveryApp/releases/tag/TheInitialProject to download the initialization of the project code, to get the original ionic to create a good project.

git checkout Theinitialproject

In this app, we use Ionic as the foundation of the engineering framework, Ionic is based on AngularJS to build, so the first step is to first set the page Routing and URL. Create a project service and controller, and add routing settings to the app.js. The name of Ng-app in AngularJS is named Ddapp.

1. Add Services.js and Controllers.js in the JS directory and add references in index.html.

A) Declare ddapp.services Module under Service.js

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

b) Declare ddapp.controllers Module under Controller.js

Angular.module (Ddapp.controllers, [ddapp.services])

c) Add module dependency in App.js

Angular.module (Ddapp, [Ionic, Ddapp.services, Ddapp.controllers])

d) Adding Javascript file references in index.html

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

650) this.width=650; "src=" Http://zhangsichu.com/attachments/month_201508/04_141133_he8l1.png "alt=" click to Open in New window "border=" 0 "style=" margin:0px;padding:0px;border:0px; "/>
In this step you can perform the following ionic serve

Ionic serve

Look at the current page in the browser

2. Add routes and Features page

A) Add the route to the app in the App.js.
650) this.width=650; "src=" Http://zhangsichu.com/attachments/month_201508/04_145009_yvn32.png "alt=" click to Open in New window "border=" 0 "style=" margin:0px;padding:0px;border:0px; "/>
The code is very simple, set the status of the URL in the app, and corresponding to the page to visit, but also in the WWW directory to create the Templates folder and corresponding page file.
b) Modify Controller.js add an empty controller
When the corresponding HTML is created under templates, you need to write an empty controller for each page under Controllers.js, and later we will implement the actual business functions.
650) this.width=650; "src=" Http://zhangsichu.com/attachments/month_201508/04_145018_pmes3.png "alt=" click to Open in New window "border=" 0 "style=" margin:0px;padding:0px;border:0px; "/>
c) Modify index.html
Modify APP for Navigate view
650) this.width=650; "src=" Http://zhangsichu.com/attachments/month_201508/04_145044_qnfu4.png "alt=" click to Open in New window "border=" 0 "style=" margin:0px;padding:0px;border:0px; "/>
In this step you can perform the following ionic serve

Ionic serve

Visit Http://localhost:8100/#/login or Http://localhost:8100/#/login in the browser to see the effect.

3. Make the page move up

Feature pages are created, and now it is time to write the function in the page, so that the page moved.
Add a button to each page and add the function code to the corresponding Controller. Add the login button to the login page to add functionality to it.

<H1>LOGIN</H1>&NBSP;
<button ng-click= "DoLogin ();" > Landing </button>

add the function of page jump in controller. &NBSP;
650) this.width=650; "Src=" http://zhangsichu.com/attachments/month_ 201508/04_160100_oldr5.png "alt=" click to Open in New window "border=" 0 "style=" margin:0px;padding:0px;border:0px; "/ >
The page was last completed. &NBSP;
650) this.width=650; "Src=" http://zhangsichu.com/attachments/month_ 201508/04_160216_fc5jdone.gif "alt=" click to Open in New window "border=" 0 "style=" margin:0px;padding:0px;border:0px; " />&NBSP;

git checkout Allpages

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

This article is from the "Grape City Control Technology Team Blog" blog, be sure to keep this source http://powertoolsteam.blog.51cto.com/2369428/1687931

Use Axure to design apps, use webstorm development – Build page architecture