标签：
八、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坐标
观《phonegap第三季 angularjs+ionic视频教程 实时发布》学习笔记（二）
标签：
原文地址：http://www.cnblogs.com/liujiale/p/5953669.html
