شاهدت فيديو عن AngularJS. يشرح محتوى الفيديو كيفية إنشاء منتجع صحي في شكل قائمة Tode (تطبيق صفحة بسيط). من أجل تعزيز الفهم ، يتم كتابة مقال أدناه لمراجعة وتوحيد.
يحضر
تحميل AngularJS
يطلق عليه التنزيل ، ولكن في الواقع ، طالما يمكنك الرجوع إلى AngularJs في صفحتنا. يمكن أن يكون هناك الطريقة التالية.
تسارع CDN
من الممكن أيضًا استخدام خدمات تسارع CDN المحلية.
انسخ الرمز كما يلي: <script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
طريقة NPM
كما أنه مناسب تمامًا لاستخدام أداة إدارة حزم NodeJS ، يمكن القيام بها بشكل أساسي في خطوتين.
أولاً ، أدخل المجلد حيث سنكتب الرمز.
• تثبيت AngularJS: NPM تثبيت الزاوي
• تم تقديمه لاستخدامه في الصفحة:
<!-يعتمد عنوان SRC هذا على وضعك الخاص->
<script src = "node_modules/Angular/Angular.js"> </script>
طريقة تقليدية
تتمثل الطريقة التقليدية في تنزيل الملفات ذات الصلة يدويًا ثم تقديمها يدويًا ، لأنها مرهقة تمامًا. لم يعد هناك سرد هنا.
تنزيل bootstrap
كإطار أمامي شائع للغاية وحديث ، يعد Bootstrap نجاحًا. تنزيل عنوان
احتياطي المعرفة
العمارة MVC
يتبنى AngularJS Core الهندسة المعمارية MVC والتطبيقات التي تعتمد على الحدث. أنا جديد على ذلك ، لذلك لا أفهمها جيدًا. إذا كان هناك أي خطأ ، آمل أن يشير المدون إلى ذلك.
نانوغرام
بصفته خدم الصفحة الفردية بأكملها ، يعني التطبيق التطبيق ، ومعنى التطبيق. تعمل خدمتنا المكونة من صفحة واحدة كتطبيق.
بشكل عام ، يجب أن يكون APP NG-APP متداخلًا كحاوية الوالدين لـ NG-Controller. خلاف ذلك ، قد لا تظهر النتائج المتوقعة
NG-Controller
يقوم وحدة التحكم ، والرجل الأيمن المطبقة على الصفحة ، ووجود وحدة التحكم بتبسيط الاقتران بين الوحدات ، مما يجعل كتابة الكود أكثر موحدة وبسيطة.
NG-Model
أثناء معالجة النماذج ، سيتم ربطه بشكل عام وإخراج عناصر الصفحة لتحقيق تأثير صفحة خالية من التحديث.
أساس الحدث
نانوغرام انقر
في تطبيق صفحتنا الواحدة ، فإن العناصر التي تعلن هذه السمة لها وظيفة أحداث النقر. بالنسبة إلى أي جزء من الوظائف التي تسمى ، فهي مرتبطة فعليًا بالحاوية التي يوجد بها العنصر.
وهذا يعني أن الوظيفة المقابلة لحدث النقر هي الرمز المكتوب في وحدة التحكم ذات الصلة لإكمال وظيفة محددة.
رمز كامل
تم نشر الرمز التفصيلي لهذا المثال أدناه
main.js
(وظيفة (نافذة) {// قم بتسجيل وحدة رئيسية للتطبيق var toDoApp = window.angular.module ('toDoApp' ، []) ؛ $ scope.text = '' ؛ $ scope.text.trim () ؛ حذفها} // احصل على عدد الأحداث المكتملة وتنفيذها وفقًا لاختيار مربع الاختيار // نظرًا لأن الصفحة تم تغييرها ديناميكيًا ، فأنت بحاجة إلى استخدام وظائف ، أو ببساطة استخدام ملزمة النموذج ، ولكن هذا سيكون بعض الشيء المزعج $ scope.donecount = function () تم الانتهاء من الشروط والحدث}) ؛todolist.html
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> angularjs دمج قائمة مهام تنفيذ bootstrap </title> <!-تقديم bootstrap-> <link href = "http://app.bdimg.com/libs/bootraps/bootstrap.0in Rel = "STYLESHEET"> <style> .Container {Max-Width: 720px ؛ } .done {color: #cca ؛ } .checkbox {margin-right: 12px ؛ القاع الهامش: 0 ؛ . } </style> <script src = "node_modules/Angular/Angular.js"> </script> <script src = "myjs/app.js"> </script> </head> <body> <div ng-app = "todoApp ng-controller = "mainController"> <!-لتحقيق واجهة جيدة المظهر ، يتم استخدام التحكم في النموذج-> <form> <input type = "text" ng-model = "text" name = ""> <span> <button ng-click = "add ()"> إضافة </span> </form> ng-class = "{'done': item.done}" ng-repeat = "item in todolist"> <button type = "button" aria-label = "close" ng-click = "delete (item) ng-model = "item.done"> <span> {{item.text}} </span> </billy> </viv> </li> </ul> <p> تم إكمال مجموع </strong> {{todolist.length}} </strong>تأثير الصفحة
شرح رمز مفصل
يمكن أن يكون للطبقة الخارجية من الكود في الكود تأثير جيد كمساحة مؤقتة وتمنع تلوث مساحة الاسم.
(وظيفة (نافذة) {// للقيام بشيء}) (نافذة)لاحظ أن آخر (نافذة) لا غنى عنه.
إنشاء تطبيق
// تسجيل وحدة رئيسية للتطبيق
var toDoApp = window.angular.module ('toDoApp' ، []) ؛
إنشاء وحدة تحكم
ToDoApp.Controller ('mainController' // يلعب نطاق $ هنا أيضًا دور الحاوية ويعلن النطاق المرئي للمتغير. إضافة سلسلة من القوائم $ scope.toDolist = [{text: 'AngularJs' ، int: false} ، {text: 'bootstrap' ، int: false}] ؛تحسين وظائف الوظيفة
// إضافة وظيفة للرد على التفاعل $ scope.add = function () {var text = $ scope.text.trim () ؛ if (text) {$ scope.todolist.push ({text: text ، est: false}) ؛ $ scope.text = '' ؛ }} // انقر فوق حدث الاستجابة $ scope.delete = function (toDo) {var index = $ scope.todolist.indexof (todo) $ scope.todolist.splice (index ، 1) ؛ $ scope.donecount = function () {// استخدم مرشحًا لتنفيذ var temp = $ scope.todolist.filter (function (item) {return item.done ؛ إرجاع temp.length ؛ }لخص
لا يوجد العديد من الرموز والأفكار العميقة.
إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وإرفاق 3 مواضيع مثيرة لك:
Bootstrap التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام المكونات الإضافية Bootstrap
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.