文档章节

理解ionic2 + angular2开发方案

ouven
 ouven
发布于 2016/09/20 18:51
字数 1496
阅读 1305
收藏 15

  看了下ionic2的官方文档,做了简单的分析理解。

1. 安装使用

  ionic2的安装运行基本和前版本的ionic基本一致,非常简单。

npm install -g ionic    # 安装ionic工具集
ionic start projectName --v2    # --v2表示使用ionic2 + angular2的组合方式创建项目,否则使用ionic + angular创建项目,此时ionic会下载所需要的相关包
cd projectName  # 进入创建的项目名称目录
ionic serve # 启用浏览器调试应用页面,这时通过浏览器打开默认端口页面http://localhost:8100/#/tab/dash就可以打开应用页面了

当然这里需要保证你的开发环境SDK已经安装成功了,例如Android打包平台的运行环境,可以参考Ionic Hybrid跨终端应用程序开发方案研究

  如果需要在移动设备上打包运行,则需要添加相对应的插件模块。

npm install -g cordova  # 如果没有真实设备,可以通过这个命令来安装模拟环境
ionic platform add ios # 添加ios运行支持
ionic emulate ios   # 模拟运行ios环境
ionic platform add android  # 添加Android运行环境支持
ionic run android   # 使用Android运行应用

  正常情况下,这里ionic会将打包的文件安装到设备或调试模拟器上运行打开应用。

2. 和ionic的区别

  ionic2是建立在angular 2上的,angular 2推荐使用typescript进行项目的开发,所以到了ionic2,就可以这样来开发我们的项目了。一般情况下,我们创建应用完成后,www/目录为我们页面的源代码。其目录结构如下:

+ www/
    + css/
    + img/
    + js/
    + lib/
    + templates/
    + index.html
    + manifest.json
    + service-worker.js

  我们以www/js/app.js为例。

// 入口JavaScript文件,配置页面路由与加载的视图
// ionic版本写法
.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider.state('tab', {
        url: '/tab',
        abstract: true,
        templateUrl: 'templates/tabs.html'
    }).controller('MainCtrl', function($scope){
        $scope.data ={
            text: 'Hello World'
        }
    }
)

});

// ionic 2写法
@Component({
    templateUrl:'main/main.html'
});
export class MainCmp {
    constructor(){
        this.data ={
            text: 'Hello World'
        }
    }
}

  templates/tabs.html的内容如下。

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

  ionic2里面里可以这样来适应原来的版本:

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

  值得注意的是,这里<ion-content>等为ionic-angular提供的组件模块,它类似于Webcomponent的方式,能被angular识别解析。通俗的理解就是一个类似bootstrap的UI组件库。

3、组件

  ionic2除了提供统一便捷式APP打包的解决方案,还提供了一个用于移动端的UI组件库。其实类似的组件库有很多,bootstrap、frozenui、wui等等,但是与其它框架提供UI组件不同的是,ionic2提供的组件规范是面向未来Webcomponent的方式实现的。

  例如对于一个对话框组件,一般的UI框架可能这样来实现,相信类似的框架大家多少用过。这里以frozenui为例,一般通过对元素添加不同的class名称来控制组件的样式和显示,而像ui-dialog这些类名是UI库统一定义好的。

<div class="ui-dialog">
    <div class="ui-dialog-cnt">
      <header class="ui-dialog-hd ui-border-b">
                  <h3>新手任务</h3>
                  <i class="ui-dialog-close" data-role="button"></i>
              </header>
        <div class="ui-dialog-bd">
            <h4>标题标题</h4>
            <div>这是标题的内容!</div>
        </div>
        <div class="ui-dialog-ft">
            <button type="button" data-role="button">取消</button>
            <button type="button" data-role="button">开通</button>
        </div>
    </div>        
</div>
<script class="demo-script">
$(".ui-dialog").dialog("show");
</script>

  但是使用ionic2,你可能会这样来使用,在这里,我们没有去对模块元素添加一些样式的类,因为angular2将自定义组件标签ion-header对应的CSS已经通过Webcomponent的形式引入了,那么我们只用管怎样使用结构层结构就可以了,但是这里注意的是primary block等类名没有添加到class中。

<ion-header>
    <ion-navbar>
        <ion-title>Confirm</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <button primary block (click)="doConfirm()">确认对话框</button>
</ion-content>

<script>
import { AlertController } from 'ionic-angular';
export class MyPage {
    constructor(public alertCtrl: AlertController) {}
    showConfirm() {
        let confirm = this.alertCtrl.create({
            title: '标题标题',
            message: '这是标题的内容',
            buttons: [{
                text: '取消',
                handler: () => {
                    console.log('取消');
                }
            }, {
                text: '确定',
                handler: () => {
                    console.log('A确定');
                }
            }]
        });
        confirm.present();
    }
}
</script>

  其它的相关组件的方式类似,同时你也可以去自定义遵循Webcomponent的element 组件。

更多API: http://ionicframework.com/docs/v2/components/#alert-prompt

4、native交互

  当然,ionic2还提供了与Native客户端的相互调用能力,前端相关的一套JavaScript调用库被称为Ionic Native。如果在你的APP需要调用Native调用能力。现需要安装引入对应的模块,一边在分析打包时引入。

npm install ionic-native --save

  调用时就可以这样来使用。

import {Geolocation} from 'ionic-native';

Geolocation.getCurrentPosition().then(pos => {
    console.log('lat: ' + pos.coords.latitude + ', lon: ' + pos.coords.longitude);
});

let watch = Geolocation.watchPosition().subscribe(pos => {
    console.log('lat: ' + pos.coords.latitude + ', lon: ' + pos.coords.longitude);
});

// to stop watching
watch.unsubscribe();

  使用ionic2也可以使用ES6+的方式来实现。

// ES6 / TypeScript / Ionic 2 / Angular 2
import {Camera} from 'ionic-native';
this.platform().then(() => {
    Camera.getPicture().then(
        res => console.log("We have taken a picture!"),
        err => console.error("Error taking picture", err)
    );
});

具体更多API: http://ionicframework.com/docs/v2/native/

5、主题与图标

  如果你需要改变ionic2 UI组件库的显示风格,你也可以自定义自己的APP样式。方法也很简单,ionic2 的UI组件库样式引用了通用的样式变量,在app/theme/app.variables.scss里面修改响应的颜色和字体值就可以了。这点和其它UI框架是一样的。当然你也可以修改保存多个主题风格的变量文件,以供选择使用。

$colors: (
    primary:    #387ef5;
    secondary:  #32db64;
    danger:     #f53d3d;
    light:      #f4f4f4;
    dark:       #222;
);

  对于图标的话就没什么讲的了,和fontawsome一样,ionic2给了UI框架自带的可选图标,大家可以根据下面的文档说明选择使用。

图标参考: http://ionicframework.com/docs/v2/ionicons/

6、总结

  总结来看,ionic2不仅为我们提供了打包前端页面应用的解决方案,还为我们提供了一整套的UI组件库,而且组件均使用Web Component规范来实现,开发体验有了较好的改善。

更多API: http://ionicframework.com/docs/v2/

© 著作权归作者所有

ouven

ouven

粉丝 107
博文 30
码字总数 77829
作品 0
深圳
高级程序员
私信 提问
Angular 2 系列: 简介

[Angular 2 Series: Introduction][1] By Max on April 2, 2015 現在, [Angular 2][2] 和 [Ionic 2][3] 呼之欲出。我們超讚的小隊正在為下一個大版本的 Ionic 和 Angular 2 在努力工作。我為...

开源中国匿名会员
2015/05/02
640
0
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.2K
26
在 Angular 8 中,我们可以期待些什么

转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 本文由葡萄城翻译并发布 --- Angular 作为一款优秀的前端框架,自诞生之日起,就致力于面向前...

葡萄城技术团队
04/15
388
0
开源中国的 AngularJS 优秀文章汇总

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

oschina
2014/08/24
5.8K
13
给 Web 开发者的 25 款最有用的 AngularJS 工具

AngularJS 是一种新 JavaScript 框架,目的是降低要求,加快开发速度。AngularJS 是让 HTML 标记动态,使其对 web 开发者更有帮助,同时从大量的分段中给定一个标准结构,使开发速度更快更高...

oschina
2015/03/05
68.5K
19

没有更多内容

加载失败,请刷新页面

加载更多

为什么要在网站中应用CDN加速?

1. 网页加载速度更快 在网站中使用CDN技术最直接的一个好处就是它可以加快网页的加载速度。首先,CDN加速的内容分发是基于服务器缓存的,由于CDN中缓存了不少数据,它能够给用户提供更快的页...

云漫网络Ruan
16分钟前
2
0
亚玛芬体育(Amer Sports)和信必优正式启动合作开发Movesense创新

亚玛芬体育和信必优正式启动合作开发Movesense创新,作为亚玛芬体育的完美技术搭档,信必优利用Movesense传感器技术为第三方开发移动应用和服务。 Movesense基于传感器技术和开放的API,测量...

symbiochina88
27分钟前
2
0
创龙TI AM437x ARM Cortex-A9 + Xilinx Spartan-6 FPGA核心板规格书

SOM-TL437xF是一款广州创龙基于TI AM437x ARM Cortex-A9 + Xilinx Spartan-6 FPGA芯片设计的核心板,采用沉金无铅工艺的10层板设计,适用于高速数据采集和处理系统、汽车导航、工业自动化等领...

Tronlong创龙
28分钟前
2
0
好程序员Java学习路线分享MyBatis之线程优化

  好程序员Java学习路线分享MyBatis之线程优化,我们的项目存在大量用户同时访问的情况,那么就会出现大量线程并发访问数据库,这样会带来线程同步问题,本章我们将讨论MyBatis的线程同步问...

好程序员官方
34分钟前
6
0
IDEA 自定义方法注解模板

IDEA 自定义方法注解模板 1、使用效果 /*** 计算交易费用* @Author wangjiafang* @Date 2019/9/11* @param feeComputeVo* @return*/@PostMapping("/v1/fee_compute")public ApiResp......

小白的成长
34分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部