المقالة الأولى من سلسلة ملاحظات دراسة AngularJS ، آمل أن أتمكن من الاستمرار في كتابتها. يأتي محتوى هذه المقالة بشكل رئيسي من محتوى http://docs.angularjs.org/guide/ المستند ، لكنه يضيف أيضًا بعض نتائج فهمك ومحاولة.
1. ملخص
تشرح هذه المقالة عملية التهيئة الزاوية وكيفية تهيئة الزاوي يدويًا عند الحاجة إليها.
2. العلامة الزاوية <script>
يستخدم هذا المثال لإظهار كيفية دمج الزاوي من خلال المسار الموصى به لتحقيق التهيئة التلقائية.
<! doctype html> <html xmlns: ng = "http://angularjs.org" ng-app> <body> ... <script src = "angular.js"> </body> </html>
ضع علامة Sciprt في أسفل الصفحة. هذا يمكن أن يمنع تحميل HTML عن طريق تحميل Angular.js ، وبالتالي تقليل وقت تحميل التطبيق. يمكننا الحصول على أحدث إصدار من AngularJS في http://code.angularjs.org. لأسباب أمنية ، لا تشير مباشرة إلى هذا العنوان في المنتج لتحميل البرنامج النصي. ولكن إذا كان الأمر يتعلق فقط بالبحث والتعلم ، فلا يهم ما إذا كان الاتصال المباشر.
SELECT: Angular- [الإصدار] .js هو إصدار مناسب للقراءة ومناسبة للتطوير اليومي وتصحيح الأخطاء.
SELECT: Angular- [الإصدار] .min.js هو نسخة مضغوطة ومثبتة مناسبة للاستخدام في المنتج النهائي.
ضع "NG-APP" في عقدة الجذر للتطبيق. إذا كنت تريد أن تبدأ Angular تلقائيًا في تطبيقك ، فيمكنك عادة وضعه في علامة <html>.
<html ng-app>
إذا كنا بحاجة إلى استخدام بناء جملة التوجيه على غرار المدرسة "NG:" ، فسنحتاج إلى إضافة مساحة XML-Namespace إلى علامة HTML إلى "من فضلك" IE. (هذا سبب تاريخي ، ولا نوصي باستخدام NG :)
<html xmlns: ng = "http://angularjs.org">
3. التهيئة التلقائية
سيتم تهيئة Angular تلقائيًا في الحدث الذي تم تحميله ، وسيجد Angular عقدة جذر التطبيق المحددة من خلال توجيه NG-APP. إذا وجدت ، فإن Angular سيفعل ما يلي:
تحميل التوجيهات المتعلقة بالوحدة.
قم بإنشاء حاقن مرتبط بالتطبيق (مدير التبعية).
حدد عقدة الجذر مع تطبيق NG-APP وابدأ عمل "التجميع" ذي الصلة في DOM. بمعنى آخر ، يمكن استخدام جزء من الصفحة (وليس <html>) كعقدة الجذر ، مما يحد من نطاق الزاوي.
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> bootstrap-auto </title> <style type = "text/css"> .ng-cloak {display: none ؛ } </style> </head> <body> هنا هو الخارج من ng-app ~~ {{1+2}} <div ng-app> هنا هو داخل ng-app ~~~ {{1+3*2}} </div> <script src = "../ angular-1.0.1.1.js" type = "text/javaScript"> </script> </body> </html>ملاحظة: يتم استخدام "ng-cloak" فيه قبل اكتمال تجميع angular.js (نعم! هذا صحيح! إنه قبل اكتمال التجميع ، وليس قبل تحميل AngularJS. لذلك ، إذا كنت ترغب في تجنب هذا الموقف جيدًا ، فإن أفضل طريقة للاستخدام في عملية التحميل ، أو الجمع بين CSS للمعالجة. Class = "NG-Cloak".
4. التهيئة اليدوية
إذا كنا نريد التحكم في عملية التهيئة (على سبيل المثال ، تحتاج إلى تحميل Angular.js من خلال محمل البرنامج النصي أو القيام ببعض العمليات قبل صفحة التجميع الزاوي) ، ثم يمكننا استخدام طريقة بدء التشغيل يدويًا بدلاً من ذلك.
المثال التالي يعادل استخدام NG-APP ، التوجيه:
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> bootstrap-manual </title> <style type = "text/css"> .ng-cloak {display: none ؛ } </style> </head> <body> هنا هو الخارج من ng-app ~~ {{1+2}} <div id = "rootofapp"> هذا هو داخل ng-app ~~~ {{1+3*2}} </div> <script src = "../nogular-1.1.js" type = "text/javaScript"> Angular.Element (document) .Ready (function () {Angular.Bootstrap (Angular.Element (document.getElementById ("rootofapp"))) ؛}) ؛ </script> </body> </html>أي ، يمكن كتابة رمزنا في الخطوات التالية:
1. بعد تحميل الصفحة والرمز الآخر ، ابحث عن عقدة الجذر لقالب التطبيق ؛
2. استدعاء Angular.Bootstrap واتركه في تجميع القالب في تطبيق ملزم قابل للتنفيذ في اتجاهين!
سنستمر في إضافة مقالات ذات صلة في المستقبل. شكرا لك على دعمك لهذا الموقع!
المقالات ذات الصلة:
تم تجهيز Bootstrap AngularJS بالإطار الأمامي - جزء التحكم JS
تم تجهيز Bootstrap AngularJS بإطار عمل أمامي - الصفحة الأساسية
Bootstrap AngularJS مزود بإطار عمل أمامي - عمل إعداد
AngularJS Bootstrap شرح مفصل وعينة رمز