AngularJS 和 Java EE 集成：AngularBeans

jopen 9年前發布 | 29K 次閱讀 Web框架 AngularBeans angularjs

Angular Beans 是一個使用 Java EE 7 和 CDI 規范輕松實現在 Java EE 應用中集成 AngularJS 框架的功能。

特性：

可以在 CDI Bean 注入和回調 AngularJS 服務
將 $scope 綁定到 Bean 模型
處理 HTTP 方法調用
最好的控制服務端和客戶端的數據更新
可通過 WebSocket 和 SockJS 集成來處理實時的調用
queryModels: 查詢服務器數據并根據模型更新客戶端顯示
事件和 queryModels 廣播
Angular 表單驗證，基于 Bean Validation 注解
內建 I18n 翻譯
時間驅動、實時和輕量級

示例應用：

HelloBean.java

package helloWorld;

import angularBeans.api.AngularBean;
import angularBeans.api.NGReturn;
import angularBeans.realtime.RealTime;

import java.io.Serializable;

import javax.enterprise.context.RequestScoped;
import javax.ws.rs.GET;

@AngularBean
@RequestScoped
public class HelloBean implements Serializable {
    
    @GET
    public String sayHello(String name) {
        return "hello " + name;
    }
}

app.js

'use strict';

angular.module('myModule', [ 'angularBeans' ]);

angular.module('myModule')
.controller('HelloCtrl', function($scope, helloBean) {


    $scope.sayHello = function(name) {
        helloBean.sayHello(name).then(function(result){
            $scope.result=result;    
        }
        );
    }

});

hello.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">

<script type="text/javascript" src="angular/angular.min.js"></script>
<script type="text/javascript" src="sockjs/sockjs.min.js"></script>
<script type="text/javascript" src="angular-beans.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>

<body ng-app="myModule">
    <div ng-controller="HelloCtrl">
        <label>your name :</label> <input type="text" ng-model="name" />
        <button ng-click="sayHello(name)">sayHello</button>
        {{result}}
    </div>
</body>
</html>

運行結果：