一、   基础搭建

　　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. ASP.NET Core MVC之Serilog日志处理，你了解多少？

    前言 本节我们来看看ASP.NET Core MVC中比较常用的功能,对于导入和导出目前仍在探索中,项目需要自定义列合并,所以事先探索了如何在ASP.NET Core MVC进行导入.导出,更高级的内 ...

  2. 【排序算法】希尔排序算法 Java实现

    希尔排序算法是按其设计者希尔(Donald Shell)的名字命名,该算法由1959年公布,是插入排序的一种更高效的改进版本. 希尔排序是基于插入排序的以下两点性质而提出改进方法的: 插入排序在对几乎 ...

  3. html 5 video

    正项目中, 20秒 2mb左右在速度上可以接受, 但是最总怎样剪都不可以被游览器读取, 因为H.264 和一些我不清楚的. 为了简单解决这小问题, 请使用 http://easyhtml5video. ...

  4. everything 快速搜索有代价

    我在一台电脑上运行过everything后,把它拷贝到另一台电脑上运行,前一台电脑上的搜索结果记录居然还,包括文件类型,标题,大小,位置.天呐··· 虽然看不到内容,但对于一个社工来说,一个标题完全足 ...

  5. 谈JavaScript的继承

    最近在忙前端的工作,因为之前做.net和php的开发比较多,前端开发喜欢把库拿来就用,几次事实证明,不懂原理,连改代码也改不好,所以还是下定决心研究下JavaScript的几个技术难点. 0x1.Ja ...

  6. ERP库位分布看板（库位管理）

    客户正在使用的看板管理,根据厂家需求,做的二次开发. 一:看板效果 二:客户需求 1.客户需求:XX是一家汽车零部件(胶管,硅胶管等)的生产厂家,因此对原料,半成品的有效期有严格的要求. 多次调研得知 ...

  7. Bat再次小试

    继<Bat小试牛刀>之后,今天又需要一个小的bat文件.需求是这样的,有一个windows服务(服务名:xxxx,进程映像名:xxxx.exe)被数据库拖慢了,但目前又没时间调整代码,所以 ...

  8. AlloyFinger.js 源码 学习笔记及原理说明

    此手势库利用了手机端touchstart, touchmove, touchend, touchcancel原生事件模拟出了 rotate  touchStart  multipointStart   ...

  9. SQL Sever数据库中 T-sql语句的使用（增、删、改、查）

    SQL中的增.删.改.查 一.增:有2种方法 1.使用insert插入单行数据: 语法:insert [into] <表名> [列名] values <列值> 例:insert ...

  10. 免费搭建wordpress博客有感

    之前一直有搭建个wordpress博客的想法,但一直没有实施.最近离职之后,空闲时间多了起来,就开始折腾wordpress博客起来. wordpress博客可玩性很高,但刚开始只想练练手,就没有想买域 ...