---
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