الغرض: تطبيق قوالب Angularui على المشاريع الحالية
الخطوات كما يلي:
اضغط على القائمة لتعديل الواجهة التجريبية
تعلم كيف يحمل Angularui جميع الصفحات. من أجل تعيين قالب تحميل مخصص ، ابحث عن هذه الفقرة في العرض التوضيحي/demo.js
نسخة الكود كما يلي:
// عندما يكون #/،/التمرير ، إلخ ، اطلب صفحة <base href = ""> + home.html في index.html
app.config (function ($ routeprovider) {
$ conoureprovider. hen ('/' ، {templateUrl: 'home.html' ، 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}) ؛
}) ؛
مواصلة قراءة البرنامج النصي للتنفيذ demo.js
يختفي عنصر السحب
سحب وإسقاط لتبديل الصور
وحدة التحكم الرئيسية
l195 $ rootscope. $ on ('$ routechangestart' ، function () {}) ؛ و L199 $ rootscope. $ on ('$ routechangesuccess' ، function () {}) ؛ تعلم الاستخدام. $ على () لربط الأحداث وتغيير أحداث التجزئة يمكن أن يؤدي إلى الكود هنا. بعد المقارنة ، وجدت أن الطريقتين الأساسيتين متماثلتين. الفرق هو أن Routechangestart يتم تشغيله أولاً ، ويتم تشغيل Routechangesuccess لاحقًا.
صفحة التمرير: شريط التمرير يقوم بتحميل البيانات $ SCOPE.SCROLLITEMS = SCROLLITEMS ؛ Scrollitems هي مجموعة من القوائم. قم بالتمرير إلى الحدث السفلي (يتطلب تحديثًا مسجلاً)
تُظهر بيانات JSON في الشريط الجانبي للدردشة على اليمين ما إذا كانت عبر الإنترنت أم لا. بالنسبة لي ، ليس لدي القدرة على القيام بوظيفة الدردشة في الوقت الحالي
صفحة النموذج
تغيير قالب bootstrap الأصلي
1. وفقًا للخطوة 2 أعلاه ، هناك عاملان يحددان تحميل الصفحة:
نسخة الكود كما يلي:
1 مسار الأساس => base_url ()
2 تجزئة مسار الصفحة المقابلة => وحدة التحكم/الطريقة
3 إخفاء الفهرس
/config/config.php $ config ['index_page'] = '' ؛ // L29 تم ضبطه على فارغ
.htaccess
إعادة كتابة على
rewritecond $ 1!^(LightApp | LightApp/.php | index/.php | public | robots/.txt) #allow lightapp |
rewriterule ^(.*) $ /index.php/$1 [l]
config.yaml
- إعادة الكتابة: if (! is_file () &&! is_dir ()) goto "index.php؟ ٪ {query_string}"
# إذا لم يكن عنوان URL ملفًا ولا دليلًا ، فافاع إلى index.php؟ ٪ {query_string} ولا يمكن وضعه خلف كرون
4 تعديل مسار القائمة في demo.js
2. استبدل مسار الموارد <؟ = __ public __؟> ، نسخ 2 JS و 3 CSS ملفات
3. قم بإنشاء دليل جديد ونصوص لتخزين JS و CSS للمشروع
4. انسخ خطوط الدليل الخط إلى الأماكن العامة
5. انسخ الصفحة home.html ، sidebar.html صفحة
ملخص: في هذه المرحلة ، تم تطبيق قالب المشروع.