Angular--$http服务

最新推荐文章于 2022-03-18 11:18:43 发布

_冷月心

最新推荐文章于 2022-03-18 11:18:43 发布

阅读量315

点赞数 1

分类专栏： angular 文章标签： angular $http

本文链接：https://blog.csdn.net/qq_42813491/article/details/88978537

版权

angular 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

Angular--$http服务

- 代码
- stu.json

代码

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
	<meta charset="UTF-8">
	<title>Angular-$http</title>

</head>
<body ng-controller="MainCtrl as mainctrl">


	<table width="200" border="2" >

            <tr>
                <th>编号</th>
                <th>姓名</th>
            </tr>

            <tr ng-repeat="item in mainctrl.data">
                <td>{{item.sid}}</td>
                <td>{{item.name}}</td>
            </tr>

    </table>

	<script type="text/javascript" src="angular.min.js"></script>
	<script type="text/javascript">
		var app = angular.module("app",[]);

		//依赖注入，依赖$http服务，是一个内置服务
        //需要放在服务器环境运行
        //then里边写回调，es6中promise语法，用来解决回调嵌套的问题
		app.controller("MainCtrl",["$http",function($http){
            var that=this;//异步需要备份
			$http.get("stu.json").then(function(result){
				//将Ajax拉过来的数据，变为控制器自己的数据
				that.data = result.data.list;

			});
		}]);
	</script>
</body>
</html>

在这里插入图片描述

stu.json

{
    "list": [{
            "sid": "001",
            "name": "冷月心"
        },

        {
            "sid": "002",
            "name": "莫山山"
        },
        {
            "sid": "003",
            "name": "叶红鱼"
        }
    ]
}

_冷月心

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angular--$http服务

Angular--$http服务代码stu.json代码<!DOCTYPE html><html lang="en" ng-app="app"><head> <meta charset="UTF-8"> <title>Angular-$http</title></head><body ng-...
复制链接

扫一扫