Getting Started With Angular 5

Rupesh Kahane
6y
16.9k
0
9

Article

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,

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,

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

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo</title>
</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: