Ionic 坑总结

1 离线gradle构建

  http://stackoverflow.com/questions/29874564/ionic-build-android-error-when-download-gradle

myApp/platforms/android/cordova/lib/builders/GradleBuilder.js.

paste it in somewhere likes myApp\platforms\android\gradle\gradle-2.2.1-all.zip

 var distributionUrl = 'distributionUrl=../gradle-2.2.1-all.zip';

2 bower的安装及命令使用

见https://segmentfault.com/a/1190000000349555

3 如果一个page有多个view需要使用：

views:{
  'side-content':{
    templateUrl:'template/content1.html',
    controller:'content1Ctrl'
  }
}

如果slidemenu替换content后无法自动滑动，重写滑动事件on-swipe-right on-swipe-left，然后通过

$ionicSideMenuDelegate控制展开与否。

4 无法替换slidemenu的content内容的话，需要替换的位置有误

<ion-side-menu-content>

    <ion-nav-view name="side-content"></ion-nav-view>

</ion-side-menu-content>

5 控制器间数据的传递与接收

• emit只能向parent controller传递event与data
• $broadcast只能向child controller传递event与data
• $on用于接收event与data

一般在app.js中控制器的继承关系已经明了

例如：

.state('slidmenu.content1',{

父控制器：slidmenu

子控制器：content1

6 $q    promise 使用

见workspace-TestAngular   中 demo-Promise

7 页面间跳转传值

• 在app.js中配置参数，目标页面规定接受的参数：$stateProvider.state('page2', {params: {'data': null}});

• 传参：$state.go('page2', {data: 'aaa'});

• 目标页面控制器中接受参数：控制器注入$stateParams之后可以通过$stateParams.data来获取‘aaa’

  
  

  8 AngularJS 一次技术绑定（onetime bindings）

• http://www.html-js.com/article/Using-Angular-to-develop-web-application-of-AngularJS-13-in-onetime-data-binding-onetime-bindings

• 为了解决某些dom元素只更新一次即可，不用每次都更新，可以使用：：进行一次技术绑定，提高效率，否则，每次都去检查回调，效率会降低。

  • <p>Hello {{::name}}!</p>

  9 angular ---for each既可以遍历数组也可以遍历对象的key和value

• 见 workspace-testAngular

  
  

  10 避免混淆出错的时候容易出现的问题：

  顺序得一致  $state','$scope','$stateParams',function ($state,$scope,$stateParams) 否则有问题

• 11 angularJS translate使用

• 见http://www.tuicool.com/articles/zeymimB

• http://zhenghaoju700.blog.163.com/blog/static/13585951820152236200650/
  

• 引入库文件

• bower install angular-translate --save
  bower install angular-translate-loader-static-files --save

• 添加依赖
  var app = angular.module('myApp', ['pascalprecht.translate']);

• 普通配置方式

• app.config(function($translateProvider) {
    $translateProvider.translations({
      "headline": "Hello there, This is my awesome app!",
      "intro": "And it has i18n support!"
    });
  });

• 使用本地文件配置

• $translateProvider.useStaticFilesLoader({
      prefix: 'lib/locale/',
      suffix: '.json'
  });
  $translateProvider.preferredLanguage('cn');
  

• 使用

• <p class="light">{{'TEST' | translate}}</p> -----页面作为filter使用
  <pre class="light" translate="TEST"></pre>  -------作为指令使用
  

• 12 ngCordova使用
• http://www.ionic.wang/ng_cordova-index.html
• 
  

  
  

  13 src绝对路径

  相对路径:src="img/icon_co2.png"
  绝对路径：src="http://www.example.com/a.png"
  需要注意绝对路径