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’);

  });

})