※$location、$http、$timeout、$interval
<html>
<script type="text/javascript" src="angular.js"></script>
<body ng-app='xxx'>
<div ng-controller='ooo'>
<p>{{myUrl}}</p>
<p>{{myHttp}}</p>
<p>{{myURL}}</p>
<p>{{myTimeout}}</p>
<p>{{myInterval}}</p>
</div>
</body>
</html>
<script>
var app = angular.module('xxx', []);
app.controller('ooo', function($scope, $location, $http, $timeout, $interval) {
$scope.myUrl = $location.absUrl();
$http.get("http://localhost:8080/TestServletXXX/xxx.jsp").then(function (response) {
$scope.myHttp = response.data;
$scope.myURL = response.config.url;
});
$timeout(function () {
$scope.myTimeout = "我佇這，你看啥貨？";
}, 2000);
$interval(function () {
$scope.myInterval = new Date().toLocaleTimeString();
}, 1000);
});
</script>
※$location：類似window.location
※$http：連到已啟動的伺服器，但Chrome會有同源策略的問題，可參考這篇
※$timeout：js的window.timeout，過幾毫秒做什麼事
※$interval：js的window.interval，每過幾毫秒做什麼事
※以上可以加debugger看還有什麼可以「.」的
※service
<html>
<script type="text/javascript" src="angular.js"></script>
<body ng-app='xxx'>
<div ng-controller='ooo'>
<p>{{self}}</p>
</div>
</body>
</html>
<script>
var app = angular.module('xxx', []);
app.controller('ooo', function($scope, zzz) {
$scope.self = zzz.yyyFun(100);
});
app.service('zzz', function() {
this.yyyFun = function (x) {
return x + x;
}
});
</script>
※自定 service 的功能，也就是定義controller裡可以放的service，此例是zzz
※filter 抓 service 的方法
<html>
<script type="text/javascript" src="angular.js"></script>
<body ng-app='xxx'>
<ul ng-controller='ooo'>
<li ng-repeat="a in intArr">{{a | myFilter}}</li>
</ul>
</body>
</html>
<script>
var app = angular.module('xxx', []);
app.controller('ooo', ($scope) => {
$scope.intArr = [73, 108, 49];
});
app.filter('myFilter',['zzz', (f) => { // 這裡的zzz對應到service，使用裡面的方法
return (x) => {
return f.yyy(x);
};
}]);
app.service('zzz', function() {
this.yyy = (x) => {
return String.fromCharCode(x);
}
});
</script>
※zzz 對應好即可
※Servlet 回傳 JSON
@WebServlet(urlPatterns = { "/xxx" })
public class HelloServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String json = "{\"A\":\"1\",\"B\":2,\"C\":3.3}";
System.out.println("json=" + json);
// JSONObject json = new JSONObject();
// json.put("A", "1");
// json.put("B", 2);
// json.put("C", 3.3);
// System.out.println("json=" + json.toString());
resp.setContentType("application/json");
resp.setCharacterEncoding("UTF-8");
PrintWriter out = resp.getWriter();
out.write(json);
out.flush();
out.close();
}
}
※一定要用「"」，單引號我試的結果，前端會跑到fail，所以最好是用註解這一類的工具，才不會看到目睭拖窗
※JSON回傳「"xxx":["A":1,"B":2,"C":3]」，試的結果也是會跑到fail，很奇怪
※不使用setContentType也是可以的
※前端
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="angular.min.js"></script>
<script>
var app = angular.module('xxx', []);
app.controller('ooo', function($scope, $http) {
$http({
method : 'GET',
url : 'xxx'
}).then(function successCallback(resp) {
$scope.a = resp.data.A;
$scope.b = resp.data.B;
$scope.c = resp.data.C;
}, function errorCallback(resp) {
alert('fail');
});
});
</script>
</head>
<body ng-app='xxx'>
<div ng-controller='ooo'>
<p>{{a}}</p>
<p>{{b}}</p>
<p>{{c}}</p>
</div>
</body>
</html>
※一載入頁面就呼叫了
※resp.data 是固定的，而後面如果是JSON還可以繼續「.」
沒有留言:
張貼留言