实战使用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
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
原文链接 http://zhangsichu.com/blogview.asp?Content_Id=157
实战使用Axure设计App,使用WebStorm开发(3) – 构建页面架构的更多相关文章
- 实战使用Axure设计App,使用WebStorm开发(5) – 实现页面功能
系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求 实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目 实战使 ...
- 实战使用Axure设计App,使用WebStorm开发(4) – 实现页面UI
系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求 实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目 实战使 ...
- 实战使用Axure设计App,使用WebStorm开发(6) – 迈向后端
系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求 实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目 实战使 ...
- 实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目
系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求 实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目 实战使 ...
- 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求
系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求 实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目 实战使 ...
- 前端开发工程师 - 04.页面架构 - CSS Reset & 布局解决方案 & 响应式 & 页面优化 &规范与模块化
04.页面架构 第1章--CSS Reset 第2章--布局解决方案 居中布局 课堂交流区 水平列表的底部对齐 如图所示,一个水平排列的列表,每项高度都未知,但要求底部对齐,有哪些方法可以解决呢? & ...
- Java生鲜电商平台-SpringCloud微服务开发中的数据架构设计实战精讲
Java生鲜电商平台-SpringCloud微服务开发中的数据架构设计实战精讲 Java生鲜电商平台: 微服务是当前非常流行的技术框架,通过服务的小型化.原子化以及分布式架构的弹性伸缩和高可用性, ...
- 简单5步说清App软件在线开发、App制作多少钱?
开发制作一款App,所有人都会首先关心开发一款App多少钱这个问题.从网上的信息来看,花费个几十万是很正常的事情,甚至有人说要花上百万才能制作出一款App.那么App软件的开发制作到底和什么有关?怎么 ...
- BI之SSAS完整实战教程7 -- 设计维度、细化维度中 :浏览维度,细化维度
上篇文章我们已经将Dim Geography维度设计好. 若要查看维度的成员, AS需要接收该维度的详细信息(包括已创建的特性.成员属性以及多级层次结构), 通过XMLA与AS的实例进行通信. 今天我 ...
随机推荐
- C# 网络与Cmd命令
网络命令行: 1 - ping 2 - ipconfig 本机网络配置情况 3 - net 4 - arp 网络网卡物理/ip地址对应用 5 - tracert 列举数据报到达目标地所经过的网关 6 ...
- 【Mail】JavaMail介绍及发送邮件(一)
JavaMail介绍 JavaMail是SUN提供给开发人员在应用程序中实现邮件发送和接收功能而提供的一套标准开发类库,支持常用的邮件协议,如SMTP.POP3.IMAP,开发人员使用JavaMail ...
- 检查或遍历android手机应程
检查android手机中是否存在某应程 public boolean checkApp(String packageName) { if (packageName == null || ...
- JavaScript中对象的含义与this的指向
JavaScript中的对象:无序属性的集合 -其属性可以包含基本值.对象或函数.对象就是一组没有顺序的值.我们可以吧JavaScript中的对象想象成键值对,其中值可以是数据和函数.对象的行为和特征 ...
- leetcode problem sum
2. Add Two Numbers You are given two linked lists representing two non-negative numbers. The digits ...
- Swift基础语法(三)
Array数组在swift中Array相当于oc中的NSMutableArray(变长数组) //1.定义数组 var numarr:Int[] = [,,,,]; var strarr:String ...
- LInux配置jdk(mac和windows)
我的linux使用的是VMware搭建的虚拟环境,用的是CENTOS6.5 一.准备工作: 1.确定系统安装的是成功的. 2.系统没有其他的问题 3.确定没有安装过其他版本的jdk,两个jdk会反冲 ...
- Task set generation
Task set generation for uni- and multiprocessors: “Unifying Fixed- and Dynamic-Priority Scheduling b ...
- 利用xtraBackup实现不停master服务做主从同步
MySQL主从同步原理: MySQL主从同步是在MySQL主从复制(Master-Slave Replication)基础上实现的,通过设置在Master MySQL上的binlog(使其处于打开状态 ...
- PerconaXtraBackup --全备增备prepare restore
Xtrabackup Xtrabackup包含两个主要的工具,即xtrabackup和innobackupex,二者区别如下: • xtrabackup只能备份innodb和xtradb引擎表,而不 ...