This is a very simple form processing script. We will just check if the data exists. If it does exist, don't do anything. If it doesn't exist, add a message to our $errors array.

这是一个非常简单的表单处理脚本。 我们将只检查数据是否存在。 如果确实存在，则不执行任何操作。 如果不存在，请向$errors数组中添加一条消息。

To return our data to an AJAX call, we have to echo and json_encode. This is all we have to do with our PHP form processing. It will be the same for processing a form using normal jQuery AJAX or Angular.

要将数据返回到AJAX调用，我们必须echo和json_encode 。 这就是我们与PHP表单处理所要做的全部。 使用普通的jQuery AJAX或Angular处理表单将是相同的。

显示表格 (Showing the Form)

Let's create our HTML that will show our form.

让我们创建显示表单HTML。

 Submitting Forms with Angular
NameSuperhero Alias Submit!

Now we have our form. We've also used Bootstrap to make it not super ugly. Using the Bootstrap syntax, there is also a spot under each input to show a line of text for our errors.

现在我们有了表格。 我们还使用了Bootstrap使其变得不难看。 使用Bootstrap语法，每个输入下方都有一个点，用于显示错误的一行文本。

用jQuery提交表单 (Submit the Form with jQuery)

Let's go through the process of submitting the form with jQuery now. We will add all the code into our empty ...

There's a lot of code here to process the form. We have code to get the variables from the form, send it to our form using AJAX, check if there are any errors, and show a success message. On top of all that, every time the form is submitted, we want it to clear the past errors. Quite a lot of code.

这里有很多代码来处理表单。 我们有代码从表单中获取变量 ， 使用AJAX将其发送到表单 ， 检查是否有任何错误 ，并显示成功消息 。 最重要的是，每次提交表单时，我们希望它清除过去的错误。 很多代码。

Now if there is an error:

现在，如果有错误：

Or if there is a successful submission:

或者，如果提交成功：

Now let's look at the same form, submitted with Angular. Remember, we don't have to change anything about how our PHP processes the form and our application will function the same (showing errors and successes in the same places).

现在让我们看一下与Angular一起提交的表单。 记住，我们无需更改有关PHP如何处理表单以及应用程序将运行相同功能的任何信息（在同一位置显示错误和成功信息）。

用Angular提交表单 (Submit the Form with Angular)

We are going to set up our Angular application right inside the ...

We now have the foundation for our Angular app. We've loaded Angular, created a module and controller, and applied it to our site.

现在，我们为Angular应用奠定了基础。 我们已经加载了Angular，创建了模块和控制器，并将其应用于我们的网站。

Next we will be showing off how 2-way binding works.

接下来，我们将展示2向绑定的工作原理。

2向数据绑定 (2-Way Data-Binding)

This is one of the core ideas of Angular and one of its most powerful. From the Angular docs: "Data-binding in Angular web apps is the automatic synchronization of data between the model and view." This means that the step where we have to grab data from the form using $('input[name=name]').val() is not required.

这是Angular的核心思想之一，也是最强大的思想之一。 来自Angular文档 ：“ Angular Web应用程序中的数据绑定是模型和视图之间的数据自动同步。” 这意味着不需要执行必须使用$('input[name=name]').val()从表单中获取数据的步骤。

We bind data to a variable in Angular, and whenever it changes in either the Javascript or in the view, it changes in both.

我们将数据绑定到Angular中的变量，并且只要它在Javascript或视图中发生变化，它在两者中都会发生变化。

To demonstrate data-binding, we'll get our form inputs to populate a variable formData automagically. Let's look back at our Angular controller that we applied to our page. We passed in $scope and $http.

为了演示数据绑定，我们将获取表单输入以自动填充变量formData 。 让我们回顾一下应用于页面的Angular控制器。 我们传入了$scope和$http 。

$scope: The glue between application controller and the view. Basically variables are passed to and from our controller and view using $scope. For a more detailed definition, check out the docs.
$http: The Angular service that will help us do our POST request. For more information, check out the docs.

$ scope：应用程序控制器和视图之间的粘合剂。 基本上，变量是通过$ scope传入和传出我们的控制器并进行查看的。 有关更详细的定义，请查看docs 。
$ http： Angular服务，它将帮助我们完成POST请求。 有关更多信息，请查看docs 。

使用数据绑定获取变量 (Getting the Variables Using Data-Binding)

Alright, enough talk. Let's apply this information to our form. It's way simpler than it sounded above. We will add a line to the Angular controller and a line to the view.

好吧，足够多的谈话。 让我们将此信息应用于表单。 它比上面听起来简单。 我们将向Angular控制器添加一条线，并向视图添加一条线。

...