专栏首页葡萄城控件技术团队实战使用Axure设计App,使用WebStorm开发(3) – 构建页面架构

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

系列文章

实战使用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 中开发,去实现App的功能需求。 就像盖房子一样,第一步需要把整个工程的页面结构先勾勒出来,先让各个页面流转起来,然后再去细化每个页面。 所有工程代码放在了 https://github.com/zhangsichu/DeliveryApp 同时上篇文章中创建的初始化工程,也Tag了 TheInitialProject,您可以使用 Git checkout 这个Tag, 也可以直接到:https://github.com/zhangsichu/DeliveryApp/releases/tag/TheInitialProject 去下载初始化的工程代码,得到最初的 ionic 创建好的工程。

git checkout TheInitialProject

在本App中,咱们采用了 Ionic 作为基础的工程框架,Ionic 是基于 AngularJS 来构建的,所以第一步就是先把页面路由和URL设定好。创建工程的 service 和 controller,并在 app.js 添加路由设定。 咱们在 AngularJS 中 ng-app 的名字取名为 ddApp. 1. 在 js 目录下添加 services.js 和 controllers.js 并在 index.html中添加引用。 a) 在 service.js 下声明 ddApp.services Module

angular.module(ddApp.services, []);

b)在controller.js下声明ddApp.controllers Module

angular.module(ddApp.controllers, [ddApp.services])

c)在app.js 添加Module依赖

angular.module(ddApp, [ionic, ddApp.services, ddApp.controllers])

d)在 index.html中添加 Javascript 文件引用

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

ionic serve

在浏览器里看看现在的页面情况 2. 添加路由和功能页面 a) 在 app.js 里添加app的路由。

代码很简单,设定App中Url对应的状态,和对应要访问的页面,同时也需在 www 目录下创建 templates 文件夹和对应的页面文件。 b) 修改 controller.js 添加空的 Controller 当 templates 下对应的 html 创建完成后,需要在 controllers.js 下为每个页面先写一个空的 controller,稍后我们会去实现实际的业务功能。

c) 修改 index.html 修改 App 为 navigate view

到这一步您可以执行以下 ionic serve

ionic serve

在浏览器里访问 http://localhost:8100/#/login 或者 http://localhost:8100/#/login 看看效果。 3. 让页面动起来 功能页面都创建好了,现在就要在页面里写功能了,让页面动起来了。 给每个页面添加按钮,在对应的 Controller 里添加功能代码。如在 Login页面里 添加 login 按钮,给它添加功能。

<h1>Login</h1>   
<button ng-click="doLogin();">登陆</button>

在Controller 里添加页面跳转的功能。

页面最后完成的样子。

到这一步完成的代码在:https://github.com/zhangsichu/DeliveryApp/releases/tag/AllPages 可以下载到。 你也可以执行 git checkout AllPages

git checkout AllPages

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 实战使用Axure设计App,使用WebStorm开发(5) – 实现页面功能

     系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求 实战使用Axure设计App,使用WebStorm开发(2...

    葡萄城控件
  • Webpack 4教程 - 第四部分,使用SplitChunksPlugin分离代码

    Webpack 4 给我们带来了一些变化。其中包括更快地打包,引入了SplitChunksPlugin,并淘汰掉之前的CommomsChunksPlugin。在...

    葡萄城控件
  • 用WijmoJS搭建您的前端Web应用 —— React

    在本系列文章中,我们已经介绍了Angular和Vue框架下 WijmoJS 的玩法。

    葡萄城控件
  • 只需要4步就可以将asp.net mvc变成SPA(单页面)应用,实现无刷新页面切换!

    Senna.js是一个超快速的单页面应用程序引擎,轻松构建基于Web的现代应用程序,只有大约8KB的JavaScript而没有任何依赖性。还提供非常酷炫的动画效...

    阿新
  • 科技爱好者周刊(第 127 期):未来人人开发软件,几乎没人编码

    这里记录每周值得分享的科技内容,周五发布。( 本周五是十一假期,周刊提前到周三发布。)

    ruanyf
  • 【姊妹篇】预测模型研究利器-列线图(Cox回归)

    人类总是痴迷于“算命”。无论是中国文化中的“算命”,还是西方文化中的“占星术”,都显示出人们对此的热情。在这一部分,我们将讨论另一种科学的“算命”。 该模型将用...

    用户6317549
  • Jmeter系列(58)- 详解 Switch Controller 开关控制器

    https://www.cnblogs.com/poloyy/category/1746599.html

    小菠萝测试笔记
  • SaaS渠道的价值设计

    ? 本文作者 吴昊:腾讯SaaS加速器导师、纷享销客天使投资人、前执行总裁,具有20年企业信息化和6年SaaS营销团队创新经验。 当然,随着我深度接触到更多S...

    腾讯SaaS加速器
  • NASA无人机障碍赛:专业选手Vs.人工智能,赌一赌谁赢?

    安妮 编译整理 量子位 出品 | 公众号 QbitAI 加州,帕萨迪纳市,深秋。 在NASA喷气推进实验室(JPL)里,上演了这样一场竞赛,比赛双方将操控无人机...

    量子位

扫码关注云+社区

领取腾讯云代金券