تعريف AngularJS والميزات
1.Google Front Open Source Framework
2. MVVM (نموذج عرض نموذج العرض): سوف يتفاعل النموذج مع ViewModel (من خلال كائن نطاق $) وسيستمع إلى التغييرات في النموذج. يمكن إرسالها وتقديمها من خلال العرض ، ويظهر HTML الكود الخاص بك
3. راحة مريحة
4. ربط البيانات وحقن التبعية
5. يمكنك تشغيل HTML مثل XML. يمكن لـ AngularJs إكمال الإعدادات ذات الصلة من خلال برنامج التحويل البرمجي والتوجيهات الخاصة به.
6. يتم تمرير القالب كعنصر DOM إلى برنامج التحويل البرمجي Angular
7. AngularJS يمتد HTML من خلال التوجيهات وربط البيانات إلى HTML من خلال التعبيرات.
بناء تطبيق AngularJS
أضف علامة Angular <Script> إلى علامة <head>
نسخة الكود كما يلي:
<script src = "// cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"> </script>
أضف توجيه NG-App to <body> العلامة
نسخة الكود كما يلي:
<الجسم
ng-app = "guetonline"
NG-Controller = "MainController"
>
قم بإنشاء ملف نصي جديد وملف App.js ، وتحديد وتكوين جميع الوحدات والاعتمادات في App.js
نسخة الكود كما يلي:
var app = Angular.module ('Guetonline' ، [
'ngroute' ،
'mobile-angular-ui' ،
"mobile-angular-ui.gesures"
]) ؛
تحديد وحدات التحكم والخدمات والتعليمات في تطبيق الوحدة النمطية
نسخة الكود كما يلي:
App.Controller ('mainctrl' ، function ($ rootscope ، $ scope ، $ http) {}) // controller
App.Service ('mainsevicel' ، function () {}) // service
app.directive ('dragtodismiss' ، function () {}) // التعليمات
تحديد الطرق في تطبيق الوحدة النمطية
نسخة الكود كما يلي:
app.config (function ($ routeprovider) {
$ routeprovider. at ('/' ، {templateUrl: 'index/home' ، reloadonsearch: false}) ؛
$ routeprovider. at ('/scroll' ، {templateUrl: 'scroll.html' ، aroadonsearch: false}) ؛
$ routeprovider. at ('/toggle' ، {templateUrl: 'Toggle.html' ، Reloadonsearch: false}) ؛
$ routeprovider. at ('/tabs' ، {templateUrl: 'tabs.html' ، aroadonsearch: false}) ؛
$ routeprovider. عندما ('/orcordion' ، {templateurl: 'arcordion.html' ، aroadonsearch: false}) ؛
$ routeprovider. at ('/overlay' ، {templateurl: 'overlay.html' ، reloadonsearch: false}) ؛
$ routeprovider. at ('/forms' ، {templateUrl: 'forms.html' ، Reloadonsearch: false}) ؛
$ routeprovider. at ('/sropdown' ، {templateUrl: 'REPDOWN.HTML' ، RELOADONSEREAD: false}) ؛
$ routeprovider. at ('/drag' ، {templateUrl: 'Drag.html' ، Reloadonsearch: false}) ؛
$ routeprovider. at ('/carousel' ، {templateUrl: 'carousel.html' ، reloadonsearch: false}) ؛
$ conoureprovider. at ('/news/fonselive_view' ، {templateUrl: '/news/imploy_view' ، reloadonsearch: false}) ؛
}) ؛
يتبع. . الخطوة التالية هي معرفة المزيد من الخطوات المتعمقة ، وهناك مرشحات