zoukankan      html  css  js  c++  java
  • 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或服务器数据。

  • 相关阅读:
    百度JS模板引擎 baiduTemplate 1.0.6 版
    javascript 拖放效果
    二维码的生成(可设置大小)以及插件下载地址
    处理html页面元素工具类(HtmlAgilityPack.dll)的使用
    webstrom一键上传github及使用
    git bash上传代码到github
    CSS 样式书写规范+特殊符号
    Html的基本元素(Element)
    AttributeError: 'Sxgl' object has no attribute 'driver' 解决方法之一
    Linux 监控数据库资源占用
  • 原文地址:https://www.cnblogs.com/infernofranz/p/6542684.html
Copyright © 2011-2022 走看看