AngularJS+跨域相關筆記（二）

1.AngularJS作用域


◆說明：每個控制器都會對應一個模型，也就是$scope對象，不同層級的控制器既代表一個作用域，通過使用$scope就能察覺到這個作用域。


◆根作用域：一個AngularJS的應用（App）在啓動時會自動創建一個跟作用域$rootScope,這個根作用域在整個應用範圍（ng-app所在標籤以內）都是可以被訪問到的。


◆子作用域：通過ng-controller指令可以創建一個子作用域，新建的作用域可以訪問其父作用域的數據。


◆這個AngularJS作用域與js的全局作用域和函數作用域幾乎一樣。


◆




2.Angular過濾器：使用過濾器格式化展示數據，過濾器的本質就是一個函數，內置的有九個。
◆使用方式：在{{}}中使用|來調用過濾器，使用:傳遞參數，可以使用|調用過濾器多次，{{price|currency:'￥'}}表示將price值格式化爲人民幣來展示數據。◆currency將數值格式化爲貨幣格式，<li>{{price|currency:'￥'}}</li>
◆date日期格式化，年（y）、月（M）、日（d）、星期（EEEE/EEE）、時（H/h）、分（m）、秒（s）、毫秒（.sss），也可以組合到一起使用，<li>{{now|date:'yyyy/MM/dd hh:mm:ss'}}</li>。
◆
filter在給定數組中選擇滿足條件的一個子集，並返回一個新數組，其條件可以是一個字符串、對象、函數，<li>{{items|filter:'s'}}</li><li>{{students|filter:{age: 16} }}</li>，注意filter後面如果是一個對象，那麼}與兩個}之間要空格一下
◆
json將Javascrip對象轉成JSON字符串，<li>{{students|json}}</li>。
◆limitTo取出字符串或數組的前（正數）幾位或後（負數）幾位，<li>{{items|limitTo:-1}}</li>
◆lowercase將文本轉換成小寫格式，<li>{{str|lowercase}}</li>
◆uppercase將文本轉換成大寫格式，<li>{{str|uppercase|limitTo:3}}</li>
◆
number數字格式化，可控制小位位數，<li>{{items|orderBy: '':true}}</li>
◆
orderBy對數組進行排序，第2個參數可控制方向<li>{{students|orderBy: 'age': false}}</li>，true爲降序，false爲升序。


3.AngularJS自定義過濾器
◆過濾器的本質就是一個函數
◆與創建AngularJS指令一樣的步驟
◆自定義過濾器：
App.filter('demo', function () {
//返回一個回調用函數
return function (input) {
//在這裏面處理數據
console.log('hello' + input);
return 'hello' + input;
}
});
◆  


4.AngularJS的依賴注入
◆  AngularJS採用模塊化的方式組織代碼，將一些通用邏輯封裝成一個對象或函數，實現最大程度的複用，這導致了使用者和被使用者之間存在依賴關係
◆  所謂依賴注入是指在運行時自動查找依賴關係，然後將查找到依賴傳遞給使用者的一種機制。
◆  常見的AngularJS內置服務有$http、$location、$timeout、$rootScope等
◆  推斷式注入：沒有明確聲明依賴，AngularJS會將函數參數名稱當成是依賴的名稱。【
var App = angular.module('App', []);
// 開發者在開發的時候可以直接使用這些“模塊”
// 推斷式依賴注入，抱着試試看的心態去找函數中參數名的模塊兒，然後再注入，會導致壓縮代碼的時候函數參數的名稱改變而無法注入
App.controller('DemoController', function ($scope, $http) {
$scope和$http就是AngularJS 內置一些具有特殊功能的“模塊“，
});
】
◆  行內式注入：以數組形式明確聲明依賴，數組元素都是包含依賴名稱的字符串，數組最後一個元素是依賴注入的目標函數。推薦使用這種方式聲明依賴【
var App = angular.module('App', []);
// 行內式注入
App.controller('DemoController', ['$scope', '$http', function (abc, bcd) {
abc.name = '依賴注入';
}]);
】
◆  


5.跨域有三種情況，協議不一樣（http、https）、域名不一樣（www.baidu.com、www.sina.com）、端口不一樣（80、8080）。


6.AngularJS內置服務
◆使用內置服務，必須要依賴注入，和直接依賴注入模型的方式是一樣的。
◆$location【
◇是對原生js中BOM裏的location屬性的封裝，可以用來獲取或者設置頁面瀏覽器地址欄的一些信息，原生的有點不怎麼好用，$location更加完善好用一些了。
◇地址是由若干部分組成：http://(協議)、www.baidu.com（124.14.134.12，主機）、:8080（端口號）、#abc（錨點）、?name=itcast&age=10（查詢參數據，querystring）。
◇$location.absUrl()：當前網站該網頁的絕對路徑
◇$location.url()：當前網頁文件位於該網站的路徑
◇$location.host()：當前網站該網頁的主機名
◇$location.search()：當前網站該網頁url中的查詢字符串queryString
◇$location.hash()：當前網站該網頁url中錨點信息
◇$location.protocol()：當前網站該網頁url所使用的協議
◇$location.port()：當前網站的端口號。
】
◆$timeout&$interval【
◇是對原生Javascript中的setTimeout和setInterval進行了封裝。
◇使用方法是一模一樣的
】
◆$filter【
◇AngularJS在視圖中使用格式化過濾器也可以在控制器中格式化數據。
◇var App = angular.module('App', []);
// $filter是過濾器
App.controller('DemoController', ['$scope', '$filter', function ($scope, $filter) {
// $filter可以是內置的九種過濾器中任何一個
$scope.price = 11.11;
var currency = $filter('currency');
$scope.price = currency($scope.price);
$scope.str = 'hello angular';
var uppercase = $filter('uppercase');
$scope.str = uppercase($scope.str);
$scope.str1 = $filter('limitTo')($scope.str, 2);
}]);
◇
】
◆$log【
◇打印調試信息，其實就是console對象的封裝
◇$log.info('普通信息')
◇$log.warn('警告信息')
◇$log.error('錯誤信息')
◇$log.log('打印信息')
◇$log.debug('調試信息')
◇
】
◆$http【
◇用於向服務端發起異步請求，本質是對XMLHttpRequest對象的封裝。
◇$http({
url:'example.php',
//method:'get',
method:'post',
//設置請求頭部信息
headers:{//post請求提交數據時需要添加
'Content-Type':'application/x-www-form-urlencoded'
},
params:{//給get方式傳參
name:'小強'
set:'男'
},
//給post方式傳參,AngularJS內部並沒有想Jquery一樣將對象轉爲key=value，所以只能夠直接寫字符串
data:'age=10'
}).success(function(info){
//info 就是返回的數據
});
◇不要和jQuery去比，因爲封裝肯定不一樣，但原理就是封裝ajax那一套。
◇注意點：傳遞的數據可以是key=val&key=val的形式，這種形式叫formData，但是必須將Content-Type設置成application/x-www-form-urlencoded,不然後臺接收不到。因爲當請求數據類型不一樣，後端在接收的時候採用方法不一樣。
◇AngularJS優先支持的是RESTFUL接口方式的請求，所以就沒有再post請求時沒有將data中的對象轉換爲key=value的方式，所以data只能手寫字符串key=value。
◇同時還支持多種快捷方式如$http.get()、$http.post()、$http.jsonp()。
◇$http({
//AngularJS內部會自定義一個函數，你只需要寫一個佔位的函數即可
url:'jsonp.php?fn=JSON_CALLBACK',
method:'jsonp',
}).suncess(function(info){
//直接輸出從後臺傳遞來的數據
console.log(info);
})
】
◆
◆


7.工作中的使用接口方式
◆有關接口的文檔，是一個說你該如何請求數據的文檔
◆請求地址：xxx/xxx.php
◆請求方式：post
◆參數：id[用戶ID]  page[頁碼]
◆可能返回如下數據：[]、''、{}
◆接口方式：SOAP、RESTFUL
◆


8.jsonp原理
◆通過src或者href屬性擁有跨域的功能，不過只能夠使用get請求，一般是通過傳遞函數名，後端接收函數名，以拼接函數調用時字符串返回到前端，由瀏覽器接收執行，後端拼接的函數調用字符串時可以傳遞數據，這樣一來前端就能夠接收到數據。
◆可以創建script標籤元素，然後設置src屬性，接收到結果後，直接調用即可。
◆jsonp需要後端配合，因爲拼接調用函數時的字符串和傳遞數據都是後端來實現，前端只負責設置src屬性然後執行後端傳遞過來函數。


9.天氣API：百度搜索 車聯網 天氣即可查到。
◆$http({
url:'http://api.map.baidu.com/telematics/v3/weather',
method:'jsonp',
params:{
//地址
location:'北京',
//輸出類型
output:'json',
//密鑰 自己去申請，很容易
ak:'',
//回調函數佔位符 任何名字都可以
callback:'JSON_CALLBACK'
}
}).success(function(info){
//傳遞過來的數據
console.log(info);
})