【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+ 可以支持。 在低的在开发中可能会遇到很多问题。 【具体项目开发中去踩坑】