AngularJS هو إطار تطوير MVC في الواجهة الأمامية المتطورة التي طورتها Google.
موقع AngularJS الرسمي: https://angularjs.org/ الموقع الرسمي لديه عرض توضيحي ، وقد يُطلب من FQ الوصول إليه
مجتمع AngularJS الصيني: http://www.angularjs.cn/ مناسبة للمبتدئين
ملف مرجع: https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js
تلاحظ عند استخدام Angular
اقتبس مكتبة AngularJS: https: //github.com/litengdesign/angularjstest/blob/master/angular-1.0.1 .... يمكنك تنزيله على github في المثال في هذا القسم.
تحتاج إلى إضافة ng-app = "appname" إلى المنطقة التي تستخدمها ، أو مباشرة ng-app (Global).
اضبط وحدة التحكم NG-Controller = "Ctrl".
يرجى ملاحظة النقاط التالية عند اختبار المثال
تحتاج إلى تقديم رمز AngularJS قبل الرأس. يستخدم المؤلف Angular-1.0.1.min.js. يرجى الانتباه إلى فرق الإصدار.
يتم تشغيل جميع الأمثلة الصغيرة في المناطق التالية ، تذكر إضافة NG-APP إلى المنطقة النشطة.
فيما يلي بعض الحالات الصغيرة لتوضيح التعليمات الشائعة واستخدام الافتراضيات AngularJS.
Hello World Program (ربط البيانات المزدوج)
استخدم ng-model = {{name}} لربط البيانات
نسخة الكود كما يلي:
<label for = "name"> الاسم: </label>
<type type = "text" ng-model = "name" id = "name"/>
<hr>
مرحبًا: {{name || 'Liteng'}}
http://2.liteng.sinaapp.com/angularjstest/helloangularjs.html
حالة صغيرة من استخدام الحدث ملزمة
نسخة الكود كما يلي:
<viv>
سعر الوحدة: <إدخال type = "number" min = 0 ng-model = "price" ng-init = "price = 299">
الكمية: <إدخال type = "number" min = 0 ng-model = "Quantity" ng-init = "Quantity = 1">
<br>
إجمالي السعر: {{(السعر) * (الكمية)}}
<dt>
<dl> ملاحظة: </dl>
<dd> الإدخال الذي يتضمن html5: <a href = "http://www.w3school.com.cn/html5/att_input_type.asp
<dd> ng-init: تعيين القيمة الأولية </dd>
</dt>
</div>
http://2.liteng.sinaapp.com/angularjstest/event-bind.html
NG-Init: يمكن تحديد قيمة السمة افتراضيًا
نسخة الكود كما يلي:
<p ng-init = "value = 'hello world'"> {{value}} </p>
http://2.liteng.sinaapp.com/angularjstest/ng-init.html
NG-Repeat: يستخدم لتكرار البيانات المشابهة لـ I للحصول على معلومات في JS
نسخة الكود كما يلي:
<div ng-init = "friends = [{name: 'jhon' ، العمر: 25} ، {name: 'mary' ، age: 28}]"> </viv>
<p> لدي {{friends.length}} أصدقاء. هم </p>
<ul>
<li ng-repeat = "friend in friends">
[{{$ index+1}}]: {{friend.name}} العمر هو: {{friend.age}}
</li>
</ul>
http://2.liteng.sinaapp.com/angularjstest/ng-repeat.html
NG-Click: DOM Click Event
نسخة الكود كما يلي:
<div ng-controller = "ctrl">
<button ng-dblclick = 'showmsg ()'> {{a}} </button>
</div>
<script>
وظيفة ctrl ($ scope) {
$ scope.a = 'hello' ؛
$ scope.showmsg = function () {
$ scope.a = 'World' ؛
}
}
</script>
http://2.liteng.sinaapp.com/angularjstest/nglick.html
NG-Show: Set Element Display
ملاحظة: ng-show = "! xx": أضف قبل قيمة السمة! وهذا يعني أنه من المؤكد أن يتم عرضه ، إن لم يتم إضافته! لم يتم عرضه إذا كان غير مؤكد
نسخة الكود كما يلي:
<div ng-show = "! show">
ng-show = "! show"
</div>
<div ng-show = "show">
ng-show = "show"
</div>
http://2.liteng.sinaapp.com/angularjstest/ng-show.html
NG-Hide: تعيين عنصر مختبئ
نسخة الكود كما يلي:
<div ng-hide = "aaa">
ng-hide = "aaa"
</div>
<div ng-hide = "! aaa">
ng-show = "! aaa"
</div>
http://2.liteng.sinaapp.com/angularjstest/ng-hide.html
استخدم NG-Show لإنشاء تأثيرات التبديل
نسخة الكود كما يلي:
<h2> تبديل </h2>
<a href ng-click = "showlog =! showlog"> show logo </a>
<div ng-show = "showlog">
<img ng-src = "http://liteng.org/sites/default/files/logo.png">
</div>
http://2.liteng.sinaapp.com/angularjstest/ng-toggle.html
على غرار NG: على غرار النمط الافتراضي
يرجى ملاحظة تنسيق الكتابة هنا: يجب تضمين السلاسل في اقتباسات
نسخة الكود كما يلي:
<div ng-style = "{width: 100+'px' ، الارتفاع: 200+'px' ، backgroundColor: 'Red'}">
صندوق
</div>
http://2.liteng.sinaapp.com/angularjstest/ng-style.html
مرشح: حقل المرشح
نسخة الكود كما يلي:
<viv> {{9999 | number}} </div> <!-9،999->
<viv> {{9999+1 | الرقم: 2}} </div> <!-10،000.00->
<viv> {{9*9 | currency}} </div> <!-$ 81.00->
<viv> {{'Hello World' | ExtraCcase}} </div> <!-Hello World->
http://2.liteng.sinaapp.com/angularjstest/filter.html
ng-template: يمكن تحميل القوالب
نسخة الكود كما يلي:
<div ng-include = "'tpl.html'"> </div>
tpl.html
نسخة الكود كما يلي:
<h1> مرحبًا </h1>
http://2.liteng.sinaapp.com/angularjstest/show-tpl.html
$ HTTP: طريقة مشابهة لـ AJAX تعمل بشكل جيد للغاية
نسخة الكود كما يلي:
<div ng-controller = "testctrl">
<h2> http-method 1 </h2>
<ul>
<li ng-repeat = "x in names">
{{x.name}}+{{x.country}}
</li>
</ul>
</div>
<h2> الطريقة 2 </h2>
<div ng-controller = "testctrl2">
<ul>
<li ng-repeat = "y in info">
{{y.aid}}+{{y.title}}
</li>
</ul>
</div>
<script>
// الطريقة 1
var testctrl = function ($ scope ، $ http) {
var p = $ http ({
الطريقة: "الحصول على" ،
عنوان URL: "JSON/DATE.JSON"
}) ؛
P.Success (الوظيفة (الاستجابة ، الحالة ، الرؤوس ، التكوين) {
$ scope.names = response ؛
}) ؛
p.error (وظيفة (الحالة) {
console.log (الحالة) ؛
}) ؛
}
// الطريقة 2
وظيفة testctrl2 (نطاق $ ، $ http) {
$ http.get ('json/yiqi_article.json'). النجاح (وظيفة (استجابة) {
$ scope.info = الرد ؛
}) ؛
}
</script>
http://2.liteng.sinaapp.com/angularjstest/ajax.html
جميع الرموز المذكورة أعلاه: https://github.com/litengdesign/angularjstest
العرض التجريبي المنفذ: http://2.liteng.sinaapp.com/angularjstest/index.html
أما بالنسبة لجهاز التوجيه وتوجيه AngularJS ، فسوف أخرجه بشكل منفصل في المرة القادمة.