8、Angularjs自定义服务 provide里provider方法 以及factory、service方法以及provider供应商的概念php
Angular 提供了3种方法来建立并注册咱们本身的服务。css
1. Providerhtml
Providers 是惟一一种你能够传进 .config() 函数的 service。当你想要在 service 对象启用以前,先进行模块范围的配置,那就应该用 provider。前端
(1)var app=angular.mudle('myApp',[],function(provide){$provide.provider=...;this.$get=function(){};});html5
(2)$scope.config=function(provide){}node
2. Factory ——可返回对象和字符串android
Factory 方法直接把一个函数当成一个对象的$get 方法能够直接返回字符串angularjs
用 Factory 就是建立一个对象,为它添加属性,而后把这个对象返回出来。你把 service 传进 controller 以后,在 controller 里这个对象里的属性就能够经过 factory 使用了。web
3. Servicejson
Service 是用"new"关键字实例化的。所以,你应该给"this"添加属性,而后 service 返回"this"。你把 service 传进 controller 以后,在controller里 "this" 上的属性就能够经过 service 来使用了
四、三者的区别:
(1)provider要放在this.$get里面
(2)service可用this直接定义方法
(3)只有provider能够传入config
(4)service不能返回字符串
9、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>
四、$timeout
$timeout(function(){ $scope.name = '123'; },1100);
五、$interval
$ inteval(function(){ $scope.name = '123'; },1100);
六、$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('失败'); }); });
七、$anchorScroll
可直接跳转到网页上指定id的位置,例如点击某个li跳转至页面对应id处,方法一:$scope.hash(id);方法二:$anchorScroll();
10、angularjs ngSanitize ngRoute ngAnimate插件
一、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> 绑定数据
二、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
三、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); } }; });
11、$resource 数据交互插件
后端支持跨域请求: header('Access-Control-Allow-Origin: *');
一、$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}); }]);
12、手机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基础。 是否采用这种模式,须要根据具体状况综合考虑。
十3、ionic css布局介绍
一、布局模式
基本布局:标题/header、内容/content和页脚/footer。
.bar.bar-header - 声明元素为标题区
.bar.bar-footer - 声明元素为底部
.content . scroll-content- 声明元素为内容区
二、.bar : 位置
ionic使用如下样式定义条块的位置:
.bar-header - 置顶
.bar-subheader - header之下置顶
.bar-footer - 置底
.bar-subfooter - footer之上置底
三、.bar : 嵌入子元素
在ionic中,有三种.bar子元素的样式是预约义的:(1)标题文字 - 对包含标题文字的元素应用.title样式,一般使用h1元素;(2)按钮 - 对用做按钮的元素,应用.button样式,一般使用button 或a元素做为按钮。注意按钮将使用.bar的配色方案;(3)工具栏 - 工具栏包含一组按钮。对用做工具栏的元素,应用.button-bar样式,一般 使用div元素做为工具栏。
四、bar : 嵌入input
一种常见的UI模式是在标题栏中嵌入搜索栏。
在.bar元素中嵌入input元素,须要注意两点:
1. 在条块元素上应用.item-input-inset样式
2. 将input包裹在应用.item-input-wrapper样式的元素内
五、内容:.content和.scroll-content
ionic预约义了两个内容容器样式:
.content – 相对定位
.scroll-content - 绝对定位,内容元素占满整个屏幕
六、Ionic 色彩、图标和边距
(1)ionic定义了九种前景/背景/边框的色彩样式
(2)ionic 中的图标
使用图标很简单,在元素上声明如下两个CSS类便可:
.icon - 将元素声明为图标
.ion-{icon-name} - 声明要使用的具体图标
七、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的头和尾
八、ionic界面组件按钮
(1)按钮 : .button
(2).button : 嵌入图标
(3)在列表中使用按钮
(4)button-block ——button显示成块元素
九、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
十、界面组件选项卡
(1)选项卡 : .tabs
(2)tab-item : 使用图标
(3).tab-item : 使用徽章
(4).tabs : 顶部选项卡
(5).tab-striped .tabs: 条带风格选项卡
十一、栅格系统
(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 - 让元素向底对齐
十4、ionic js指令布局介绍
一、ion-header-bar
align-title - 设置标题文字的对齐方式。容许值:left | right | center,分别对应左对齐、 右对齐和居中对齐。
no-tap-scroll - 当点击标题时,是否将内容区域自动滚动到最开始。容许值:true | false,默认为false。
二、ion-footer-bar
align-title - 设置标题文本的对齐方式。容许值:left | right | center 。
三、ion-content
四、ion-scroll
ion-scroll指令有两个经常使用的可选属性:
direction - 内容能够滚动的方向。容许值:x|y|xy。默认为 y。
zooming - 是否支持pinch-to-zoom(捏拉缩放)。容许值:true | false。
五、ion-refresher
ion-refresher指令有如下可选的属性:
on-refresh - 当用户向下拉动足够的距离并松开时,执行此表达式
on-pulling - 当用户开始向下拉动时,执行此表达式
pulling-text - 当用户向下拉动时,显示此文本
pulling-icon - 当用户向下拉动时,显示此图标
refreshing-icon - 当用户向下拉动并松开后,显示的等待图标。ionic推荐使用spinner 代替这个属性
spinner - 和refreshing-icon的做用同样,但spinner是基于SVG的动画
disable-pulling-rotation - 禁止下拉图标旋转动画
六、ion-infinite-scroll
ion-infinite-scroll指令有以下属性:
on-infinite - 必须。当滚动到底部时执行此表达式
distance - 可选。距底部距离百分比。当距离底部超过此数值时,执行on-infinite。默认为1%
icon - 可选。载入时显示的图标。默认是ion-load-d。ionic推荐使用spinner代替icon属性
spinner - 可选。载入时的spinner。默认是ionSpinner
immediate-check - 可选。是否在载入时当即检查滚动框范围
七、$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坐标