angularjs网络请求展示

最新推荐文章于 2022-03-29 09:36:38 发布

wanglinuo521

最新推荐文章于 2022-03-29 09:36:38 发布

阅读量335

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/wanglinuo521/article/details/79056662

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

该博客展示了如何使用 AngularJS 进行网络请求并结合路由实现页面视图的切换。通过创建 Angular 模块、配置路由、定义控制器以及使用 $http 服务获取 JSON 数据，实现在不同页面中显示不同的内容，包括城市列表、静态页面、图片展示和标题列表。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title></title>
<script src="../libs/angular.min.js"></script>
<script src="../libs/angular-route.min.js"></script>
</head>
<body ng-controller="demo">
<ul>
<li><a href="#/first">首页</a></li>
<li><a href="#/my">个人</a></li>
<li><a href="#/photo">图片</a></li>
<li><a href="#/shopp">购物</a></li>
</ul>
<div ng-view></div>
</body>
<script>
var app=angular.module("app",["ngRoute"]);

//配置路由
app.config(['$routeProvider',function($routeProvider){
$routeProvider.when('/first',{template:'<p ng-repeat="x in names">{{x.City}}</p>'})
.when('/my',{templateUrl:"aa.html"})
.when('/photo',{template:'<img ng-repeat="x in names" src="{{x.img}}"/>',controller:"demo1"})
.when('/shopp',{template:'<p ng-repeat="x in names">{{x.title}}</p>',controller:"demo1"})
}]);

app.controller("demo",function($scope,$http){
$http({
method:"GET",
url:"aa.json"
}).success(function(data){
$scope.names=data.records;
}).error(function(data){
alert("请求失败")
});
});
app.controller("demo1",function($scope,$http){
$http({
method:"GET",
url:"package.json"
}).success(function(data){
$scope.names=data;
}).error(function(data){
alert("请求失败")
})
})

</script>
</html>