ionic2基础(一)

最近公司要求做一款基于微信端的webapp,根据功能和需求,我选择了ionic2,之前也用过1.x版本,发现2.x版本与1.x版本完全不一样,不仅组件名称换了,连ng2也更换了,ng2使用的是微软的typeScript,是javaScript的超集,语法上可能与js有所不同,于是我就翻了下ts的文档,发现还是蛮好用的,这里分享下链接https://www.tslang.cn/docs/tutorial.html,没有基础的童鞋可以简单了解下,对于使用ng2来说有所帮助,好了,废话少说,切入正题。

  http://ionicframework.com/docs 这是ionic2的开发文档,看不懂木有关系,在以后的随笔里,我会把一些常用的组件以及用法分享给大家,不足之处还请各位大神多提点,小弟在此谢过~~~么么哒~~。

  首先呢,你需要先安装node.js,分享下链接https://nodejs.org/en/ 安装完毕以后呢,再安装cordova和ionic,命令行为

$ npm install -g cordova ionic

  在这里提醒一下:有可能会安装不成功,这里涉及到FQ的问题,所以我们可以用国内的镜像来安装,我推荐使用淘宝镜像,安装命令为

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

  然后我们再设置下node的源,命令为

npm config set registry http://registry.npm.taobao.org/

 然后就可以像操作npm一样使用cnpm咯~~

$ cnpm install -g cordova ionic

安装完,别忘了检查下是否安装成功。基本的开发环境我们已经搭建完毕,现在可以试着来创建一个demo了。我们可以使用ionic提供的命令来创建项目

$ ionic start MyApp

ionic 默认创建的是1.x版本的tab项目,如果想要创建2.x版本并且为空的项目可以像下面这样来创建

$ ionic start MyApp  blank --v2

如果创建不成功,或者一直卡着不动,可以像下面这样来解决

$ ionic start MyApp blank --v2 --skip-npm

这种方法百试不爽啊有木有~~,创建成功之后,我们来看下项目结构:

这个是2.x版本的项目结构,你需要在src文件夹里来创建页面和编辑

我依次来介绍下src文件夹下里各个子文件夹:

app文件夹里包含app.component.ts、app.html、app.model.ts、app.scss、main.ts,这里主要介绍app.model.ts,他是联系其他页面的主要文件,

你项目里所有的页面和模块以及服务都要在这里注册,至于如何注册,以后我会提到,app.html里是整个项目的主窗口,这里是要设置你项目的默认窗口。app.scss是管理app.html样式的。

assets文件夹下包含icon文件夹,这里主要是存放图标和图片的地方。

pages里就是你项目的所有子页面了,ionic2与ionic1不同,前者是将页面独立起来,每个子页面拥有自己的ts和scss样式,不会出现js文件混到一起分不清的情况,每个子页面同他的ts和scss都被一个独立的文件夹包裹起来,就像这样

theme文件夹里包含了一个variables.scss文件,这个文件是更改全局样式的地方,如果有通用的样式,比如header和footer,就可以在这里去定义。

还有一个很重要,但不是经常用到的就是src目录下的index.html,这是整个项目的主页面,外部文件需要在这里引入。

以上就是经常用到的和需要注意的东西,希望能够对你有帮助,近期我会继续更新哟~~~

时间: 2025-01-05 03:10:59

ionic2基础(一)的相关文章

java web 开发三剑客 -------电子书

Internet,人们通常称为因特网,是当今世界上覆盖面最大和应用最广泛的网络.根据英语构词法,Internet是Inter + net,Inter-作为前缀在英语中表示“在一起,交互”,由此可知Internet的目的是让各个net交互.所以,Internet实质上是将世界上各个国家.各个网络运营商的多个网络相互连接构成的一个全球范围内的统一网,使各个网络之间能够相互到达.各个国家和运营商构建网络采用的底层技术和实现可能各不相同,但只要采用统一的上层协议(TCP/IP)就可以通过Internet

ionic2——学习指引-学习资源汇总

Ionic2 官网............................官网的文档非常好,超级全,一定要细心看中文文档.....................比较简单 Angular 2 官网............................全英文看起来压力大,建议看中文网中文网........................中文网和官网几乎一样菜鸟教程.....................很简单英文视频.....................目前中文免费视频几乎没有,这里有英文

Ionic2优于Ionic1的6个理由

经历了一个从0到有的app的开发,我已经很熟悉Ionic1了,在此期间我曾发现过Ionic1的一些bug,和一些不合理的地方(根基版本 不同,后续我会陆续发表这些文章),我甚至在此期间对Ionic1进行代码改造和Hack,或者对其组件进行增强和封装,在onic2刚刚发布的时候,我 就已经迫不及待的欣赏它的新特性,但是我为此不得不再学习另外一个框架. 如果你已经熟悉Anguar1和Ionic1,那么请不要嚣张(陕西话叫zhang,二声.东北话叫嘚瑟,河南话叫啥?回家问问我妈再告诉 你!),听小明在

漫谈spring cloud 与 spring boot 基础架构

详情请交流  QQ  709639943 01.漫谈spring cloud 与 spring boot 基础架构 02.漫谈spring cloud分布式服务架构 03.Node.js入门到企业Web开发中的应用 04.精通高级RxJava 2响应式编程思想 05.Java秒杀系统方案优化 高性能高并发实战 06.Java深入微服务原理改造房产销售平台 07.快速上手Linux 玩转典型应用 08.快速上手Ionic3 多平台开发企业级问答社区 09.Java Spring Security开

老司机学python篇:第一季(基础速过、机器学习入门)

详情请交流  QQ  709639943 00.老司机学python篇:第一季(基础速过.机器学习入门) 00.Python 从入门到精通 78节.2000多分钟.36小时的高质量.精品.1080P高清视频教程!包括标准库.socket网络编程.多线程.多进程和协程. 00.Django实战之用户认证系统 00.Django实战之企业级博客 00.深入浅出Netty源码剖析 00.NIO+Netty5各种RPC架构实战演练 00.JMeter 深入进阶性能测试体系 各领域企业实战 00.30天搞

北风网 零基础到数据(大数据)分析专家-首席分析师

详情请交流  QQ  709639943 00.北风网 零基础到数据(大数据)分析专家-首席分析师 00.快速上手JMeter 00.Jmeter 00.2017年Java web开发工程师成长之路 00.R语言速成实战 00.R语言数据分析实战 00.Python+Django+Ansible Playbook自动化运维项目实战 00.Java深入微服务原理改造房产销售平台 00.Python3入门机器学习 经典算法与应用 00.老司机学python篇:第一季(基础速过.机器学习入门) 00.

Java注解(1)-注解基础

注解(Annotation)是在JAVA5中开始引入的,它为在代码中添加信息提供了一种新的方式.注解在一定程度上把元数据与源代码文件结合在一起,正如许多成熟的框架(Spring)所做的那样.那么,注解到底可以做什么呢? 1.注解的作用. 提供用来完整地描述程序所需要的信息,如编译期校验程序信息. 生成描述符文件,或生成新类的定义. 减轻编写"样板"代码(配置文件)的负担,可以使用注解自动生成. 更加干净易读的代码. 编译期类型检查. 2.Java提供的注解 Java5内置了一些原生的注

MySQL数据库基础知识

day02 MySQL数据库基础知识 一.基础知识概述: 基础决定你这门课程的学习成败!只有学习好这些基础知识以后,你才能真正的运用自如.才能够对数据库有更深入的了解,道路才会越走越远. 二.基础知识: 1.数据库(database):数据库就好比是一个物理的文档柜,一个容器,把我们整理好的数据表等等归纳起来. 创建数据库命令:        create database 数据库名; 2.查看数据库         show databases; 3.打开指定的数据库         use 

【Linux系列】【基础版】第四章 Shell基础之正则表达式

4. Shell基础之正则表达式     4.1 正则就是一串有规律的字符串         4.1 grep              4.1.1 格式: grep [-cinrvABC] 'word' filename             4.1.2 -c //count,表示行数             4.1.3 -i //不区分大小写             4.1.4 -n  //显示行号             4.1.5 -r  //遍历所有子目录             4