قالب Angular هو مواصفات إعلان ، يتم تقديمها في طريقة العرض التي يراها المستخدم في المتصفح مع معلومات النموذج ووحدة التحكم. إنه DOM ثابت ، بما في ذلك HTML و CSS والعناصر الخاصة الزاوي وسمات العناصر المحددة الزاوي. تشير العناصر والسمات الزاوية إلى أن توسيع السلوك وتحويل القالب إلى DOM إلى DOM الديناميكي.
فيما يلي نوع سمة العنصر الزاوي بالفعل الذي يمكننا استخدامه في القالب:
ملاحظة: بالإضافة إلى إعلان العناصر المذكورة أعلاه في القالب ، يمكننا أيضًا الوصول إلى هذه العناصر في رمز JavaScript.
يعرض مقتطف الكود التالي قالبًا Angular بسيطًا يتكون من علامات HTML قياسية والتوجيه الزاوي ، التعبير المتجه إلى Brace ({{Expression}} ، //www.vevb.com/article/91742.htm).
<! doctype html> <!-ng-app ، تحديد نطاق التطبيق ، قم بإنشاء جذر scop-> <html ng-app> <head> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> <title> </title> http-equiv = "x-ua compatible"> <style type = "text/css"> .ng-cloak {display: none ؛ } </style> </head> <!-ng-cloak ، فئة ستتم إزالتها بعد التجميع ng-controller ، توجيه يستخدم لتحديد أن وحدة التحكم المقابلة للقالب الحالي هي myController-> <body ng-controller = "myController"> <! -> <إدخال type = "text" ng-model = "foo" value = ""/> <!-ng click ، التوجيه ، ما عليك القيام به بعد النقر يمكن أن يكون التعبير ، مثل buttontext = '1' ؛ أو يمكن أن تكون وظيفة استدعاء ، كما هو موضح أدناه. {{buttonText}} ، يستخدم لعرض قيمة buttontext التي يمكن الحصول عليها أو الحصول عليها في سلسلة النطاق الحالية-> <button ng-click = "changefoo ()"> {{buttontext}}} </button> <script src = "../ Angular-1.1.1.js" the text/javascript myController ($ scope) {$ scope.buttontext = "الافتراضيات الافتراضيات" ؛ // تهيئة النموذج buttontext $ scope.foo = "modify me" ؛ // تهيئة نموذج foo $ scope.ChangeFoo = function () {// denare changefoo this.buttontext = th this.foo ؛ } ؛ } </script> </body> </html>في تطبيق صفحة واحدة بسيطة ، يتكون القالب من HTML و CSS والتوجيه الزاوي ، وكله موجود في ملف HTML (عادة ما يسمى index.html). ولكن في بعض التطبيقات الأكثر تعقيدًا ، يمكننا عرض طرق عرض متعددة في صفحة واحدة باستخدام "partials" ، أي تخزين شرائح القالب في ملف HTML منفصل. يمكننا استخدام خدمة $ route (http://code.angularjs.org/1.0.2/docs/api/ng.randroute) و NgView التوجيه (http://code.angularjs.org/1.2/docs/api/ng.directive) يظهر مثال على هذه التقنية في الخطوات السابعة والثامنة من البرنامج التعليمي الزاوي (http://code.angularjs.org/1.0.2/docs/tutorial/index). (سألعب مع هذا الجزء لاحقًا -_-!)
ما سبق هو مجموعة من المعلومات حول AngularJS فهم القوالب الزاوية. سنستمر في إضافة المعلومات ذات الصلة في المستقبل. شكرا لك على دعمك لهذا الموقع!