【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+ 可以支援。 在低的在開發中可能會遇到很多問題。 【具體專案開發中去踩坑】

作者：izhongxia
連結：