zoukankan      html  css  js  c++  java

  • 使用Angular提交表单

    使用Angular提交表单

    我们准备在之前使用的<script>标签中设置我们的Angular应用。所以删除里面的内容，我们就可以开始了。

    设置一个Angular应用

    步骤为：

        1. 加载Angular

        2. 设置module

        3. 这是controller

        4. 将module和controller应用于HTML

        5. 设置双向变量绑定

        6. 这是错误和信息

    看起来好像是很多内容，但是最终，我们会用非常少的代码，并且看起来会非常简洁。另外，创建带有更多输入更大的表单，也会更容易。

    Angular 组件和控制器

    首先，加载Angular并且新建组件和控制器

    <!-- index.html -->

 

...

 

    <!-- LOAD JQUERY -->

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

    <!-- LOAD ANGULAR -->

    <script src="//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，创建了组件模块和控制器，并且将其应用于我们的网站。

    接下来，我将展示双向绑定是如何工作的。

    双向数据绑定

    这是Angular的核心思想之一，也是功能最强大的内容之一。在Angular文档中，我们看到：“在Angular网页应用中的数据绑定，是模型和视图层之间的数据自动同步。”这意味着，我们需要在表单中抓取数据，使用$('input[name=name]').val()并不是必需的。

    我们在Angular中将数据和变量绑定在一起，无论是JavaScript也好，view也罢，只要有改变，两者皆变。

    为了演示数据绑定，我们需要获取表单的input来自动填充变量formData。让我们回到应用于页面的Angular控制器中。我们在过一下$scope和$http。

    $scope：控制器和视图层之间的粘合剂。基本上，变量使用$scope从我们的控制器和视图层之间传递和往来。具体详细的定义，请参见文档。

    $http：Angular服务来帮助我们处理POST请求。更多信息，请参见文档。

    使用数据绑定获取变量

    好了，闲话少说。我们将这些讨论应用到表单中去。方法比上面讨论的要简单。我们想Angular控制器和视图中分别添加一行。

    <!-- index.html -->

 

...

 

    <!-- 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) {

 

            // create a blank object to hold our form information

            // $scope will allow this to pass between controller and view

            $scope.formData = {};

 

        }

 

...

    现在，我们已经建立了一个formData对象。让我们用表单数据来填充它。在显示调用每个输入和获得val()之前，我们用ng-model绑定一个特殊的输入到变量。

    <!-- index.html -->

 

...

 

    <!-- FORM -->

    <form>

        <!-- NAME -->

        <div id="name-group" class="form-group">

            <label>Name</label>

            <input type="text" name="name" class="form-control" placeholder="Bruce Wayne" ng-model="formData.name">

            <span class="help-block"></span>

        </div>

 

        <!-- SUPERHERO NAME -->

        <div id="superhero-group" class="form-group">

            <label>Superhero Alias</label>

            <input type="text" name="superheroAlias" class="form-control" placeholder="Caped Crusader" ng-model="formData.superheroAlias">

            <span class="help-block"></span>

        </div>

 

        <!-- SUBMIT BUTTON -->

        <button type="submit" class="btn btn-success btn-lg btn-block">

            <span class="glyphicon glyphicon-flash"></span> Submit!

        </button>

    </form>

 

    <!-- SHOW DATA FROM INPUTS AS THEY ARE BEING TYPED -->

    <pre>

        {{ formData }}

    </pre>

 

...

    现在，既然Angular已经将每个输入绑到了formData。 当你输入每个输入框，你可以看到formData对象被填充了！有没有很酷！

    你不必在view中使用$scope。一切被认为是嵌入到$scope中的。

    处理表单

    在我们的旧表单中，我们使用jQuery提交表单，像这样$('form').submit()。现在我们使用Angular称作ng-submit的特性。要想完成这个，我们需要添加一个控制器函数来处理表单，然后告诉我们form使用这个控制器函数：

    <!-- index.html -->

 

...

 

    <!-- 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) {

 

            // create a blank object to hold our form information

            // $scope will allow this to pass between controller and view

            $scope.formData = {};

 

            // process the form

            $scope.processForm = function() {

 

            };

 

        }

 

...

 

    <!-- FORM -->

    <form ng-submit="processForm()">

 

...

    现在我们的form知道提交时使用控制器函数了。既然已经到位了，然我们用$http来处理表单吧。

    处理表单的语法看起来跟原始方式很像。好处是我们不需要手动抓取表单数据，或者注入，隐藏，添加类显示错误或成功信息。

    <!-- index.html -->

 

...

 

// process the form

$scope.processForm = function() {

    $http({

        method  : 'POST',

        url     : 'process.php',

        data    : $.param($scope.formData),  // pass in data as strings

        headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  // set the headers so angular passing info as form data (not request payload)

    })

        .success(function(data) {

            console.log(data);

 

            if (!data.success) {

                // if not successful, bind errors to error variables

                $scope.errorName = data.errors.name;

                $scope.errorSuperhero = data.errors.superheroAlias;

            } else {

                // if successful, bind success message to message

                $scope.message = data.message;

            }

        });

};

 

...

    这就是我们的表单！没有添加或移除类。我们需要每次提交表单时都清楚错误。我们只需绑定变量和需要用到的视图。这非常棒，因为处理器用来处理数据，而视图用来显示数据.

    jquery POST vs Angular POST

    有时能看到用POST方式提交在服务器中看不到数据，这是因为jQuery和Angular的序列化和发送数据的方式不同。这归结于你所使用的服务器语言和它理解Angular提交的数据的能力。

    上面的代码是应用于PHP服务器的，jQuery对于$.param函数则是必需的。虽然实现上文中提到的内容有非常多不使用jQuery的方法，但在本实例中，使用jQuery的唯一原因就是，它更简单。

    下面简洁的语法将会基于你服务器端语言来工作。更多关于AngularJS AJAX调用的信息，欢迎阅读这篇非常棒的文章：Make AngularJS $http Service Behave Like jQuery AJAX

    简洁语法

    这个例子是以字符串的方式发送数据，并且发送你的头信息。如果你不需要这些，并且希望Angular 的$http POST尽可能的简洁，我们可以使用简写方法：

    ...

    $http.post('process.php', $scope.formData)

        .success(function(data) {

            ...

        });

...

    绝对更简洁更容易记住方法。

    $http 内部控制器： 理想的，你可以将$http请求从controller移除到 service.这只是为了演示目的，我们将会尽快在service上进行讨论.

    在视图中显示错误和信息

    我们将使用指令ng-show和ng-class来处理我们的视图，Angular双方括号允许我们将变量放置在我们需要的地方。

    ng-show: 根据变量值是否存在来显示或隐藏元素. 文档
    ng-class: 根据变量值是否存在（或一些其他表达式）来添加或移除类. 文档

    <!-- index.html -->

 

...

 

    <!-- SHOW ERROR/SUCCESS MESSAGES -->

    <div id="messages" ng-show="message">{{ message }}</div>

 

    <!-- FORM -->

    <form>

        <!-- NAME -->

        <div id="name-group" class="form-group" ng-class="{ 'has-error' : errorName }">

            <label>Name</label>

            <input type="text" name="name" class="form-control" placeholder="Bruce Wayne">

            <span class="help-block" ng-show="errorName">{{ errorName }}</span>

        </div>

 

        <!-- SUPERHERO NAME -->

        <div id="superhero-group" class="form-group" ng-class="{ 'has-error' : errorSuperhero }">

            <label>Superhero Alias</label>

            <input type="text" name="superheroAlias" class="form-control" placeholder="Caped Crusader">

            <span class="help-block" ng-show="errorSuperhero">{{ errorSuperhero }}</span>

        </div>

 

...

    我们的表单完成了！通过强大的Angular，我们可以将这些愚蠢的显示/隐藏的js代码逻辑从视图中移走 了。现在我们的js文件只用来处理数据，并且视图可以做它自己的事情了。

    我们的类和错误/成功等提示信息将在可获取时显示而不可获取时隐藏。当我们无须再像使用老的javascript那样担心是否已经考虑全面，这变得更加容易。你也无须再担心是否记得隐藏每处form提交时的那些错误信息。

    Angular表单验证 获取更多表单验证的信息，请研读我们另一文章：AngularJS Form Validation。

    结束语

    现在我们已把美观的表单全部转变为Angular的了。我们共同学习了许多概念，希望你与它们接触更多，它们也将更易用。

    回顾:

    • 创建一个Angular module

    • 创建一个Angular controller

    • 双向数据绑定

    • ng-model绑定inputs

    • ng-click提交表单

    • 使用双向数据绑定展示表单错误

    • 展示一个基于是否变量存在的div

    • 添加一个基于是否变量存在的类

    这些Angular技术将在更庞大的应用中使用，你可以用它们创建许多好东西。祝Angular之途愉快，敬请期待更多深入的文章。同时，你也可以通过深入了解其指南，服务和厂商等来继续学习Angular。
  • 相关阅读:
    redis发布订阅
    redis学习笔记（面试题）
    redis安全 (error) NOAUTH Authentication required
    HDU3001 Travelling —— 状压DP（三进制）
    POJ3616 Milking Time —— DP
    POJ3186 Treats for the Cows —— DP
    HDU1074 Doing Homework —— 状压DP
    POJ1661 Help Jimmy —— DP
    HDU1260 Tickets —— DP
    HDU1176 免费馅饼 —— DP
  • 原文地址：https://www.cnblogs.com/tdalcn/p/7120539.html
Copyright © 2011-2022 走看看