سوف نستخدم AngularJs و Bootstrap لتطوير مثال على التطبيق الأمامي. من خلال هذه الممارسة البسيطة للمشروع ، سنقود الجميع إلى قصر التنمية الأمامية لـ AngularJS ، ونقدم لك بعض نقاط المعرفة لك:
1. MVC BASICS ، من خلال أمثلة المشروع ، دع الجميع لديهم فهم أولي لتطبيق نموذج تصميم MVC.
2. بناء أول تطبيق AngularJS لدينا. من خلال تطوير حالة الاستخدام العملي ، يمكن للجميع الحصول على فهم إدراكي معين للتنمية الأمامية.
3. فهم أولي للمكونات الثلاثة الأكثر أهمية من AngularJs ، وهي النموذج ، العرض ، ووحدة التحكم.
4. الفهم الأولي لاستخدام كائنات نطاق AngularJS.
مقدمة أساسية لوضع MVC:
MVC هو نموذج الهندسة المعمارية واجهة المستخدم. الغرض منه هو تحلل وظائف التطبيقات في وحدات خاصة ، وإدراك قابلية إعادة استخدام الوحدات ، وتقليل الاقتران بين الوحدات ، وتعزيز متانة النظام. ينقسم وضع MVC بشكل أساسي إلى ثلاثة أجزاء:
النموذج: يستخدم لتخزين بيانات النظام
عرض: يستخدم لتنفيذ واجهة واجهة المستخدم الخاصة بالنظام
وحدة التحكم: تستخدم لتوصيل النموذج والعرض.
في رأيي ، فإن أفضل طريقة للتعلم هي الممارسة. سنقوم بتطوير مثال على التطبيق الأمامي. من خلال هذا المثال ، من ناحية ، يمكننا تعميق فهمنا لإطار AngularJS ، وفي الوقت نفسه ، يمكننا أيضًا أن نشعر كيف يتم تضمين نموذج MVC في عملية التطوير.
مقدمة التطبيق (مسار الرمز: http://xiazai.vevb.com/201608/yuanma/bootstrap-mooc(vevb.com).rar)
سنقوم بعمل تطبيق ويب يخمن الأرقام ، مع الواجهة على النحو التالي:
ستقوم خلفية التطبيق بإنشاء رقم عشوائي بشكل عشوائي مع نطاق يتراوح من 1 إلى 1000. يدخل المستخدم الرقم المخطط في مربع النص. إذا كان الإدخال صحيحًا ، فسيظهر التطبيق موجهًا أخضر أدناه. إذا كان هذا خطأ ، على سبيل المثال ، يكون رقم الإدخال أكبر أو أصغر من الرقم الذي تم إنشاؤه بواسطة الخلفية ، وسيظهر التطبيق موجهًا مقابلًا ، على سبيل المثال:
تشير الأرقام الموضحة في الأسفل إلى عدد المرات التي خمنناها.
هيكل دليل الرمز للتطبيق بأكمله كما يلي:
نظرًا لأننا نعمل حاليًا على مثال تطبيق بسيط ، فإننا نضع رمز كل وحدة معًا. في المستقبل ، عندما نقوم ببناء تطبيقات أمامية واسعة النطاق ، سنكون حريصين للغاية على ترتيب بنية دليل الكود للمشروع بأكمله.
في تكوين الملف الموضح في الشكل أعلاه ، يكون angular.js هو ملف الإطار الذي نعتمد عليه لتطوير التطبيقات ، و bootstrap.min.css هو ملف مكتبة الواجهة المستخدم لتصميم واجهة واجهة المستخدم ، وسيكون numberguessing.html هو ملف التطبيق الرئيسي الذي نريد تطويره. بعد ذلك ، سنضيف رمزًا إلى NumberGuessing.html خطوة بخطوة وزيادة وظائف التطبيق تدريجياً.
بادئ ذي بدء ، ما نحتاج إلى فعله هو بناء قالب HTML بسيط. في هذا القالب ، يمكننا إضافة وظائف ببطء. رمز القالب كما يلي:
<! doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"> <title> تخمين الرقم! </title> <link href = "botstrap.min.cs" rel = "stylesh" src = "Angular.js"> </script> </body> </html>
في رمز القالب أعلاه ، لاحظ أن هناك سطر "meta ... charset =" utf = 8 "
الغرض من هذا الخط هو تمكين المتصفح من عرض الصينية بشكل صحيح. إذا لم يكن هذا الخط متاحًا ، فسوف يعرض المتصفح الصينية. في القالب ، نقدم أولاً رمز الإطار ورمز مكتبة واجهة واجهة المستخدم لاستخدامه لاحقًا. بعد الانتهاء من ذلك ، نقوم بتحميله في المتصفح لمعرفة ما إذا كانت هناك أي أخطاء. إذا كان هذا صحيحًا ، فإن ما نراه حاليًا فارغ:
بعد ذلك ، سنقوم بتطوير رمز منطق خلفية التطبيق ، وسنقوم أولاً بتحديد بعض المتغيرات التي يجب استخدامها:
OriginalVal ، تستخدم لتخزين أرقام عشوائية تم إنشاؤها
userguess ، قم بتخزين الرقم المحرز الذي أدخله المستخدم حاليًا
numoftries ، سجل عدد المرات التي حاول فيها المستخدم
الانحراف: سجل الفرق بين الرقم الذي أدخله المستخدم والرقم العشوائي للخلفية. إذا كان الرقم الذي أدخله المستخدم كبيرًا ، فإن التعريف> 0 ؛ المدخلات صغيرة ، التعريف <0 ؛ إذا كان الإدخال صحيحًا ، فإن التعريف == 0
تنفيذ وحدة التحكم
يتم استخدام وحدة التحكم لتوصيل وحدتي النموذج والعرض ، ويتم تنفيذ منطق أعمال النظام أيضًا في وحدة التحكم. عندما يقوم المستخدم ببعض العمليات على الواجهة ، مثل النقر فوق زر وإدخال المحتوى ، يتلقى وحدة التحكم المعلومات المقابلة من جانب العرض ، ثم يؤدي وحدة التحكم إلى تشغيل منطق معالجة الأحداث المقابل. على سبيل المثال ، يقوم المستخدم بإدخال رقم في الواجهة وينقر على الزر "موافق" ، يحصل وحدة التحكم على قيمة الإدخال من العرض ، ثم يخرج الرقم العشوائي الذي تم إنشاؤه بواسطة التطبيق من النموذج ، ويقارنه مع اثنين من الفوقين ، ويعيد نتيجة المقارنة إلى العرض. يعرض العرض تغييرات الواجهة المقابلة بناءً على قيمة الانحراف التي تم إرجاعها. دعونا نرى كيف يتم تنفيذ الجسم المنطقي لوحدة التحكم:
وظيفة GuessThenumberController ($ scope) {$ scope.verifyguess = function () {$ scope.deviation = $ scope.originalval - $ scope.userguess ؛ $ scope.numoftries = $ scope.numoftries + 1 ؛ } $ scope.initializeGame = function () {$ scope.numoftries = 0 ؛ $ scope.originalval = math.floor ((Math.Random () * 1000) + 1) ؛ $ scope.userguess = null ؛ $ scope.deviation = null ؛ } $ scope.initializeGame () ؛ }تقوم وظيفة GuessThenumberController بإعداد الخصائص العددية لكائن النموذج. وقد تم ذكر معنى هذه القيم سابقا. في الوقت نفسه ، تستمد وظيفة وحدة التحكم هذه أيضًا مكالمتين واجهة ، أحدهما هو التحقق. عند النقر فوق زر التأكيد الموجود على الواجهة ، ستقوم وحدة العرض بالاتصال بالواجهة لتحديد ما إذا كانت البيانات التي أدخلها المستخدم صحيحة. في الوقت نفسه ، ستقوم المكالمة بتحديث قيم السمة والانحراف والرسم.
يتم استخدام initializeGame لتهيئة تطبيق النظام بأكمله ، وإنشاء أرقام عشوائية أولاً ، ثم تهيئة بعض المتغيرات إلى فارغة.
في وظيفة جسم وحدة التحكم لدينا ، يتم تمرير نطاق المعلمة $. يتم تمرير هذه المعلمة إلينا بواسطة AngularJS. وهو ما يعادل بشكل أساسي M في وضع MVC ، وهو النموذج. إنه مشابه لقاعدة بيانات ، تستخدم خصيصًا لتخزين بيانات التطبيق والرمز المنطقي. كما ترون ، في مكالمة التهيئة ، تضع وحدة التحكم numoftries و OriginalVal وغيرها من البيانات في كائن نطاق $. في مكالمة VERIFYGUESS ، يحصل على هذه البيانات من نطاق $ للحساب والتعديل.
بعد إضافة رمز وحدة التحكم أعلاه إلى رقم ملف القالب الخاص بنا ، فإن النتيجة هي على النحو التالي:
<! doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"> <title> تخمين الرقم! </title> <link href = "botstrap.min.cs" rel = "stylesh" src = "Angular.js"> </script> <script type = "text/javaScript"> وظيفة GuittHenumberController ($ scope) {$ scope.verifyguess = function () {$ scope.deviation = $ scope.originalval - $ secope.userguess ؛ $ scope.numoftries = $ scope.numoftries + 1 ؛ } $ scope.initializeGame = function () {$ scope.numoftries = 0 ؛ $ scope.originalval = math.floor ((Math.Random () * 1000) + 1) ؛ $ scope.userguess = null ؛ $ scope.deviation = null ؛ } $ scope.initializeGame () ؛ } </script> </body> </html>عرض تطبيق واجهة تطبيق واجهة التطبيق
عرض ، أي عرض في MVC ، هو في الواقع عرض البيانات في النموذج من خلال واجهة رسومية. تطبيقنا الحالي بسيط ويستند إلى مبدأ البساطة ، قد لا تكون تجربة مستخدم تصميم الواجهة جيدة جدًا ، ولكنها تكفي لفهم كيفية استخدام AngularJS و Bootstrap بسرعة لإنشاء واجهة أمامية بسرعة لبرنامج.
دعنا نلقي نظرة على بناء الواجهة ودمج منطق وحدة التحكم والواجهة:
<body ng-app = "app"> <div ng-controller = "GuittHenumberController"> <h2> تخمين الرقم! </h2> <p> الرجاء أعتقد أن الرقم العشوائي الذي تم إنشاؤه بواسطة الكمبيوتر ، والذي يتراوح من 1 إلى 1000 ng-click = "VerifyGuess ()"> تأكيد </button> <button ng click = "initializegame ()"> إرجاع </button> <p> <p ng-show = "diviation <0"> mr. ، يمكنك تقديم عطاءات عالية جدًا! </p> <p ng-show = "diviation> 0"> يا رجل ، إذا كان لديك أقل ، أضف المزيد من النقاط ، أضف المزيد من النقاط. </p> <p ng-show = "diviation === 0"> يا رجل ، فأنت حقًا تجعلك تقولها بشكل صحيح!
C في MVC ، أي ، وحدة التحكم ، هو جسر بين الواجهة (عرض) والبيانات (النموذج). لربط هؤلاء الثلاثة ، نحتاج إلى تضمين الثلاثة في إطار AngularJS ، ثم الاعتماد على آلية إطار AngularJS لتحقيق الترابط بين الثلاثة.
من أجل تضمين العرض في AngularJS ، بيان الكود أعلاه:
<body ng-app = "app">
تخبر NG-App هذه الخاصية Angular أن رمز HTML في علامة الجسم سيتم تضمينه كجزء عرض في إطار AngulaJS ، ويتم استخدام "App" كقيمة خاصية تطبيق NG-APP لإبلاغ إطار AngularJS لتحميل وحدة تسمى "APP". هذه الوحدة تعادل مستودع التخزين. نقوم بتفكيك وظائف مختلفة من التطبيق الأمامي إلى وحدات مختلفة. يتم تخزين هذه الوحدات في وحدة تسمى التطبيق. وحدة التحكم والنموذج هي أيضا وحدات وظيفية. في وقت لاحق سنرى أنه سيتم إضافتها إلى الوحدة النمطية التي تسمى التطبيق. سيقوم إطار AngularJS بإخراج وحدتي وحدة التحكم والنموذج من هذه الوحدة للاستخدام.
بعد ذلك ، وضعنا أولاً هذه الوحدة التي تسمى التطبيق في إطار AngularJS ، الرمز هو كما يلي:
<script type = "text/javaScript"> Angular.Module ('app' ، []) function sugentThenumberController ($ scope) {....} <script>وبهذه الطريقة ، لدينا وحدة تسمى التطبيق في إطار AngularJS ، ونحن نربط الوحدة بالواجهة من خلال NG-App = "App". بعد ذلك ، نحتاج إلى وضع وحدة وحدة التحكم في وحدة التطبيق ، والرمز كما يلي:
<script type = "text/javaScript"> Angular.module ('app' ، []) .Controller ('GuittHenumberController' ، mustthenumberController) ؛ وظيفة GuessThenumberController (نطاق $) {....} </script>تقوم وظيفة moxular.module بإنشاء وإرجاع كائن الوحدة النمطية. يحتوي هذا الكائن على واجهة تسمى وحدة التحكم. من خلال هذه الواجهة ، يمكن وضع وحدة التحكم الوظيفية التي طورناها في الوحدة النمطية. من الكود أعلاه ، يمكننا أن نرى أننا نضع وحدة تحكم في الوحدة النمطية. اسم هذه الوحدة هو GuessThenumberController ، وهو أول معلمة إدخال لوظيفة وحدة التحكم. المعلمة الإدخال الثانية هي الجسم المنطقي الوظيفي لوحدة وحدة التحكم ، وهي وظيفة GuessThenumberController التي قمنا بتطويرها مسبقًا.
بعد الانتهاء من الخطوات المذكورة أعلاه ، تم تطوير تطبيقنا. في هذا الوقت ، يمكن تحميل HTML الخاص بنا من المتصفح ، حتى تتمكن من رؤية التأثير المحدد.
قبل النهاية ، دعنا نتعمق في الكود لنرى كيف تدمج AngularJS مختلف الوحدات النمطية لتشكيل تطبيق كامل للواجهة الأمامية. في الكود ، هناك بعض الرموز والسمات الخاصة ، والرموز الخاصة ، مثل: {{}} ، والسمات الخاصة مثل: ng-app ، ng-controller ، وما إلى ذلك في السياق الزاوي ، تسمى {{و}} معا رموز الوصية ، والخصائص في شكل ng-* تعليمات الزاوي. متغيرات التحويل الزاوي محصورة في {{و}} في قيم مقابلة للمتغيرات ، مثل مقتطف الكود التالي:
<p> عدد المرات التي تفكر فيها هي: <span> {{numoftries}} </span> <p>
numoftries تعني عدد المرات التي حاول المستخدم تخمينها. إذا كانت قيمة numoftries 0 ، فسوف يهرب AngularJs من الكود أعلاه على النحو التالي:
<p> عدد المرات التي تفكر فيها هي: <span> 0 </span> <p>
سيقوم المتصفح بتقديم الواجهة إلى الموقف التالي:
التوجيه AngularJS هو نقطة معرفة تقنية معقدة. في المناقشة اللاحقة ، سنناقشها بالتفصيل. هنا نقدم باختصار دور توجيه AngularJS ، والذي يمتد بشكل أساسي وظيفة بناء الجملة لـ HTML. التوجيهات هي أقوى الأجزاء في إطار AngularJS. دعنا نقدم بإيجاز توجيه AngularJS المستخدم في الكود.
NG-Controller: يربط هذا التوجيه وحدة التحكم والمشاهدة التي يمثلها HTML. فقط مع هذا التوجيه ، يمكن للعرض الوصول إلى المتغيرات والواجهات التي تحددها وحدة التحكم. يمكنك محاولة وضعه في الكود.
ng-model = ng-controller = "GuessThenumberController"
أزل هذه الجملة وشاهد ما هي النتيجة.
NG-Model: ربط متغيرات ثنائية الاتجاه في النموذج مع عناصر التحكم في العرض ، على سبيل المثال:
<type type = "number" ng-model = "Userguess"/>
يربط هذا البيان USERGUESS المتغير في النموذج إلى مربع نص الإدخال على الواجهة. عندما تتغير القيمة في مربع النص ، تتغير القيمة المقابلة لـ Userguess أيضًا. على العكس من ذلك ، إذا تغيرت قيمة التخمين في الخلفية ، فإن المحتوى في مربع النص يتغير أيضًا وفقًا لذلك.
NG-Click: قم بتوصيل أحداث النقر التي تم إنشاؤها بواسطة الواجهة مع منطق معالجة وحدة التحكم ، على سبيل المثال:
<button ng click = "VerifyGuess ()"> تأكيد </button>
يقوم الرمز أعلاه بتوصيل زر "موافق" انقر فوق حدث مع وظيفة VerifyGuess () وحدة التحكم. بمجرد النقر فوق الزر ، سيتم تنفيذ الوظيفة.
NG-Show: يستخدم للتحكم في ما إذا كان عنصر التحكم المستخدم للتحكم في العرض ليتم عرضه. إذا كانت قيمة التعبير المقابل لـ NG-Show صحيحة ، فسيتم عرض عنصر التحكم. إذا كان خطأ ، فلن يتم عرض التحكم. على سبيل المثال:
<p ng-show = "diviation <0"> mr. ، عرضك مرتفع للغاية! </p>
تتمثل وظيفة الكود أعلاه في أنه عندما تكون قيمة التعريف المتغير أقل من 0 ، سيتم عرض محتوى عنصر الفقرة P على الواجهة.
AngularJS هو إطار تطوير قوي ولكن معقد نسبيا. يتمثل دور مثالنا فقط لمساعدة الجميع على فهم الوظائف القوية لـ AngularJs واكتسب أولاً فهمًا إدراكيًا معينًا ، وذلك لوضع أساسًا متينًا بالنسبة لنا لتحليل وإتقان تقنية التنمية الأمامية لـ AngularJS بالكامل في المستقبل.
إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وإرفاق 3 مواضيع مثيرة لك:
Bootstrap التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام المكونات الإضافية Bootstrap
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.