原因：2016年11月17日 星期四 由于工作需要，總結Angularjs與JAVA EE 開發過程中遇到的問題與解決辦法，并進行記錄。
說明：本記錄中有許多軟件需要前置依賴環境，譬如Netbeans之Java，Angularjs之Node包管理器，請查看《Linux配置安裝記錄》。
我的博客：http://minichao.me
簡介
Angularjs簡介
- Angularjs是谷歌開發的，開源的功能完善的JavaScript
模型-視圖-控制器（MVC--model-view-controllers）框架，Angularjs，jQuery和Twitter Bootstrap是完美組合，僅用這三個工具就能迅速開發出REST web服務為后端的HTML5 JavaScript前端應用。
Angularjs MVC
- Angularjs MVC 應用圖解，作圖工具：Processon，支持團隊在線跨平臺作圖。
單頁應用
- 下述代碼就是一個單頁應用index.htm入口頁面的代碼，所有的動態內容都會插入
<div ng-view> </div>標簽中。用戶單擊應用中的鏈接后，標簽中現有的內容會被刪除，插入新的動態內容。用戶無需等待新頁面刷新，新內容會動態顯示出來，與加載新HTML頁面相比，用時更少。
<!-- SPA/index.html -->
<!DOCTYPE html>
<html lang="en" ng-app="helloWorldApp">
<head>
<title>AngularJS Hello World</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="js/libs/angular.min.js"></script>
<script src="js/libs/angular-route.min.js"></script>
<script src="js/libs/angular-resource.min.js"></script>
<script src="js/libs/angular-cookies.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
引導應用
- 初次啟動時應用加載Angularjs，頁面加載庫時會觸發加載引導過程。解析器分析index.html。尋找ng-app標簽，
<html lang="en" ng-app="helloWorldApp">，這一句代碼會觸發js文件中如下的代碼。這就是應用的接入口。在這一js文件中定義了名為helloWorldApp的應用（可以隨意命名，這里保持一致是為了方便辨識），module里的是接入口，var后面的是應用名稱。
/* app.js excerpt */
`use strict`;
/* App Module */
var helloWorldApp = angular.module('helloWorldApp', [
'ngRoute',
'helloWorldControllers'
]);
依賴注入
-
依賴注入（Dependency Injection,DI）是一種設計模式，目的是在配置應用時定義應用的依賴。初次啟動應用時，Angularjs會使用依賴注入的模式加載模塊的依賴。引導應用中我們為helloWorldApp應用定義了兩個所需的依賴，這兩個依賴在定義模塊時通過一個數組參數指定，第一個依賴是Angualrjs的ngRoute路由模塊。第二個則是自行定義的控制器，這里只需知道啟動應用時需加載控制器，控制器會在后面提到。
Angularjs路由
- 下述代碼摘自app.js，定義了兩個路由，/與/show。顯而易見，當鏈接地址為xxx/時，會進入MainCtrl控制的main.html頁面，而當點擊xxx/show對應的內容時，會顯示show.html頁面內容
/* app.js excerpt */
helloWorldApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/mail.html',
controller: 'MainCtrl'
});
when('/show', {
templateUrl: 'partials/show.html',
controller: 'ShowCtrl'
});
}
]);
Netbeans Create Demo
Netbeans
- 在官網進行下載 Netbeans，選擇帶有
GlassFish的版本。對下載的文件進行安裝
chmod +x netbeans-8.1-linux.sh
./netbeans-8.1-linux.sh
Alt text1
- 安裝完成后，打開安裝glassfish的文件夾。替換/glassfish/modules/中的文件org.eclipse.persistence.moxy.jar，文件在公司資料網中有提供。
Server : RESTful Web Services
-
新建項目Maven：Web Application
Alt text2 - Name and Location根據自己需要選擇.
-
server選擇Netbeans自帶的4.1.1版本，Java EE 7 Web.
Alt text3 -
之后會彈出正在下載一些依賴文件，時間取決于網絡
Alt text4 -
右鍵新建的項目，對其新建RESTful Web Services from Database，選擇sample樣例數據庫，并將數據庫中表單全部添加，即Add all.
Alt text5 - 之后不用更改，一路next。
-
如下圖，在config文件中看到app的路徑為webresources
Alt text6 -
下圖中，我們選取customer為演示樣例，修改其路徑為customers
Alt text7 -
將工程的run路徑修改為/webresources/customers，如下圖
Alt text8 -
再對工程新建一個Cross-Origin文件如下
Alt text9
Alt text10 -
這時選中該Server工程，點擊Run（綠色三角），會彈出類似如下的效果：
Alt text11 - 說明：出現XML格式文件即可，不必對照此圖內的信息。
Client Html/Angularjs
-
新建HTML工程如下，記得添加Angular seed
Alt text12
Alt text13 -
進入HTML工程所在文件夾安裝依賴包
Alt text14 -
這里全選
Alt text15 - 建立完成后，發現項目并不可用，點擊運行會提示無法加載Angualrjs，這是因為并沒有在本地下載所需的依賴庫文件，而已經建立了bower.json，內記錄這所需的文件和版本號，只需進入該目錄運行bower install即可
-
運行，可以發現Angular控制著版本號（v0.1），已經可以工作，環境搭建完畢
Alt text
