基于AngularJS+HTML+Groovy实现登录功能

AngularJS是开发基于浏览器的响应式RWD应用程序的一个前端MVC框架，由谷歌最初开发的 开源项目，干净的架构吸引了大量粉丝，适合建立CRUD类型的业务应用程序，并不适合开发游戏等应用， 使用声明性编程的用户界面和命令式编程的逻辑， 支持现代桌面和移动浏览器 Internet Explorer版本8.0及以上。

AngularJS是一款客户端MVC的javascript框架，而客户端MVC代表未来架构(为什么要使用MVC+REST+CQRS 架构)，如果你有Struts或SpringMVC等后端MVC框架编程经验，学习Angular会很快，基本是按照同一个MVC思路实现的。

1 AngularJS

AngularJS 除了内置的指令外，我们还可以创建自定义指令。你可以使用 .directive 函数来添加自定义的指令。要调用自定义指令，HTMl 元素上需要添加自定义指令名。使用驼峰法来命名一个指令， runoobDirective,但在使用它时需要以 - 分割,runoob-directive :

rush:js;">

AngularJS还可以定义过滤器，如下所示：

rush:js;">

总价 = {{ (quantity * price) | currency }}

AngularJS 有自己的HTML事件处理方式：

rush:js;">

隐藏/显示

irstName">
姓名:
Full Name: {{firstName + " " + lastName}}

另外AngularJS 的首选样式表是 Twitter Bootstrap， Twitter Bootstrap 是目前最受欢迎的前端框架。

rush:js;"> Users Edit Edit <button class="btn btn-success" ng-click="editUser('new')">
<span class="glyphicon glyphicon-user"> Create New User

<h ng-show="edit">Create New User:
<h ng-hide="edit">Edit User:
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm- control-label">First Name:
<div class="col-sm-">
<input type="text" ng-model="fName" ng-disabled="!edit" placeholder="First Name">

disabled="!edit" placeholder="Last Name">

<button class="btn btn-success" ng-disabled="error || incomplete">
<span class="glyphicon glyphicon-save"> Save Changes

First Name	Last Name