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="https://www.jb51.net/angular.min.js"></script> <script src="https://www.jb51.net/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.JsonBuilder import groovy.json.JsonSlurper import groovy.sql.Sql import 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.html staticFileLocation("/static"); get("/hello", { req, res -> "Hello World" }); //app.js $http.post('/login', $scope.user) post('/login', { req, res -> //debug println(req.body()) def user = jsonSlurper.parseText(req.body()) //debug println(user) def u = db.firstRow("select * from test_user WHERE username = ?.username and password = ?.password", user) if (u) { //return halt(, new JsonBuilder(u).toString()) } else { halt(, '用户名密码不正确') } }) } }
为了更加直观表示各组成部分之间的关系，用下面的一张图来描述三者如何进行关联：
