什么是跨域
- 不同域名之間進行數(shù)據(jù)訪問苞七，默認情況下是不允許的。
是誰導致了跨域
- 是瀏覽器導致了跨域棒口，為了數(shù)據(jù)的安全瓤鼻。
怎樣解決跨域
- 使用插件
- JSONP
Ajax和jsonp是同一個東西么
- Ajax的核心是通過XmlHttpRequest獲取非本頁內容
- 而jsonp的核心則是動態(tài)添加<script>標簽來調用服務器提供的js腳本。
JSONP的實現(xiàn)原理
- **示例代碼 : **
<script>
function fn(res) {
console.log('callback' + '---------' + res);
}
</script>
<script src="01-jsonp.php?callback=fn"></script>
- 然后需要在根目錄下創(chuàng)建一個PHP的文件來調用js腳本
- **示例代碼 : **
<?php
$fn = $_GET['callback'];
// echo "alert(1)"; // 服務器返回的js代碼是可以直接在瀏覽器中執(zhí)行的
echo $fn."('xiba')";
$http服務
- **示例代碼 : **
<body ng-app="app" ng-controller="appController">
<script src="../js/angular.js"></script>
<script>
var app = angular.module('app', []);
// 注入$http模塊
app.controller('appController', ['$scope', '$http', function ($scope, $http) {
// get請求
$http({
// 請求地址 自己在網(wǎng)上找個地址 模擬一下
url: '02.php',
// 請求方式
method: 'get',
// get方式傳遞參數(shù) 在傳遞過程當中 會自動幫你轉成 get.php?name=xiba 傳遞時->name:xiba
parmas:{
name:'xiba'
}
}).success(function (res) {
// 成功回調 angular版本是1.6以下 1.6以上不是用success回調
console.log(res);
}).error(function (error) {
// 失敗回調 angular版本是1.6以下 1.6以上不是用error回調
console.log(error);
});
// post請求
$http({
url:'02.php',
method:'post',
// post 請求必須設置請求頭
// 當設置請求頭的時候為application/x-www-form-urlencoded是以soap 以對象形式傳遞.
// SOAP: 以對象形式來進行傳遞
// RESTFUL：json串形式進行傳遞唉俗。
headers:{
'Content-Type':'application/x-www-form-urlencoded'
},
//data:{data:{} 傳參形式 在傳遞數(shù)據(jù)時嗤朴，是以json來傳遞的name:"xiba" json串 }
data:'name:xiba'
});
}]);
</script>
</body>
自定義服務
什么是服務
- angular在一開始就幫我們定義一些功能。我可以直接使用這些功能虫溜。
都是一個方法或者一個對象的形式來調用指定的功能雹姊。 - 想要使用這些服務。必須得要注入衡楞。
- 謂服務是將一些通用性的功能邏輯進行封裝方便使用吱雏，AngularJS允許將自定義服務。
內置服務：
-
$location$log$timeout $interval$http$filter -
angular允許開發(fā)自己根據(jù)自己的需求來自定義自己的功能瘾境。
自定義服務分為三種
-
factory直接就是一個對象
service通過new形式創(chuàng)建的對象 就可以在里面使用this.
provider對上面定義的服務進行配置歧杏。 可以在開始的時候，讓服務有哪些功能 迷守， 或是去掉哪些犬绒。 - 服務本質就是一個對象或函數(shù)，所以自定義服務就是要返回一個對象或函數(shù)以供使用兑凿。
- 服務它是一個單例凯力。
-
value當作是一個全局常量
factory自定義服務 --> 直接就是一個對象
- **示例代碼 : **
<body ng-app="app" ng-controller="appController">
<h3>{{date}}</h3>
<h3>{{dateTime}}</h3>
<script src="../js/angular.js"></script>
<script>
// 創(chuàng)建模塊
var app = angular.module('app', []);
// 自定義服務 factory
app.factory('myFac1', function () {
return function () {
console.log('自定義了一個服務');
}
});
// 自定義服務 factory
app.factory('myFac2', function () {
function say() {
console.log('hello');
}
function hellow() {
console.log('hello wawa');
}
return {
say1: say,
say2: hellow
}
});
// 自定義服務
app.factory('showTime', ['$filter', function ($filter) {
function showDate() {
var dateTime = new Date();
return $filter('date')(dateTime, 'yyyy-MM-dd');
}
function showDateTime() {
var dateTime = new Date();
return $filter('date')(dateTime, 'yyyy-MM-dd hh:mm:ss')
}
return {
showDate: showDate,
showDateTime: showDateTime
}
}]);
// 創(chuàng)建控制器
app.controller('appController', ['$scope', 'myFac1', 'myFac2', 'showTime', function ($scope, myFac1, myFac2, showTime) {
/*
myFac1();
myFac2.say1();
myFac2.say2();
*/
$scope.date = showTime.showDate();
$scope.dateTime = showTime.showDateTime();
}]);
</script>
</body>
service自定義服務 --> 通過new出來一個對象 可以使用this
- **示例代碼 : **
<body ng-app="app" ng-controller="appController">
<script src="../js/angular.js"></script>
<script>
var app = angular.module('app', []);
app.service('mySer', function () {
this.sayHellow = function () {
console.log('hellow');
}
this.showTime = function () {
console.log('show');
}
});
app.service('formDate', function () {
// 把一個對象轉成name=xiba&age=10
this.formD = function (obj) {
var str = '';
for (var key in obj) {
str += key + '=' + obj[key] + '&'
}
return str.slice(0);
}
});
app.controller('appController', ['$scope', 'mySer', 'formDate', '$http', function ($scope, mySer, formDate, $http) {
/*
mySer.sayHellow();
mySer.showTime();
var obj = {name:'xx',age:'11'}
var str = formDate.formD(obj);
console.log(str);
*/
// 自定義一個php文件引入
$http({
url:'04-post.php',
method:'post',
headers:{
'Content-Type':'application/x-www-form-urlencoded'
},
data:formDate.formD({
name:"xiba",
age:10
})
}).success(function (res) {
alert(res);
});
}]);
</script>
</body>
value自定義服務 --> 全局常量
- **示例代碼 : **
<body ng-app="app" ng-controller="appController">
<script src="../js/angular.js"></script>
<script>
var app = angular.module('app',[]);
/*
* 常量：其值始終保持不變的量。
* 變量：其值可以發(fā)生變化的量礼华。
* */
app.value('version','1.1');
app.value('key','xiba');
app.value('url','www.baidu.com');
/*2.創(chuàng)建控制器
* 可擴展性咐鹤。需求改動時， 不需要動太多的代碼圣絮。
* */
app.controller('appController',['$scope','version','key',function ($scope,version,key) {
console.log(key);
}]);
</script>
</body>
配置塊
配置服務祈惶， 可以在開始的時候，讓服務有哪些功能 扮匠， 或是去掉哪些捧请。
通過
config方法實現(xiàn)對模塊的配置，AngularJS中的服務大部分都對應一個“provider”棒搜，用來執(zhí)行與對應服務相同的功能或對其進行配置血久。比如
$log、$http帮非、$location都是內置服務相對應的
provider分別是$logProvider氧吐、$httpProvider讹蘑、$locationPorvider。**示例代碼 : **
<body ng-app="app" ng-controller="appController">
<h3>{{name | chaUppercase}}</h3>
<script src="../js/angular.js"></script>
<script>
var app = angular.module('app', []);
app.controller('appController', ['$scope', '$log', function ($scope, $log) {
$log.log('debug');
$scope.name = 'xiba';
}]);
/*配置：
* 配置服務筑舅， 可以在開始的時候座慰，讓服務有哪些功能 ， 或是去掉哪些翠拣。
* */
app.config(['$logProvider', '$filterProvider', function ($logProvider, $filterProvider) {
$logProvider.debugEnabled(false);
$filterProvider.register('chaUppercase', function () {
return function (input) {
return input[0].toUpperCase() + input.slice(1);
}
});
}]);
</script>
</body>
運行塊
- **示例代碼 : **
<body ng-app="app" ng-controller="appController">
<h1>{{name}}</h1>
<h2>{{key}}</h2>
<script src="../js/angular.js"></script>
<script>
var app = angular.module('app', []);
app.controller('appController', ['$scope', function ($scope) {
}]);
/*
* 在開發(fā)中版仔， 運行塊，就用戶一進來就要去執(zhí)行的一任務误墓，都可以放到run里面
* */
angular.module('app').run(['$rootScope', '$http', function ($rootScope, $http) {
$rootScope.name = 'run';
$http({
url: '07-get.php',
method: 'get',
}).success(function (res) {
$rootScope.key = res;
}).error(function (error) {
});
}]);
</script>
</body>
Angular路由小demo
- 示例代碼 : style
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.title {
width: 800px;
height: 64px;
line-height: 64px;
background: #000;
color: #fff;
margin: 0 auto;
margin-top: 50px;
display: flex;
}
.title li {
flex: 1;
float: left;
text-align: center;
}
.content {
width: 798px;
height: 500px;
margin: 0 auto;
border: 1px solid #000;
}
a {
text-decoration: none;
color: #fff;
font-size: 25px;
}
</style>
- 示例代碼 : HTML&&Js
<body ng-app="app" >
<ul class="title">
<li><a href="#/index/1">首頁</a></li>
<li><a href="#/index/2">流行</a></li>
<li><a href="#/index/3">復古</a></li>
</ul>
<div class="content">
<div ng-view></div>
</div>
<script src="../js/angular.js"></script>
<script src="../js/angular-route.js"></script>
<script>
/* 配置路由
* 傳參兩步：
* 1.配置時蛮粮，定義參數(shù)$routeProvider.when('/index/:id)
* 2.跳轉時，傳遞對應的參數(shù) <a href="#/index/1">首頁</a>
* 3.獲取參數(shù)： 在綁定的控制器當中谜慌，注入服務$routeParams
* app.controller('indexController',['$scope','$routeParams',function ($scope,$routeParams) {
* */
var app = angular.module('app', ['ngRoute']);
app.controller('appController', ['$scope', '$routeParams', '$http', function ($scope, $routeParams, $http) {
$http({
url: '11-listMusic.php',
method: 'get',
params: {
id: $routeParams.id
}
}).success(function (res) {
$scope.listM = res;
})
}]);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/index/:id', {
templateUrl: '11-music_tpl.html',
controller: 'appController'
}).otherwise({
// 設置默認跳轉的路由
redirectTo: 'index/1'
});
}]);
</script>
</body>
- 示例代碼 : 案例中的這個地址:
url: '11-listMusic.php'
<?php
$list = array(
array('id'=>1,'pid'=>2,'text'=>'我很丑可是我很溫柔'),
array('id'=>2,'pid'=>2,'text'=>'蒲公英的約定'),
array('id'=>3,'pid'=>2,'text'=>'你我的約定'),
array('id'=>4,'pid'=>3,'text'=>'pretty boy'),
array('id'=>5,'pid'=>3,'text'=>'See You Again'),
array('id'=>6,'pid'=>2,'text'=>'甜甜的'),
array('id'=>7,'pid'=>1,'text'=>'再見我的愛人'),
array('id'=>8,'pid'=>2,'text'=>'心中的日月'),
array('id'=>9,'pid'=>3,'text'=>'Let It Go'),
array('id'=>10,'pid'=>1,'text'=>'不要說再見'),
array('id'=>11,'pid'=>3,'text'=>'Rise'),
array('id'=>12,'pid'=>2,'text'=>'再見'),
array('id'=>13,'pid'=>1,'text'=>'追夢人'),
array('id'=>14,'pid'=>2,'text'=>'不能說的秘密'),
array('id'=>15,'pid'=>4,'text'=>'?? ??'),
array('id'=>16,'pid'=>1,'text'=>'昨日重現(xiàn)'),
array('id'=>17,'pid'=>3,'text'=>'Love Me like you Do'),
array('id'=>18,'pid'=>2,'text'=>'好久不見'),
array('id'=>19,'pid'=>1,'text'=>'獨角戲'),
array('id'=>20,'pid'=>2,'text'=>'K歌之王'),
array('id'=>21,'pid'=>1,'text'=>'往事隨風'),
array('id'=>22,'pid'=>3,'text'=>'Just Like Fire'),
array('id'=>23,'pid'=>4,'text'=>'さよならの夏'),
array('id'=>24,'pid'=>4,'text'=>'江南Style'),
array('id'=>25,'pid'=>4,'text'=>'仆が死のうと思'),
array('id'=>26,'pid'=>1,'text'=>'海闊天空'),
array('id'=>27,'pid'=>4,'text'=>'天空之城'),
array('id'=>28,'pid'=>1,'text'=>'不再猶豫'),
array('id'=>29,'pid'=>4,'text'=>'仆が死のうと思'),
array('id'=>30,'pid'=>3,'text'=>'Heart And soul'),
array('id'=>31,'pid'=>4,'text'=>'?? ??'),
array('id'=>32,'pid'=>1,'text'=>'往事只能回味'),
array('id'=>33,'pid'=>3,'text'=>'Bang Bang'),
array('id'=>34,'pid'=>4,'text'=>'さよならの夏'),
array('id'=>35,'pid'=>3,'text'=>'Same Old Love'),
array('id'=>36,'pid'=>4,'text'=>'さよならの夏'),
array('id'=>37,'pid'=>4,'text'=>'戀戀風塵'),
);
$id = $_GET['id'];
$tempArray = array();
foreach ($list as $key=>$value){
if ($id == $value['pid']){
$tempArray[] = $value;
}
}
echo json_encode($tempArray);
- 模版 案例中的這個地址 :
templateUrl: '11-music_tpl.html'
<ul>
<li ng-repeat="music in listM">{{music.text}}</li>
</ul>
