AngularJs 简单示例

最新推荐文章于 2017-08-21 22:59:16 发布

Sand_Ant

最新推荐文章于 2017-08-21 22:59:16 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：程序语言(客户端) 文章标签： AngularJs

本文链接：https://blog.youkuaiyun.com/sand_ant/article/details/17919099

程序语言(客户端) 专栏收录该内容

1 篇文章

订阅专栏

本文通过一个简单的AngularJS示例介绍了如何使用该前端MVC框架加载数据并显示在网页上。示例中定义了一个名为AngularApp的应用模块，并创建了GreetingCtrl控制器用于处理数据加载逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、简介

Angularjs作为前端mvc框架，可以说是非常显眼，使用来来也比较简单。本文章只记录一个简单的demo，AngularJs的官网有很多使用的介绍，如果想学习AnjularJs请跳过此文章直接查看http://angularjs.org/ 或者 http://docs.angularjs.org/guide/

二、示例

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="AngularApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>AngularJs</title>
<script type="text/javascript" src="js/angular.js"></script>
</head>
<body>
	<div ng-controller="GreetingCtrl" style="min-width: 1000px">
		姓名:{{ name }}
	</div>
	<script type="text/javascript">
		var AngularApp = angular.module('AngularApp', []);
		AngularApp.controller('GreetingCtrl', function($scope, $http,$timeout, $filter) {
			//初始化页面
			$http({
				method : 'GET',
				url : '/myapp/dataServlet',
			}).success(function(data, status, headers, config) {
				$scope.loadDataFun(data);
			}).error(function(data, status, headers, config) {
				//alert(status);
				$scope.name="未知";
			});
			$scope.loadDataFun = function(dataVo) {
				$scope.name = dataVo.name;
			}
		});
	</script>
</body>
</html>