1. 当你第一次产生ionic2应用程序,这是生成的项目结构

  ├── ├── config.xml      这包含配置应用程序的名称,和包名,将被用于我们的应用程序安装到一个实际的设备。

  ├── hooks

  ├── ionic.config.json  ionic版本信息 "name": "Ion2","app_id": "","v2": true,"typescript": true

  ├── node_modules        包含了npm包

  ├── package.json          这些都是包构建ionic应用程序所必需的

  ├── platforms     这就是平台的具体构建,构建工具和包/库存储.例如,添加一个平台, ionic platform add android,这将文件夹安卓文件夹添加到文件夹中。

  ├── plugins      这就是cordova plugins。cordova插件允许你的应用在移动设备本地功能,e。g访问的媒体存储设备,甚至蓝牙API。

  ├── resources     这也包含特定于平台的资源(如图标和启动屏幕)

  ├── src                  这就是我们花费我们大部分的时间建立应用程序。它包含结构化程序的源代码。

  ├── tsconfig.json

  ├── tslint.json

  我们几乎总是会花90%的时间在src文件夹,这就是应用程序逻辑。然而整个应用程序通常从一个简单的src /index.html文件,它在构建复制到一个新文件夹www

2. 上篇说道创建了一个空的demo,现在来创建子页面,进入项目文件(我的项目放在C盘)

  $ cd demo

  $ ionic g page new

  创建了一个new页面,此时项目的pages会多了一个文件夹,包含html,scss,ts文件。

3.创建完成后只是一个文件,它并未和程序关联起来,

  首先,在app文件夹下打开app.module.ts

  然后,把html页面导入进来 import { NewPage } from '../pages/new/new';

  其次,在declarations和entryComponents把NewPage加上 。

  再次,打开想要从哪里跳转的页面的HTML文件,加上一个(单击)事件<button ion-button color="secondary" (click)="info()">跳转</button>

  之后,打开它的TS文件把要跳转的页面导入进来 import { NewPage } from '../pages/new/new';

  最后,在它的TS页面中export class ContactPage{}加上 点击方法 info(){this.navCtrl.push(NewPage);}

  这样一个跳转就完成了,创建components和providers和page一样,不同的是在app.module.ts下放入相应的位置例如:

  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler},getData],getData就是一个providers自定义服务名。

4. 下一节讲解http读取本地JSON或服务器数据。

Ionic2开发笔记(2)创建子页面及其应用的更多相关文章

  1. MUI框架-08-窗口管理-创建子页面

    MUI框架-08-窗口管理-创建子页面 之前写过这一篇,不知道为什么被删了,我就大概写了,抱歉 创建子页面是为了,页面切换时,外面的页面不动,让 MUI 写出来的页面更接近原生 app 官方文档:ht ...

  2. 运维开发笔记整理-创建django用户

    运维开发笔记整理-创建django用户 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.创建普通用户 C:\Users\yinzhengjie\softwares\Pycharm ...

  3. Hbuilder开发HTML5 APP之创建子页面

    折腾了好久,终于看明白怎么创建了: 1.创建个html5的mui页面,在其初始化方法中: mui.init({   subpages:[{    id:"list",   url: ...

  4. Ionic2 开发笔记(1)ionic2 +angular2搭建

    1.去node.js官网下载对应版本https://nodejs.org/en/(不会请看OnsenUi搭载,里面有详细过程) 2.然后通过npm下载Ionic和cordova $ npm insta ...

  5. odoo开发笔记--自定义server action页面跳转注意

    场景描述: 在添加自定义服务器动作 “复制全部”后发现直接创建了新的记录,并且直接进入到form保存完的状态. 如何解决: if yourself_obj_copy: return { 'type': ...

  6. WP开发笔记——WP APP添加页面跳转动画

    微软的toolkit团队为我们为我们提供了这样一套组件,叫做TransitionServices服务. 简单说一下它具备的效果: turnstile(轴旋转效果): turnstile feather ...

  7. MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换

      概 述 JRedu 在上一篇博客中,我们学习了如何使用Hbuilder创建一个APP,同时如何使用MUI搭建属于自己的第一款APP,没有学习的同学可以戳链接学习: http://www.cnblo ...

  8. Django开发笔记五

    Django开发笔记一 Django开发笔记二 Django开发笔记三 Django开发笔记四 Django开发笔记五 Django开发笔记六 1.页面继承 定义base.html: <!DOC ...

  9. Python之路【第二十三篇】:Django 初探--Django的开发服务器及创建数据库(笔记)

    Django 初探--Django的开发服务器及创建数据库(笔记) 1.Django的开发服务器 Django框架中包含一些轻量级的web应用服务器,开发web项目时不需再对其配置服务器,Django ...

随机推荐

  1. $http post 取不到数据

    默认情况下,jQuery传输数据使用Content-Type: x-www-form-urlencoded 和类似于"foo=bar&baz=moe"的序列,然而Angul ...

  2. cssText 和 this

    一.cssText 元素.style.width = '200px';   ==>   元素.style.cssText = 'width:200px;height:200px;' 二.this ...

  3. 基于ASIO的协程与网络编程

    协程 协程,即协作式程序,其思想是,一系列互相依赖的协程间依次使用CPU,每次只有一个协程工作,而其他协程处于休眠状态.协程可以在运行期间的某个点上暂停执行,并在恢复运行时从暂停的点上继续执行. 协程 ...

  4. 表单验证--通过原生js模仿ajax的异步交互

    今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...

  5. promise/bluebird源码

    本作品采用知识共享署名 4.0 国际许可协议进行许可.转载保留声明头部与原文链接https://luzeshu.com/blog/bluebirdsource 本博客同步在http://www.cnb ...

  6. Swift资料大全

    简单看了一下swift的语法,个人感觉相对于object-c很是简单明了.Swift的出现并不能说明iOS开发简单了很多,有可能会变得复杂,你需要学习两门编程语言,因为在程序员的世界里,务实并不是最重 ...

  7. mysql学习之权限管理

    数据库权限的意义: 为了保证数据库中的业务数据不被非授权的用户非法窃取,需要对数据库的访问者进行各种限制,而数据库安全性控制措施主要有这三种,第一种用户身份鉴别,手段可以是口令,磁卡,指纹等技术,只有 ...

  8. 在Ubuntu12.0至14.04版本之间用Apache搭建网站运行环境

    为了顺利安装各种软件,先更新下系统. apt-get update 安装Apache服务 apt-get install apache2 -y 安装php apt-get install php5 - ...

  9. bootstrap 响应式工具

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. windows下vue+webpack前端开发环境搭建及nginx部署

    一.开发环境搭建 1.前端框架一般都依赖nodejs,我们首先要安装node.js.请参考http://www.cnblogs.com/wuac/p/6381819.html. 2.由于许多npm的源 ...