一、   基础搭建

　　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. SaberRD之交流分析

    交流分析(AC Analysis)也叫做小信号(Small-Signal)分析,也即分析电路的小信号频率响应,更严谨的定义是:分析工作在直流偏置电压下的非线性电路对于一定频率范围内的输入小信号的系统响 ...

  2. storyboard页面跳转传值

    受学姐的影响,习惯纯代码编程,这次要修改别人的代码,很多编程风格还不习惯. 在此之前,页面跳转我都用的是Navigation,故事板上的页面跳转带传值,让我卡了好半天. 页面跳转: [self per ...

  3. 在IIS中部署Asp.net Mvc

    概述: 最近在做一个MVC 3的项目,在部署服务器时破费了一番功夫,特将过程整理下来,希望可以帮到大家! 本文主要介绍在IIS5.1.IIS6.0.IIS7.5中安装配置MVC 3的具体办法! 正文: ...

  4. iOS 推送全解析，你不可不知的所有 Tips！

    本文旨在对 iOS 推送进行一个完整的剖析,如果你之前对推送一无所知,那么在你认真地阅读了全文后必将变成一个推送老手,你将会对其中的各种细节和原理有充分的理解.以下是 pikacode 使用 iOS ...

  5. postman传json串,以及postman官方文档

    最近在调试接口遇到一个问题.就是post接口传的body是一个json串. 刚开始还不知道,百度了一下才知道,其实很简单,就是在raw里面选择json.我的天如此简单的内容,而且支持html. 于是读 ...

  6. 关于Storm tick

    关于Storm tick 1. tick的功能 Apache Storm中内置了一种定时机制——tick,它能够让任何bolt的所有task每隔一段时间(精确到秒级,用户可以自定义)收到一个来自__s ...

  7. Selenium 上传文件失败，解决办法一

    昨个改程序遇到一个问题,UI上面有需要上传文件的地方.但是我不知道怎么让Selenium完成 点击上传文件按钮->在弹出的文件选择窗口中选择路径和文件,点确定. 要知道弹出窗口属于window的 ...

  8. Java面试09|多线程

    1.假如有Thread1.Thread2.Thread3.Thread4四条线程分别统计C.D.E.F四个盘的大小,所有线程都统计完毕交给Thread5线程去做汇总,应当如何实现? 把相互独立的计算任 ...

  9. 百度地图JavascriptApi Marker平滑移动及车头指向行径方向

    相信只要是使用百度地图做实时定位服务的朋友都会遇到这个问题,在对坐标位置进行覆盖物展示的时候,会出现由于获取坐标数据时间或者两个坐标点相距过远,导致在视觉上看Marker移动就像"僵尸跳&q ...

  10. node.js爬虫爬取拉勾网职位信息

    简介 用node.js写了一个简单的小爬虫,用来爬取拉勾网上的招聘信息,共爬取了北京.上海.广州.深圳.杭州.西安.成都7个城市的数据,分别以前端.PHP.java.c++.python.Androi ...