发表于   |   分类于   |  

在app.js里加：

1
2
3
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
    $ionicConfigProvider.tabs.position('bottom');
});

更详细设置：

1
2
3
4
5
6
7
8
9
10
$ionicConfigProvider.platform.ios.tabs.style('standard');
$ionicConfigProvider.platform.ios.tabs.position('bottom');
$ionicConfigProvider.platform.android.tabs.style('standard');
$ionicConfigProvider.platform.android.tabs.position('bottom');
$ionicConfigProvider.platform.ios.navBar.alignTitle('center');
$ionicConfigProvider.platform.android.navBar.alignTitle('center');
$ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left');
$ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-android-arrow-back');
$ionicConfigProvider.platform.ios.views.transition('ios');
$ionicConfigProvider.platform.android.views.transition('android');

发表于   |   分类于   |  

公司在做ionic开发时，遇到要发布为webserver:

1
2
3
$ cd [ionic project]
$ ionic platform add browser
$ cd [ionic project]/platforms/browser/

安装 Install Node.js

Install connect and serve-static
$ cd [webapp] $ npm install connect serve-static
编写server.js

1
2
3
var connect = require('connect');
var serveStatic = require('serve-static');
connect().use(serveStatic(__dirname)).listen(8080)

运行：
$ node server.js &

发表于   |   分类于   |  

今天和组员一起做弹窗，发现将弹窗抽离出的factory真心不错

modal.facotry.js 如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
.factory('appModalService', ['$ionicModal', '$rootScope', '$q', '$injector', '$controller', function($ionicModal, $rootScope, $q, $injector, $controller) {
	  return {
	    show: show
	  }
	  function show(templeteUrl, controller, parameters, options) {
	    // Grab the injector and create a new scope
	    var deferred = $q.defer(),
	        ctrlInstance,
	        modalScope = $rootScope.$new(),
	        thisScopeId = modalScope.$id,
	        defaultOptions = {
	          animation: 'slide-in-up',
	          focusFirstInput: false,
	          backdropClickToClose: true,
	          hardwareBackButtonClose: true,
	          modalCallback: null
	        };
	   options = angular.extend({}, defaultOptions, options);
	
	 $ionicModal.fromTemplateUrl(templeteUrl, {
	   scope: modalScope,
	   animation: options.animation,
	   focusFirstInput: options.focusFirstInput,
	   backdropClickToClose: options.backdropClickToClose,
	   hardwareBackButtonClose: options.hardwareBackButtonClose
	 }).then(function (modal) {
	   modalScope.modal = modal;
	
	   modalScope.openModal = function () {
	     modalScope.modal.show();
	   };
	   modalScope.closeModal = function (result) {
	     deferred.resolve(result);
	     modalScope.modal.hide();
	   };
	   modalScope.$on('modal.hidden', function (thisModal) {
	     if (thisModal.currentScope) {
	       var modalScopeId = thisModal.currentScope.$id;
	       if (thisScopeId === modalScopeId) {
	         deferred.resolve(null);
	         _cleanup(thisModal.currentScope);
	       }
	     }
	   });
	
	   // Invoke the controller
	   var locals = { '$scope': modalScope, 'parameters': parameters };
	   var ctrlEval = _evalController(controller);
	   ctrlInstance = $controller(controller, locals);
	   if (ctrlEval.isControllerAs) {
	     ctrlInstance.openModal = modalScope.openModal;
	     ctrlInstance.closeModal = modalScope.closeModal;
	   }
	
	   modalScope.modal.show()
	     .then(function () {
	     modalScope.$broadcast('modal.afterShow', modalScope.modal);
	   });
	
	   if (angular.isFunction(options.modalCallback)) {
	     options.modalCallback(modal);
	   }
	
	 }, function (err) {
	   deferred.reject(err);
	 });
	
	 return deferred.promise;
	  }
	
	  function _cleanup(scope) {
	    scope.$destroy();
	    if (scope.modal) {
	      scope.modal.remove();
	    }
	  }
	
	  function _evalController(ctrlName) {
	    var result = {
	      isControllerAs: false,
	      controllerName: '',
	      propName: ''
	    };
	    var fragments = (ctrlName || '').trim().split(/\s+/);
	    result.isControllerAs = fragments.length === 3 && (fragments[1] || '').toLowerCase() === 'as';
	    if (result.isControllerAs) {
	      result.controllerName = fragments[0];
	      result.propName = fragments[2];
	    } else {
	      result.controllerName = ctrlName;
	    }
	
	    return result;
	  }
	 
	}]);

实现modal方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.factory('myModals', ['appModalService', function(appModalService){
  // all app modals here
  var service = {
    showConfirmContact: showConfirmContact,
    showContacts: showContacts
  };
  
  return service;
  
  function showConfirmContact(contact){
    return appModalService.show('confirm-contact-modal.html', 'ConfirmContactDialogCtrl as vm', contact);
  }
  
  function showContacts(otherContact) {
    return appModalService.show('contacts-modal.html', 'ContactDialogCtrl as vm', otherContact);
  }
  
  
}])

controller调用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.controller('AppCtrl', ['$scope', 'myModals', function($scope, myModals) {
  var vm = this;
  vm.selectedContact = '';
  vm.openContactDialog = function(){
    myModals.showContacts({ name: 'Julian Paulozzi' })
    .then(function(result) {
      if(result && result.name){
        vm.selectedContact = result;
      }
    }, function(err) {
       alert(err);
    });
  };
  
}])

页面view调用：

1
2
3
<button ng-click="vm.openContactDialog()" class="button button-assertive button-block">
          Open contacts to select
</button>

发表于   |   分类于   |  

这两天一直在做ionic开发，期间有个诉求是要完成ionic与socket.io对接，中间绕了不少弯子，故留下笔记。

先叙述下基本的诉求：

  • Nodejs 做为服务端，主要做服务端消息的监听与发送
  • 客户端App 为服务端发送消息
  • 主要协议TCP

服务端代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var http= require('http'), io= require('socket.io');
var app = http.createServer(), io = io.listen(app);
app.listen(10010);
io.sockets.on('connection', function (socket) {
  socket.emit('news', { hello: 'world' });//监听，一旦客户端连接上，即发送数据，第一个参数'new'为数据名，第二个参数既为数据
  socket.on('my new event', function (data) {//捕获客户端发送名为'my other event'的数据
    console.log(data.my);
  });
  socket.emit('other', { hello: 'other world' });//发送另一个数据
  socket.on('event1', function (data) {//捕获另外一个数据
    console.log(data);
  });
});

Ionic 部分：

  • 生成新项目：ionic start chat-app blank
  • 引入angular-socket-io 库:bower install angular-socket-io
  • folder
  • 注入socket.io在项目里：var app=angular.module('ionic-socketio-chat-client', ['ionic','btford.socket-io'])

  • 在index.html导入socket.io，注：socket.io/socket.io.js是服务端动态生成

     <script src="http://192.168.0.101:10010/socket.io/socket.io.js"></script>
<script src="lib/angular-socket-io/socket.js"></script>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var socket = io.connect('http://192.168.0.101:10010');
          // io.set('origins', '*:*');
          socket.on('news', function(data) {
              console.log(data.hello);
          });
          socket.on('other', function(data) { //接收另一个名为'other'数据，  
              console.log(data.hello);
              socket.emit('event1', {
                  my: 'other data'
              });
          });

如此，客户端调用成功。