freeCodeCamp/guide/arabic/miscellaneous/front-end-file-structure/index.md

title	localeTitle
Front End File Structure	هيكل ملف النهاية الأمامية

الأشياء الأولى أولاً: جميع الملفات التي تواجه المستخدم والملفات الزاوي موجودة في / العميل / التطبيق /

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 في متناول اليدين.

السابق NEXT