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萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章