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:用於循環輸出數據。