一、   基础搭建

　　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. STM32的LED驱动程序

    这个LED的小程序基于的是德飞莱的最小系统板 我当时写这个程序的时候想的就是这个程序能够便于理解 也便于移植 便于调用 我参加过电赛 对于STM32的一个管脚修改的麻烦是深有体会 一个地方不对就没法工 ...

  2. Ionic2中集成第三方控件Sweetalert

    Ionic2混合开发,入坑系列:Ionic2中集成第三方控件Sweetalert 注:Sweetalert2已经可以直接从npm中下载安装 npm install --save sweetalert2 ...

  3. 用JavaScript实现图片剪切效果

    学会如何获取鼠标的坐标位置以及监听鼠标的按下.拖动.松开等动作事件,从而实现拖动鼠标来改变图片大小. 还可以学习css中的clip属性. 一.CSS实现图片不透明及裁剪效果. 图片剪切三层结构 1.第 ...

  4. 关于Response.redirect和Response.End出现线程中止异常的处理

    最近做了一个项目其中使用了多线程获取POST过来的数据后再Response回复,但由于是多线程,在Response.End()的时候报出了异常: 2013-10-20 10:05:31,606 res ...

  5. SIFT中的高斯模糊

    高斯模糊是众多模糊算法中的一种,所谓的模糊,就是平滑图像,消除像素之间的差异,最容易想到的方法就是均值平滑. .均值模糊 均值模糊就是取目标像素周围像素的平均值.譬如 像素矩阵. |1|1|1| |1 ...

  6. 使用promise手动封装ajax函数

    最近在做一个单页应用,node和浏览器仅通过json传输数据,因为是只有自己用等于是锻炼一下自己,所以也不用考虑seo的问题,node端我已经写好了,但是浏览器端想要用ajax原生太麻烦,用封装的函数 ...

  7. 1668: [Usaco2006 Oct]Cow Pie Treasures 馅饼里的财富

    1668: [Usaco2006 Oct]Cow Pie Treasures 馅饼里的财富 Time Limit: 3 Sec  Memory Limit: 64 MBSubmit: 498  Sol ...

  8. html中submit和button的区别(总结) [ 转自欣步同学 ]

    html中submit和button的区别(总结) submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了. 如果表单在点击提交按钮后需要用JS进行处理(包括输入验证 ...

  9. 《Machine Learning》系列学习笔记之第二周

    第二周 第一部分 Multivariate Linear Regression Multiple Features Note: [7:25 - θT is a 1 by (n+1) matrix an ...

  10. Json 与GeoJson

    1.JSON介绍 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.简单地说,JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串,然后 ...