NetBeans + RESTful + Angularjs
今日は、YoutubeにあったNetBeansでのAngularjs開発チュートリアルを
まとめます。
https://www.youtube.com/watch?v=kFm45u1koOI
- バックエンド
MavenでWebアプリケーションのプロジェクトを作成します。
プロジェクト名はYoutubeにならって「CustomerBackend」としました。
Java DBのCustomerテーブルから、RESTful Webサービスを新規追加します。
そして、Cross-Origin Resource Sharingフィルタも作成します。
Filterクラスができているのを確認できるか思います。
次に、CustomerFacadeREST.javaを開いて、@Pathを「customers」に書き換えます。
ApplicationConfig.javaを開いて、ApplicationPathが「webresources」となっていることを確認。
それを踏まえて、プロジェクトのプロパティから実行設定を変更します。
相対URLを下の図のように入力してください。
ついでにブラウザを埋め込みkitブラウザに変更します。
※ブラウザの変更は任意です。
バックエンドはこれで終了です。
実行するとブラウザにxmlが表示されます。
- フロントエンド
HTML5アプリケーションのプロジェクトを作成します。
プロジェクト名はまた、Youtubeにならって「CustomerFrontend」としました。
テンプレートから「Angular JS Seed」を選んで、終了ボタンを押します。
実行するとブラウザにはこのような画面が表示されます。
まず、プロジェクトのプロパティからJavaScriptファイルを追加します。
※最新の状態に更新するには「更新済~」のリンクをクリックしてください。
ライブラリフォルダはlibにして、angular.jsの1.2.20を追加しました。
ライブラリに合わせて、index.htmlを下のように変更します。
不要な場所もついでに削除しました。
<!DOCTYPE html> <html lang="en" ng-app="myApp" class="no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>My AngularJS App</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/app.css"/> </head> <body> <div ng-view></div> <script src="lib/angular.js/angular.js"></script> <script src="lib/angular.js/angular-route.js"></script> <script src="lib/angular.js/angular-resource.js"></script> <script src="js/app.js"></script> <script src="js/services.js"></script> <script src="js/controllers.js"></script> <script src="js/filters.js"></script> <script src="js/directives.js"></script> </body> </html>
続いて、services.jsを下のように変更します。
'use strict'; /* Services */ var customerServices = angular.module('myApp.services', ['ngResource']); customerServices.factory('Customers', function($resource) { return $resource('http://localhost:8080/CustomerBackend/webresources/customers', {}, { query: {method: 'GET', isArray: true} }); });
次に、controllers.jsを変更します。
'use strict'; /* Controllers */ angular.module('myApp.controllers', []).controller('MyCtrl1', function ($scope, Customers) { $scope.allcustomers = Customers.query(); $scope.showSelectedElement = function (c) { $scope.selected = c; }; });
ほかのjavascriptは割愛。
もろもろここにあげておきます。
dokyou3/AngularJSMeetsJavaEE7 · GitHub
最後に、partial1.htmlです。
Filter: <p><input type="text" ng-model="customerfilter"></p> <p>Selected item: <b>{{selected.name}} {{selected.city}}</b></p> <table border='1'> <tr> <th>Name</th> <th>City</th> </tr> <tr ng-repeat="onecustomer in allcustomers | filter:customerfilter" ng-class-even="'even'" ng-class-odd="'odd'" ng-click="showSelectedElement(onecustomer)" > <td>{{onecustomer.name}}</td> <td>{{onecustomer.city}}</td> </tr> </table>
app.cssも変えておきましょう。
.odd { background-color: aqua; } .even { background-color: pink; } tr { cursor: pointer; }
実行すると下のような画面が表示されます。
Angularjsの知識が乏しいので見よう見まねで作りました。
フロントのjavascriptはもっとシンプルにできると思います。