1.最基本的$http使用jsonp跨域
<body ng-app="app">
<div ng-controller="controller">
</div>
<script src="angularjs/angularjs.js"></script>
<script>
var app=angular.module("app",[]);
app.controller("controller",["$scope","$http",function($scope,$http){
$http({
url:"jsonp.php",
// 可以填get、post、jsonp,用jsonp跨域就填jsonp
method:"jsonp",
//用params传参数，相当于直接拼在url后面。固定参数："JSON_CALLBACK"
params:{
a:"JSON_CALLBACK"
}
}).success(function(res){
console.log(res);
});
}])
2.使用jsonp跨域获取天气（采用百度地图天气api）
<body ng-app="app">
<div ng-controller="controller"></div>
<script src="angularjs/angularjs.js"></script>
<script>
var app=angular.module("app",[]);
app.controller("controller",["$scope","$http",function($scope,$http){
$http({
url:"http://api.map.baidu.com/telematics/v3/weather",
method:"jsonp",
params:{
// 之前那个例子用a::"JSON_CALLBACK",这个例子中必须用callback:"JSON_CALLBACK"
callback:"JSON_CALLBACK",
location: '北京',
output: 'json',
ak: '0A5bc3c4fb543c8f9bc54b77bc155724'
}
}).success(function(res){
console.log(res);
})
}])
3.路由功能实现单页面不跳转切换
<body ng-app="app">
<div>
<nav>
<!-- 要把锚点作为参数传给后台，所以设置成id -->
<a href="#/1">流行</a>
<a href="#/2">华语</a>
<a href="#/3">欧美</a>
<a href="#/4">日韩</a>
</nav>
<!-- template或者templateUrl的东西就放在这里 -->
<div ng-view></div>
</div>
<script src="angularjs/angularjs.js"></script>
<!-- 路由功能还要引入一个angular-route.js -->
<script src="angularjs/angular-route.min.js"></script>
<script>
// 依赖于ngRoute模块
var app=angular.module("app",["ngRoute"]);
// 需要对路由模块进行配置,有一个$routeProvider
app.config(["$routeProvider",function($routeProvider){
//通过路由传参两种方式：1是直接在网址上加?key=value;2是在when("/:key形参")，在href="#/values实参"
$routeProvider.when("/:id",{
templateUrl:"music(template).html",
controller:"controller"
}).otherwise({
redirecTo:"/1"
})
}]);
//$routeParams是一个获取锚点参数的服务
app.controller("controller",["$scope","$http","$routeParams",function($scope,$http,$routeParams){
console.log($routeParams.id);
var id=$routeParams.id;
$http({
url:"music.php",
params:{
type:id
}
// method:"get"
}).success(function(res){
$scope.items=res;
console.log(res);
})
}]);
music(template).html页面：
<ul>
<li ng-repeat="item in items">{{item.name}}</li>
</ul>
music.php：
<?php
$items=array(
array("id"=>1,"pid"=>1,"name"=>"我很丑可是我很温柔"),
array("id"=>2,"pid"=>1,"name"=>"我很丑可是我很温柔"),
array("id"=>3,"pid"=>1,"name"=>"我很丑可是我很温柔"),
array("id"=>4,"pid"=>1,"name"=>"我很丑可是我很温柔"),
array("id"=>5,"pid"=>1,"name"=>"我很丑"),
array("id"=>6,"pid"=>2,"name"=>"我很丑"),
array("id"=>7,"pid"=>2,"name"=>"可是我很温柔"),
array("id"=>8,"pid"=>2,"name"=>"可是我很温柔"),
array("id"=>9,"pid"=>2,"name"=>"可是我很温柔"),
array("id"=>10,"pid"=>2,"name"=>"可是我很温柔"),
array("id"=>11,"pid"=>3,"name"=>"可是sAs我很温柔"),
array("id"=>12,"pid"=>3,"name"=>"可是sasas我很温柔"),
array("id"=>13,"pid"=>3,"name"=>"可是我assas很温柔"),
array("id"=>14,"pid"=>3,"name"=>"可是as我很温柔"),
array("id"=>15,"pid"=>3,"name"=>"可是sa我很温柔"),
array("id"=>16,"pid"=>4,"name"=>"可是asa我很温柔"),
array("id"=>17,"pid"=>4,"name"=>"可是我as很温柔"),
array("id"=>18,"pid"=>4,"name"=>"可是as我很温柔"),
array("id"=>19,"pid"=>4,"name"=>"可是我很温as柔"),
array("id"=>20,"pid"=>4,"name"=>"jiangnan"),
);
$temp=array();
$type=$_GET["type"];
foreach ($items as $key => $value) {
if($type==$value["pid"]){
$temp[]=$value;
}
}
echo json_encode($temp);