资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/从 Ionic1 迁移至 Ionic2 基本说明

从 Ionic1 迁移至 Ionic2 基本说明

shevy / 3101人阅读

摘要：迁移概念是基于之上重写的全新框架。从迁移虽然应用需要对其语法结构进行更新，但是开发人员仍然可以通过和这两篇文章来积极的确保升级工作符合最佳的应用实践。这可以很容易的让一个的控制器迁移为一个的类。

迁移概念

Ionic 2 是基于 Angular 2 之上重写的全新框架。所有你已知的关于的 Angular 的部分仍然存在，但是也有一些作为开发人员仍要了解的新的语法和结构性变化。关于 Angular 2 变更的内容有机会多带带写一篇文章。想要了解的可以直接 传送到 Angular 2

在 Ionic 2 中有很多已经很熟悉的东西。所有 Ionic 1 的概念依然保持到了 Ionic 2 中，只是它们可能稍有不同。像在 Ionic 1 中一样你仍然拥有视图和控制器，不过它们已经合并成了一个实例。

Ionic 1 中看像是这样：

</>复制代码 
  1. .config(function($stateProvider){
  2.   $stateProvider
  3.   .state("main", {
  4.     url: "/",
  5.     templateUrl: "templates/main.html",
  6.     controller: "MainCtrl"
  7.   })
  8. })
  9. .controller("MainCtrl", function(){
  10. })

Ionic 2 则重写成为：

</>复制代码 
  1. @Component({
  2.   templateUrl:"main/main.html"
  3. })
  4. export class MainCmp {
  5.   constructor(){
  6.   }
  7. }

还有许多其他的变化，比如导航。现在，你可以将随心所欲的使用组件并且以你想要的方式导航到它们。这使得导航更加的灵活，并且支持原生风格的导航堆栈。

从 Angular 1 迁移

虽然 Angular 2 应用需要对其语法结构进行更新，但是开发人员仍然可以通过 John Papa’s Angular Style guide 和 Todd Motto’s Angular Style guide 这两篇文章来积极的确保升级工作符合最佳的应用实践。
同时这里为你提供代码迁移的准备步骤：

ControllerAs 语法

ControllerAs 语法是 Angular 1 中的一项特性，取代了数据绑定到$scope，你可以直接将实例绑定到控制器。这可以很容易的让一个 Angular 1 的控制器迁移为一个 Angular 2 的类。

传统控制器：
index.html

</>复制代码 
  1.     
  2.       
  3.         {{data.text}}
  4.       
  5.

app.js

</>复制代码 
  1.     .controller("MainCtrl", function($scope){
  2.       $scope.data ={
  3.         text: "Hello World"
  4.       }
  5.     })

转换到 controllerAs 语法，只需要修改几个地方而已：
index.html

</>复制代码 
  1.     
  2.       
  3.         {{main.data.text}}
  4.       
  5.

app.js

</>复制代码 
  1.     .controller("MainCtrl", function(){
  2.       this.data ={
  3.         text: "Hello World"
  4.       }
  5.     })
TypeScript

TypeScript 是 JavaScript 的一个超集，提供了ES6类和代码中的注释类型。现在使用 TypeScript，你可以编写代码作为ES6类，这会让转移到 Ionic 2 变得很容易。而且最棒的是，任何有效的 JavaScript 的代码依然也是有效的 TypeScript 代码，这样你就可以按需转换你的代码块。你之前的控制器很容易的通过 TypeScript 转换成这样：

app.js

</>复制代码 
  1.     .controller("MainCtrl", function(){
  2.       this.data ={
  3.         text: "Hello World"
  4.       }
  5.     })

app.ts

</>复制代码 
  1.     export class MainCtrl{
  2.       constructor(){
  3.         this.data ={
  4.           text: "Hello World"
  5.         }
  6.       }
  7.     }
项目结构

在 Angular 1 中，将 JavaScript 代码从模版中分离出来并放在一起是一个惯例。但是由于 Ionic 2 和 Angular 2 是基于组件概念的，你可能需要重新组织你的项目结构来与新概念保持一致。

所以你的原来的项目看起来是这样的：

</>复制代码 
  1.     |-www/
  2.     |
  3.     |--js/
  4.     |--|-app.js
  5.     |--|-HomeCtrl.js
  6.     |--|-DetailCtrl.js
  7.     |
  8.     |--templates/
  9.     |--|-Home.html
  10.     |--|-Detail.html
  11.     |
  12.     |-index.html

重新组织以后看起来是这样：

</>复制代码 
  1.     |-www/
  2.     |
  3.     |--Home/
  4.     |--|-HomeCtrl.js
  5.     |--|-Home.html
  6.     |
  7.     |--Detail/
  8.     |--|-DetailCtrl.js
  9.     |--|-Detail.html
  10.     |
  11.     |-index.html
  12.     |-app.js

新的组织结构可以有助你思维的一致性，使你应用的每一个视图/状态和模版还有控制器成为一个组件。

GPU云服务器 云服务器 迁移至专有网了 ECS迁移至RDS 经典网络迁移至vpc 预约迁移至vpc网络

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80645.html

相关文章

  • 使用Ionic3框架开始第一个混合开发APP

    摘要：什么是框架框架是一个混合开发框架，其本身依赖于，，。使用框架可以做什么使用可以使用前端相关技术快速开发多平台的移动。使用全局安装和。输入，这是添加一个平台的命令。注意这个包是版本，并非正式包，正式包需要先生成签名至此，你就开始了第一个应用。 什么是混合开发？ 简单来说，就是在开发移动应用中同时使用Native和Web的开发方式。 什么是Ionic3框架？ Ionic3框架是一个混合开发...

    wangshijun 评论0 收藏0

  • 使用Ionic3框架开始第一个混合开发APP

    摘要：什么是框架框架是一个混合开发框架，其本身依赖于，，。使用框架可以做什么使用可以使用前端相关技术快速开发多平台的移动。使用全局安装和。输入，这是添加一个平台的命令。注意这个包是版本，并非正式包，正式包需要先生成签名至此，你就开始了第一个应用。 什么是混合开发？ 简单来说，就是在开发移动应用中同时使用Native和Web的开发方式。 什么是Ionic3框架？ Ionic3框架是一个混合开发...

    Mr_houzi 评论0 收藏0

  • 使用Ionic3框架开始第一个混合开发APP

    摘要：什么是框架框架是一个混合开发框架，其本身依赖于，，。使用框架可以做什么使用可以使用前端相关技术快速开发多平台的移动。使用全局安装和。输入，这是添加一个平台的命令。注意这个包是版本，并非正式包，正式包需要先生成签名至此，你就开始了第一个应用。 什么是混合开发？ 简单来说，就是在开发移动应用中同时使用Native和Web的开发方式。 什么是Ionic3框架？ Ionic3框架是一个混合开发...

    thursday 评论0 收藏0

  • 从Ionic2 beta更新到Ionic2 RC0的正确姿势

    摘要：参照更新你的文件删除文件夹和文件参照更新文件重命名并重新定位到移动文件从到比如等等将你定义的属性移动到文件修正你的图片路径例如之前是现在应该是组件内与模版相关的变量，修改关键字为。 ps:参照官方文档进行整理。填了一些坑供参考 ：） 基于Angular2的正式发布，Ionic2也进入了RC版本。但是因为结构和语法变动，使得从beta到RC不能平滑升级。 官方给出了2种升级方式：1.创建...

    TIGERB 评论0 收藏0

发表评论

登陆后可评论

0条评论

shevy

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<