AngularJs学习笔记__3、AngularJs模板

最新推荐文章于 2022-12-09 16:14:24 发布

原创最新推荐文章于 2022-12-09 16:14:24 发布 · 486 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs

AngularJs 专栏收录该内容

6 篇文章

订阅专栏

本文通过创建一个简单的手机列表应用，介绍了如何使用AngularJS来构建Web应用。文章演示了如何设置基本的HTML模板，引入AngularJS库，并实现数据绑定及列表循环等功能。

1、新建一个index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh" ng-app="phonecatApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/controller.js"></script>
<body ng-controller="PhoneListCtrl">
	<ul>
		<li ng-repeat="phone in phones">
			{{phone.name}}
			<p>{{phone.snippet}}</p>
			
		</li>
	</ul>
</body>
</html>

2、在WEB_INF目录下新建一个js文件夹，把angular.js文件放入js文件夹中，另外新建一个controller.js文件。

var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl',function($scope){
	$scope.phones=[
	   {"name":"荣耀7","snippet":"非常漂亮的一款手机"},
	   {"name":"小米4","snippet":"性价比非常高的一款手机"},
	   {"name":"iphone 6S","snippet":"土豪装逼神器"}
	 ];
});

启动服务，运行效果如下：