14 lines
3.1 KiB
Markdown
14 lines
3.1 KiB
Markdown
|
---
|
|||
|
title: Front End File Structure
|
|||
|
localeTitle: هيكل ملف النهاية الأمامية
|
|||
|
---
|
|||
|
الأشياء الأولى أولاً: جميع الملفات التي تواجه المستخدم والملفات الزاوي موجودة في **/ العميل / التطبيق /**
|
|||
|
|
|||
|
1. **app.js** : يحدد تطبيقك ويتضمن بعض الوظائف الأساسية على مستوى التطبيق ، وربما لا تحتاج إلى الفوضى معه ما لم تحاول إضافة المزيد من التبعيات إلى تطبيقك. لسنا قلقون بشأن ذلك الآن.
|
|||
|
2. **app.css** : ورقة أنماط على مستوى التطبيق ، يمكنك وضع الأنماط هنا إذا كنت ترغب في ذلك ولكني **أنصحك** بوضعها في **main / main.css** ، حيث أن هذه الأنماط هي أيضًا واسعة على مستوى التطبيق.
|
|||
|
3. **main /** : يحتوي هذا المجلد على ما يراه المستخدم أولاً عند تحميل موقعك. **main.html** هو قالب الصفحة ، يقوم **main.js** بتوجيه المستخدم إلى **main.html** عندما ينتقل المستخدم إلى دليل المستوى الأعلى لموقعك على الويب - أي ، http: //yourapp.wherever.itis/ بدون / أخرى / عنوان url / التسلسل الهرمي . ستتعرف أيضًا قريبًا على أنه يمكنك تحديد تطبيق / عنوان url / heirarchy / fairly / arbitrarily . لن تحتاج إلى تعديل **main.js** أو **main.controller.spec.js** ، لذلك دعونا لا **نشعر** بالقلق حيال ذلك الآن. إذا نظرت من خلال ملف **main.html** فسترى أنه يستخدم _ng-repeat_ لإظهار _الأشياء_ في _awesomeThings_ . من أين تحصل على _أشياء رائعة_ ؟
|
|||
|
4. **main / main.controller.js** : كل وظائف javascript التي تريد استخدامها للتفاعل مباشرة مع المستخدم ، اذهب هنا! ستضع وظائف هنا للتفاعل مع واجهة برمجة التطبيقات الخاصة بك ، وتحديث طرق _العرض لمستخدمك_ ، إلخ. هنا ، يتم سحب _الأشياء الرائعة_ من قاعدة البيانات وإضافتها إلى النطاق المحلي بحيث يمكن عرض HTML الخاص بك عليها! اليس رائعآ! سنصل إلى إضافة كائنات مخصصة إلى قاعدة البيانات الخاصة بك في دقيقة واحدة.
|
|||
|
|
|||
|
عظيم! الآن أنت تعرف كيف تتفاعل مع المستخدم! ولكن ماذا لو كنت تريد أن يكون لتطبيقك صفحة أخرى تفعل شيئًا آخر؟ ربما **main.html** يعرض الصفحة الرئيسية ، ولكنك تريد صفحة تعرض نموذجًا لإضافة استطلاع؟ ربما http: //yourapp.wherever.itis/newpage ؟ هذا هو المكان الذي يأتي فيه مولد yeoman في متناول اليدين.
|
|||
|
|
|||
|
[السابق](http://forum.freecodecamp.com/t/guides-to-back-end-projects/14265) NEXT
|