ionic2学习文档

最新推荐文章于 2020-10-08 18:54:05 发布

幸福的雏

最新推荐文章于 2020-10-08 18:54:05 发布

阅读量4.4k

点赞数

分类专栏： ionic 文章标签： ionic2

ionic 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

概述

截止到2016.01.03，angularJS 2还处于beta版阶段，所以ionic2也还是在 nightly版本。

注意：ionic2是基于angular2的，而angular2又是基于ES6的。所以不懂ES6的人得先去学习ES6，然后再学angualr2，最后学习ionic2。

安装

像ionic1一样，ionic2同样能使用ionic CLI或者GUI工具快速的被创建，打包，和运行。

安装环境要求

node.js 4.2.x
npm 3.x

nodejs下载地址：
- 官方下载(可能会很慢，更有可能会下载出错，你懂得)
- 我的百度云下载

nodejs安装之后，查看npm版本可能是2.7.x，或者说你的npm版本号小于3.x的话，你需要升级npm,升级方法看这里,升级到那个版本，版本号查看看这里

安装ionic2 CLI

用NPM安装ionic@beta

npm install -g ionic@beta

上面的命令可能会很慢，而且容易出错。在国内环境下要想快速安装请用下面的指令，命令使用了npm淘宝镜像，安装应该进行的比较快。

npm install -g ionic@beta --registry=https://registry.npm.taobao.org

创建ionic 2项目

运行以下命令来创建一个ionic2项目

ionic start myFirstIonic2Project --v2

同样的，上面命令可能很慢，下面的命令会快一些

ionic start myFirstIonic2Project --v2 /--registry=https://registry.npm.taobao.org1.4

运行项目

进到刚才建立的myFirstIonic2Project 目录

cd myFirstIonic2Project

运行项目

ionic serve

然后你就会看到浏览器里自动弹出一个窗口，你的第一个 ionic 2 项目已经启动起来了

项目模板

在ionic1中，官方提供的项目模板有三种：

blank（默认不写即为blank）
tabs
sidemenus

ionic start myFirstIonic1Project [blank/tabs/sidemenus]

ionic2增加了一个新的模板：tutorial

创建一个新的ionic2APP

ionic start myFirstIonic2Project tutorial --v2

迁移

迁移的概念

ionic2构建在angular2之上，这是一个完整的可复用的原始框架。你所知道的所有部分都在那里，但有新的语法和结构的变化，开发人员需要了解和学习对于angular2的一些变化，学习angular2

ionic2，大家不必感到很陌生（应该感觉很熟悉，这是废话），因为ionic1版本中的所有概念仍在ionic2版本中。虽然他们可能看起来有点不同。例如ionic1中的视图和控制器，在ionic2中，他们已经合并为一个实例。

列举一个在ionic1中的示例：

.config(function($stateProvider){
    $stateProvider
    .state('main',{
        url:'/',
        templateUrl:'templates/main.html',
        controller:'MainCtrl'
    })
})

.controller('MainCtrl',function(){

})

上面的代码能在ionic2中可以写成这样：

@Page({
    templateUrl:'main/main.html'
})

export class MainCmp{
    constructor(){

    }
}

其他的变化，如navigation的变化，有很大的不同，但我们保证有很好的理由去改变。现在，您可以将组件视为任意视图，并且以任何方式导航到它们。这使得导航更加灵活，允许更多的本地风格的导航栈。

从 angular1迁移

而angular2要求应用程序必须更新的语法变化，开发商可以主动和确保他们的应用程序是可通过以下最佳实践和John Papa’s Angular Style guide或 Todd Motto’s Angular Style guide。这两个将为你提供一个步骤，你可以采取准备迁移的代码。

ControllerAs语法

ControllerAs的语法是angular1的一个特征。他可以直接绑定数据到$scope，你能直接绑定到控制器的指令实例。这使得迁移一个angular1.xController到angualr2是非常简单的。

index.html

<ion-content ng-controller="MainCtrl">
    <ion-item>
        {{data.text}}
    </ion-item>
</ion-content>

app.js

.controller('MainCtrl',function($scope){
    $scope.data = {
        text:'Hello World'
    }
})

转变ControllerAs的语法，你只需要做一些小小的改变

index.html

<ion-content ng-controller="MainCtrl as main">
    <ion-item>
        {{main.data.text}}
    </ion-item>
</ion-content>

app.js

.controller('MainCtrl',function(){
    this.data = {
        text:'Hello World'
    }
})

TypeScript

TypeScript是你代码中的JavaScript提供的ESClasses和类型注解的一个超集。现在，你可以采用TypeScript，很容易的编写你的代码就像编写ES6 Classes一样，轻松转移到ionic2。最好的部分是，任何有效的JavaScript也是有效的TypeScript，所以你可以将你的代码一个片段一个片段的转换。在你编写controller之前，你可以很容易地将它转换成一个TypeScript 类就像这样

app.js

.controller('MainCtrl',function(){
    this.data = {
        text:'Hello World'
    }
})

app.ts

export class MainCtrl{
    constructor(){
        this.data = {
            text:'Hello World'
        }
    }
}

项目架构

With Angular 1, it was a practice to keep all your JavaScript together and separate from your templates. Since Ionic 2 and Angular 2 will be moving to a component base setup, you can reorganize your project to help mentally enforce that concept. So a project whose directory looks like this…

|-www/
|
|–js/
|–|-app.js
|–|-HomeCtrl.js
|–|-DetailCtrl.js
|
|–templates/
|–|-Home.html
|–|-Detail.html
|
|-index.html
像下面这样组织结构
|-www/
|
|–Home/
|–|-HomeCtrl.js
|–|-Home.html
|
|–Detail/
|–|-DetailCtrl.js
|–|-Detail.html
|
|-index.html
|-app.js