一、   基础搭建

　　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. 一张图看懂 JS 的事件机制

    一.为什么 JavaScript 单线程 假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准? 为了避免复杂性, JS ...

  2. 用Tcl/Tk脚本计算圆周率

      读了阮一峰的蒙特卡罗方法入门,用概率统计的方式求解棘手的数学问题还挺有意思的,尤其是利用正方形和它的内切圆之间的面积关系来建模求解圆周率的方法精巧又简单,比投针实验好理解也好实现多了.建模可不是M ...

  3. .net 爬虫技术

    关于爬虫 从搜索引擎开始,爬虫应该就出现了,爬的对象当然也就是网页URL,在很长一段时间内,爬虫所做的事情就是分析URL.下载WebServer返回的HTML.分析HTML内容.构建HTTP请求的模拟 ...

  4. 【数据标识】iOS App下载渠道的统计需求

    需求概述 我们现在有一个需求,某一个活动需要拉新所谓的拉新一般是推App下载,这个用户通过这个活动下载了App后,我们需要做到[在数据库中记录这个用户下载这个App是通过那个二维码渠道的,从效果上说, ...

  5. Java和C++的对比

    事实上, Java 本来就是从 C++衍生出来的. C++和 Java 之间仍存在一些显著的差异.可以这样说,这些差异代表着技术的极大进步.一旦我们弄清楚了这些差异,就会理解为什么说 Java 是一种 ...

  6. 每天一个Linux命令（22）--find命令详解

    find 一些常用参数的一些常用实例和一些具体用法和注意事项. 1.使用 name 选项: 文件名选项是 find 命令最常用的选项,要么单独使用该选项,要么和其他选项一起使用. 可以使用某种文件名模 ...

  7. vue2.0全局组件之pdf

    目的:像elementUI那样注册全局组件 预览pdf文件 技术支持:使用火狐的pdf.js http://mozilla.github.io/pdf.js/ 准备:新建一个CPdf.vue文件,把火 ...

  8. javascript深入理解js闭包（转载）

    一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量 ...

  9. 怎么理解js的面向对象编程

    面向对象的语言有一个标志,即拥有类的概念,抽象实例对象的公共属性与方法,基于类可以创建任意多个实例对象,一般具有封装.继承.多态的特性!但JS中对象与纯面向对象语言中的对象是不同的,ECMA标准定义J ...

  10. 网络安全实验室 脚本关通关writeup

    [1]key又又找不到了查看源代码.发现key的路径,点击进行了302跳转,抓包,得到key [2]快速口算要2秒内提交答案,果断上python import requests,re s = requ ...