AngularJS是一款優秀的前端JS框架，已經被用於Google的多款產品當中。AngularJS核心特性有：MVVM、模塊化、自動化雙向數據綁定、語義化標簽、依賴注入等。AngularJS認為聲明式的代碼會比命令式的代碼好，因此可以通過聲明式的代碼來處理很多復雜的操作。而Groovy 是用於Java虛擬機的一種敏捷的動態語言，它是一種成熟的面向對象編程語言，既可以用於面向對象編程，又可以用作純粹的腳本語言。使用該種語言不必編寫過多的代碼，同時又具有閉包和動態語言中的其他特性。
AngularJS 除了內置的指令外，我們還可以創建自定義指令。你可以使用 .directive 函數來添加自定義的指令。要調用自定義指令，HTMl 元素上需要添加自定義指令名。使用駝峰法來命名一個指令， runoobDirective, 但在使用它時需要以 - 分割, runoob-directive:
1 <body ng-app="myApp">
2
3 <runoob-directive></runoob-directive>
4
5 <script>
6 var app = angular.module("myApp", []);
7 app.directive("runoobDirective", function() {
8 return {
9 template : "<h1>自定義指令!</h1>"
10 };
11 });
12 </script>
13
14 </body>
AngularJS還可以定義過濾器，如下所示：
1 <div ng-app="myApp" ng-controller="costCtrl">
2
3 <input type="number" ng-model="quantity">
4 <input type="number" ng-model="price">
5
6 <p>總價 = {{ (quantity * price) | currency }}</p>
7
8 </div>
AngularJS 有自己的HTML事件處理方式：
1 <div ng-app="myApp" ng-controller="personCtrl">
2
3 <button ng-click="toggle()">>隱藏/顯示</button>
4
5 <p ng-hide="myVar">
6 名: <input type="text" ng-model="firstName"><br>
7 姓名: <input type="text" ng-model="lastName"><br>
8 <br>
9 Full Name: {{firstName + " " + lastName}}
10 </p>
11
12 </div>
13
14 <script>
15 var app = angular.module('myApp', []);
16 app.controller('personCtrl', function($scope) {
17 $scope.firstName = "John",
18 $scope.lastName = "Doe"
19 $scope.myVar = false;
20 $scope.toggle = function() {
21 $scope.myVar = !$scope.myVar;
22 };
23 });
24 </script>
另外AngularJS 的首選樣式表是 Twitter Bootstrap， Twitter Bootstrap 是目前最受歡迎的前端框架。
以上代碼都是參看http://www.runoob.com/angularjs/ ，更多的資料可以參看http://www.runoob.com/angularjs/
name="James"
println "My name is ${name},'00${6+1}'" //prints My name is James,'007'
如果有一大塊文本,它需要類似 Python 的三重引號(""")開頭，並以三重引號結尾。
1 name = "James"
2 text = """
3 hello
4 there ${name} how are you today?
5 """
AngularJS 指令是擴展的 HTML 屬性，帶有前綴 ng-。ng-app 指令初始化一個 AngularJS 應用程序。ng-init 指令初始化應用程序數據。ng-model 指令把元素值（比如輸入域的值）綁定到應用程序。下面的index.html定義了一個用戶名和一個密碼輸入框控件，
AngularJS 應用程序app（實際上是app.js來處理)由 ng-app 定義。ng-controller="LoginController" 屬性是一個 AngularJS 指令。用於定義一個控制器。LoginController函數是一個 JavaScript 函數。AngularJS 使用$scope 對象來調用控制器，用 $scope 用來保存AngularJS Model(模型)的對象。控制器在作用域中創建了兩個屬性 (username和 password)。ng-model 指令綁定輸入域到控制器的屬性（username和 password）。ng-submit="login()"綁定了後台login()方法。
1 <!DOCTYPE html>
2 <!--index.html -->
3 <html ng-app="app" lang="en">
4 <head>
5 <meta charset="UTF-8">
6 <title>Title</title>
7 <script src="angular.min.js"></script>
8 <script src="scripts/app.js"></script>
9 </head>
10
11 <body ng-controller="LoginController">
12
13 <form ng-submit="login()">
14 <h4>用戶名:</h4>
15 <input ng-model="user.username">
16 <h4>密碼:</h4>
17 <input ng-model="user.password">
18 <h5>{{info}}</h5>
19
20 <br>
21 <input type="submit" value="登陸">
22 </form>
23 </body>
24 </html>
app.js中定義了名為app模塊，對應html頁面的 ng-app="app",其中在$scope定義了user和info可以用於前台模型綁定，另外定義了一個login()方法供前台提交調用。$http 是 AngularJS 中的一個核心服務，用於讀取遠程服務器的數據。
1 /**
2 * app.js angular module define
3 */
4 //ng-app="app"
5 angular.module('app', [])
6 //ng-controller="LoginController"
7 .controller('LoginController', function ($scope, $http) {
8 //user model define
9 //ng-model="user.username"
10 $scope.user = {}
11 $scope.info = '歡迎登陸'
12
13 //ng-submit="login()"
14 $scope.login = function () {
15 console.log($scope.user)
16 //Application.groovy post
17 $http.post('/login', $scope.user).then(function (res) {
18
19 console.log(res.data)
20
21 if (res.status == 200) {
22 alert('登陸成功')
23 }
24
25 }, function (reason) {
26 //{{info}}
27 $scope.info = reason.data;
28 })
29 }
30 });
下面用Groovy編寫的登錄後台處理邏輯：
1 /**
2 * Application.groovy
3 */
4 import groovy.json.JsonBuilder
5 import groovy.json.JsonSlurper
6 import groovy.sql.Sql
7
8 import static spark.Spark.*;
9
10 class Application {
11 static JsonSlurper jsonSlurper = new JsonSlurper()
12 static Sql db = Sql.newInstance("jdbc:jtds:sqlserver://127.0.0.1:1433/lrtest;instance=sql2008",
13 "username", "password"
14 , "net.sourceforge.jtds.jdbc.Driver")
15
16 public static void main(String[] args) {
17 port(9090)
18 //default index.html
19 staticFileLocation("/static");
20
21 get("/hello", { req, res -> "Hello World" });
22 //app.js $http.post('/login', $scope.user)
23 post('/login', { req, res ->
24 //debug
25 println(req.body())
26
27 def user = jsonSlurper.parseText(req.body())
28 //debug
29 println(user)
30
31 def u = db.firstRow("select * from test_user WHERE username = ?.username and password = ?.password", user)
32
33 if (u) {
34 //return
35 halt(200, new JsonBuilder(u).toString())
36 } else {
37 halt(400, '用戶名密碼不正確')
38 }
39 })
40 }
41 }
為了更加直觀表示各組成部分之間的關系，用下面的一張圖來描述三者如何進行關聯：
