腊月的季节

破万卷APP总结二

发表于 | 分类于 | | 阅读次数

使用cordova外来插件

安装ngCordova库，可使用开发的第三方插件。
ngCordova库下载
链接：http://pan.baidu.com/s/1c2f7c0S 密码：fl86
1、引入ng-cordova.js文件
把 ng-cordova.js 或者 ng-cordova.min.js引入index.html中并放在cordova.js之前， AngularJS Ionic 文件之后 (因为ngCordova d依赖AngularJS).


2、引入ng-cordova的依赖
在主程序的app.js中引入ng-cordova的依赖
angular.module(‘myApp‘, [‘ngCordova‘])
3、添加插件到你的Cordova CLI环境中 用到那个添加那个
cordova plugin add …

error: unknown host service

辨别电脑的5037端口被哪个应用程序占用，如果5037端口被占用，找到他删掉进程。

window.localStorage

添加一个angularjs服务

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//本地存储数据===================================
.factory('locals',['$window',function($window){
      return{        //存储单个属性
        set :function(key,value){
          $window.localStorage[key]=value;
        },        //读取单个属性
        get:function(key,defaultValue){
          return  $window.localStorage[key] || defaultValue;
        },        //存储对象，以JSON格式存储
        setObject:function(key,value){
          $window.localStorage[key]=JSON.stringify(value);
        },        //读取对象
        getObject: function (key) {
          return JSON.parse($window.localStorage[key] || '{}');
        }

      }
  }]);

服务依赖注入到angularjs控制器

1
2
3
4
5
6
7
.controller('loginController',function($scope, $ionicPopup, $state,locals){
//存储数据
 locals.set("username",user.username);
 locals.set("password",user.password);
 
 //读取数据
 console.log(locals.get("username",""));

localStorage - 没有时间限制的数据存储,需要人为来清空，window.localStorage.clear()或者.removeItem(key)
sessionStorage - 针对一个 session 的数据存储

关于表单的作用域

作用域的原型继承是非常简单普遍的，甚至你不必关心它的运作。直到你在子作用域中向父作用域的原始类型属性使用双向数据绑定，比如Form表单的ng-model为父作用域中的属性，且为原始类型，输入数据后，它不会如你期望的那样运行——AngularJS不会把输入数据写到你期望的父作用域属性中去，而是直接在子作用域创建同名属性并写入数据。这个行为符合JavaScript原型继承机制的行为。AngularJS新手通常没有认识到ng-repeat、 ng-switch、ng-view和ng-include 都会创建子作用域, 所以经常出问题。
避免这个问题的最佳实践是在ng-model中总使用.。
AngularJS存在四种作用域:
1、普通的带原型继承的作用域 – ng-include, ng-switch, ng-controller, directive with scope: true；
2、普通的带原型继承的，并且有赋值行为的作用域 – ng-repeat，ng-repeat为每一个迭代项创建一个普通的有原型继承的子作用域，但同时在子作用域中创建新属性存储迭代项；
3、“Isolate”作用域 – directive with scope: {…}， 该作用域没有原型继承，但可以通过’=’, ‘@’, 和 ‘&’与父作用域通信。
4、“transcluded”作用域 – directive with transclude: true，它也是普通的带原型继承的作用域，但它与“Isolate”作用域是相邻的好基友。

常用指令

ng-show,ng-hide,ng-if,ng-disabled,ng-switch-when,ng-class,ng-src,ng-repeat,ng-options，ng-click,ng-doubleclick,ng-mouseover.

ng-style使用filter

错误的写法:

1
2
3
<div class="progress">
  <div class="bar bar-success"
     style="width:{{user.used | percent:user.total}}"></div></div>

这可能是因为在刚开始渲染页面时, user的值还没有获取到, 所以width一直为0. 后来获取到user的值了, 但界面已经不能自动更新了导致的.
正确的写法:

1
2
3
4
<div class="progress">
  <div class="bar bar-success"
     ng-style="{'width': (user.used | percent:user.total)}"></div>
</div>

因为ng-style是angular自己的指令, 它会监听user的变化, 并输出层div的style属性, 所以是正确的.
注意, 在ng-style中使用filter: (user.used | percent: user.total)

tabs只调用一次controller

ionic如果你使用tabs为abstract的话，默认是缓存页面的，可以在state里面设置禁用缓存：cache: false

热评文章