系列文章实战使用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的功能需求。 就像盖房子一样,第一步需要把整个工程的页面结构先勾勒出来,先让各个页面流转起来,然后再去细化每个页面。 git checkout TheInitialProject 在本App中,咱们采用了 Ionic 作为基础的工程框架,Ionic 是基于 AngularJS 来构建的,所以第一步就是先把页面路由和URL设定好。创建工程的 service 和 controller,并在 app.js 添加路由设定。 咱们在 AngularJS 中 ng-app 的名字取名为 ddApp. 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> ionic serve 在浏览器里看看现在的页面情况 ionic serve 在浏览器里访问 http://localhost:8100/#/login 或者 http://localhost:8100/#/login 看看效果。 <h1>Login</h1> 在Controller 里添加页面跳转的功能。 git checkout AllPages |
|