تفسير مثال تقديم نموذج AngularJS

يروي هذا المقال تقديم AngularJS لاستمارة التسجيل. أشارككم هذا للمشاركة، وفقًا للتفاصيل التالية:

الربط البياني في AngularJS

يُنشئ AngularJS نماذج قابلة للتطبيق لحل محل الرؤية بدلاً من دمج البيانات في النموذج ثم تحديث DOM. يتم استبدال القيم في أي عنصر رؤية مستقل بشكل ديناميكي.

يُعلن عن خاصية ng-app لكل المحتويات التي تُغطى بها هذه التطبيق AngularJS، وهذا هو السبب في أننا نستطيع تضمين تطبيق AngularJS في تطبيق الويب. فقط العناصر التي تغطيها علامة ng-app تتأثر بـ AngularJS.

عندما يعتقد AngularJS أن قيمة ما قد تتغير، يقوم بتشغيل دائرة الحدث الخاصة به لتحقق من قيمة ما إذا كانت قد أصبحت 'قذارة'. إذا تغيرت القيمة بعد تنفيذ دائرة الحدث الأخيرة، فإن القيمة تعتبر 'قذارة'. هذا هو الطريقة التي يمكن من خلالها تتبع AngularJS وتقديم استجابة للتغييرات في التطبيق.

هذا العمل يُدعى التحقق من القذارة. التحقق من القذارة هو وسيلة فعالة لتحقق من تغييرات نموذج البيانات. عندما يكون هناك تغيير محتمل، يقوم AngularJS بتشغيل دائرة الحدث الخاصة به لتحقق من قيمة ما إذا كانت قد تغيرت بعد تنفيذ دائرة الحدث الأخيرة. إذا تغيرت القيمة بعد تنفيذ دائرة الحدث الأخيرة، فإن القيمة تعتبر قذارة.

بفضل AngularJS، يمكننا تحقيق آلية التزامن التلقائي للبيانات في الرؤية دون بناء وظائف JavaScript معقدة جديدة.

نستخدم تعليمات ng-model لت绑定 خاصية name في موضوع البيانات الداخلية ($scope) إلى حقل النص.

موضوع نموذج البيانات هو موضوع $scope. موضوع $scope هو موضوع JavaScript بسيط، حيث يمكن للصفحات الوصول إلى خصائصه، كما يمكن للرؤية التفاعل مع المحكم.
الربط البياني المزدوج يعني أن إذا تغيرت قيمة ما في الرؤية، فإن نموذج البيانات سيلاحظ هذا التغيير من خلال التحقق من القذارة، وإذا تغيرت قيمة ما في نموذج البيانات، فإن الرؤية ستُعيد ترميزها وتُعيد عرضها.

المodule

في AngularJS، يُعتبر المodule الطريقة الرئيسية لتحديد التطبيق. يحتوي المodule على رمز التطبيق الرئيسي، ويُسمح لنا باستخدام طريقة angular.module() للاعلان عن المodule، هذه الطريقة تأخذ إثنين من المعلمات، الأولى هو اسم المodule، والثانية هي قائمة الاعتمادات، وهي قائمة بالأجسام التي يمكن إدراجها في المodule.

angular.module('myApp',[]);

المحكم

المحكم في AngularJS هو دالة تستخدم لتضيف وظائف إضافية إلى نطاق الرؤية. نستخدمه لضبط حالة بداية الموضوع المحدد، وإضافة سلوكيات مخصصة.
عندما ننشئ محكمًا جديدًا على الصفحة، يولد AngularJS ويعبر عن $scope الجديد لهذا المحكم.

أحد الفروق الرئيسية بين AngularJS وغيره من إطارات JavaScript هو أن التحكم ليس مناسبًا لتنفيذ عمليات DOM أو تنسيق أو معالجة البيانات، أو تنفيذ عمليات الحفظ للوضع باستثناء حفظ نموذج البيانات. إنه مجرد جسر بين العرض و $scope.

تعبير

استخدام رمز {{}} لربط متغير إلى $scope بأساسه هو تعبير: {{expression}}. أي عملية يتم تنفيذها على التعبير، سيتم تنفيذها داخل النطاق المحدد، لذا يمكن في التعبير دعوة الـ bianl المحددة في هذا النطاق، والقيام بالدورات، وتنفيذ الدوال، وتطبيق المتغيرات في التعبيرات الرياضية وما إلى ذلك

هذا المثال يستخدم التقنيات

① استخدام تصميم bootstrap للصفحة، وتكون الصفحة نموذج bootstrap

② استخدام AngularJS كإطار أمامي

③ استخدام SpringMVC في الخلفية

وظيفة الكود كله تقديم المحتوى المكتوب، وإرساله إلى الخلفية، ثم رد الخلفية ببيانات عرضها على الصفحة، مع تحذير التحقق عند التقدم

لقد قمت بتقديم ثلاث طرق لتحقيق هذا التطبيق

1. التحكم في النطاق العام
2. التحكم في التقسيم
3. جعل الطلب الخلفي خدمة مستقلة

كود JSP:

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-cn" ng-app="MyApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>مستندات الاختبار</title>
<!-- Bootstrap -->
<link href="css/bootstrap/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
</head>
<body>
 <div ng-controller="keepController">
 <form name="testForm" novalidate>
 <div id="responseMsg" class="testMode" >
 <div>
  <h3>واجهة التحقق：</h3>
  <textarea required class="form-control" rows="3" id="authData" name="authData" ng-model="authData"></textarea>
  <span style="color:red" ng-show="testForm.authData.$dirty && testForm.authData.$invalid">
     <span ng-show="testForm.authData.$error.required">واجهة التحقق الضرورية</span>
   </span>
   </div>
 <div>
  <h3>واجهة بيانات الطلب：</h3>
  <textarea required class="form-control" rows="3" id="reqData" name="reqData" ng-model="reqData"></textarea>
  <span style="color:red" ng-show="testForm.reqData.$dirty && testForm.reqData.$invalid">
     <span ng-show="testForm.reqData.$error.required">بيانات الطلب الضرورية</span>
   </span>
 </div>
 <div style="text-align: right;margin-right: 20px;margin-top:10px;">
  <button class="btn btn-default" role="button" ng-click="keepTest()"
  ng-disabled="testForm.authData.$invalid ||
  testForm.reqData.$invalid"
  >اختبار الاتصال</button>
 </div>
 <div>{{ansInfo}}</div>
 </div>
 </form>
 </div>
 <script src="js/angularJS/angular.min.js"></script>
 <script type="text/javascript">
//1.全局作用域的例子
 /* function keepController($scope,$http) {
  $scope.keepTest= function(){
  var pData = {authData:$scope.authData,reqData:$scope.reqData};
    $http({method:'POST',url:'testKeep',params:pData}).
    success(function(response) {
     $scope.ansInfo = response.a;});
  );
 } */
//2.模块化控制器
 /*var app = angular.module('MyApp',[]);
  app.controller('keepController',function($scope,$http){
  $scope.keepTest= function(){
  var pData = {authData:$scope.authData,reqData:$scope.reqData};
    $http({method:'POST',url:'testKeep',params:pData}).
    success(function(response) {
     $scope.ansInfo=response.a;});
  }
 }); */
 //3.请求服务抽出来的控制器
 angular.module('myapp.services',[]).factory('testService',function($http){
  var runRequest = function(pData){
  return $http({method:'POST',url:'testKeep',params:pData});
  );
  return {
  events:function(pData){
   return runRequest(pData);
  }
  );
 );
 angular.module('MyApp',['myapp.services']).
  controller('keepController',function($scope,testService){
  $scope.keepTest= function(){
   var pData = {authData:$scope.authData,reqData:$scope.reqData};
   testService.events(pData).success(function(response){
   $scope.ansInfo=response.a;
   );
  );
 );
 </script>
 <script src="js/jquery.js"></script>
 <script src="js/bootstrap/bootstrap.min.js"></script>
</body>
</html>

JAVA كود:

@RequestMapping(value = "testKeep", produces = "text/plain;charset=UTF-8")
@ResponseBody
public String testKeep(HttpServletRequest request,
  HttpServletResponse response) {
 System.out.println(request.getParameter("authData"));
 System.out.println(request.getParameter("reqData"));
 JSONObject ja = new JSONObject();
 ja.put("a", "aaa");
 ja.put("b", "bbb");
 ja.put("c", "ccc");
 System.out.println("test:"+ja.toString());
 return ja.toString();
}

للمزيد من المعلومات المتعلقة بAngularJS، يمكن للقراء المهتمين التحقق من موضوعات هذا الموقع: "تجميع تقنيات أوامر AngularJS" و "دليل تدريب AngularJS من البداية إلى المتقدم" و "تجميع ملخص بنية MVC لـ AngularJS"

آمل أن يساعدك محتوى هذا المقال في تصميم برامج AngularJS.

بيان: محتوى هذا المقال تم جمعه من الإنترنت، ويحق للمالك الأصلي الحصول عليه، ويتم جمعه من قبل المستخدمين عبر الإنترنت بشكل متعاوني وتحميله بشكل مستقل، ويتمتع هذا الموقع بلا حقوق ملكية، ولا يتم تعديل المحتوى بشكل يدوي، ولا يتحمل هذا الموقع أي مسؤولية قانونية. إذا اكتشفت محتوى يشتبه في حقوق النسخ، فلا تتردد في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # ب @) لإبلاغنا، وقدم الدليل على الدليل، وسنقوم بإزالة المحتوى المزعج فور التحقق منه.

أساسيات التعليمات

أنت قد تعجبك