一、   基础搭建

　　1.      新建IONIC2项目

　　　　　　ionic start myApp tabs --v2 不加--v2会新建ionic1的项目

　　2.      运行项目

　　　　　　cd myApp

　　　　　　ionic serve

　　3.      添加个人信息页

　　　　　　ionic g page myinof

　　　　　　添加页面后运行项目会报错：

　　　　　　imports: [

　　　　　　　　IonicModule.forChild(Myinfo),

　　　　　　　　],

　　　　　　解决办法：把此句注释 // IonicModule.forChild(Myinfo),

　　4.      将个人信息页添加到底部tab栏

　　　　A.      在./pages/tabs/tabs.html中添加如下代码

　　　　B.       在./pages/app/app.component.ts中添加如下代码

　　　　C.      在./pages/app/app.module.ts中添加如下代码

　　　　D.      在./pages/tabs/tabs.ts中添加如下代码


　　　　ionic2图标集：http://ionicframework.com/docs/ionicons/

　　　　E.       运行效果

二、   事件绑定

　　1.      修改myinfo.html页面，在页面中添加一个按钮事件

　　　　　　<a (click)="dofunction()">登录</a>

　　　　　　在angular2中使用（click）=function()的形式绑定点击事件

　　2.      修改myinfo.ts文件，在class Myinfo中添加dofunction()

　　3.      运行效果

三、   登录功能

　　1.      添加登录页

　　　　　　在pages文件夹内新增auth文件夹，在auth文件夹内新增以下三个文件login.html、login.module.ts、login.ts

　　　　　　login.html:

　　　　　　login.ts:

　　　　　　login.module.ts:

　　2.      注册login模块

　　　　　　修改app.module.ts，添加login模块的注册信息

　　3.      修改myinfo.html文件，添加样式和跳转按钮

　　4.      修改myinfo.ts文件，导入Login模块和添加goLogin()方法

　　5.      运行效果

 

IONIC2新建项目并添加导航的更多相关文章

  1. Android新建项目手动添加Layout布局

    前言: 这是看<第一行代码>学习到的第一章,之前使用Eclipse创建Android项目都是自动生成MainActivity.java文件和layout文件夹下的activity_main ...

  2. 新建项目找不到android studio:appcompat v7:27.+包。

    1.我们在build.gradle(project)中添加maven中的google库: allprojects { repositories { jcenter() maven { url &quo ...

  3. .Net Core新建解决方案，添加项目引用，使用VSCode调试

    并不是我自己琢磨的,是看了别人学习的,因为写的都不完整,所以就整理一下记录后面忘了回看. 反正.Net Core是跨平台的,就不说在什么系统上了.假设我要建一个名为Doggie的解决方案,里面包含了一 ...

  4. UWP开发之Mvvmlight实践一：如何在项目中添加使用Mvvmlight(图文详解)

    最近一直在做UWP开发,为了节省成本等等接触到MVVMlight,觉得有必要发点时间研究它的用法与实现原理才行.如果有问题的地方或者有好的建议欢迎提出来. 随着移动开发的热门,Mvvmlight在An ...

  5. MVC3 新建项目

    一.安装工具 二.新建项目 step1:新建MVC3项目 打开新建项目窗口,在“已安装的模板”列表中选择“Web”,在右侧应用程序模板列表中选择“ASP.NET MVC3 Web应用程序”,修改项目名 ...

  6. 本地新建项目提交到github

    1.在github上创建项目(可以添加README.md),创建后的地址为 https://github.com/xxx/xxx-demo.git 2.在eclipse上新建个quick-start的 ...

  7. MyEclipse/Eclipse新建项目并且部署到服务器（tomcat）下

    1新建项目:file/new/web project/项目名/ok 2部署到tomcat下:tomcat右单机>>add/remove/选择项目/添加/完成(tomcat下有新建的项目) ...

  8. SharePoint 2013 新建项目字段自动加载上次保存值

    1.点击进入NewForm.aspx页面,编辑页面,插入Script Editor WebPart,如下图: 2.插入后如下图,拖动AutoRecord WebPart到脚本编辑器上面,防止因为加载顺 ...

  9. 【android studio】解决android studio drawable新建项目时只有一个drawable目录的问题

    概述 android studio默认新建Module时,只新建一个drawable目录,并不会新建适配不同分辨率的drawable目录.但其实,这是可以设置的.有以下两种方法: 方法1 详细步骤 进 ...

随机推荐

  1. 使用jQuery操作DOM

    一.DOM操作分为3类 1.DOM Core DOM Core不是Javascript的专属品,任何一种支持DOM的编程语言都可以使用它.它的用途不仅限于处理一种使用标记语言编写出来的文档 2.HTM ...

  2. 《剑指offer》— JavaScript（21）栈的压入、弹出序列

    栈的压入.弹出序列 题目描述 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1,2,3,4,5是某栈的压入顺序,序列4,5, ...

  3. 读书笔记 effective c++ Item 26 尽量推迟变量的定义

    1. 定义变量会引发构造和析构开销 每当你定义一种类型的变量时:当控制流到达变量的定义点时,你引入了调用构造函数的开销,当离开变量的作用域之后,你引入了调用析构函数的开销.对未使用到的变量同样会产生开 ...

  4. Tinywebserver:一个简易的web服务器

    这是学习网络编程后写的一个练手的小程序,可以帮助复习I/O模型,epoll使用,线程池,HTTP协议等内容. 程序代码是基于<Linux高性能服务器编程>一书编写的. 首先回顾程序中的核心 ...

  5. call by value or reference ?

    Java中参数传递是传值还是传引用呢?很多人遇到这个问题都会马上给你抛出这个例子: class Entry{ Integer value; public Entry(Integer v){ this. ...

  6. ajax bookstrap美化网页，并实现页面的加载，删除与查看详情

    Bookstrap:美化页面: Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS ...

  7. 很污的机器学习：从xhamster网站找到喜欢的片子

    前言 最近迷上了看黄片(大雾).每次总是去搜索想看的片子,什么asian porn anal pussy 什么的我都不知道. 搜索着搜索着我手也累了,而且我喜欢的片子也是有一定的特征的,我不想把所有的 ...

  8. SQL语句流程函数

    本人因为今天用到了流程函数,顿时感觉语法生疏啊,为了防止以后忘记,故写此篇!!! 流程函数是MySQL相对常用的一类函数, 用户可以使用这类函数在一个SQL语句中实现条件选择, 这样能够提高效率. 下 ...

  9. selenium+python 自动化中界面滚动条操作方法

    虽然webdriver提供了操作浏览器的前进和后退的方法,但对于浏览器滚动条并没有提供相应的操作方法,以下使用的方法: 借助JavaScript来控制浏览器的滚动条,webdriver提供了execu ...

  10. quartz任务时间调度入门使用

    Quartz 是 OpenSymphony 开源组织在任务调度领域的一个开源项目,完全基于 Java 实现. 作为一个优秀的开源调度框架,Quartz 具有以下特点: 强大的调度功能,例如支持丰富多样 ...