Getting Started With Angular 5

0
694
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 1Open 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.

C:\Angular>ng new FirstApp
Note
Make sure you have installed npm.
After successful creation in command prompt you will get a message as:
CoderFunda

Folder structure will look like:

CoderFunda
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:
import { Component } from '@angular/core';  
  
@Component({  
  selector: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.css']  
})  
export class AppComponent {  
  title = 'app';  
}

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

<!doctype html>  
<html lang="en">  
<head>  
  <meta charset="utf-8">  
  <title>Demo</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>
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.
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 { }
Assets
  • User can add their own css images in this folder:
src/assets/images/coderFunda.png

Now you can access them like this

<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:
// The file contents for the current environment will overwrite these during build.  
  // The build system defaults to the dev environment which uses `environment.ts`, but if you do  
  // `ng build --env=prod` then `environment.prod.ts` will be used instead.  
  // 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:
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:

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

LEAVE A REPLY

Please enter your comment!
Please enter your name here