观《phonegap第三季 angularjs+ionic视频教程实时发布》学习笔记（一）

一、 phonegap 性能优化以及 phonegap + Angularjs +ionic

1、安装包括：nodejs-cordova-ionic，sdk，phonegap等等；

2、怎样吧导航设置到底部的解决方案；

3、ionic、JqueryMobile、Sencha的对比：　

（1）. Jqmobi
轻量级框架，它的语言基于jquery语言容易上手,运行速度快，但是没有MVC 多人协作开发的概念，项目比较大后代码不易维护 (中小项目 1-2个人开发很适用)
（2）. SenchaTouch
运行速度快和 jqmobi运行速度差不多，兼容性好，基于MVC世界上第一个html5 移动开发框架，但是它是一个重量级的框架，需要extjs 基础代码复杂需要较强的程序基础。但是sencha architect 是个很不错的可视化开发工具，弥补了sencha的不少缺点
（3）. ionic
运行速度快和 jqmobi运行速度差不多，轻量级框架，基于Angularjs，支持Angularjs的特性，MVC ，代码易维护 IONIC 是目前最有潜力的一款HTML5手机应用开发框架。通过SASS构建应用程序，它提供了很多UI组件来帮助开发者开发强大的应用。它使用 JavaScript MVVM框架和 AngularJS来增强应用。提供数据的双向绑定，使用它成为Web和移动开发者的共同选择。即将发布的AngularJS 2.0将会专注于移动开发，相信IONIC一定会取得不错的成就

4、crosswalk

Crosswalk开源android WebView 引擎，让Phonegap android应用飞起来（经测试运行速度可以提升 3-5倍）；

Ionic 中集成 Crosswalk （也可以集成其他的htnl5框架如jqmobi）介绍：1．集成crosswalk—— ionic browser add crosswalk 2.卸载 crosswalk—— ionic browser revert android 或者 ionic browser remove crosswalk

二、 ionic项目简介以及Angularjs 基础(1)

1、打包项目

2、angularjs下载

3、angularjs中常用指令

　　（1）ng-app：定义应用程序的根元素；

　　（2）ng-init：为应用程序定义初始值，相当于data-ng-init；

　　（3）ng-bind：绑定HTML元素到应用程序数据，等同于{{}}；

　　（4）ng-controller：为应用程序定义控制器对象，ng-app下可以有多个控制器；

　　（5）{{name}}：name可以是表达式，变量名，对象的属性，数组，用于显示绑定的数据；

　　（6）ng-repeat：为控制器中的每个数据定义一个模板，可以用于展示数据，列表；

　　（7）var app=angular.module（"myapp",[依赖的模块]）；

4、$http

　　（1）$http.get()

　　　　——$http.get("http://www.w3cschool.cc/try/angularjs/data/Customers_JSON.php").success(function(response) {$scope.names = response;});

　　　　——$http.get(url,{params:{id:'5'}}) .success(function(response) { $scope.names = response; }).error(function(data){ //错误代码 });

　　（2）$http.post()

　　　　——$http.post(url,postData,config) .success(function(response) { $scope.names = response; }).error(function(data){ //错误代码});

　　（3）$http.jsonp()

　　　　——myUrl = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1&callback=JSON_CALLBACK";

　　　　　　$http.jsonp(myUrl).success( function(data){ $scope.portalcate = data.result; } ).error(function(){ alert('shibai'); });

5、过滤器：过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。

　　（1）uppercase：格式化字符串为大写{{x in names|uppercase}}。

　　（2）lowercase：格式化字符串为小写{{x in names|lowercase}}。

　　（3）currency：格式化数字为货币格式{{x in names|currency}}。

　　（4）filter:从数组项中选择一个子集{{x in names|filter:name}}。

　　（5）orderBy：根据某个表达式排列数组{{x in names|orderBy:country}}。

6、angularjs模块　　

为什么要使用模块？控制器污染了全局命名空间

普通的控制器：

<body> 

<div ng-app="" ng-controller="myCtrl"> {{ firstName + " " + lastName }} </div>

 <script> function myCtrl($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; } </script>

 <script src="angular.min.js"></script> 

</body>

angularjs模块

<body>
<div ng-app="myApp" ng-controller="myCtrl"> {{ firstName + " " + lastName }} </div>
<script>var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; });</script></body>

三、Angularjs MVC 以及 $scope作用域以及依赖注入中代码压缩问题

1、什么是mvc？

Model：数据模型层 View：视图层，负责展示 Controller：业务逻辑和控制逻辑

优点: 代码模块化代码逻辑比较清晰、可移值性高，后期维护方便、代码复用，代码规模越来越大的时候，切分职责是大势所趋

缺点：运行效率稍微低一些

2、$scope

$scope多控制器单独作用域　　

var app = angular.module("myApp", []); app.controller('firstController',function($scope){ $scope.name='张三'; }); app.controller('secondController',function($scope){ $scope.name='李四'; })

3、$rootScope ——根作用域，全局作用域

4、代码压缩问题

app.controller('name',['$scope',function($scope){$scope.name='张三';}])

app.controller('name',['scope','$rootscope',function($scope,$rootscope){......}])

避免代码压缩过程中把$scope,$rootScope删掉，需要把不想被压缩的$scope,$rootScope写在函数前。

5、Angularjs模块的run方法

run方法初始化全局的数据 ,只对全局作用域起作用如$rootScope

四、Angularjs $scope里面的$apply方法和 $watch方法

1、Angularjs $scope里面的$apply方法

AngularJS外部的控制器（DOM事件、外部的回调函数如jQuery UI空间等）调用了AngularJS函数之后，必须调用$apply。在这种情况下，你需要命令AngularJS刷新自已（模型、视图等），$apply就是用来做这件事情的。

$scope.$apply(function() { $scope.variable1 = 'some value'; executeSomeAction(); });

2、Angularjs $scope里面的$watch方法

$watch方法监视Model的变化。

$scope.$watch($scope.sum,function(newVal,oldVal){ //console.log(newVal); //console.log(oldVal); $scope.iphone.fre = newVal >= 100 ? 0 : 10; });

五、Angularjs 工具方法以及Angularjs中使用jquery

1、Angularjs 工具方法

angular.isArray($scope.name) ——返回true/false

angular.isDate

angular.isDefined

angular.isUndefined

angular.isElement

angular.isFunction

angular.isNumber

angular.isObject

angular.isString

angular.uppercase($scope.name) ——转化为大写

angular.lowercase

angular.equals('a','b') ——返回true/false

angular.extend('b','a') ——b继承a

angular.fromJson() ——字符串转化为Json对象

angular.toJson() ——json对象转化为字符串

angular.copy('a','b') ——将a复制给b

angular.forEach(json,function(key,val){}) ——遍历

angular.bind(name,function(){})

angular.bootstrap() ——动态加载model

2、模块之间的依赖

angular.module('myapp',['ionic'])

3、使用jquery

注意：jquery要放在angularjs上面，先引用jquery

4、var obj1=document.getElementById(Id)

angular.element(obj1).html('.....');

六、 Angularjs 事件指令 input相关指令和样式指令 DOM操作指令详解

1、Angularjs 事件指令

ng-click/dbclick

ng-mousedown/up

ng-mouseenter/leave

ng-mousemove/over/out

ng-keydown/up/press

ng-focus/blur

ng-submit

ng-selected ——是否选中

ng-change ——状态是否改变

ng-copy

ng-cut

ng-paste

ng-cloak ——解决页面加载完成前出现的{{}}

ng-non-bindable ——直接在页面上使用{{}}，不解析{{}}

2、Angularjs input相关指令

ng-disabled

ng-readonly

ng-checked

ng-value ——ng-value="text"相当于value="text"

3、Angularjs 样式指令

ng-class{类名1：true；类名2：true} /{变量名/类名}

ng-style{color:red}/{变量名}

ng-href='{{url}}'

ng-src='{{url}}'

ng-attr-(suffix)

4、Angularjs DOM操作指令

ng-show

ng-if

ng-switch

ng-open

5、Angularjs

ngBind 显示数据类似于 {{}},需要事先引入插件，用src引入文件之后，在angular.module('myapp',[ngSanitize]);

ngBindTemplate 解决ng-bind中只能绑定一个的问题,需要事先引入插件

ngBindHtml 解析html代码,需要事先引入插件

ngInclude 加载外部页面

ng-init

ng-model ——<input type="text" ng-model="text" ng-model-options="{updateOn : 'blur'}">

ng-model-options 控制双向事件绑定的时候触发事件的方式ng-model-options="{ updateOn: 'blur' }"

ng-controler

七、Angularjs filter过滤器以及自定义filter过滤器详解

1、过滤器

（1）uppercase，lowercase大小转换

{{ "lower cap string" | uppercase }} //结果：LOWER CAP STRING {{ "TANK is GOOD" | lowercase }} //结果：tank is good

（2）json格式化

{{ {foo: "bar", baz: 23} | json }} //结果：{ "foo": "bar", "baz": 23 }

（3）date格式化

{{ 1304375948024 | date }} //结果：May 3, 2011{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }} //结果：05/03/2011 @ 6:39AM{{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }} //结果：2011-05-03 06:39:08

（4）number格式化

{{ 1.234567 | number:1 }} //结果：1.2
{{ 1234567 | number }} //结果：1,234,567

（5）currency货币格式化

{{ 250 | currency }} //结果：$250.00
{{ 250 | currency:"RMB ￥ " }} //结果：RMB ￥ 250.00

（6）filter查找

{{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | filter:'s'}} //查找含有有s的行
//上例结果：[{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}]

（7）limitTo字符串，对像的截取

{{ "i love tank" | limitTo:6 }} //结果：i love
{{ "i love tank" | limitTo:-4 }} //结果：tank

（8）orderBy对像排序（默认升序，true为降序）

{{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | orderBy:'id':true }} //根id降序排

（9）控制器使用 filter

$scope.name = $filter('date')('236478234','hh');$scope.name = $filter('uppercase')('hello');

（10）Angularjs自定义filter过滤器

第一步. filters.js添加一个module
查看复制打印? angular.module('tanktest', []).filter('tankreplace', function() { return function(input) { return input.replace(/tank/, "=====") }; });

第二步.app.js中加载这个module 查看复制打印? var phonecatApp = angular.module('phonecatApp', [ 'ngRoute', 'phonecatControllers', 'facebookControllers', 'tanktest' ]);

第三步.html中调用查看复制打印? {{ "TANK is GOOD" | lowercase |tankreplace}} //结果：===== is good 注意：| lowercase |tankreplace管道命令可以有多个

转载于:https://www.cnblogs.com/liujiale/p/5953048.html

观《phonegap第三季 angularjs+ionic视频教程实时发布》学习笔记（一）相关推荐

.NET 大数据实时计算--学习笔记
摘要纯 .Net 自研大数据实时计算平台,在中通快递服务数百亿包裹,处理数据万亿计!将分享大数据如何落地以及设计思路,技术重难点. 目录背景介绍计算平台架构项目实战背景介绍计算平台架构分 ...
Oxyplot实时绘图学习笔记（下）
(接上帖) 绘图控件的相关设置简略监测区域图表原项目使用的实时绘图逻辑是"当绘制完十个点后,其后每画一个新点,就将第一个点删除"从而达成实时绘图的效果. 但是这个逻辑很显然会导 ...
Oxyplot实时绘图学习笔记（上）
(本项目来源于嵌入式系统实践课程项目) 目标作为嵌入式系统的考核项目之一,我们小组选择项目是"基于串行通信的智能传感器和数据采集",我们拟开发的项目是"基于智能传感器的 ...
RTC实时时钟(学习笔记)
RTC实时时钟特征与原理 RTC(Real Time Clock):实时时钟. RTC是个独立的定时器.RTC模块拥有一个连续计数的计数器,在相应的软件配置下,可以提供时钟日历的功能.修改计数器的值可 ...
python摄像头推流_海康视频实时推流学习笔记
学习目的是在Python里调取网络摄像头实时显示视频流,方便日后处理. 我最开始的想法是用萤石开发平台下载的sdk自带的demo,在Python里调用C++的程序,但是在运行的过程中返回错误,NET- ...
PHP第一季视频教程.李炎恢.学习笔记（一）（第1章 PHP概述(1)、(2)、(3)）
<?php header("Content-Type: text/html; charset=utf-8");echo '此文本,请保存成PHP文件后,在浏览器中打开.'.' ...
phonegap 性能优化以及 phonegap + Angularjs + ionic 移动 app 开发介绍
第一讲 phonegap 性能优化以及 phonegap+ Angularjs + ionic 移动 app 开发介绍学习要点: Phonegap第一季第二季视频教程内容简介 phon ...
Docker中安装Jenkins实时发布.net core 项目(二)
Docker中安装Jenkins实时发布.net core 项目防坑点升级docker jenkins运行运行命令 jenkins拉取git并构建项目其他查看发布文件防坑点升级docke ...
Docker中安装Jenkins实时发布.net core 项目(一)
Docker中安装Jenkins实时发布.net core 项目安装docker 懒人篇手动安装 dockerfile安装jenkins 常规安装jenkins jenkins的安装搜索jenk ...

观《phonegap第三季 angularjs+ionic视频教程实时发布》学习笔记（一）

观《phonegap第三季 angularjs+ionic视频教程实时发布》学习笔记（一）相关推荐

最新文章

热门文章

观《phonegap第三季 angularjs+ionic视频教程 实时发布》学习笔记（一）

观《phonegap第三季 angularjs+ionic视频教程 实时发布》学习笔记（一）相关推荐

最新文章

热门文章

观《phonegap第三季 angularjs+ionic视频教程实时发布》学习笔记（一）

观《phonegap第三季 angularjs+ionic视频教程实时发布》学习笔记（一）相关推荐