Angular Project Structure பற்றி பார்ப்போம்.

e2e:
End-to-End test ஆகும்.நம்முடைய application-ன் எல்லா testing file-களையும் இந்த folder உள்ளே தான் இருக்கும்.

tslint.json:
இது ஒரு rule மாதிரி ஆகும்.Code Standard Follow பண்ணும்.Semi Colon போட தவறினால் கூட Error வரும்.இவை அனைத்தையும் பார்த்து கொள்வது இந்த file ஆகும்.

angular.json:
நாம் தயாரிக்கும் project எங்கிருந்து தொடங்க வேண்டும் மற்றும் முதலில் எந்த file-ல் load ஆக வேண்டும் என்பதை செய்வதுதான் இந்த file-ன் வேலை ஆகும்.

Package.json:
உங்கள் project-இல் நீங்கள் பயன்படுத்தும் Third Party Library மற்றும் நீங்கள் பயன்படுத்தும் node version மற்றும் angular version போன்ற தகவல்கள் அனைத்தும் இந்த package.json file-இல் தான் இருக்கும்.இது மிகவும் முக்கியமான file ஆகும்.

Node Modules:
உங்களுக்கு எந்தெந்த files தேவை என்பதெல்லாம் package.json-இல் இருக்கும்.
ஆனால்,package.json-இல் இருக்கும் ஒரு file-யை install செய்யும்போது அதற்க்கு தேவையான folder-கள் அனைத்தும் node modules-இல் தான் Store செய்யப்படும்.
Ex:
நான் என் நண்பனுக்கு project கொடுக்கும் போது அதில் node modules என்ற folder-ல் எதுவும் இருக்காது.
காரணம்,இப்பொழுது image gallery library-யின் size 30mb இருக்கும்,அதேபோல் google map library-யின் size 50mb இருக்கும்.இப்படி,உங்கள் project-இல் நீங்கள் 20 library பயன்படுத்தி இருக்கிறீர்கள் என்றால் உங்களுடைய node modules file-இன் size மட்டும் 1gb-க்கு மேலே இருக்கும்.நான் என்னுடைய project-யை என் நண்பனுக்கு கொடுக்கும்போது அது ரொம்ப பெரிய file-ஆக இருக்கும்.அதனால் தான் node modules சேர்த்து share பண்ணமாட்டேன்.பிறகு எப்படி என்னுடைய நண்பனின் கணினியில் node modules-யை கொண்டு வருவது.அதற்க்கு ஒரு தீர்வு இருக்கிறது.package.json-இல் நாம் project-இல் பயன்படுத்திய library list அனைத்தும் இருக்கிறது.என் நண்பன் என்னிடம் இருந்து project-யை வாங்கிய பிறகு அவன் முதலில் இந்த command-யை தான் கொடுக்க வேண்டும்.

npm install

இந்த command-இன் வேலை என்னவென்றால் முதலில் package.json என்ற file-க்கு செல்லும்.அங்கு சென்று அந்த file-இல் இருக்கும் அனைத்து library-யையும் install செய்து விடும்.install செய்யப்படும் library folder-கள் அனைத்தும் இந்த node modules-இல் தான் இருக்கும்.
src:
இது மிகவும் முக்கியமான பகுதி.இங்கு தான் நம்முடைய development வேலை நடக்கும்.
App:
இதன் உள்ளே தான் Root Module,Component,Directives,Routing போன்ற அனைத்து வேலைகளும் இங்கு தான் நடக்கும்.
main.ts:
நம்முடைய project இங்கு இருந்து தான் ஆரம்பிக்கப்படும்.
index.html:
முதலில் இந்த html page தான் open ஆகும்.

angular Project எப்படி வேலை செய்கிறது என்று பார்ப்போம்.

step 1:

முதலில் angular.json என்ற file-க்கு செல்லும்.அங்கு main மற்றும் index என்று இரண்டு key இருக்கும்.
main என்பது project எந்த file-இல் இருந்து தொடங்கப்பட வேண்டும் என்பதை குறிக்கிறது.
index என்பது எந்த page முதலில் load ஆக வேண்டும் என்பதை குறிக்கிறது.

step 2:

அடுத்தப்படியாக main.ts என்ற file-க்கு செல்லும்.அதனுள் bootstrapModule(AppModule) என்ற statement இருக்கிறது.
இந்த bootstrap() என்கிற method-ன் உள்ளே எந்த module name இருக்கின்றதோ அந்த module-ல் இருந்து தான் project ஆரம்பிக்கப்படும்.
இப்பொழுது AppModule-ல் இருந்து start பண்ணப்படுகிறது.
இந்த AppModule எங்கு இருக்கிறது என்றால் app என்ற folder உள்ளே app.module.ts என்ற file ஆகும்.

Step 3:

அடுத்ததாக,app.module.ts என்ற file-க்கு செல்லும்.
அதனுள்,bootstrap:[AppComponent] என்ற statement இருக்கிறது.இந்த statement-ன் அர்த்தம் AppComponent-யை Run செய்து விடவும் என்று அர்த்தம் ஆகும்.
AppComponent என்பது app.component.html என்ற file-யை குறிக்கின்றது.
Step 4:
app.component.html என்ற file-ன் உள்ளே "எனக்கு angular பிடிக்கும்" என்ற statement எழுதி உள்ளேன்.
இப்பொழுது நான் ng serve என்ற command-யை கொடுத்து Run செய்யும்போது இந்த component தான் display செய்யப்படும்.

Output: