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

Posted 2020-08-14

八、Angularjs自定义服务 provide里provider方法 以及factory、service方法以及provider供应商的概念

Angular 提供了3种方法来创建并注册我们自己的服务。

1. Provider

Providers 是唯一一种你可以传进 .config() 函数的 service。当你想要在 service 对象启用之前，先进行模块范围的配置，那就应该用 provider。

(1)var app=angular.mudle(‘myApp‘,[],function(provide){$provide.provider=...;this.$get=function(){};});

(2)$scope.config=function(provide){}

2. Factory     ——可返回对象和字符串

Factory 方法直接把一个函数当成一个对象的$get 方法可以直接返回字符串

用 Factory 就是创建一个对象，为它添加属性，然后把这个对象返回出来。你把 service 传进 controller 之后，在 controller 里这个对象里的属性就可以通过 factory 使用了。

3. Service

Service 是用"new"关键字实例化的。因此，你应该给"this"添加属性，然后 service 返回"this"。你把 service 传进 controller 之后，在controller里 "this" 上的属性就可以通过 service 来使用了

4、三者的区别：

（1）provider要放在this.$get里面

（2）service可用this直接定义方法

（3）只有provider可以传入config

（4）service不能返回字符串

九、Angularjs 常用服务 $http $location $anchorScroll $cacheFactory $timeout $interval $sce

1.$http

(1)get

(2)post

(3)jsonp

2.$location

$location服务解析地址栏中的URL（基于window.location），让你在应用代码中能获取到。改变地址栏中的URL会反应$location服务中，反之亦然。

(1) 暴露当前地址栏的URL，这样你就能
? 获取并监听URL。
? 改变URL。
(2)当出现以下情况时同步URL
? 改变地址栏
? 点击了后退按钮（或者点击了历史链接）
? 点击了一个链接
(3)一系列方法来获取URL对象的具体内容用（protocol, host, port, path, search, hash）.formatDate

(4)$location不会做

当浏览器的URL改变时，不会重新加载整个页面。如果想要重新加载整个页面，需要使用$window.location.href。
(5)内置方法：

absUrl( )：只读；根据在RFC 3986中指定的规则，返回url，带有所有的片段。

hash( )：读、写；当带有参数时，返回哈希碎片；当在带有参数的情况下，改变哈希碎片时，返回$location。

host( )：只读；返回url中的主机路径。

path( )：读、写；当没有任何参数时，返回当前url的路径；当带有参数时，改变路径，并返回$location。（返回的路径永远会带有/）

port( )：只读；返回当前路径的端口号。

protocol( )：只读；返回当前url的协议。

replace( )：如果被调用，就会用改变后的URL直接替换浏览器中的历史记录，而不是在历史记录中新建一条信息，这样可以阻止『后退』。

search( )：读、写；当不带参数调用的时候，以对象形式返回当前url的搜索部分。

url( )：读、写；当不带参数时，返回url；当带有参数时，返回$location。

3.$cacheFactory

<script> 
var m1 = angular.module(‘myApp‘,[]);
 m1.controller(‘Aaa‘,[‘$scope‘,‘$cacheFactory‘,‘$log‘,function($scope,$cacheFactory,$log){
 $log.error(‘hello‘); 
var cache = $cacheFactory(‘myCache‘);
 cache.put(‘name‘,‘hello‘); cache.put(‘age‘,‘20‘); cache.put(‘job‘,‘it‘); }]);
m1.controller(‘Bbb‘,[‘$scope‘,‘$cacheFactory‘,‘$log‘,function($scope,$cacheFactory,$log){ 
var cache = $cacheFactory.get(‘myCache‘); console.log(cache.get(‘name‘)); }]); 
</script>

4、$timeout

$timeout(function(){ $scope.name = ‘123‘; },1100);

5、$interval

$ inteval(function(){ $scope.name = ‘123‘; },1100);

6、$sce  ——用于解析html代码文章里面的标签

var app = angular.module("myApp", []); app.controller(‘firstController‘,function($scope,$timeout,$sce,$http){ 
$scope.name = ‘hello‘; 
$scope.text = ‘<h1>hello</h1>‘;
 var myUrl = "http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=338&callback=JSON_CALLBACK"; $http.jsonp(myUrl).success( function(data){ 
//$scope.portalDetail = data.result[0];
 $scope.detailContent = function() {
 return $sce.trustAsHtml(data.result[0].content); }; } ).error(function(){ alert(‘失败‘); }); });

7、$anchorScroll

可直接跳转到网页上指定id的位置，例如点击某个li跳转至页面对应id处，方法一：$scope.hash(id);方法二：$anchorScroll();

十、angularjs ngSanitize ngRoute ngAnimate插件

1、ngSanitize     ——ng-bind的插件

让浏览器简析html标签
（1） 引入js angular-sanitize.min.js
（2） 在module 中引入一下插件 var app = angular.module("myApp", [‘ngSanitize‘]);
（3） 使用<div ng-bind-html="text"></div> 绑定数据

2、ngRoute

引入js 依赖注入
<script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script>

var m1 = angular.module(‘myApp‘,[‘ngRoute‘]);
m1.config([‘$routeProvider‘,function($routeProvider){ $routeProvider .when(‘/aaa/:num‘,{
 template : ‘<p>首页的内容</p>{{name}}‘,//可以是标签，可以是url
controller : ‘Aaa‘ 
}) .when(‘/ccc‘,{ 
template : ‘<p>课程的内容</p>{{name}}‘,
 controller : ‘Ccc‘ }) .otherwise({
 redirectTo : ‘/aaa‘ 
}); }]);

（1）$rootParams

（2）$on

（3）$routeChangeStart

（4）$routeChangeSuccess/Error

3、ngAnimate     ——页面切换动效

（1） 引入js
<script src="http://cdn.bootcss.com/angular.js/1.3.8/angular-animate.min.js"></script>
（2） var m1 = angular.module(‘myApp‘,[‘ngAnimate‘]);
（3） 使用下面的几种方式

CSS3的方式（1）

ng-enter

ng-enter-active

ng-leave

ng-leave-active

支持的指令

if,view,repeat,include,swtich repeat：ng-enter-stagger animation-delay

CSS3的方式（2）

ng-hide-add

ng-hide-add-active

ng-hide-remove

ng-hide-remove-active

支持的指令

class,show,hide,model等

JS方式

animation()

enter/leave

removeClass/addClass

m1.animation(‘.box‘,function(){
 return { 
addClass : function(element,sClass,done){ 
//console.log(element); 
//console.log(sClass); 
//console.log(done); 

$(element).animate({width:0,height:0},1000,done); }, 

removeClass : function(element,sClass,done){ $(element).css({width:0,height:0}); $(element).animate({width:200,height:200},1000,done); } }; });

十一、$resource 数据交互插件

后端支持跨域请求： header(‘Access-Control-Allow-Origin: *‘);

 1、$resource   

$resource(url, [paramDefaults], [actions], options);

支持方法：

{

‘get‘: {method:‘GET‘},

‘save‘: {method:‘POST‘},

‘query‘: {method:‘GET‘, isArray:true},

‘remove‘: {method:‘DELETE‘},

‘delete‘: {method:‘DELETE‘}

};

（1） 引入 angular-resource.min.js
（2） 定义模块时加载ngResource
var app = angular.module(‘app‘,["ngResource"]);

（3）var User = $resource(‘/user/:userId‘, {userId:‘@id‘});

　　var user = User.get({userId:123}, function() { user.abc = true; user.$save(); });

myAppModule.factory(‘CreditCard‘, [‘http‘, function($http) {
 var baseUrl = ‘/user/123/card‘;
 return { 
get: function(cardId) {
 return $http.get(baseUrl + ‘/‘ + cardId); },
save: function(card) { 
var url = card.id ? baseUrl + ‘/‘ + card.id : baseUrl; 
return $http.post(url, card); },
query: function() {
 return $http.get(baseUrl);
 }, 
charge: function(card) {
 return $http.post(baseUrl + ‘/‘ + card.id, card, {params: {charge: true}}); } }; }]);

 

myAppModule.factory(‘CreditCard‘, [‘$resource‘, function($resource) { 
return $resource(‘/usr/:userId/card/:cardId‘,
{userId: 123, cardId: ‘@id‘},
{charge: {method: ‘POST‘, params: {charge: true}, isArray: false}); }]);

十二、手机app开发的几种方式 ionic学习思路以及ionic新建的项目分析

1． 目前开发手机app的几种方式

（1）原生/Native：使用原生SDK开发App。优点不用说，当你有足够的资源，这是最理想的方式；缺点是对不同的 平台要分别开发，学习成本高,开发成本高、开发周期长、不易于web开发人员和企业建站公司转型；

（2）原生脚本/NativeScript：将原生API封装成javascript接口，这有点像前端的nodejs。NativeScript方式 与原生相比性能损失不大（据称只有10%左右），优点是开发语言统一使用JavaScript，缺点是 要针对不同的平台分别开发。

（3）原生+web/ Hybrid：使用原生技术开发，部分页面调用web。优点是比纯原生开发周期短， 页面更新方便，如支付宝，还有很多app的详情页面。缺点：需要原生和web配合。

（4）混合/Hybrid：使用web技术开发App，使用Cordova/PhoneGap之类进行打包封装。优点是采用标准的web技术开发， 避免了不同平台原生开发体系的学习，学习成本低，上手快、效率高,一次开发 微信 wap app全部搞定；缺点是app 在android平台性能上有一些损失，但是相信硬件的发展会接近原生。

——ionic属于hybrid开发模式，本质上是将移动web应用与浏览器打包,优点 MVC 基于angularjs，运行速度快 UI漂亮 开发简单 缺点：学习成本比其他的html5框架稍微高一些(比如jqmobi) 需要具备angularjs基础。 是否采用这种模式，需要根据具体情况综合考虑。

十三、ionic css布局介绍

1、布局模式

基本布局：标题/header、内容/content和页脚/footer。

? .bar.bar-header - 声明元素为标题区
? .bar.bar-footer - 声明元素为底部
? .content . scroll-content- 声明元素为内容区

2、.bar : 位置

ionic使用以下样式定义条块的位置：

? .bar-header - 置顶
? .bar-subheader - header之下置顶
? .bar-footer - 置底
? .bar-subfooter - footer之上置底

3、.bar : 嵌入子元素

在ionic中，有三种.bar子元素的样式是预定义的：（1）标题文字 - 对包含标题文字的元素应用.title样式，通常使用h1元素；（2）按钮 - 对用作按钮的元素，应用.button样式，通常使用button 或a元素作为按钮。注意按钮将使用.bar的配色方案；（3）工具栏 - 工具栏包含一组按钮。对用作工具栏的元素，应用.button-bar样式，通常 使用div元素作为工具栏。

4、bar : 嵌入input

一种常见的UI模式是在标题栏中嵌入搜索栏。

在.bar元素中嵌入input元素，需要注意两点：
1. 在条块元素上应用.item-input-inset样式
2. 将input包裹在应用.item-input-wrapper样式的元素内

5、内容：.content和.scroll-content

ionic预定义了两个内容容器样式：
? .content – 相对定位
? .scroll-content - 绝对定位，内容元素占满整个屏幕

6、Ionic 色彩、图标和边距

（1）ionic定义了九种前景/背景/边框的色彩样式

（2）ionic 中的图标

使用图标很简单，在元素上声明以下两个CSS类即可：
? .icon - 将元素声明为图标
? .ion-{icon-name} - 声明要使用的具体图标

7、ionic界面组件列表

（1）列表 : .list

（2）成员容器 : .item

（3）.item : 嵌入文本：.item元素可以使用h1~h6/p标签插入不同规格的文本。

（4）.item : 嵌入图标

（5）.item : 嵌入头像

（6）.item : 嵌入缩略图

（7）.item : 嵌入大图 item-image

（8）.item card

要插入图标，需要满足两个条件：
a. . card 可以让list和左右有一些边距
b. 在. item-divider元素定义list的头和尾

8、ionic界面组件按钮

（1）按钮 : .button

（2）.button : 嵌入图标

（3）在列表中使用按钮

（4）button-block  ——button显示成块元素

9、ionic界面组件 表单输入

（1）输入组件容器 : .item-input

（2）文本输入 : input[type="text"]

（3）文本输入：使用占位符做标签

（4）文本输入：堆叠式标签

（5）开关 : .toggle input[type="checkbox"]

（6）复选按钮

（7）单选按钮 : .item-radio input[type="radio"]

（8）滑动条 : .range input[type="range"]

（9）选择框 : .item-select select

10、界面组件选项卡

（1）选项卡 : .tabs

（2）tab-item : 使用图标

（3）.tab-item : 使用徽章

（4）.tabs : 顶部选项卡

（5）.tab-striped .tabs: 条带风格选项卡

11、栅格系统

（1）.col : 默认的定宽列

（2）.col-{width-percent} : 指定列宽

供我们快速指定列宽：
.col-10 - 占据容器10%宽度

.col-20 - 占据容器20%宽度

.col-25 - 占据容器25%宽度

.col-33 - 占据容器33%宽度

.col-50 - 占据容器50%宽度

.col-67 - 占据容器67%宽度

.col-75 - 占据容器75%宽度

.col-80 - 占据容器80%宽度

.col-90 - 占据容器90%宽度

（3）.col-{width-percent} : 指定列宽

（4）.col-offset-{width-percent} : 指定列偏移

（5）.col-{align} : 列纵向对齐

.col-top - 让元素纵向顶对齐

.col-center - 让元素居中对齐

.col-bottom - 让元素向底对齐

十四、ionic js指令布局介绍

1、ion-header-bar

align-title - 设置标题文字的对齐方式。允许值：left | right | center，分别对应左对齐、 右对齐和居中对齐。
? no-tap-scroll - 当点击标题时，是否将内容区域自动滚动到最开始。允许值：true | false，默认为false。

2、ion-footer-bar

align-title - 设置标题文本的对齐方式。允许值：left | right | center 。

3、ion-content

4、ion-scroll

ion-scroll指令有两个常用的可选属性：
? direction - 内容可以滚动的方向。允许值：x|y|xy。默认为 y。
? zooming - 是否支持pinch-to-zoom(捏拉缩放)。允许值：true | false。

5、ion-refresher

ion-refresher指令有以下可选的属性：
? on-refresh - 当用户向下拉动足够的距离并松开时，执行此表达式
? on-pulling - 当用户开始向下拉动时，执行此表达式
? pulling-text - 当用户向下拉动时，显示此文本
? pulling-icon - 当用户向下拉动时，显示此图标
? refreshing-icon - 当用户向下拉动并松开后，显示的等待图标。ionic推荐使用spinner 代替这个属性
? spinner - 和refreshing-icon的作用一样，但spinner是基于SVG的动画
? disable-pulling-rotation - 禁止下拉图标旋转动画

6、ion-infinite-scroll

ion-infinite-scroll指令有如下属性：
? on-infinite - 必须。当滚动到底部时执行此表达式
? distance - 可选。距底部距离百分比。当距离底部超过此数值时，执行on-infinite。默认为1%
? icon - 可选。载入时显示的图标。默认是ion-load-d。ionic推荐使用spinner代替icon属性
? spinner - 可选。载入时的spinner。默认是ionSpinner
? immediate-check - 可选。是否在载入时立即检查滚动框范围

7、$ionicScrollDelegate

可以使用服务$ionicScrollDelegate，通过脚本控制滚动容器（ion-scroll或ion-content）。 $ionicScrollDelegate服务提供的常用方法如下：
? resize()
重新计算容器尺寸。当父元素大小变化时，应当调用此方法
? scrollTop([shouldAnimate])
滚动到内容顶部。shouldAnimate参数为true|false，表示是否使用动画展示滚动过程
? scrollBottom([shouldAnimate])
滚动到内容底部。shouldAnimate参数为true|false，表示是否使用动画展示滚动过程
? scrollTo(left,top[,shouldAnimate])
滚动到指定位置。left和top分别表示要滚动到的x坐标和y坐标
? scrollBy(left,top[,shouldAnimate])
滚动指定偏移量。left和top分别表示要滚动的x偏移量和y偏移量
? getScrollPosition()
读取当前视图位置。返回值为一个JSON对象，具有left和top属性，分别表示x和y坐标