现在，我们有了表单。我们另外还使用了Bootstrap来使表单看起来不是那么丑。使用Bootstrap语法规则，每个input下含有一个spot来展示我们文本的错误信息。
使用jQuery提交表单
现在，让我们来使用jQuery处理表单提交。我会将所有的代码添加到空的<script>标签中
<!-- index.html --> ... <!-- PROCESS FORM WITH AJAX (OLD) --> <script> $(document).ready(function() { // process the form $('form').submit(function(event) { // remove the past errors $('#name-group').removeClass('has-error'); $('#name-group .help-block').empty(); $('#superhero-group').removeClass('has-error'); $('#superhero-group .help-block').empty(); // remove success messages $('#messages').removeClass('alert alert-success').empty(); // get the form data var formData = { 'name' : $('input[name=name]').val(), 'superheroAlias' : $('input[name=superheroAlias]').val() }; // process the form $.ajax({ type : 'POST', url : 'process.php', data : formData, dataType : 'json', success : function(data) { // log data to the console so we can see console.log(data); // if validation fails // add the error class to show a red input // add the error message to the help block under the input if ( ! data.success) { if (data.errors.name) { $('#name-group').addClass('has-error'); $('#name-group .help-block').html(data.errors.name); } if (data.errors.superheroAlias) { $('#superhero-group').addClass('has-error'); $('#superhero-group .help-block').html(data.errors.superheroAlias); } } else { // if validation is good add success message $('#messages').addClass('alert alert-success').append('<p>' + data.message + '</p>'); } } }); // stop the form from submitting and refreshing event.preventDefault(); }); }); </script> ...
这里处理表单有不少的代码。我们有获取表单中变量的代码，有使用AJAX将数据发送至我们的表单的代码，有检查是否有错和显示成功提示的代码。除此之外，我们希望每次表单提交之后，过去的错误信息都会被清除。确实是不少代码。
现在，如果表单中含有错误，则：
如果提交成功：
现在，让我们看使用Angular来提交相同的表单。记住，我们不需要更改任何关于我们的PHP如何处理表单的内容，我们的应用依然会具备相同的功能（在同一个地方展示错误和成功信息）。
使用Angular提交表单
我们准备在之前使用的<script>标签中设置我们的Angular应用。所以删除里面的内容，我们就可以开始了。
设置一个Angular应用
步骤为：
1. 加载Angular
2. 设置module
3. 这是controller
4. 将module和controller应用于HTML
5. 设置双向变量绑定
6. 这是错误和信息
看起来好像是很多内容，但是最终，我们会用非常少的代码，并且看起来会非常简洁。另外，创建带有更多输入更大的表单，也会更容易。
Angular 组件和控制器
首先，加载Angular并且新建组件和控制器
<!-- index.html --> ... <!-- LOAD JQUERY --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <!-- LOAD ANGULAR --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script> <!-- PROCESS FORM WITH AJAX (NEW) --> <script> // define angular module/app var formApp = angular.module('formApp', []); // create angular controller and pass in $scope and $http function formController($scope, $http) { } </script> </head> <!-- apply the module and controller to our body so angular is applied to that --> <body ng-app="formApp" ng-controller="formController"> ...
现在，我们有了Angular应用的基础。我们已经加载了Angular，创建了组件模块和控制器，并且将其应用于我们的网站。
接下来，我将展示双向绑定是如何工作的。
双向数据绑定