Jump Start in Angular 6

In today's’ web development world, Angular is known as one of the most important and used frameworks. Recently, Angular 6.0 version has been launched. So, in this document, we will discuss how to develop the first component or program in Angular 6.0.

What Is Angular?

The Angular framework is an open source JavaScript-based framework. It was actually developed by Misko Havery and Adam Abrons in 2009. This framework supports the JavaScript-based MVC (MVVM) framework. As per the Google, the definition of the angular is a below - 

“AngularJS is a structural framework for dynamic web applications. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application components clearly and succinctly.”

The most common advantages for which developers like to use Angular from their projects are –

• It supports MVC Concept
• It always supports SPA Application (Single Page Applications)
• It Supports Client Side Templating
• In this framework, we can perform unit testing very easily.

Prerequisite for Angular

To start development in Angular 6.0, we need to follow the below perquisites:

• Install Node.js.
• Install TypeScript 2.7 or above.
• Microsoft Visual Studio or Visual Code for writing code.
• Install lite-server (in case you are using Visual Code) to host and run the application

So, before starting with Angular 6.0, we first need to know how to install the TypeScript tool. To install TypeScript, we first need to install Node.js. The latest version of Node.js can be downloaded from the below URL:

https://nodejs.org/en/

To install TypeScript, we can download the latest version of TypeScript by either using the command line argument in Node.js or using Visual Studio to directly download it from the NuGet Package Manager.

Command line prompt to install TypeScript:

npm install -g typescript

Command line prompt for install Lite-Server:

npm install -g lite-server

Project Configuration

Now, we will discuss how to set up the environment for an Angular 6 project. In this post, we will develop our first program in Angular 6. Before getting started, let’s discuss the project configuration files which are required in Angular. An Angular project always contains 3 major configuration files. They are:

• tsconfig.json – This file contains the compiler options which are required to run the projects.
• package.json – It is basically a JSON file which contains all the necessary information regarding different packages which are required to run or execute the Angular application.
• system.config.js – This file act as a configuration file. This file is used to load Node modules which are compiled in TypeScript at the time of execution.

What Is a Component?

The Angular framework is basically a component-based framework (from Angular 2.0 or above). SO, we first need to understand what components are and how they can be defined. In Angular, a component is just like a class in other OOP-based languages. This class is basically defined to display any element on the application screen. So, as per our requirements, we can create, update, or delete any existing component in the application. In TypeScript, we can define the component class with the help of the @Compoent() decorator.

Component Configuration

The @Component decorator actually used to decorate a TypeScript class as a component object. It is a function which takes different types of parameters. In the @component decorator, we can assign different values to properties to fix the behavior of the components. The most used properties are given below:

• selector: A string value which represents the component on the browser at execution time.
• template: The value of this property contains the basic HTML code which we will need to display in the browser. It acts as an inline template.
• templateUrl: Another way of defining the HTML tags in the component. We can create HTML files with proper HTML tags and then we need to provide that file name with the relative path in this attribute. So that at execution time the Angular loader will display the HTML code in the browser for the application. Some people call this process 'external templating.'
• moduleId: It is used to resolve the related path of the template URL or style URL for the component objects.
• styles or stylesUrls: It is used to provide the style of the components. We can define inline CSS using styles attribute or provide CSS files with related URLs in the styleUrls attribute.
• providers: This attribute is basically used for dependency injection purposes. We can inject services, packages, components, etc. using this attribute.

Create an Angular Module

As we already discussed, everything in Angular 6 belongs to an Angular Module. So, for developing the root component, we first need to declare our Angular module. The Angular module can be defined by creating a TypeScript class decorated with the NgModule decorator. In order to use it, we first need to import it as follows:

import { NgModule } from '@angular/core';
@NgModule()
export class SampleModule { }

Create Angular Component

Finally, we reach a position where we need to create our first component using Angular 6. It can be done by creating a class decorated with @Component decorator which defined within the “@angular/core” library. Below the sample code for the angular component – 

import { Component } from "@angular/core";
@Component({
    selector: "welcome-prog",
    template: `<h1>First Program in Angular. Welcome to Angular World</h1>
                <br>
                <a  href="../index.html" style="color:red;">
                    <h3>Return to Home</h3>
                </a>
                `
})
export class WelcomeComponent {
    constructor() {
    }
}

Add Component to Module

Now, the next step is to add the component within the angular module. It can be done using “declarations” option within “NgModule” decorator. For adding the component, we need to import the component within the module by using import keyword.

import { NgModule, NO_ERRORS_SCHEMA, } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from "@angular/forms";
import { HttpModule } from '@angular/http'; 
import { WelcomeComponent } from './day1/app.component.welcome';




@NgModule({
    imports: [BrowserModule, FormsModule, ReactiveFormsModule, HttpModule],
    declarations: [        WelcomeComponent    ],
    bootstrap: [WelcomeComponent],
    schemas: [NO_ERRORS_SCHEMA]
})
export class DemoModule { }

Bootstrap the Module

As we already discussed that a single angular application can contain more than one angular modules. But out of the all module, only one module can be bootstrapped at the beginning. In Angular 6 this bootstrapping process needs to be done manually with the help of “platformBrowserDynamic” function which is defined within the “@angular/platform-browser-dynamic” library. 

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { DemoModule } from './app.module.demo';
platformBrowserDynamic().bootstrapModule(DemoModule);

Code of Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>Angular 6 - Console</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">
    <link href="../resource/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="../resource/css/font-awesome.min.css" type="text/css">
    <link rel="stylesheet" href="../resource/css/jquery-ui.css" type="text/css">
    <link href="../resource/css/style.css" rel="stylesheet" type="text/css">
    <link rel="shortcut icon" href="../resource/img/favicon/favicon.ico">
    <link href="../resource/css/app.css" rel="stylesheet"  type="text/css"/>
</head>
<body>
    <div class="content">
        <home></home>
    </div>       
    <script>
        sessionStorage.setItem("dayno", JSON.stringify(1));
    </script> 
    <script src="../node_modules/core-js/client/shim.min.js" type="text/javascript"></script>
    <script src="../node_modules/zone.js/dist/zone.js" type="text/javascript"></script>
    <script src="../node_modules/systemjs/dist/system.src.js" type="text/javascript"></script>
    <script src="systemjs.config.js" type="text/javascript"></script>
    <script>
        System.import('../main.js').catch(function (err) { console.error(err); });
    </script>
</body>
</html>

Now after executing the above code, the output will be as below - 

if anyone wants to access the complete source code of this article, they can be downloaded from the below URLs - 

Angular Example (Day 1)

Hope you found this information helpful.