Mangesh Gaherwar 8:58 am on 4 Jul 2018

Blazor Application Bootstrap and Life Cycle methods

We have seen in last article how web assembly and C# can be a game changer and will help the C# to run on Browser so moving to next article let’s see how we can setup Blazor in your machine and how we can get started with our first application with Blazor

Agenda

Environment setup
Application Bootstrap Process
Application Life Cycle Methods
Conclusion

1.Enviornment Setup

While writing the this article the new experimental blazor framework 0.0.4 is been announced by microsoft To get this version there are few prerequisite as below

1.Install .Net Core SDK 2.1 from here

Install VS 2017 Preview (15.7) with Web Work Bench selected while installation

3.Most important step is to install the language service extension for blazor from here

To verify the installation, Open the Visual studio and lets create one Asp.net Core web Application we will be able to see following templates

2.Getting Started and Building First Blazor App

We have done the setup part now it’s time to create our first demo app with Blazor how we can do this follow below steps

1.Create new Project with the Asp.net Core web Application selected Name it as BlazorDemoApp1 and Click Ok

Next step is to select the Environment and using proper Template for the same

2.1 we Need to Make sure .Net Core is Selected Asp.net Core 2.0 or 2.1 as well is Selected for the same

2.2 Next step is to select the template for the Blazor application for our demo we will select the Template called Blazor and Press Ok

3.Application Bootstrap

Where does our application bootstraps? obviously it is the Main Method in the Program.cs how does it look lets look at the code snippet below

public class Program

{

static void Main(string[] args)

{

var serviceProvider = new BrowserServiceProvider(services =>

{

// Add any custom services here

});

new BrowserRenderer(serviceProvider).AddComponent<App>(“app”);

}

This is the place where we decide which component will be loaded in this the DOM element selector argument will decide whether we want to load the Root Component or not in our case the app element in the index.html will be used for the rendering

Main method can be used to add the various services which will be used for the DI in later part of the app

When we see the index.html snippet which is as follows

<!DOCTYPE html>

<html>

<head>

<title>WebApplication2</title>

</head>

<body>

<app>Loading…</app> <!–Root Component Loads here–>

</body>

</html>

Here the Blazor-boot is used as the script type now question is why It is used here in the index.html

so when we build the application at that time the blazor-boot is replaced with the bootstrapping script which handles the .Net Run time and executes entry point of the application, following screenshot can tell us what is loaded at the place of the blazor-boot

Here we can see all the things needed to run the .net run time are loaded with this and our app gets bootstrapped

Application Life Cycle methods

All right we have set up our project lets dig out the details of the Application life cycle method of the Blazor App. There are around 7 life cycle methods available in the Blazor app Blazor provides the Synchronous as well the asynchronous life cycle methods lets see one by one how they can be differentiated

There are mainly 7 Life cycle methods lets see all of them one by one

1.OnInit ()

This is the synchronous version of the application method which gets executed when the component gets Initialized, this gets executed when the component is completely loaded we can use this method to load data from services as after this method each control in the UI is loaded. This is executed when the component is ready and when it has received the values from the parent in render tree

OnInitAsync ()

This is the asynchronous version of the application method which gets executed when the component is initialized, this is called when the component is completely initialized this can be used to call the data service or to load the data from the service. This is executed when the component is ready and when it has received the values from the parent in render tree

3.OnParametersSet ()

This is the synchronous way of setting the parameter when the component receives the parameter from its parent component, this is called when the Initialization of the component occurs

4.OnParametersSetAsync ()

This is Asynchronous way of setting the parameter when the component received the parameter from the parent component, this gets called when the initialization of the component occurs and i

5.ShouldRender ()

We use this method to suppress the refreshing of the UI if this method returns true then UI is refreshed otherwise changes are not sent to UI, one thing about ShouldRender () is it always does the initial rendering despite its return value

6.OnAfterRender ()

This is called each time when the component is done with the rendering all the references to the component are populated now, we can make use of this method to perform the additional steps like initializing the other components and all.

6.OnAfterRenderAsync ()

This method is asynchronous version of the OnAfrerRender() which gets called when the rendering of all the references to the component are populated we can use this method to do additional initializing of the third party component.

Complete code demonstrating the Application life cycle is as follows

@page “/”

<h1>Application Life cycle Methods ..</h1>

@foreach (var item in EventType){ @item <hr />}

@functions{

List<string> EventType = new List<string>();

protected override void OnInit()

{

EventType.Add(” 1 OnInit”);

}

protected override async Task OnInitAsync()

{

EventType.Add(“2 OnInit Async”);

await Task.Delay(1000);

}

protected override void OnParametersSet()

{

EventType.Add(“3 On Parameter set “);

}

protected override async Task OnParametersSetAsync()

{

EventType.Add(” 4 OnParametersSet Async Started”);

await Task.Delay(1000);

}

protected override bool ShouldRender()

{

EventType.Add(” 5 Should render called”);

return true;

}

protected override void OnAfterRender()

{

EventType.Add(” 6 OnAfterRenderStarted”);

}

protected override async Task OnAfterRenderAsync()

{

EventType.Add(” 7 OnAfterRender Async Started”);

await Task.Delay(1000);

}

Running above code we will get the output like below

We can see the steps and way it is been called one by one and the sequence of the application methods.

Conclusion

Blazor is the technology which uses the web assembly for running the application , It uses Asp.net core to build the application , It has many similarities with the current UI Framework languages like React or Angular and being a c# developer it will be a great platform to build the application specially single page application. Although not available for the production system but certainly exciting time Is ahead with this 😊

References

https://learn-blazor.com/getting-started/what-is-blazor/

https://blogs.msdn.microsoft.com/webdev/2018/03/22/get-started-building-net-web-apps-in-the-browser-with-blazor/

Mangesh Gaherwar 10:12 am on 21 May 2018

Component Communication part 1

We know that all the Angular applications are made up of components; in fact components are the basic building blocks of Angular applications. In a simpler manner we can say component is UI/ Views element along with the mechanism to show an operate on data.

Angular Team defines component as the Patch of the screen that we call View which declares the reusable building blocks for an application. So, in short, component is anything which is visible to the eyes and which can be reused again and again.

Creating Components

As we are using the Angular CLI we can create the component in one command; if you don’t know how do this we set up the project using CLI. Please visit following link.

Angular Quick start with CLI

When you are done with the project setup now we are ready to add our new component by using the following command
In my case I will run command ng generate component myfirstcomponent ( This is the name of My component and you can choose your own ) this will generate the following folder structure in your application

When we create the component Angular CLI creates the folder with the name of the component and it adds the files myfirstcomponent. component.ts, myfirstcomponent. component.spec.ts, myfirstcomponent.component.html ,and myfirstcomponent.component.css files in the folder myfirstcomponent.

One more change that we can see is at the AppModule.ts .

import { BrowserModule } from ‘@angular/platform-browser’;

import { NgModule } from ‘@angular/core’;

import { AppComponent } from ‘./app.component’;

import { MyfirstcomponentComponent } from. / myfirstcomponent / myfirstcomponent.component ‘;

@NgModule({

declarations: [AppComponent,MyfirstcomponentComponent],

imports: [BrowserModule],

exports: [AppComponent],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule {}

As we have One module so far in the application so whenever we add the component in the CLI it adds that component directly in the App Module which is the Root module of the application. It imports the component in the Root Module and adds into the declaration section which contains all the components present in the Module.

Exploring first component

When we look at our first component it adds the snippet like below

It’s an export of the component from the angular core which is needed to mark the class as a component

Next thing which we need to see are,

import { Component,OnInit } from ‘@angular/core’;

@Component({

selector: ‘app-myfirstcomponent’,

templateUrl: ‘./myfirstcomponent.component.html’,

styleUrls: [‘./myfirstcomponent.component.css’]

})

export class MyfirstcomponentComponent implements OnInit {

name: string = “John Doe”;

constructor() {}

ngOnInit() {}

}

Selector

It is a property which tells angular to create an insert of this component whenever it sees the element in the template

Templateurl

It is the URL of the html page which tells Angular what needs to be shown in the UI

So how does it work first Angular sees the selector for the component and it search the selector in the HTML and replaces the template/templateUrl which is rendered in that section. In our case the selector is app-myfirstcomponent and template is the myfirstcomponent.component.html which will be rendered in the Browser.

How to use this component ?

Ok we are done now to add and some basic stuff in View. To use this component we must keep in mind the selector property of the component which in our case is the app-component. To use this just add this line in the app.component.html so the code snippet for app.component.html will be like below

{title}

<app-myfirstcomponent></app-myfirstcomponent>

When we see the template URL it is like below for my product

hello {{name}} your first component works!

So, summing up we can say selector is the name of the component which will be used by the angular to call them inside the html

Passing Data Between Components

Ok we have seen how we create and consume the same component in the application now let’s see how we pass the between the components; as in most of the application we need to share the data between the components There are basically 4 Ways to pass the data between the components, let’s see them one by one.

Before that let’s see what we mean by parent and child component. Parent component is the component which acts as the container for other component and sibling is the component which is not container but which is not related

Following are the ways we can pass the data between parent and child components, let’s see one by one

Parent Component to Child component.

There will be always a need that we should send the data between the parent component and child component to do this. Let’s see step by step how we can achieve this

@Input

This decorator which is present is used to obtain the data from the component. To achieve this I have made changes to the component. Let’s add two component namely master and child in the Application by using ng generate command of the Angular CLI

When the components are added look at the code snippet for the child component (child.component.ts)

import { Component, OnInit, Input } from ‘@angular/core’;
@Component({
selector: ‘child’,
templateUrl: ‘./child.component.html’,
styleUrls: [‘./child.component.css’]
})
export class ChildComponent implements OnInit {
@Input(“bindingmessaage”) message: string
constructor() {}
ngOnInit() {} }

Here we have used the @Input decorator for making the message as input; let’s see the syntax of the @Input in detail. Here bindingmessage is present in @Input(bindingmessage) is used as the alias of the message property which can be used in the other components .

Ok so far we have made the message property of the ChildComponent for accepting the Values from the Parent component then how do we assign the values to this variable? For that purpose we must see the parent component (Remember this is Parentè Child interaction ). We must make the Provision in the parent component to set the values of this variable for that change, we must look at the snippet of the Master component

To that we must add the child component to the Master component — how do we do it ? We have selectors for our use here let’s look at the following html(Master.component.html) snippet

Master.component.html

<child bindingmessaage=”Message from the Parent Without Binding”>
</child>

app.component.html

</div>

This code simply adds the master component in the App component which is our root component an master component in return adds the child component in its template When we run the application we can see the output as displayed at the start page .

This is child component

This is Message from parent:: Message from the Parent Without Binding

Now to pass the value from the parent component to child component we have to the following changes

Update the Master component (Master.component.ts) to following snippet

import { Component, OnInit } from ‘@angular/core’ };
@Component({
selector: ‘master’,
templateUrl: ‘./master.component.html’,
styleUrls: [‘./master.component.css’]
})
export class MasterComponent implements OnInit {
sendgreetingtochild: string = “Data from Parent to child using input decorator”;
constructor() {}
ngOnInit() {}
}

And in the child template selector which is present in the master.component.html file as follows

What we are doing here is we are assigning the value of the property sendgreetingtochild to the bindingmessage Input of the child component

When we save the file, and see the output we can see the output as follows

This is child component

This is Message from parent:: Data from Parent to child using input decorator

We can see the changed output which is the same where we have assigned the value of the variable in the master.component.ts

To sum up this we can say that in order to pass the value from parent to child follow the below steps

use @input to the properties which we want to assign the value
@Input(“bindingmessaage”) message:string
Use the property In the selector of the child component

Passing Data between Child to parent (Using @Output) and Event Emitters

We have seen how we can pass the data between then let’s see passing data between the component using @output an Event Emitters.

In this the child component emits the data to the parent component by using the @output decorator an Event emitter this change can occur on button click or the any data change in between.

To achieve this, we can do the following things,

Parent should have the provision to receive this message which will be assigned and used
Child should have the variable decorated with @output and a function which will emit this event. And the message we want to send to the parent component.

Let us add two component as follows using ng generate command,

ChildwithoutputandemiterComponent.component.ts This will be our child component
MasterwithoutputandeventemiterComponent.component.ts This will be our master component

In order to see how we can use the @output an event emiters lets modify the child component with the following snippet

import { Component, OnInit, Output,EventEmitter } from ‘@angular/core’;
@Component({
selector: ‘app-childwithoutputandemiter’,
templateUrl: ‘./childwithoutputandemiter.component.html’,
styleUrls: [‘./childwithoutputandemiter.component.css’]
})
export class ChildwithoutputandemiterComponent implements OnInit {
message: string = “Hello from child”
@Output(“messagefromchid”) emitmessage = new EventEmitter < string > ();
EmitValue(): void {
this.emitmessage.emit(this.Message)
}
constructor() {}
ngOnInit() {}
}

Before understanding the code let’s see some basic things we have in this snippet these are @output an the EventEmitter

@Output

It is the attribute which is used when we want to send the data outside the component

This attribute always combined with the Event emitter which can be accessed outside the component . by using the Event passed.

EventEmitters

Event emitter is used in the Angular to emit events in the components.

When we see the code description of the above code we can see that we have used the @Output attribute to the and we have set it to the new EventEmitter also we have method EmitValue which emits the Value of the Message Property to the master component .

Next let’s see How does the Master component handle these values

import { Component, OnInit } from ‘@angular/core’;
@Component({
selector: ‘app-masterwithoutputandeventemiter’,
templateUrl: ‘./masterwithoutputandeventemiter.component.html’,
styleUrls: [‘./masterwithoutputandeventemiter.component.css’]
})
export class MasterwithoutputandeventemiterComponent implements OnInit {
GreetingsFromChild: string = “Initial message at the master.”;
receivemessage($event): string {
this.GreetingsFromChild = $event;
return this.GreetingsFromChild;
}
constructor() {}
ngOnInit() {}
}

In this what we have done is we have created the function Receive Message which receives the value from the Event emitter whenever change in the Variable occurs . In this function Receivemessafe($event) is the function which receives the value from the child component and assigning it to the messagefromchild of the

To see the Output we have some change with the Child and Parent template let’s see one by One

<p>
<b>Child component:: </b>
<br>
<input type=”text” [(ngModel)]=”message”>
<button (click)=”EmitValue ()” value=”Emit Value”>Emit Value</button>
<br>
(click on Button to send the Value to Master component)
</p>

This is the child template (html file) which has One input and we can see the EmitValue() from the Child component which will be called whenever the button clicks happen. Another change that we need to do is change at the master component like below

<p> <b> Master component :: </b> <br> <b> {{GreetingsFromChild}}</b> <br>
<app-childwithoutputandemiter (messagefromchid)=receivemessage($event)></app-childwithoutputandemiter>
</p>

When we look at the code we can see that we have added the child component inside the master component for receiving the output. What we have done is we have assigned the receivemessage($event) to the messagefromchild

This was all about the passing of the data from the parent to the child an child to parent we will see the next methods by using the @viewchild and By using the services in next article
Please run npm Install before Running this project
References

https://angular-2-training-book.rangle.io/handout/components/
https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/#Parent-to-Child-Sharing-Data-via-Input
https://angular.io/guide/quickstart

Happy coding.

Mangesh Gaherwar 1:06 pm on 18 May 2018

Components And Modules

We have seen how we can setup the application and how the application gets bootstrapped when a user makes the first request. These articles can be found below.

Now, it is time to understand the basic building blocks of the Angular Modules and Components.

What are Modules?

In programming terms, Modules can be described as self-contained chunks of the functionality in your application which can run independently. In Angular, Modules are the collection of the Components, Service directives, and Pipes which are related such that they can be combined to form a module. In a more simple way, we can imagine the Modules as the packages we use in the C# which are self-contained set of the classes and methods.

For example, consider the Customer Modules which will have the section to Add, Edit, Delete customers section to get the customer cards and masking them or operating them so we can logically include them to be in the Customer Module

The above diagram illustrates what module means in Angular. We are clubbing all User Interfaces, Services, and Pipes to modify the data in the Customer Module.

Modules

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 {}

This is the Root module which is added by default by the CLI when we set up the project which bootstraps AppComponent that has the selectors and template with it.

@NgModule

This is the decorator which is used to turn the TypeScript class AppModule into the Module. @NgModule takes the metadata object which tells the Angular application how to launch and compile the application.

Let’s see what it contains and properties of the @NgModule as its properties.

Declaration Array (declarations)
This array contains which components belong to the AppModule by listing them in the Modules declarations array. Whenever we add the new component, we add that component in this declaration array.

Note
Only declarable, components, Pipes, and directives can be added in the declaration array. We don’t put any other NgModule class, Service class, or any other model class in the declaration array.

Imports Array (imports)
Imports statement appears only in the @NgModule section which adds other Angular Modules. All of them decorated with the @NgModule are added inside the imports array.

In short, we add the Modules whose features are needed in the Application in the Imports array. Look at the code snippet.

imports: [ BrowserModule ],

This snippet imports the BrowserModule as our application is executing in the browser. Every application that needs the browser, needs the BrowserModule to be imported in the application.

Providers Array (providers)
We will see later that Angular apps mainly depend on the DI services to work properly so providers array helps in adding these services to the application before using them. So, for example, if we have data service which is required for the customer module can be injected into the app Module and it can be used across the components.

Components

The most important feature of any Angular application is the component which controls the View or the template that we use. Generally, we write all the application logic for the View that is mapped to this component.

In analogy, we can consider template to be the .aspx files and components can be the .aspx.cs file which can have all the application logic.

Let’s have a look at the code snippet of the AppComponent in the application.

import { Component } from ‘@angular/core’;
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
title = ‘app’;
}

When we look at the AppComponent class, it is just a plain class which has property title in it.

It turns into the Component when we add the metadata @Component or we can say when decorating the simple class with the @Component attribute, it turns into the component.

@Component

Decorator takes the required configuration object which needs information to create and view the component in the real time.

Following are the properties which are combined with the @Component class. Let’s see what they tell one by one.

selector
It is a selector which tells Angular to create and insert the instance of the component whenever they see this selector in this case it has <app-root></app-root> What it does is it replace the content of the component in the tag <app-root> </app-root> which is present in the parent HTML in our case it is index.html
templateurl
This is the URL of the HTML which we are going to display when this component is called.
styleurls
These contain the styles which are applied to the component UI.
providers
Providers array is the array of dependency whenever we need to add dependency of any service or pipes in the providers array. Metadata that we define in the @Component tells angular where to get the major building blocks you specify in the application Component Metadata and template together forms the View In the Angular Application, So this was about the basics of the components an Modules. Basic configuration settings can be worked out on this.

Metadata that we define in the @Component tells angular where to get the major building blocks you specify in the application

Component Metadata and template together form the View In the Angular Application

References

https://angular-2-training-book.rangle.io/handout/directives/
https://angular.io/guide/architecture#templates

Mangesh Gaherwar 3:38 pm on 14 May 2018

Angular Quick start with CLI

Why Angular CLI

Imagine what it would be to manually add the configuration files required to bootstrap an Angular 4 application. It is painful, right? For beginners, it might become tedious to declare all these files and manually configure all these files to bootstrap the app. It wouldn’t be a good idea to set up the configuration things rather than focus on the framework and its usage. Even for the advanced developer, it might not be a great way to do all these things manually.

So, Angular CLI is the solution here.

What it offers

It offers a great way to organize the building blocks of the Angular development environment and also enables you to unit test the application followed by clubbing it with the web pack which bundles all the JavaScript and CSS dynamically and adds them to the main HTML file where our application gets loaded.

CLI stands for the Command Line Interface.

Let’s see how we can install the Angular CLI on a machine and quick start our project.

Prerequisites for Angular CLI

Install Node.js and NPM

The first step to use Angular CLI is to install the Node.js and npm. Node.js uses Chrome V8 Engine to run the JavaScript on Servers and it also acts as the repository for various opensource packages which can be installed by using npm (NuGet Packet Manager).

To get the latest Node.js on the system, download Node.js by visiting following link.

“https://nodejs.org/en/”

Installing Angular CLI

Ok! We are done with the Node.js installation, now it is time to install the Angular CLI. Just open the command prompt (Try to run as admin because sometimes, the installation fails because of the privilege issues).

Use command >> npm install -g @angular/cli

Here, npm is installing the Angular CLI globally in the system.

Once the intsllation is done, now we are ready to create the new project by using Angular CLI.

Angular CLI Basic Commands

ng new

ng new is the command used for creating a new applicatin. It creates the application that already works and follows the best practices.

ng generate

ng generate is used to create a new class, component, routes services, or Pipes by using this simple command –

ng generate class/component/service/directive/enum/interface/module/pipe/ [name]

ng serve

ng serve is used to run start the server and run the application. There are various commands like ng e2e, ng lint, ng test, ng build, ng doc etc. but the above 3 commands are needed to start an application.

Creating the New Application

We use Ng New command to create the new application. The syntax for creating a new application in the given directory would be –

ng New [Application name]

There are various ways to create the application from the command prompt or from the integrated terminal we have within the Visual Studio Code. I will prefer the command prompt as sometimes VS Code hangs while executing the commands. So, our steps would be –

Open the Command Prompt, move to the directory where we want to create the application, and type the following command.

> ng new MyFirstApp8Nov

In this ng New command, MyFirstApp8Nov is the project name that I have given to create the new application.

Note

When you hit the Ng New command, then after creating initial directories, the package installation takes some time depending on the internet speed of the machine. So have some patience because sometimes, it takes around 4- 5 minutes to create the project and complete the installation.

Now, we have our application ready; let’s check the application from Visual Studio Code. In order to open the application, just open the folder in the VS Code which in my case is – D:\\MyFirstApp8Nov

When you open the folder, you will see various folders like node_modules which contains all the packages for the application, various configurations like package.json, tsconfig.json etc. The files are automatically added with the application creation.

Application creation was pretty simple, right?

So now, it is time to run the application. For that, we use the command ng serve as stated above. We have created the application and to run this, just follow the below steps –

> Move to the Source code folder

When you hit enter, you will see that the compilation of the files is availble as the source here. Angular CLI uses the web pack as a Module bundler.

When we see the compiled app successfully, just browse the URL http://localhost:4201/ (In my case, it is 4201 but by default, it can be 4200 or any other port number; just check the first line where it shows the URL ). It will show the output as –

Our application is up and running.

Note

Sometimes, if the Port 4200 is used somewhere, then the ng serve command won’t start the application. then, we use the commad

ng serve –port 4201

To sum up the steps

Install the Node.js and npm
Install the Angular CLI (npm install -g @angular/cli)
Create the project using the CLI command (ng New [project name])
Run the application using CLI command (ng serve)
Create the new component /class using the CLI command (ng new class/component [name])

This is all for the Angular CLI an Quickstart the Angular project using the Angular CLI

References

https://nodejs.org/en/
https://cli.angular.io/
https://github.com/angular/angular-cli/wiki/serve

Mangesh Gaherwar 3:08 pm on 14 May 2018

Application startup and Introduction to Components

All right! We have seen how we can set up the project, in a previous application. If you have not, you can visit the link Angular Basics Now, it’s time to see how the application gets bootstrapped (or loaded) and the basics of the components.

So, the first step would be to add the Project.

Add Project

At this point, we are expecting the Angular CLI is set up on your computer. So, it is pretty simple to add the new project and start the new application in order to add the project.

Go to the command prompt.
Move to the location where you want to add the project.
In the command prompt, execute the command >> ng new [Project name ] (In my case, it is ngBootstrap).
You will see the following output when you fire the command – ng new ngBootstrap

We can see the final message is Project ‘ngBootstrap’ is successfully created. So far, we are good with the new project creation. Now, it’s time to see the folder structure and understand what it contains to open the project. Just follow the below steps.

Go to Visual Studio Code.
Go to File>> Open folder >> Browse to the folder where you have created the folder using CLI and open the folder.
When you open the project, you will see the following application structure.

Now, we have added the project. It is time to run the application and CLI has made our life easier. We have the command prompt running on the PC. OK, so to run the application, move to the app directory and then, just execute the command ng serve. The following screenshot will explain the details of how we can run the application.

When you browse the application, you will see the output on the browser. What you see in the browser is some default content offered by CLI and it is shown in the browser.

So far, we have seen the project setup and the project output in the browser. So, moving to our main topic of the article – how does the application get bootstrapped?

OK. So, proceeding with this first thing, we will replace the content from the app.component.html with the following content.

File name :: Src>>app.component.html

And change the content of the src>>app.component.ts to

import {Component} from ‘@angular/core’;

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
title = ‘we are in the app component’;
}

So, when we save the file and see the output, we can see the following output.

We can see the this is the normal html file with the title and head and meta tag and the body tag. One of things to notice is the contents of the Tag here

But when we see the output we don’t see this loading right so somehow the index.html file is changed so when we see the this is not the default tag for the html instead it is one of the components. So where does the application start? If you look at the main.ts this is the First code which gets executed looking at the main.ts code,

import { enableProdMode } from ‘@angular/core’;
import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic’;

import { AppModule } from ‘./app/app.module’;
import { environment } from ‘./environments/environment’;

if (environment.production) {
enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));

When we see this file it has some important statements if we look at the following line

This code creates the browser platform for dynamic compilation and starts the module whichever is passed as an argument to the bootstrapModule () it sets up the execution environment.In our case the we are bootstrapping the module AppModule Which is present at the

Src>> app.module.ts when we see the code it is like,

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 {}

It has the decorator like @NgModule and declarations statement and one thing which is needed for bootstrap is the bootstrap array which contains the [Appcomponent] which is been imported from the ‘./app.component’

Again Moving to the Appcomponent from the ‘./app.component’ Appcomponent we can see the code

import { Component } from ‘@angular/core’;

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
title = ‘we are in the app component’;
}

Here we can see the Decorator @Component which contains the selector property which assigns the string value to the selector which is ‘app-root’ which is the same text we used in the index.html. This is the part which will be needed by the Angular to replace the part in the index.html with the template of the component which has selector ‘app-root’ which has the templateURL of the ‘app.component.html.’ So completing the flow we can imagine the flow will be somewhat like below diagram .

To sum up, this is how the angular project gets started

ts is the entry point as its name suggests it starts the browser platform for executing and compiling the application
It loads the AppModule which again contains the bootstrap component array
AppModule loads the AppComponent and along with the selectors and templateURL it serves the html
Finally the template/template URL associated with the component gets loaded with the index.html
Note

Node_Module is removed from the source code beacause of the size of the source code makes sure we are installing the node packages before running this project.

This was all about the Bootstrapping the Angular application and loading the first component. In the next article we will see the component and its details.

Mangesh Gaherwar 11:11 am on 9 May 2018

Blazor : Running C# On Browser

Blazor: Running C# On Browser using web Assembly

Being a Web developer and coming from the .Net stack we often use the C# for back end programing for writing the services and then we use excellent Client-side framework like angular or React for developing the UI part, being a C# guy, I always find it difficult to do to and from between c# to JavaScript . Considering these facts Microsoft announced the new Web UI Framework Called Blazor based on c# ,Razor and HTML which runs in the Browser using the Web Assembly

Web Assembly : The game Changer

When we look at the client-side development JavaScript always has the upper hand , No doubt there are new client side frameworks like Agular ,React but end of the day they turn into the JavaScript but with the Web Assembly it is not the case any more

What is web Assembly ?

It is a low-level assembly language with compact binary format that provides a way to run the code written in different high-level languages in the browser with same speed as native

Why C# for Client-side programming ?

JavaScript is great and powerful language but with some disadvantage , big problem with new developer and JavaScript is the learning curve and the complex syntax it has most of the things have been corrected with the Typescript but using C# is exciting because the features it is shipped with like below

Robust and feature Rich language
Code Reusability is possible with c#
With .Net Core maturing and being the main framework for the server-side programing it is good idea to use the same stack for the development and using c# for the front-end development becomes added advantage with it.

Running C# inside the Browser

To build this framework we need something which will run our beloved C# code in the browser how we can do that ? Thanks to our Game Changer Web Assembly, this will allow the C# code without using any plugin , Web Assembly is being supported into all mainstream browser including the latest mobile browsers. Ok Cool 😊 we have web Assembly but how does it allow us to run the .net code into the Browser answer is MONO many of us have heard about MONO which is the official run time for client platforms (Droid/IOS) which is used for the running the .net into the browser

Let’s see the bootstrap of the Normal Blazor application whenever the application gets started it first loads the Blazor.js Along with Mono.js (Present in the First Diagram) it Bootstrap the Mono Runtime ( i.e. Mono.Wasm) which is Mono web assembly

After this Mono.wasm loads the Application dll Which is Blazor.dll and the .net Run time dll like mscorlib.dll, System.net are loaded.

Razor Engine

Being .net developer we all Know the Razor Engine which combines c# with the HTML to generate the dynamic contents we all know Razor runs on the server side but with the Blazor , Razor runs On the client side in which razor engine is generates the c# code during compilation

HTML Output

Till now we have seen the razor engine generates the C# code but can C# code access the DOM directly, Answer is Big NO, to access the DOM C# must go through the JavaScript Let’s see how this conversion happened to and from

1.C# part of Blazor creates the Render tree which is a tree of UI Items

2.Web Assembly pass this Render tree to the Rendering part of the Blazor JavaScript, which executes corresponding DOM changes

Whenever the Any Event occurs then JavaScript part of the Blazor send event to the C# part through Web assembly
This event may be button click which is processed by c# part
if the DOM Changes Occurs then the Render Batch with UI tree difference is sent from c# which is Given to the JavaScript Blazor and DOM changes Occurs

In this Overall process we can see that no plugin is initiating the things unlike Flash or Silverlight where some plugins needed to initiate the process.

Blazor Being inspired by todays Popular SPA frameworks like Angular, React or Vue it provides all the feature which we will see below

This was all about the Blazor and how it loads and runs under browser but to make Blazor A true Single page Application framework will have the feature like component, Routing, State management, Unit testing and build optimization techniques.

1.Components

Every SPA framework things are built up based on the components which can be a single pop up box or the user Registration form, In Blazor Components are classes which we can write in C# or normal Cshtml we use in Razor, with this approach we can apply various patterns with the components

2.Infrastructure

When new Blazor app is crated then it adds some core features that every app needs such as Layouts, Rendering, Routing, DI, and Unit testing

3.Deployment

One of the most important aspect of any programming is the deployment of the application and for deployment one .net Core Middleware is provided which will help to deploy the Blazor UI Application

Code Sharing and netstandard

We can make use of our existing Class Library with the Blazor so allowing to use the code reuse which is well used and tested already

5.JavaScript/Typescript Interop

Although we are developing the things in c# we might need to refer the third-party library so we can use them using Typescript type definitions then we can register the JavaScript function using Register function method in the C#

This was all about the Blazor and how it works hope it helps to everyone

Note :: Blazor being in the experimental phase till now it is not recommended to use the Blazor for any production app for now until final release is available from Microsoft

References

http://blog.stevensanderson.com/2018/02/06/blazor-intro/

http://learn-blazor.com/getting-started/what-is-blazor/

Happy Coding

DotnetGik

Author Archives: Mangesh Gaherwar

Blazor Application Bootstrap and Life Cycle methods

Component Communication part 1

Components And Modules

Angular Quick start with CLI

Application startup and Introduction to Components

{{title}}

import {Component} from ‘@angular/core’;

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
title = ‘we are in the app component’;
}

import { enableProdMode } from ‘@angular/core’;
import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic’;

import { AppModule } from ‘./app/app.module’;
import { environment } from ‘./environments/environment’;

if (environment.production) {
enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));

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 {}

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
title = ‘we are in the app component’;
}

Blazor : Running C# On Browser

{{title}}

import {Component} from ‘@angular/core’;

@Component({ selector: ‘app-root’, templateUrl: ‘./app.component.html’, styleUrls: [‘./app.component.css’] }) export class AppComponent { title = ‘we are in the app component’; }

import { enableProdMode } from ‘@angular/core’; import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic’;

import { AppModule } from ‘./app/app.module’; import { environment } from ‘./environments/environment’;

if (environment.production) { enableProdMode(); }

platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.log(err));

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 {}

@Component({ selector: ‘app-root’, templateUrl: ‘./app.component.html’, styleUrls: [‘./app.component.css’] }) export class AppComponent { title = ‘we are in the app component’; }

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
title = ‘we are in the app component’;
}

import { enableProdMode } from ‘@angular/core’;
import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic’;

import { AppModule } from ‘./app/app.module’;
import { environment } from ‘./environments/environment’;

if (environment.production) {
enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));

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 {}

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
title = ‘we are in the app component’;
}