实际行使Axure设计应用程序,使用WebStorm(4)进行开 – 实现页面UI

洋洋洒洒文章

实战运用Axure设计App,使用WebStorm开发(1) –
用Axure描述需求 

实战运用Axure设计App,使用WebStorm开发(2) – 创建
Ionic
项目  

实战运用Axure设计App,使用WebStorm开发(3) –
构建页面架构 

实战运用Axure设计App,使用WebStorm开发(4) –
实现页面UI

实战运用Axure设计App,使用WebStorm开发(5) –
实现页面效果

**实战运用Axure设计App,使用WebStorm开发(6) –
迈向后端**

 接上亦然篇系列文章,在本文中,将于WebStorm中继续出,实现页面的功用。这亟需一个页面一个页面的开支,来形成功能。本文将注重把持有页面的UI都落实出来,先把前端的干活且做到了,然后再错过链接后端平的
RESTful Service。


登陆页面
*
于页面上加 login.html 添加页面Html代码。 

<ion-view title="用户登录">
    <ion-content class="padding">
        <div class="login-title">
            <h2 class="energized">方便每一天</h2>
            <h2 class="assertive">配送系统</h2>
        </div>
        <div>
            <form novalidate="novalidate" on-valid-submit="doLogin()">
                <label class="item item-input validated">
                    账号
                    <input id="account" type="text" ng-model="user.name" placeholder="账号" required="required" name="account" />
                    <i class="icon ion-alert-circled error"></i>
                </label>
                <label class="item item-input validated">
                    密码
                    <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">登录</button>
                </label>
            </form>
        </div>
    </ion-content>
</ion-view>

以兑现,输入框的证实功能,需要为AngularJS加入两个从定义的签:
on-valid-submit, validated 由于这是一个大局的辨证功能就是拿它们上加至app.js
ddApp module下,如果只有对某个页面,可以仅补充加到者页面的 controller
下。

到此地登陆页面的UI就好了。


列表页面

先是构建派送列表页的Html内容:

<ion-view view-title="{{now | date:yyyy年M月d日}}">
    <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()">退出</li>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-content class="list order-list">
        <ion-item  class="item order-item" ng-repeat="order in orders">
            <img class="order-img" ng-src="{{order.qrSrc}}" ng-click="goDetail(order.id)" />
            <div class="order-text">
                <h2 ng-click="goDetail(order.id)">{{order.code}}</h2>
                <h3>{{order.pickTime}}</h3>
            </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()">手动输入</li>
            <li class="button icon ion-qr-scanner icon-text" ng-click="goScan()">扫描二维码</li>
        </div>
    </div>
</ion-view>

为了显得数据,这里以Service里举行了一个MockDB使用这MockDB为App提供数据,这样当呼吁使用后端数据的早晚,只要后端的RESTful
Service 也归同样规格的数就是足以了。

此间代码比较多,具体代码在 services.js 中。

对接下去处理 派送列表 的 controller 把页面动作交互和数码并上:

暨此叫送列表页,就处理了了:


详细页面

补偿加 详细页面 html 代码:

<ion-view view-title="{{now | date:yyyy年M月d日}}">
    <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()">退出</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)">
            <img class="order-img" ng-src="{{order.qrSrc}}" ng-click="goDetail(order.id)" />
            <div class="order-text">
                <h2 ng-click="goDetail(order.id)">{{order.code}}</h2>
                <h3>{{order.pickTime}}</h3>
            </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()">手动输入</li>
            <li class="button icon ion-qr-scanner icon-text" ng-click="goScan()">扫描二维码</li>
        </div>
    </div>
</ion-view>

长页面 controller :

顶立刻无异步 详细页面就了:

对接下便手动输入页面,和扫描页面,这半独页面比较简单,类似于前方的页面,写好页面Html,配置好
controller 的情节,就可以了。
暨这边有着页面的 UI 都形成了。
你可交 https://github.com/zhangsichu/DeliveryApp/releases/tag/AllPageUI 下充斥之路的代码。
啊足以以 git checkout AllPageUI 取得

git checkout AllPageUI

初稿链接:http://zhangsichu.com/blogview.asp?Content_Id=158

 

相关文章