什么是跨域
- 不同域名之间进行数据访问，默认情况下是不允许的。
是谁导致了跨域
- 是浏览器导致了跨域，为了数据的安全。
怎样解决跨域
- 使用插件
- JSONP
Ajax和jsonp是同一个东西么
- Ajax的核心是通过XmlHttpRequest获取非本页内容
- 而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。
JSONP的实现原理
- **示例代码 : **
<script>
function fn(res) {
console.log('callback' + '---------' + res);
}
</script>
<script src="01-jsonp.php?callback=fn"></script>
- 然后需要在根目录下创建一个PHP的文件来调用js脚本
- **示例代码 : **
<?php
$fn = $_GET['callback'];
// echo "alert(1)"; // 服务器返回的js代码是可以直接在浏览器中执行的
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({
// 请求地址 自己在网上找个地址 模拟一下
url: '02.php',
// 请求方式
method: 'get',
// get方式传递参数 在传递过程当中 会自动帮你转成 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:{} 传参形式 在传递数据时，是以json来传递的name:"xiba" json串 }
data:'name:xiba'
});
}]);
</script>
</body>
自定义服务
什么是服务
- angular在一开始就帮我们定义一些功能。我可以直接使用这些功能。
都是一个方法或者一个对象的形式来调用指定的功能。 - 想要使用这些服务。必须得要注入。
- 谓服务是将一些通用性的功能逻辑进行封装方便使用，AngularJS允许将自定义服务。
内置服务：
-
$location$log$timeout $interval$http$filter -
angular允许开发自己根据自己的需求来自定义自己的功能。
自定义服务分为三种
-
factory直接就是一个对象
service通过new形式创建的对象 就可以在里面使用this.
provider对上面定义的服务进行配置。 可以在开始的时候，让服务有哪些功能 ， 或是去掉哪些。 - 服务本质就是一个对象或函数，所以自定义服务就是要返回一个对象或函数以供使用。
- 服务它是一个单例。
-
value当作是一个全局常量
factory自定义服务 --> 直接就是一个对象
- **示例代码 : **
<body ng-app="app" ng-controller="appController">
<h3>{{date}}</h3>
<h3>{{dateTime}}</h3>
<script src="../js/angular.js"></script>
<script>
// 创建模块
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
}
}]);
// 创建控制器
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',[]);
/*
* 常量：其值始终保持不变的量。
* 变量：其值可以发生变化的量。
* */
app.value('version','1.1');
app.value('key','xiba');
app.value('url','www.baidu.com');
/*2.创建控制器
* 可扩展性。需求改动时， 不需要动太多的代码。
* */
app.controller('appController',['$scope','version','key',function ($scope,version,key) {
console.log(key);
}]);
</script>
</body>
配置块
配置服务， 可以在开始的时候，让服务有哪些功能 ， 或是去掉哪些。
通过
config方法实现对模块的配置，AngularJS中的服务大部分都对应一个“provider”，用来执行与对应服务相同的功能或对其进行配置。比如
$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) {
}]);
/*
* 在开发中， 运行块，就用户一进来就要去执行的一任务，都可以放到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.配置时，定义参数$routeProvider.when('/index/:id)
* 2.跳转时，传递对应的参数 <a href="#/index/1">首页</a>
* 3.获取参数： 在绑定的控制器当中，注入服务$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'=>'昨日重现'),
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>
