التوجيه ، أنا أفهمها كوسيلة لـ AngularJS لمعالجة عناصر HTML.
نظرًا لأن الخطوة الأولى في تعلم AngularJS هي كتابة التعليمات المدمجة ng-app للإشارة إلى أن العقدة هي عقدة الجذر للتطبيق ، فإن الإرشادات مألوفة بالفعل.
يسجل هذا السجل ببساطة بعض الإرشادات المدمجة ، واستخدامه أولاً ، ثم تحدث عن بعض الأشياء المثيرة للاهتمام.
أوامر مدمجة
جميع التوجيهات المدمجة لها بادئات NG ، ولا ينصح باستخدام هذه البادئة لتوجيهات مخصصة لتجنب النزاعات.
ابدأ ببعض الإرشادات المدمجة الشائعة.
أولاً ، قم بإدراج بعض الإرشادات المدمجة الرئيسية والتحدث لفترة وجيزة عن مشكلات النطاق.
NG-Model
لا يبدو أن هذا التفسير صحيح عند ربط التحكم في النموذج بخصائص النطاق الحالي.
ولكن لا تقلق بشأن أن تكون مضغًا ، فمن السهل فهمه عند استخدام ، على سبيل المثال:
نسخة الكود كما يلي:
<type type = "text" ng-model = "somemodel.someproperty" /> <br>
{{somemodel.someproperty}}
نانوغرام
يسمى هذا التوجيه النطاق الداخلي المهيئة.
تظهر هذه التعليمات عادة في تطبيقات أصغر ، مثل إعطاء عرض تجريبي أو شيء من هذا القبيل ...
نسخة الكود كما يلي:
<div ng-init = "Job = 'Fighter'">
أنا A/an {{Job}}
</div>
إلى جانب NG-Init ، لدينا خيارات أكثر وأفضل.
نانوغرام
في كل مرة تستخدم فيها AngularJS ، لا ينفصل هذا الأمر منه. بالمناسبة ، يتم تضمين $ rootscope.
يعلن عن عنصر NG-App ليصبح نقطة البداية لـ $ rootscope ، والتي هي جذر سلسلة النطاق ، والتي يتم الإعلان عنها عادة في <html> التي تفهمها.
وهذا يعني ، يمكن الوصول إليه من خلال النطاق تحت الجذر.
ومع ذلك ، لا ينصح بإفراط في استخدام $ rootscope لتجنب المتغيرات العالمية التي تطير في جميع أنحاء السماء ، مما يجعل الكفاءة سيئة ويصعب إدارتها.
هنا مثال:
نسخة الكود كما يلي:
<html ng-app = "myapp">
<body>
{{someProperty}}
</body>
<script>
var myapp = Angular.module ('myapp' ، [])
.run (وظيفة ($ rootscope) {
$ rootscope.someProperty = 'hello computer' ؛
}) ؛
</script>
</html>
NG-Controller
نستخدم هذه التعليمات لتثبيت وحدة التحكم على عنصر DOM.
وحدة تحكم؟ في الواقع ، من الجيد أن نفهم هذا حرفيًا ، فلماذا نحتاج إلى وحدة تحكم؟
تذكر أنه عندما يكون AngularJS 1.2.x ، يمكنك أيضًا تحديد وحدات التحكم مثل هذا ...
نسخة الكود كما يلي:
وظيفة OhmyController (نطاق $) {
// ...
}
يحظر هذه الطريقة في AngularJS 1.3.x لأن هذه الطريقة ستجعل وحدات التحكم تطير في جميع أنحاء السماء ، ولا يمكنك معرفة الفرق بين المستويات وكل شيء معلق على $ rootscope ...
يجب أن يكون لدى NG-Controller تعبيرًا كمعلمة ، وبالإضافة إلى ذلك ، يتم توريث أساليب وخصائص نطاق $ السابق من خلال نطاق $ ، ويتم تضمين $ rootscope أيضًا.
فيما يلي مجرد مثال بسيط ، لا يمكن للأسلاف الوصول إلى نطاق الطفل.
نسخة الكود كما يلي:
<div ng-controller = "secestorcontroller">
{{schestorname}}
{{childname}}
<div ng-controller = "childcontroller">
{{schestorname}}
{{childname}}
</div>
</div>
<script>
var myapp = Angular.module ('myapp' ، [])
.controller ('ChildController' ، function ($ scope) {
$ scope.childName = 'Child' ؛
})
.
$ scope.ancestorname = 'sulvor' ؛
}) ؛
</script>
مشكلة النطاق أكثر من ذلك بكثير. دعنا نضعها جانباً في الوقت الحالي ونستمر في النظر إلى الإرشادات المدمجة الأخرى.
نانوغرام
في البداية ، لم أفهم سبب وجود أمر نموذج ، وشعرت العلامة <Porm> بما فيه الكفاية.
أخذ التحقق من النموذج كمثال ، هناك جزء من الكود في المقالة السابقة:
نسخة الكود كما يلي:
<type type = "إرسال" ng-disabled = "mainform. $ invalid" />
أي عندما تكون حالة النموذج غير صالحة ، يتم تعطيل زر الإرسال.
إذا كان المشهد أكثر تعقيدًا قليلاً ، على سبيل المثال ، هناك نماذج أطفال متعددة في نموذج الوالدين ، ويمكن تقديم النموذج الأصل عندما يمر 3 من نموذج الطفل بالتحقق.
ومع ذلك ، لا يمكن أن يكون <port> متداخلًا.
بالنظر إلى هذا السيناريو ، نستخدم توجيه NG-Form لحل هذه المشكلة.
على سبيل المثال:
نسخة الكود كما يلي:
<name form = "mainform" novalidate>
<div ng-form = "form1">
الاسم: <إدخال type = "text" ng-required = "true" ng-model = "name"/> <br>
رقم المعرف: <إدخال type = "number" ng-minlength = "15" ng-maxlength = "18" ng-required = "true" ng-model = "idnum"/>
</div>
<br>
<div ng-form = "form2">
اسم الوصي: <input type = "text" ng-required = "true" ng-model = "gname"/> <br>
رقم معرف الجارديان: <type type = "number" ng-minlength = "15" ng-maxlength = "18" ng-required = "true" ng-model = "gidnum"/>
</div>
<button ng-disabled = "form1. $ invalid && form2. $ invalid"> إرسال الكل </button>
</form>
NG المعاق
بالنسبة لسمات مثل هذه التي تصبح مفعولًا طالما ظهرت ، يمكننا أن نجعلها فعالة في AngularJS من خلال إعادة القيمة الحقيقية/الخاطئة من خلال قيمة إرجاع التعبير.
تعطيل حقول إدخال النموذج.
نسخة الكود كما يلي:
<textarea ng-disabled = "1+1 == 2"> 1+1 =؟ </textarea>
ng-readonly
اضبط حقل إدخال النموذج على القراءة فقط عن طريق إرجاع القيمة الحقيقية/خطأ عن طريق التعبير.
قدم مثالاً ، ويصبح للقراءة فقط بعد 3 ثوان.
نسخة الكود كما يلي:
<type type = "text" ng-readonly = "stoptheWorld" value = "STOP The World After 3S"/>
.run (وظيفة ($ rootscope ، $ timeout) {
$ rootscope.stopTheWorld = false ؛
$ timeout (function () {
$ rootscope.stopTheWorld = true ؛
} ، 3000)
})
نغ
هذا لـ <input type = "checkbox" /> ، مثل ...
نسخة الكود كما يلي:
<type type = "checkbox" ng-checked = "someProperty" ng-init = "someProperty = true" ng-model = "someProperty">
NG- حدد
للاستخدام مع <point> في <select> ، مثال:
نسخة الكود كما يلي:
<blabel>
<type type = "checkbox" ng-model = "isfullstack">
أنا مهندس مكدس كامل
</label>
<select>
<Spoint> الواجهة الأمامية </option>
<Point> الخلفية الخلفية </option>
<Option ng-selected = "IsfullStack"> مكدس كامل !!! </Option>
</select>
ng-show/ng-hide
إظهار/إخفاء عناصر HTML وفقًا للتعبير ، لاحظ أنه مخفي ، ولم يتم إزالته من DOM ، على سبيل المثال:
نسخة الكود كما يلي:
<div ng-show = "1+1 == 2">
1+1 = 2
</div>
<div ng-hide = "1+1 == 3">
لا يمكنك رؤيتي.
</div>
نانوغرام تغيير
إنه ليس onxxx من HTML أو شيء من هذا القبيل ، ولكن ng-xxx.
استخدم بالاقتران مع نموذج NG ، مع أخذ NG-Change كمثال:
نسخة الكود كما يلي:
<type type = "text" ng-model = "calc.arg" ng-change = "calc.result = calc.arg*2" />
<code> {{calc.result}} </code>
أو ، على سبيل المثال ، خيارات NG
{{}}
في الواقع ، هذا هو أيضا توجيه. ربما يبدو الأمر مشابهًا لـ NG-Bind ، ولكن قد يتم رؤيته عندما تجعل الصفحة أبطأ قليلاً.
بالإضافة إلى ذلك ، فإن أداء {{}} أقل بكثير من ng-bind ، لكنه مناسب جدًا للاستخدام.
نانوغرام
يتشابه سلوك NG-bind مع {{}} ، باستثناء أنه يمكننا استخدام هذه التعليمات لتجنب FOUC (فلاش من المحتوى غير المتواصل) ، أي وميض ناتج عن عدم الاستغناء.
NG-Cloak
يمكن لـ NG-Cloak أيضًا حل FOUC بالنسبة لنا. يخفي NG-Cloak العناصر الداخلية حتى يتصل المسار بالصفحة المقابلة.
نانوغرام
إذا كان التعبير في NG-IF خطأ ، فسيتم إزالة العنصر المقابل من DOM بدلاً من إخفاءه ، ولكن عند مراجعة العنصر ، يمكنك أن ترى أن التعبير يصبح تعليقًا.
إذا كانت المرحلة مخفية ، فيمكنك استخدام NG-Hide.
نسخة الكود كما يلي:
<div ng-if = "1+1 === 3">
لا يمكن مراجعة هذا العنصر
</div>
<div ng-hide = "1+1 == 2">
يمكن مراجعتها
</div>
ng-switch
لا يهم إذا كنت تستخدمه بمفردك ، فإليك أمثلة:
نسخة الكود كما يلي:
<div ng-switch on = "1+1">
<p ng-switch-default> 0 </p>
<p ng-switch-in = "1"> 1 </p>
<p ng-switch-in = "2"> 2 </p>
<p ng-switch-in = "3"> 3 </p>
</div>
نانوغرام تكرار
لا أفهم أنه لا يسمى التكرار. باختصار ، هو اجتياز التجميع وإنشاء مثيلات قالب لكل عنصر. يمكن استخدام بعض السمات الخاصة في نطاق كل مثيل ، على النحو التالي:
نسخة الكود كما يلي:
$ index
$ أولاً
دولار آخر
$ الأوسط
حتى
غريب
دون الحاجة إلى شرح ذلك على وجه التحديد ، من السهل رؤية ما هي عليه. هنا مثال:
نسخة الكود كما يلي:
<ul>
<li ng-repeat = "char in
[{'Alphabet': 'k'} ،
{'Alphabet': 'A'} ،
{'Alphabet': 'V'} ،
{'Alphabet': 'l'} ،
{'Alphabet': 'e'} ،
{'Alphabet': 'Z'}] "ng-show =" $ حتى "> {{char.alphabet}} </li>
</ul>
NG-HREF
في البداية ، قمت بعمل طراز NG في حقل نص ، ثم كتبته في HREF مثل هذا.
في الواقع ، لا يوجد فرق بين HREF و NG-HREF ، حتى نتمكن من تجربة هذا:
نسخة الكود كما يلي:
<ul ng-init = "myHref = ''">
<li> <a ng-href = "{{myHref}}"> {{linktext}} </a> </li>
<li> <a href = "{{myHref}}"> انقر ، ولكن ليس بالضرورة العنوان الصحيح </a> </li>
</ul>
.run (وظيفة ($ rootscope ، $ timeout) {
$ rootscope.linktext = 'لم يتم تحميله بعد ، لا يمكنك النقر "؛
$ timeout (function () {
$ rootscope.linktext = "الرجاء النقر"
$ rootscope.myHref = 'http://google.com' ؛
} ، 2000) ؛
})
NG-SRC
وينطبق الشيء نفسه ، أي أنه لا ينبغي تحميل المورد قبل سريان التعبير.
مثال (PS: الصورة جيدة!):
نسخة الكود كما يلي:
<img ng-src = "{{imgsrc}}"/>
.run (وظيفة ($ rootscope ، $ timeout) {
$ timeout (function () {
$ rootscope.imgsrc = 'https://octodex.github.com/images/daftpunktocat-guy.gif' ؛
} ، 2000) ؛
})
نانوغرام فئة
قم بتغيير أنماط الفئة ديناميكيًا مع الكائنات في نطاق ، على سبيل المثال:
نسخة الكود كما يلي:
<style>
.Rred {background-color: red ؛}
.blue {background-color: Blue ؛}
</style>
<div ng-controller = "curtimecontroller">
<button ng click = "getCurrentSecond ()"> احصل على الوقت! </button>
<p ng-class = "{red: x ٪ 2 == 0 ، Blue: x ٪ 2! = 0}"> الرقم هو: {x}} </p>
</div>
.
$ scope.getCurrentSecond = function () {
$ scope.x = new date (). getSeconds () ؛
} ؛
})
ما سبق هو كل المحتوى الموضح في هذه المقالة ، آمل أن تنال إعجابك.