AngularJs学习笔记__3、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":"土豪装逼神器"}
	 ];
});

启动服务,运行效果如下:


这里用到的一些指令:

ng-repeat:用于循环输出数据。


发布了71 篇原创文章 · 获赞 12 · 访问量 8万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章