Angular project is the well designed project structure. In this post we will see what are the project structure of angular 5.
The main part of project structure as given below
1. Package.json
>> It comes from traditional nodejs project and it defines all the npm based dependencies , dev-dependencies and npm scripts etc required for the angular project.
2. tsconfig.json
>> This is the root directory for the typescript project. It is also used to define different typescript compilation related options.
3. angular-cli.json
>> This file is used by @angular/cli tool which is used to automate the angular workflow by automating different operations related to development and testing of angular apps. .angular-cli serves as a blueprint to the @angular/cli tool.
4. Src
>> It is the main part of angular project, where we will write the code.
In the src directry we will the following files as given below
1. app:
>> This is the directory where we will define the building block of our angular project like Modules,Components,Services etc.
2. assets:
>> this directory contains all the static assets of our app like images etc.
3. Environments :
>> environments directory hold our environment specific settings , e.g. different configuration files for development , testing and staging etc.
4. Index.html
>> It is the landing page where our angular app bootstraps. It also contains app-root selector which comes from angular app.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>MyApp</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <app-root></app-root> </body> </html>
5. main.ts
>>Main.ts is the main typescript file which is used to bootstrap the angular module.
The check for environment is also performed here .
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
>> in the above code AppModule is being imported from app.module.ts file which is located in app folder
App folder contains the following files
It contains Modules, Components,Components.css, Component template and Services as shown in above image.
1. app.module.ts
>> In this file we imports the angular module( BrowserModule,NgModule) and components (AppComponent)
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
2. app.components.ts
>> This file simply defines an angular component and this is where we have defined our app-root selector
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}
3. app.component.html
>> This is the template file for our app component and this represents the visual part of our component which is rendered in the browser.
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<img width="300" alt="Angular Logo" src="Logo.png">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
</li>
</ul>
4. app.component.css
>> This is the file for applying css in entire angular application.
Chandradev's Blog 