Ionic2开发笔记(2)创建子页面及其应用
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)创建子页面及其应用的更多相关文章
- MUI框架-08-窗口管理-创建子页面
MUI框架-08-窗口管理-创建子页面 之前写过这一篇,不知道为什么被删了,我就大概写了,抱歉 创建子页面是为了,页面切换时,外面的页面不动,让 MUI 写出来的页面更接近原生 app 官方文档:ht ...
- 运维开发笔记整理-创建django用户
运维开发笔记整理-创建django用户 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.创建普通用户 C:\Users\yinzhengjie\softwares\Pycharm ...
- Hbuilder开发HTML5 APP之创建子页面
折腾了好久,终于看明白怎么创建了: 1.创建个html5的mui页面,在其初始化方法中: mui.init({ subpages:[{ id:"list", url: ...
- Ionic2 开发笔记(1)ionic2 +angular2搭建
1.去node.js官网下载对应版本https://nodejs.org/en/(不会请看OnsenUi搭载,里面有详细过程) 2.然后通过npm下载Ionic和cordova $ npm insta ...
- odoo开发笔记--自定义server action页面跳转注意
场景描述: 在添加自定义服务器动作 “复制全部”后发现直接创建了新的记录,并且直接进入到form保存完的状态. 如何解决: if yourself_obj_copy: return { 'type': ...
- WP开发笔记——WP APP添加页面跳转动画
微软的toolkit团队为我们为我们提供了这样一套组件,叫做TransitionServices服务. 简单说一下它具备的效果: turnstile(轴旋转效果): turnstile feather ...
- MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换
概 述 JRedu 在上一篇博客中,我们学习了如何使用Hbuilder创建一个APP,同时如何使用MUI搭建属于自己的第一款APP,没有学习的同学可以戳链接学习: http://www.cnblo ...
- Django开发笔记五
Django开发笔记一 Django开发笔记二 Django开发笔记三 Django开发笔记四 Django开发笔记五 Django开发笔记六 1.页面继承 定义base.html: <!DOC ...
- Python之路【第二十三篇】:Django 初探--Django的开发服务器及创建数据库(笔记)
Django 初探--Django的开发服务器及创建数据库(笔记) 1.Django的开发服务器 Django框架中包含一些轻量级的web应用服务器,开发web项目时不需再对其配置服务器,Django ...
随机推荐
- $http post 取不到数据
默认情况下,jQuery传输数据使用Content-Type: x-www-form-urlencoded 和类似于"foo=bar&baz=moe"的序列,然而Angul ...
- cssText 和 this
一.cssText 元素.style.width = '200px'; ==> 元素.style.cssText = 'width:200px;height:200px;' 二.this ...
- 基于ASIO的协程与网络编程
协程 协程,即协作式程序,其思想是,一系列互相依赖的协程间依次使用CPU,每次只有一个协程工作,而其他协程处于休眠状态.协程可以在运行期间的某个点上暂停执行,并在恢复运行时从暂停的点上继续执行. 协程 ...
- 表单验证--通过原生js模仿ajax的异步交互
今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...
- promise/bluebird源码
本作品采用知识共享署名 4.0 国际许可协议进行许可.转载保留声明头部与原文链接https://luzeshu.com/blog/bluebirdsource 本博客同步在http://www.cnb ...
- Swift资料大全
简单看了一下swift的语法,个人感觉相对于object-c很是简单明了.Swift的出现并不能说明iOS开发简单了很多,有可能会变得复杂,你需要学习两门编程语言,因为在程序员的世界里,务实并不是最重 ...
- mysql学习之权限管理
数据库权限的意义: 为了保证数据库中的业务数据不被非授权的用户非法窃取,需要对数据库的访问者进行各种限制,而数据库安全性控制措施主要有这三种,第一种用户身份鉴别,手段可以是口令,磁卡,指纹等技术,只有 ...
- 在Ubuntu12.0至14.04版本之间用Apache搭建网站运行环境
为了顺利安装各种软件,先更新下系统. apt-get update 安装Apache服务 apt-get install apache2 -y 安装php apt-get install php5 - ...
- bootstrap 响应式工具
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- windows下vue+webpack前端开发环境搭建及nginx部署
一.开发环境搭建 1.前端框架一般都依赖nodejs,我们首先要安装node.js.请参考http://www.cnblogs.com/wuac/p/6381819.html. 2.由于许多npm的源 ...