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:用于循环输出数据。