Use Axure to design apps, use Webstorm development (4) – Implement page UI

Series Articles

Use axure to design apps, use Webstorm development (1) – Describe requirements with axure

Use axure to design the app, use Webstorm development (2) – Create a Ionic project

Use axure to design apps, use Webstorm development (3) – Build page schemas

Use Axure to design apps, use Webstorm development (4) – Implement page UI

After a series of articles, in this article, will continue to develop in webstorm, to achieve the function of the page. This requires the development of a page on a page to complete the function. This article will focus on the implementation of all the UI of the page, the front end of the work is completed, and then to link the backend of the RESTful Service.

Landing page

Add login.html page HTML code to the page.

<ion-view title= "User Login" >
<ion-content class= "padding" >
<div class= "Login-title" >
&LT;H2 class= "energized" > Convenient every day &LT;H2 class= "assertive" > Distribution system </div>
<div>
<form novalidate= "Novalidate" on-valid-submit= "Dologin ()" >
<label class= "Item Item-input validated" >
<span class= "Input-label" for= "account" > Accounts </span>
<input id= "Account" type= "text" ng-model= "User.Name" placeholder= "username" required= "required" name= "accounts"/>
<i class= "icon ion-alert-circled error" ></i>
</label>
<label class= "Item Item-input validated" >
<span class= "Input-label" for= "password" > Password </span>
<input id= "password" type= "password" ng-model= "User.password" placeholder= "********" required= "required" name= " Password "/>
<i class= "icon ion-alert-circled error" ></i>
</label>
<label class= "Item" >
<button type= "Submit" class= "button button-block button-positive icon ion-person icon-text" > Login </button>
</label>
</form>
</div>
</ion-content>
</ion-view>

In order to implement, the input box verification function, need to add two custom tags to angularjs: on-valid-submit, validated because this is a global authentication function will be added to the App.js Ddapp module, if only for a page, Can only be added to this page under the controller.

The UI for landing the page here is complete.


List page

First build the HTML content of the dispatch list page:

<ion-view view-title= "{now | date:yyyy years M-month D-day}" >
<ion-nav-bar class= "Bar bar-balanced" align-title= "Center" >
<ion-nav-buttons side= "Left" >
<li class= "button icon icon-left ion-chevron-left" ng-click= "Dologout ()" > Exit </li>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content class= "List Order-list" >
<ion-item class= "Item Order-item" ng-repeat= "Order in Orders" >

<div class= "Order-text" >
</div>
<div class= "Order-check" ng-click= "Godetail (order.id)" >
<a class= "button icon-right ion-chevron-right button-clear button-assertive" ></a>
</div>
</ion-item >
</ion-content>
<div class= "bar Bar-footer bar-positive" >
<div class= "Button-bar" >
<li class= "button icon ion-ios-keypad icon-text" ng-click= "gomanual ()" > Manual input </li>
<li class= "button icon ion-qr-scanner icon-text" ng-click= "GoScan ()" > scan QR code </li>
</div>
</div>
</ion-view>

To show the data, there is a mockdb in the service that uses this MOCKDB to provide data for the app, so that when the backend data is requested, the backend's restful Service returns the same size data as well.

Here the code is more, the specific code in Services.js.

The controller that processes the dispatch list then connects the page action interaction with the data:


To dispatch the list page here, we are done with:


Detail Page

Add detailed page HTML code:

<ion-view view-title= "{now | date:yyyy years M-month D-day}" >
<ion-nav-bar class= "Bar bar-balanced" align-title= "Center" >
<ion-nav-buttons side= "Left" >
<li class= "button icon icon-left ion-chevron-left" ng-click= "Dologout ()" > Exit </li>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content class= "List Order-list" >
<ion-item class= "Item Order-item" ng-repeat= "Order in Orders" ng-click= "Godetail (order.id)" >

<div class= "Order-text" >
</div>
<div class= "Order-check" >
<a class= "button icon-right ion-chevron-right button-clear button-assertive" ></a>
</div>
</ion-item >
</ion-content>
<div class= "bar Bar-footer bar-positive" >
<div class= "Button-bar" >
<li class= "button icon ion-ios-keypad icon-text" ng-click= "gomanual ()" > Manual input </li>
<li class= "button icon ion-qr-scanner icon-text" ng-click= "GoScan ()" > scan QR code </li>
</div>
</div>
</ion-view>

Add a Page controller:

To this step the detailed page was completed:


The next step is to manually enter the page, and scan the page, the two pages are relatively simple, similar to the previous page, write a good page HTML, configure the controller's content, it is OK.
The UI for all the pages here is complete. You can download the code for this phase to Https://github.com/zhangsichu/DeliveryApp/releases/tag/AllPageUI.
You can also use git checkout allpageui to get

git checkout Allpageui

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

Use Axure to design apps, use Webstorm development (4) – Implement page UI