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

Use Axure to design the app, use Webstorm development (5) – Achieve page functionality

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>

There's more code here, the code is in Services.js.
next process Controller for dispatch list The page action interaction and Data connection:

to dispatch the list page here, the process is finished:


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 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.

git checkout Allpageui

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

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

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