【Ionic系列】 一、入門介紹

時間：2017-02-24 23:23:25
作者：zhongxia

身為一個前端，一直想學習下移動端的開發，但是看的多，實際深入學習，并去實踐的少。經常看到這個哪里不好，哪里好了，總會一致在權衡。其實呢，想要學習，就好好去學習一門。技術之所以流行，并存在肯定會有好的一面的。學習了不一定使用所有的場景，但是卻對自己的成長是很有用的。

整體的學習下Ionic2 ，加油, zhongxia ! 加油， EveryOne！

零、總結

1. Ionic2 采用了Ng2, TypeScript , 優化在Hybrid App的體驗效果。

2. 提供了一套完整的組件庫，可快速開發，一次編寫，打包成跨平臺APP

3. 對低版本（Android4.1 以下， IOS7以下）兼容不好【放棄支持】

4. 提供了更加強大的CLI工具

一、介紹

Ionic 2 專注于以標準的 HTML 、 CSS 和 JavaScript 來構建移動站點，并可以通過 Cordova 打包成移動 App，只需編寫一次代碼，就可以分別部署到 iOS 、Android 等多種移動平臺上。這項技術已經幫助很多開發者創建了很多漂亮的 App。

現在 Ionic 2 已經發布了第二代版本，使移動開發更容易、更有效率。
Ionic 2 與一代相比有較大的變化，基于最新的 Angular 2 ，使用 TypeScript進行開發，如果您沒有接觸過 AngularJS或Ionic1.x，完全不用擔心，直接從Ionic 2 開始學習即可。

在使用 Ionic 2 之前，您應該具備 HTML、CSS、JavaScript 基礎。

二、Ionic2的優勢與不足

1. Angular2 和 TypeScript

相比Angular1 ,速度上快了5~10倍（大家知道快很多就可以了）

2. 模塊化開發

模塊化之后，更好的復用，更清晰的項目結構

3. 更強大的CLI

ionic g page NewPage

# Ionic CLI 會生成以下的文件，并且文件中已經生成了基本的代碼：
-new-page
 --new-page.ts
 --new-page.html
 --new-page.scss

Ionic CLI 可以生成 pages, providers, tabs, pipes, components，directives等。

4. 導航路由配置升級,使用簡單

// Angular1.x
.config(function($stateProvider, $urlRouterProvider) {
     $stateProvider
         .state('home', {
             url: '/',
             templateUrl: 'templates/home.html',
             controller: 'HomeCtrl'
         })
         .state('main', {
             url: '/main',
             templateUrl: 'templates/main.html',
             controller: 'MainCtrl'
         });
     $urlRouterProvider.otherwise("/");
 });

//接近原生的使用方法，相對Angular1，簡單很多
this.nav.push(SecondPage);

5. 不足

明確開始不支持低版本，android4.1+ ， IOS7+ 可以支持。 在低的在開發中可能會遇到很多問題。 【具體項目開發中去踩坑】