觀《phonegap第三季 angularjs+ionic視頻教程 實時發佈》學習筆記（二）

8、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 來使用了

四、三者的區別：

（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座標