【練習】angularjs（最基本的$http使用jsonp跨域，使用jsonp跨域獲取天氣（採用百度地圖天氣api），路由功能實現單頁面不跳轉切換）
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);