IonicFramework入门总结

update@2014-12-29

在用ionic开发一个app，中间遇到了各种小问题，总结下来利人利己。

1 环境搭建

我是在mac下开发的，使用命令行操作,首先去nodejs.org下载mac下的nodejs并安装。然后执行下面的命令

下载android-sdk，将android可执行文件的路径加到PATH变量里，编辑/etc/profile文件，将如下内容写入,注意修改成自己的路径

执行android,打开android sdk manager，选中Android4.4.2(API 19),然后安装.建议使用vpn，这样安装会快很多,推荐vpnonly

执行下面的命令安装ant

2 开始一个项目

通过执行下面的命令你可以快速开始一个新项目

在浏览器里打开和调试项目

在ios或者andorid模拟器中打开项目

3 遇到的问题和解决方法

3.1 执行ionic emulate ios, ios模拟器一直黑屏，在网上找到的解决方法如下。

3.2 执行ionic emulate android,编译时总报错，根据报错信息,报错的小箭头一直指着我的项目名，这时意识到可能是我的项目名前带有数字的原因，于是新建了一个项目，用全英文的项目名，问题解决

3.3 我添加了个登陆页面，怎么让app启动的时候直接到登陆页面呢？修改/path/to/your/project/www/js/app.js 中的 $urlRouterProvider.otherwise('login'); 这行,修改成登陆的state即可

3.4 执行ionic emulate ios 是看不到代码里console.info等打出的log的，要想看log可以执行 ionic run ios -l -c -s

3.5 后端是用RESTFUL写的api，直接用$http.get来调，一直不成功，换$resource，注意$resource是一个单独的js文件，需要单独加载

3.6 tab在android下显示在了上方，很不和谐,解决方法如下

.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {
    var androidConfig = {
        tabs: {
            style: 'standard',
            position: 'bottom'
        }
    };
    $ionicConfigProvider.setPlatformConfig('android',androidConfig);
});

3.7 因为需要将用户的登录信息保存起来,找到了window.localStorage这个东西，但是取值的时候总取不出来,最终发现了一个trick,用toJson和fromJson互转一下就可以了

window.localStorage.clear();
window.localStorage.global = angular.toJson({hehe: 'testme'});
var t = angular.fromJson(window.localStorage.global);
console.info(t,t.hehe);

3.8 js数组怎么在开头插入数据？新建一个数组,然后用concat拼接就行了

参考资料