يستخدم إطار AngularJS أساسًا في المشاريع الأمامية. لم أكن أعرف هذا الإطار من قبل ، وكان ذلك لأنني توليت مؤخرًا ، لذلك خططت لتعلمه جيدًا. اعتدت أن أكون في جانب الكمبيوتر ، لكنني الآن استولت على مشروع الهاتف المحمول. يستخدم Framework للهاتف المحمول Ionic + Vordova ، لكنه لا يستخدم bootstrap. أنا أستخدم واجهة تطبيق iOS + Android بشكل أساسي. لا أعرف الكثير عن الإطار الأيوني وأحتاج إلى قضاء بعض الوقت للتعرف عليه. AngularJS التعلم المبتدئين مرحب بهم لتصحيح لي.
ما هو AngularJS؟
ببساطة ، إنه إطار من JavaScript الذي يضاف إلى صفحة ويب من خلال علامات البرنامج النصي. وهذا هو ، عندما نستخدم AngularJS ، نحتاج إلى تقديم الكود التالي.
<script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
عادة ما يوصى بوضع البرنامج النصي في أسفل عنصر <Body> ، وهو تحسين سرعة التحميل لصفحة الويب. لأن تحميل HTML لا يخضع لتحميل البرنامج النصي.
ما هو AngularJS؟
يسهل AngularJS تطوير تطبيقات الصفحة الفردية الحديثة (SPAs: تطبيقات صفحة واحدة).
• AngularJS يربط بيانات التطبيق بعناصر HTML.
• AngularJs يمكن استنساخ وتكرار عناصر HTML.
• يمكن لـ AngularJs إخفاء وعرض عناصر HTML.
• يمكن لـ AngularJs إضافة رمز "خلف" عنصر HTML.
• AngularJS يدعم التحقق من المدخلات.
على سبيل المثال ، تستخدم المحطات المحمولة بشكل أساسي مقارنات صفحة واحدة ، والتي تتم باستخدام تحويل التوجيه الزاوي. مثل مشروعنا الحالي ، نستخدم أيضًا صفحة واحدة. وهذا هو ، في الصفحة الرئيسية ، يتم تنفيذ جميع الصفحات القفز في الصفحة الرئيسية. لقطة الشاشة كما يلي:
تعبيرات AngularJS
تتم كتابة تعبير AngularJS في أقواس مزدوجة: {{expression}}.
تعبيرات AngularJS تربط البيانات بـ HTML ، والتي تشبه التوجيه NG-bind.
سوف AngularJS بيانات "الإخراج" في الموقع الذي تتم كتابة التعبير.
تعبيرات AngularJS تشبه إلى حد كبير تعبيرات JavaScript: يمكن أن تحتوي على حرفية ومشغلين ومتغيرات.
<! doctype html> <!-tag AngularJs لمعالجة صفحة HTML بأكملها وقم بتمهيد التطبيق-> <html ng-app> <head> <meta charset = "utf-8"> <script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script> </head> <body> <p> name: {{"ting"+"feng"}} </p> <p> number: {{5+5} </p> div ng-init = "person = {name: 'tingfeng' ، العمر: '13 '}"> <p> الاسم: {{person.name}} العمر: {{person.age}} </p> </viv> </body> </html>تطبيق AngularJS في HTML
تمديد HTML بشكل رئيسي من خلال NG-DIRCIPTION. توجيه AngularJS هو سمة HTML مسبوقة بـ NG ، والتي تحتوي على أربع ميزات رئيسية: MVC ، Modular ، نظام التعليم (التوجيه) ، وتجديد البيانات
NG-Init: يهيئة هذا التوجيه متغيرات تطبيق AngularJS. على سبيل المثال ، الأعمدة التالية:
<! doctype html> <!-tag angularjs لمعالجة صفحة html بأكملها وتوجيه التطبيق-> <html ng-app> <head> <meta charset = "utf-8"> <script src = "http://code.angularjs.org/angular-1.0.min.js ng-init = "name = 'tingfeng'"> <p> الاسم هو: <span ng-bind = "name"> </span> </p> </viv> </body> </html>
NG-APP: يشير هذا التوجيه إلى أن تطبيق AngularJS محدد. عادةً ما يتم وضعها خلف HTML ، يمكنك أيضًا استخدام توجيه NG-APP محليًا. على سبيل المثال ، <div ng-app> ، لن يتم تشغيل برنامج AngularJS إلا في DIV ، مما يعني أنه من هنا ، كل المحتوى هو AngularJs للإدارة.
NG-Model: يشير هذا التوجيه إلى قيم عنصر الربط (مثل قيمة مربع الإدخال) إلى التطبيق.
NG-bind: يربط هذا التوجيه بيانات التطبيق بعرض HTML. استخدم الإرشادات المقابلة لاستخدام AngularJS لتشغيل صفحة HTML. دعنا نلقي نظرة على الكود حول كيفية استخدامه.
في هذا الوقت ، استخدم NG-Model لربط متغير نموذج setName. عند إدخال القيمة في مربع الإدخال ، سيتغير اسم setName المقابل أيضًا. يمكنك اختباره بنفسك.
شرح حول نطاق $
ما هو نطاق $؟ ما هي وظيفتها؟ كيف تستخدمه؟
ببساطة ، Scope هو pojo (plainoldjavaScriptObject) ، على غرار كائن ، مع الخصائص والأساليب ، النطاق هو pojo (plainoldjavaScriptObject) ، على غرار كائن ، مع الخصائص والأساليب ، يوفر النطاق watch () ، watch () وتطبيق () طرق الأدوات. يتم كل من AngularJS 'MVC بمساعدة نطاق $.
الميزات: 1. إنها بيئة التنفيذ (أو النطاق) للتعبير
2. النطاق هو بنية شجرة ، موازية لعلامة DOM ، التي تحتوي على نطاق ، وهو بنية شجرة ، موازية لعلامة DOM ، التي تحتوي على Rootscope عليها في المستوى العلوي.
3. سوف يرث النطاق نطاق الوالدين خصائص وطرق Rootscope.
4. يمكن للنطاق $ نشر الأحداث ، على غرار DOM ، والتي يمكن أن تنتشر لأعلى أو لأسفل.
5. نطاق $ ليس فقط أساس MVC ، ولكن أيضًا الأساس لتنفيذ الربط ثنائي الاتجاه لاحقًا.
مكونات AngularJS
قالب: أي ملفات HTML و CSS مكتوبة ، مما يوضح عرض التطبيق. يمكن لـ AngularJs بناء علامات HTML الخاصة بها في HTML!
وحدة التحكم: على عكس Ajax ، ليست هناك حاجة لكتابة مستمع أو وحدة تحكم DOM لأنه مدمج بالفعل في AngularJS. الفوائد: من السهل الكتابة والاختبار والصيانة والفهم.
بيانات النموذج: يتم توسيع النموذج من AngularJS كسمات كائنات المجال. قد تكون بيانات النموذج كائن JS أو صفيف أو نوع بدائي ، لكنها جميعها تنتمي إلى كائن نطاق AngularJS.
كيف تفهم النطاق في AngularJS؟
وهذا يعني أن النطاق يمكن اعتباره قالبًا ، رابطة تعمل مع النموذج ووحدة التحكم. يستخدم AngularJS النطاق ، وهناك أيضًا معلومات ونماذج بيانات ووحدات تحكم في القالب. يمكن أن تساعد هذه في فصل النموذج والعرض ، لكن كلاهما متزامن! ستنعكس أي تغييرات على النموذج في العرض على الفور ، وسيتم انعكاس أي تغييرات في العرض في النموذج على الفور.
عرض: في AngularJS ، فإن العرض هو التعيين بعد تقديم النموذج من خلال قالب HTML. وهذا يعني أنه بغض النظر عن موعد تغيير النموذج ، ستقوم AngularJS بتحديث نقاط الوصلات في الوقت الفعلي وتحديث العرض.
إنه أكثر سهولة في نشر الرموز!
<! doctype html> <html ng-app = "helloangular"> <head> <meta charset = "utf-8"> <script src = "http://code.angularjs.org/angular-1.0.1.min.js []) ؛ － contlate template helloangularmymodule.controller ("helloangular" ، ['$ scope' ، function helloangular ($ scope) {$ scope.value = {name: 'jiangting'} ؛}]) ؛ </script> </head> <body> <!-mvc-view Angular-> <div ng-controller = "helloangular"> － وحدة التحكم هي helloangular <p> {{value.name}} ، مرحبًا! </p> </div> <!دعنا نلقي نظرة على تطبيق وحدة التحكم ، أي وحدة التحكم ، أي أن وحدة التحكم تدير البيانات ، وتربطها وتعرضها على صفحة HTML.
وحدة AngularJS (الوحدة النمطية) تحدد تطبيقات AngularJS.
يستخدم وحدة التحكم AngularJS (وحدة التحكم) للتحكم في تطبيقات AngularJS.
يحدد توجيه NG-APP التطبيق ، ويحدد وحدة التحكم NG وحدة التحكم. دعونا نستخدم الأعمدة أعلاه لعرضها:
تحدد وحدة AngularJS التطبيقات:
var mymodule = Angular.module ("helloangular" ، []) ؛ － قالب control helloangularتطبيق التحكم في وحدة التحكم في AngularJS:
mymodule.controller ("helloangular" ، ['$ scope' ، function helloangular ($ scope) {$ scope.value = {name: 'jiangting'} ؛}]) ؛فهم الواجهة الأمامية MVC
حول ميزات وحدة التحكم:
1. لا تحاول أخذ وحدة التحكم ، عادة ما تكون وحدة التحكم مسؤولة فقط عن رؤية صغيرة.
2. لا تعمل DOM مباشرة في وحدة التحكم ، فهي ليست مسؤوليتها
3. لا تفعل عمليات تصفية البيانات في وحدة التحكم ، هناك خدمة مرشح
4. لا تنسيق البيانات في وحدة التحكم ، لدى NG عناصر تحكم في النماذج مفيدة للغاية
5. لن يتصل وحدة التحكم ببعضها البعض. سيتم تنفيذ التفاعل بين وحدات التحكم من خلال الأحداث. سيكون من خلال خدمة المرشح. 4. لا تنسيق البيانات في وحدة التحكم. هناك عناصر التحكم في شكل مفيدة للغاية. 5. لن يتصل وحدة التحكم ببعضها البعض. سيتم تنفيذ التفاعل بين وحدات التحكم من خلال الأحداث. سيتم تنفيذها من خلال النطاق.
دعونا نرى كيفية تخصيص نظام الأوامر ، الرمز هو كما يلي:
<! doctype html> <html ng-app> <head> <meta charset = "utf-8"> <script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script> ]
في التوجيه ، هناك ثلاثة معلمات يتم إرجاعها بعد ذلك ، حيث يشير الوسط القالب إلى علامة HTML التي تم إدراجها. الآن سأكتب قطعة من كود HTML بنفسي وأرى كيف أكتبها في AngularJS.
رمز HTML الثابت الأصلي هو كما يلي:
<ul> <li> <span> new1 </span> <p> مجرد اختبار page1 </p> </li> <li> <span> new2 </plan> <p> مجرد اختبار page2 </p> </li> </ul>
طريقة تعديلها إلى AngularJS هي كما يلي:
<! doctype html> <html ng-app> <head> <meta charset = "utf-8"> <script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script> <cript> // $ scope هو scope of the controller. // نطاق AngularJS: يمكن اعتباره قالبًا. بعد بدء التطبيق ، سيتم إنشاء نطاق الجذر ، ونطاق وحدة التحكم هو خليفة نموذجي لنطاق الجذر. وظيفة newsctrl ($ scope) {$ scope.news = [{"content": "new1" ، "introduce": "مجرد اختبار page1"} ، {"content": "new2" ، فواصل} ؛} </script> </head> <body ng-controller = "newsctrl"> <ul> <li ng-repeat = "new in news"> {{new.content}}} <p> {{new.introduce}}} </p> </li> </ul>ما سبق هو تحليل الميزات الأساسية لـ AngularJS التي قدمها لك المحرر (I). آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!