AngularJS是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS核心特性有：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等。AngularJS认为声明式的代码会比命令式的代码好，因此可以通过声明式的代码来处理很多复杂的操作。而Groovy 是用于Java虚拟机的一种敏捷的动态语言，它是一种成熟的面向对象编程语言，既可以用于面向对象编程，又可以用作纯粹的脚本语言。使用该种语言不必编写过多的代码，同时又具有闭包和动态语言中的其他特性。
1 AngularJS
AngularJS 除了内置的指令外，我们还可以创建自定义指令。你可以使用 .directive 函数来添加自定义的指令。要调用自定义指令，HTMl 元素上需要添加自定义指令名。使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "<h1>自定义指令!</h1>"
};
});
</script>
</body>
AngularJS还可以定义过滤器，如下所示：
<div ng-app="myApp" ng-controller="costCtrl">
<input type="number" ng-model="quantity">
<input type="number" ng-model="price">
<p>总价 = {{ (quantity * price) | currency }}</p>
</div>
AngularJS 有自己的HTML事件处理方式：
<div ng-app="myApp" ng-controller="personCtrl">
<button ng-click="toggle()">>隐藏/显示</button>
<p ng-hide="myVar">
名: <input type="text" ng-model="firstName"><br>
姓名: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John",
$scope.lastName = "Doe"
$scope.myVar = false;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
};
});
</script>
另外AngularJS 的首选样式表是 Twitter Bootstrap， Twitter Bootstrap 是目前最受欢迎的前端框架。
<!DOCTYPE html>
<html>
<link href="">
<script src=""></script>
<body ng-app="myApp" ng-controller="userCtrl">
<div>
<h3>Users</h3>
<table>
<thead><tr>
<th>Edit</th>
<th>First Name</th>
<th>Last Name</th>
</tr></thead>
<tbody><tr ng-repeat="user in users">
<td>
<button ng-click="editUser(user.id)">
<span></span> Edit
</button>
</td>
<td>{{ user.fName }}</td>
<td>{{ user.lName }}</td>
</tr></tbody>
</table>
<hr>
<button ng-click="editUser('new')">
<span></span> Create New User
</button>
<hr>
<h3 ng-show="edit">Create New User:</h3>
<h3 ng-hide="edit">Edit User:</h3>
<form>
<div>
<label>First Name:</label>
<div>
<input type="text" ng-model="fName" ng-disabled="!edit" placeholder="First Name">
</div>
</div>
<div>
<label>Last Name:</label>
<div>
<input type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last Name">
</div>
</div>
<div>
<label>Password:</label>
<div>
<input type="password" ng-model="passw1" placeholder="Password">
</div>
</div>
<div>
<label>Repeat:</label>
<div>
<input type="password" ng-model="passw2" placeholder="Repeat Password">
</div>
</div>
</form>
<hr>
<button ng-disabled="error || incomplete">
<span></span> Save Changes
</button>
</div>
<script src = "myUsers.js"></script>
</body>
</html>
2 Groovy