Post
Ask Question

Getting Started With Angular 5

Introduction
  • Angular is a component-based architecture
  • In this article we will learn project folder structure of Angular 5 and how to set up your first Angular application.
Prerequisites

Node.js, Node Packange Manager (NPM)
 
Create your first application

Step 1

Open folder from your drive and open command prompt from that folder and type the below command which will create a New Angular project with folder structure like the image given below.
  1. C:\Angular>ng new FirstApp
Note

Make sure you have installed npm.

After successful creation in command prompt you will get a message as,
 
 
Folder structure will look like,
 
 
e2e
  • Stands for end to end, also known as integration testing.
  • It helps to test wheather our components are working correctly together or not.
  • Angular CLI includes unit tests.
  • e2e tests are powered by a testing library; i.e., Protractor.
  • User can can test scenarios on browser.
  • Options supported by ng serve are also supported by ng e2e, like config, element-explorer, serve, specs, suite, webdriver update.
node_module

Here you will get all third party libraries on which your application is dependent.
 
src

Contains the actual source code.

App folder
  • User can develop their own application in src/app folder which is root folder.
  • This folder contains modules & components.
  • This folder contains index.html.
  • App folder contains,

    • app.component.css - component CSS file, contains style sheet.
    • app.component.html - This is component template file, used as a master page. User can add header, content placeholder, footer into it.
    • app.component.ts - component file, which contains code as below,
  1. import { Component } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-root',  
  5.   templateUrl: './app.component.html',  
  6.   styleUrls: ['./app.component.css']  
  7. })  
  8. export class AppComponent {  
  9.   title = 'app';  
  10. }  
Here user can import files as per syntax given above.

Component section defines the selector, template and style location, default selector is 'app-root' which is definded in index.html.

Template URL contains component html file name and style URL contains style sheet .

Every application has one root component. Here app component is root component.
  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.   <meta charset="utf-8">  
  5.   <title>Demo</title>    
  6. </head>  
  7. <body>  
  8.   <app-root></app-root>  
  9. </body>  
  10. </html>  
app.module.ts
  • Top level module configuration file.
  • This file is used when you are creating a your first app. By using bootstrap: [AppComponent] default component gets loaded.
  1. import { BrowserModule } from '@angular/platform-browser';  
  2. import { NgModule } from '@angular/core';  
  3.   
  4. import { AppComponent } from './app.component';  
  5.   
  6. @NgModule({  
  7.   declarations: [  
  8.     AppComponent  
  9.   ],  
  10.   imports: [  
  11.     BrowserModule  
  12.   ],  
  13.   providers: [],  
  14.   bootstrap: [AppComponent]  
  15. })  
  16. export class AppModule { }  
Assets
  • User can add their own css images in this folder:
  1. src/assets/images/coderFunda.png
Now you can access them like this:
  1. <img src="./assets/images/coderFunda.png" alt="Logo">
Environment
  • Store configuration settings for different environments.
  • There are two files in this folder.
If you open environment.ts then you will get the below content:
  1. // The file contents for the current environment will overwrite these during build.  
  2.   // The build system defaults to the dev environment which uses `environment.ts`, but if you do  
  3.   // `ng build --env=prod` then `environment.prod.ts` will be used instead.  
  4.   // The list of which env maps to which file can be found in `.angular-cli.json`.  
 Here Angular provides the best feature. Suppose you would like to compile the application into an output directory then:
  • To build solution and deploy it on stage / local system then use ng build
  • To build solution and deploy on production then use ng build --prod
Imp -  The build artifacts will be stored in the dist/ directory.
 
index.html - Contains our application file which cannot have any references of style sheet references or any script references.
 
main.ts - Main module; i.e., we can call this the starting point of our application and boostrap our Angular web application using bootstrapModule method
 
angular-cli.json
  • This is the standard configuration file of your application.
  • Angular CLI loads its configuration from this file
  • It runs Webpack to build and bundle all JavaScript and CSS code
Step 2

Now open FirstApp folder & using command prompt type the below command which will compile your application and open it in browser. Here use  -o for opening: 
  1. C:\Angular\FirstApp>ng server -o  
After successfull webpack compilation you will see command prompt as,
 
 
 
 If you get a message that port is already in use  then change the port using this command,
  1. ng serve --port NewPortNumber  
Step 3

Final output is like this,
 
 
Summary

In this article you learned Project folder structure of Angular 5 and how to set up your first Angular application 


Similar Articles