Getting Started With Angular 5

0
245
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.

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>ActelionDemo</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