Brand

First Application in Angular

We use the below command to create an application in Angular. Lets create an application named myfirstapp

ng new myfirstapp

It will prompt for Routing and CSS, press “y” and then enter. Now it will take some time to set up the application.

Below screenshot shows the output of this command.

angular-firstApp

The project will be created successfully and installs all the necessary packages needed to run angular.

Now lets understand the project folder structure. Which is very important in Angular.

cd myfirstapp  // change the directory or go to project root directory
ls -ltr  //will list all the directory and files
Below screenshot will show the folder structure inside project root directory

angular-project-root-directory

Before stepping into folder structure lets see what we got when we used ng command to setup our project. Ng comes with a http server and We can utilize the same with below command.

ng serve 
ng serve --port 4300  // use this command to run your application in 4300
Below screenshot shows the output of above command.

angular-serve

You can see, the application is running with default port 4200 and it can be accessed via http://localhost:4200

Below screenshot show the application is running in browser (localhost:4200)

angular-project-output

Below screenshot shows the folder and file structure from Visual Studio Code Editor. Please you can use any editor or IDE.

structure-firstApp-angular

  • Src/ – Folder where we code for this project
    1. app/ – where all the project files are available
    2. assets/ – we can store all our assets here and can be accessed directly
    3. environment/ – to store env files which holds different config for dev,prod separately
  • node_modules/ – where all the npm packages are installed.
  • E2e/ – Used for integration testing
  • Angular.json – contains the project name and cli config
  • Package.json – contains the libraries and dependencies required for this project.
  • Tsconfig.json – specifies the base TypeScript and Angular compiler options for this project
app Folder:

app folder contains below files, created by Angular CLI during project creation. Angular apps are modular and it has its own modular system called NgModule.

  • App.module.ts – Each Angular app will have at least one module class. The root modules is called called AppModule, which resides inside this file. When we launch an app, it is launched by bootstrapping NgModule. It has few important properties. 
    	import { BrowserModule } from '@angular/platform-browser';
	import { NgModule } from '@angular/core';

	import { AppRoutingModule } from './app-routing.module';
	import { AppComponent } from './app.component';

	@NgModule({
	  declarations: [
		AppComponent
	  ],
	  imports: [
		BrowserModule,
		AppRoutingModule
	  ],
	  providers: [],
	  bootstrap: [AppComponent]
	})
	export class AppModule { }
    1. Declarations – reference to the components, directives and pipes are stored.
    2. Imports – Modules needed for the components are declared here
    3. Providers – services which are created are declared here, so that to accessed anywhere inside the app.
    4. Bootstrap – Main application or the root component is declared here.
  • App.component.css – a place where we can write the css styles which applied to overall app.
  • App.component.html – its a html code, comes with default html code during app creation.
  • App.component.spec.ts – used to create unit test for this component.
  • App.component.ts – it contains the class for this component, here we do all our processing like connecting to different components, validation, connecting to services etc.
  • App-routing.module.ts – It contains all the routing declarations.
Index.html

It contains <app-root></app-root> which is a selector used in app.component.ts file and it will display the details from app.component.html.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Myfirstapp</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>
Previous
Next
Subscribe Now