AngularJS是開發基於瀏覽器的響應式RWD應用程式的一個前端MVC架構，由Google最初開發的 開源項目，乾淨的架構吸引了大量粉絲，適合建立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 :
<body ng-app="myApp"><runoob-directive></runoob-directive><script>var app = angular.module("myApp", []);app.directive("runoobDirective", function() {return {template : "<h>自訂指令!</h>"};});</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 rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/../css/bootstrap.min.css"><script src="http://apps.bdimg.com/libs/angular.js/../angular.min.js"></script><body ng-app="myApp" ng-controller="userCtrl"><div class="container"><h>Users</h><table class="table table-striped"><thead><tr><th>Edit</th><th>First Name</th><th>Last Name</th></tr></thead><tbody><tr ng-repeat="user in users"><td><button class="btn" ng-click="editUser(user.id)"><span class="glyphicon glyphicon-pencil"></span> Edit</button></td><td>{{ user.fName }}</td><td>{{ user.lName }}</td></tr></tbody></table><hr><button class="btn btn-success" ng-click="editUser('new')"><span class="glyphicon glyphicon-user"></span> Create New User</button><hr><h ng-show="edit">Create New User:</h><h ng-hide="edit">Edit User:</h><form class="form-horizontal"><div class="form-group"><label class="col-sm- control-label">First Name:</label><div class="col-sm-"><input type="text" ng-model="fName" ng-disabled="!edit" placeholder="First Name"></div></div> <div class="form-group"><label class="col-sm- control-label">Last Name:</label><div class="col-sm-"><input type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last Name"></div></div><div class="form-group"><label class="col-sm- control-label">Password:</label><div class="col-sm-"><input type="password" ng-model="passw" placeholder="Password"></div></div><div class="form-group"><label class="col-sm- control-label">Repeat:</label><div class="col-sm-"><input type="password" ng-model="passw" placeholder="Repeat Password"></div></div></form><hr><button class="btn btn-success" ng-disabled="error || incomplete"><span class="glyphicon glyphicon-save"></span> Save Changes</button></div><script src = "myUsers.js"></script></body></html>
以上代碼都是參看 http://www.runoob.com/angularjs/ ，更多的資料可以參看 http://www.runoob.com/angularjs/
2 Groovy
有人說，有java就有groovy，用groovy,我們可以使用grails架構，感覺用來開發web應用非常很方便。Groovy的語句和Java類似，但是有一些特殊的地方。例如語句的分號是可選的。如果每行一個語句，就可以省略分號；如果一行上有多個語句，則需要用分號來分隔。 Groovy中的字串允許使用雙引號和單引號。 當使用雙引號時，可以在字串內嵌入一些運算式，Groovy允許您使用 與 bash 類似的 ${expression} 文法進行替換。可以在字串中包含任意的Groovy運算式。
name="James"println "My name is ${name},'00${6+1}'" //prints My name is James,'007'
如果有一大塊文本,它需要類似 Python 的三重引號(""")開頭，並以三重引號結尾。
name = "James"text = """hellothere ${name} how are you today?"""
3 登入實現
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()方法。
<!DOCTYPE html><!--index.html --><html ng-app="app" lang="en"><head><meta charset="UTF-"><title>Title</title><script src="angular.min.js"></script><script src="scripts/app.js"></script></head><body ng-controller="LoginController"><form ng-submit="login()"><h>使用者名稱:</h><input ng-model="user.username"><h>密碼:</h><input ng-model="user.password"><h>{{info}}</h><br><input type="submit" value="登陸"></form></body></html>
app.js中定義了名為 app 模組，對應html頁面的 ng-app="app", 其中在$scope定義了user和info可以用於前台模型繫結，另外定義了一個login()方法供前台提交調用。 $http 是 AngularJS 中的一個核心服務，用於讀取遠程伺服器的資料。
/*** app.js angular module define*///ng-app="app"angular.module('app', [])//ng-controller="LoginController".controller('LoginController', function ($scope, $http) {//user model define//ng-model="user.username"$scope.user = {}$scope.info = '歡迎登陸'//ng-submit="login()"$scope.login = function () {console.log($scope.user)//Application.groovy post$http.post('/login', $scope.user).then(function (res) {console.log(res.data)if (res.status == ) {alert('登陸成功')}}, function (reason) {//{{info}}$scope.info = reason.data;})}});
下面用Groovy編寫的登入幕後處理邏輯：
/*** Application.groovy*/import groovy.json.JsonBuilderimport groovy.json.JsonSlurperimport groovy.sql.Sqlimport static spark.Spark.*;class Application {static JsonSlurper jsonSlurper = new JsonSlurper()static Sql db = Sql.newInstance("jdbc:jtds:sqlserver://...:/lrtest;instance=sql", "username", "password", "net.sourceforge.jtds.jdbc.Driver")public static void main(String[] args) {port()//default index.htmlstaticFileLocation("/static");get("/hello", { req, res -> "Hello World" });//app.js $http.post('/login', $scope.user)post('/login', { req, res ->//debugprintln(req.body())def user = jsonSlurper.parseText(req.body())//debugprintln(user)def u = db.firstRow("select * from test_user WHERE username = ?.username and password = ?.password", user)if (u) {//returnhalt(, new JsonBuilder(u).toString())} else {halt(, '使用者名稱密碼不正確')}})}}
為了更加直觀表示各組成部分之間的關係，用下面的一張圖來描述三者如何進行關聯：
以上內容是基於AngularJS+HTML+Groovy實現登入功能的相關知識，希望對大家有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
