ionic2学习文档

灰太狼 2022-07-28 09:58 173阅读 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下载地址：  
\- [官方下载][Link 1](可能会很慢，更有可能会下载出错，你懂得)  
\- [我的百度云下载][Link 2]

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

## 安装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][John Papa_s Angular Style guide]或[ Todd Motto’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

组织你的项目，这样可以帮助你的思维模式，你的应用程序的视图/状态是一个组件，一个模板和控制器。

# 一些概念 #

## 核心概念 ##

[Link 1]: http://www.nodejs.org
[Link 2]: http://pan.baidu.com/s/1miRa9JE
[Link 3]: http://jingyan.baidu.com/article/ac6a9a5e60a44f2b653eac85.html
[Link 4]: https://github.com/npm/npm/releases
[angular2]: http://www.baidu.com
[John Papa_s Angular Style guide]: https://github.com/johnpapa/angular-styleguide
[Todd Motto_s Angular Style guide]: https://github.com/toddmotto/angular-styleguide