1、Ionic2新特性

①组织结构与框架:

  在Ionic2中,每个组件、页面都只专注于做一件事,它单独有自己的一个目录,有自己的类(Class)、模板文件(Template)和自己的样式文件(在这里我们提倡使用scss);

②命令行工具:

  在开发中,我们总希望能够有一个规范使得我们的开发更具有合理性,同时还能提升我们的开发效率,那么ionic2的CLI完全可以满足你这一点。

③路由导航:

  Ionic2的路由导航不同于Ionic1,我们都知道其实Anngular1自带理由是比较弱的,在复杂路由跳转的app中,是很吃力的,我 们一般都是依赖Angular1的插件ui-router,它是基于URL的hash(当然官方也提供配置切换到html5模式),那么ionic1也是 在这个基础之上进行导航封装的,比如说页面导航堆栈。

④模板的语法结构:

  ionic2的模板语法与Ionic1非常相似,但是看起来又有点古怪,其实Ionic2的模板语法更为简洁。例如:

  • ionic1:
<img ng-src="{{photo.image}}" />
  • ionic2:
<img [src]="photo.image" />

我们看一下 事件调用:

  • ionic1:
<button ng-click="doSomething()">
  • ionic2:
<button (click)="doSomething()">

⑤编译:
 
 ionic从平台上讲是基于cordova的封装( 不仅仅是它的CLI 
),因此ionic工程也是一个标准的cordova工程,也就是说我们最终给跨平台提供的是www目录的资源文件,但是在ionic2中我们都是在 www的同级目录的app目录进行编码,也是因为我们使用EM6或Typescript写的代码浏览器并不能够直接执行,如果你自己观察ionic2的工 程目录,你会发现Gulp.js的脚本多了几个任务的定义,其实是几个ionic的钩子命令,如ionic 
serve,ionic build之类的,其目的是在我们打包,或者浏览器模拟时的 
命令执行之前,执行一些gulp任务,其中就是对typescript、scss的编译,是不是感觉很方便,而且最终合并编译到www/build/js目录下,并且很难反编译,也就是说你的app如果被人解包,他只能运行,但如果想拿到你的源码是相当困难的。

Ionic1与Ionic2的更多相关文章

  1. ionic3懒加载IonicPage使用报错

    ionic3.X版本有不少亮点.作为从angular1到ionic1.ionic2一直用它们开发单页面应用的使用者来说,一直存在的一个痛点就是,将整个项目作为网页不打包成app的话,第一次加载时间太长 ...

  2. Ionic2优于Ionic1的6个理由

    经历了一个从0到有的app的开发,我已经很熟悉Ionic1了,在此期间我曾发现过Ionic1的一些bug,和一些不合理的地方(根基版本 不同,后续我会陆续发表这些文章),我甚至在此期间对Ionic1进 ...

  3. ionic2+angular2中踩的那些坑

    好久没写什么东西了,最近在做一个ionic2的小东西,遇到了不少问题,也记录一下,避免后来的同学走弯路. 之前写过一篇使用VS2015开发ionic1的文章,但自己还没摸清门道,本来也是感兴趣就学习了 ...

  4. ionic2+angular2

    ionic2+angular2中踩的那些坑 好久没写什么东西了,最近在做一个ionic2的小东西,遇到了不少问题,也记录一下,避免后来的同学走弯路. 之前写过一篇使用VS2015开发ionic1的文章 ...

  5. 认识ionic2

    1. Ionic 2 介绍 Ionic 2专注于以标准的HTML.CSS和JavaScript来构建移动站点,并可以通过Cordova打包成移动 App,只需编写一次代码,就可以分别部署到iOS.An ...

  6. IONIC2新建项目并添加导航

    一.   基础搭建 1.      新建IONIC2项目 ionic start myApp tabs --v2 不加--v2会新建ionic1的项目 2.      运行项目 cd myApp io ...

  7. ionic2新手入门整理,搭建环境,创建demo,打包apk,热更新,优化启动慢等避坑详解

    onic官方文档链接:http://ionicframework.com/docs/ 如果是新的环境会有很多坑,主要是有墙,请仔细阅读每个步骤 文档包含以下内容: l  环境搭建 l  创建demo并 ...

  8. ionic2简单分析

    Angular2是一个全新的框架,它从ReactJS以及其他web移动框架借鉴了不少经验和优点,巨大的改进使得开 发体验和性能已经超越了Angular1,而且Ionic2无论是从UI交互效果和跨平台的 ...

  9. ionic1页面切换动画卡顿优化

    https://github.com/shprink/ionic-native-transitions https://www.npmjs.com/package/ionic-native-trans ...

随机推荐

  1. 高效vim插件

    目录[-] 高效vim插件 插件管理利器 高效插件集 NerdTree snipMate tagbar jedi-vim eclim c.vim vim-colorschemes vim配置 一个实例 ...

  2. vue2.0动画

    相对于vue1.0来说,vue2.0的动画变化还是挺大的, 在1.0中,直接在元素中加 transition ,后面跟上名字. 而在vue2.0中,需要把设置动画的元素.路由放在<transit ...

  3. Codeforces Round #277.5 (Div. 2)-D. Unbearable Controversy of Being

    http://codeforces.com/problemset/problem/489/D D. Unbearable Controversy of Being time limit per tes ...

  4. Jascript原型链以及Object和Function之间的关系

    先看一个简单的function变量 function fun1(name) { this.name = name; } console.log("fun1", fun1) 从结果可 ...

  5. js parse_url 引发的

    原文链接:https://www.w3.org/TR/2011/WD-html5-20110525/origin-0.html 这里只是做下记录: 5.3 Origin — HTML5 li, dd ...

  6. iOS 设计模式

    很赞的总结 iOS Design Patterns 中文版 IOS设计模式之一(MVC模式,单例模式) IOS设计模式之二(门面模式,装饰器模式) IOS设计模式之三(适配器模式,观察者模式) IOS ...

  7. JavaScript设计模式基础之闭包(终)

    对于前端程序员来说闭包还是比较难以理解的, 闭包的形成与变量的作用域以及变量的生产周期密切相关,所以要先弄懂变量的作用域和生存周期. 1.变量作用域 变量的作用域,就是指变量的有效范围,通常我们指的作 ...

  8. laravel中的路由

    相信玩过laravel框架的小伙伴们,都知道它路由的强大之处 今天我想给大家分析下这个 首先 要找到配置路由的位置 routes这个目录下,我们找到web.php文件 里面可以看到现成的一个路由 Ro ...

  9. restful规范和drf模块

    restfu1规范 它是一个规范,面向资源架构 10条规范: 1.api与用户的通信协议,总是使用https协议 api网上提供的接口 2.域名: 尽量将api部署在专用域名(会存在跨域问题) API ...

  10. Python9-模块1-day19

    在内置数据类型(dict.list.set.tuple)的基础上,collections模块还提供了几个额外的数据类型:Counter.deque.defaultdict.namedtuple和Ord ...