月度归档：2015年09月

ionic学习笔记

发表评论

登录页面输入框

<label class=”item item-input”>

  <i class=”icon ion-ios-unlocked-outline positive”></i>

  <input type=”password” placeholder=”请输入您的密码”>

</label>

顶部条状的tabs

class=”tabs-striped tabs-top”

grid布局

row和col

col是按百分比的col-50,col-20

下拉更新数据 ion-refresher

上拉加载更多数据 ion-infinite-scroll

$ionicScrollDelegate可以控制滚动scrollTop或者scrollBottom

ionic.wang有中文文档

ionic路由管理

$state：路由状态机

状态迁移的几种方式：

1、$state.go(“state name”);

2、<a ui-sref=“state name”>go state name</a>

3、导航到相关联的url

内联模板

<script type=“text/ng-template” id=“name.html”>

<ion-view>

<p>123</p>

</ion-view>

</script>

加载的模板会放在<ion-nav-view></ion-nav-view>里

<ion-view>用在定义模板的时候

控制是否显示标题栏

$ionicNavBarDelegate.showBar(true);

state可以通过点标记tab.chats或者parent:’tab’来继承模板框架

tab和sidemenu结合使用，应该是把tabs放到sidemenucontent里面去

这样有全局的sidemenu

angularjs和ionic

发表评论

web storm编辑器

下拉更新

ion-refresher

03里面的demo02 pull-to-refresh有示例工程

angularjs：

ng-app，表示angularjs开始接管

ng-model=“username” 绑定input，类似普通html里面的name=“ username”

ng-bind=“ username” 类似 {{username}}

较普通html不同的是，这种绑定方式可以实时input，实时输出

这就叫双向数据绑定

ng-init，设置一些初始值，一般不用

{{}}中可以写表达式{{num*5}}

ng-controller，指定控制器，angularjs的核心

然后使用$scope元素完成双向绑定

ng-app和ng-controller都是有控制域的

angularjs使用模块，解决控制器污染全局命名的问题

ng-repeat完成循环，如下，将会循环li标签

<ul>

  <li ng-repeat=“p in person”></li>

</ul>

需要用哪个模块，就把模块名加到controller的参数里面，如$http等

$http.get(url).success(function(data) {}).error(function(err) {});

$http.post(url).success()

$http.jsonp(url),跨域请求其中url需要加callback=JSON_CALLBACK

过滤器

{{name | uppercase}}

{{name | lowercase}}

ng-repeat=“p in person | orderBy:’name’ “

还可以筛选 ng-repeat | filter

$scope作用域

controller可以嵌套，对应$scope就是继承关系

另外有一个$rootScope

如果外部的setTimeout方法要实现$scope的变化，或者是监听$scope的变化

使用$apply或者$watch方法

但是可以使用angularjs内置的$timeout方法，更简单，不需要用$apply方法

监听数据变化特别好用，比如在计算运费的时候

$scope.$watch($scope.sum,function(newVal,oldVal) {

//console.log(newVal); 

//console.log(oldVal); 

$scope.iphone.fre = newVal >= 100 ? 0 : 10;

});

{{sum()}}，数据绑定里面可以执行方法

$scope.sum() {return total;}

angularjs的工具方法

angular.isArray, isString 等等

angular.uppercase()

如果要初始化两个ng-app，需要用angular.bootstrap来加载

模块之间的依赖还可以从[]中加入

比如

service.js中有angular.module(‘starter.services’, [])

controller.js中有angular.module(‘starter.controllers’, [])

然后在app.js中写入

angular.module(‘starter’, [‘ionic’, ‘starter.controllers’, ‘starter.services’])

其中ionic是插件，另外两个是其他文件中的module

学习ionic和cordova

发表评论

osx环境下

安装nodejs，0.10.26版本的就好，太新或者太旧都不好用

node -v和npm -v查看安装是否成功

安装ionic和cordova

npm install -g cordova ionic

ionic实际上就是基于cordova和angularjs的一个框架

ionic start [project name]创建一个项目

首先看index.html，是主页面，里面引入了angularjs， cordova等js支持，此外还有app.js, controllers.js, services.js三个文件，这三个文件构建了app的应用逻辑，app是主程序，包含一些设置和启动脚本，services是数据支持部分，也就是model部分，用于提供数据的增删改查操作，controllers用于控制，包含业务逻辑控制代码

ionic platform add ios

ionic build ios

然后进文件目录，project name/platform/ios用xcode打开就好了

如果装了ios-sim，可以继续

ionic run ios 或者

ionic emulate android等

修改www中的文件，主要是css，img，js，templates

其中css控制样式

js里面app.js控制页面跳转

.state(‘tab.friends’, {

    url: ‘/friends’,

    views: {

      ‘tab-friends’: {

        templateUrl: ‘templates/tab-friends.html’,

        controller: ‘FriendsCtrl’

      }

    }

  })

控制的是tab页面，friends页的形式，在tab-friends这个view里面显示templates名字叫tab-friends的html，然后控制器叫FriendsCtrl

controller.js控制逻辑

$scope是全局变量，定义一些数据和方法

另外还有$ionicTabsDelegate等，注意传递参数

controller里面可以console.log输出，或者直接alert

services.js提供数据等

页面都在templates里面，用到的一些模板的语法，有一些特定的框架和元素，以ion-开头的

注意js中的.controller,  .factory等，多个之间没有任何符号，直接换行即可

最后有分号

直接用ionic serve，开启浏览器调试模式，所见即所得

ionic popover的css, 4388行，opacity为什么是0呢？

leancloud，集成云存储，通信等，移动开发不再需要后台，json数据交互

ionic连接leancloud也非常简单，申请好账号，得到appid和appkey之后

在index.html中引入两个js

<script src=”https://cdn1.lncld.net/static/js/av-mini-0.6.1.js”></script>

<script src=”https://cdn1.lncld.net/static/js/av-core-mini-0.6.1.js”></script>

然后在app.js中

.run(function($ionicPlatform) {

  $ionicPlatform.ready(function() {

    //里面，添加AV初始化即可

    //leancloud

    AV.initialize(‘vGdoW****beS1D’, ‘5LubapRJ*****lcQw8zx2’);

  });

})