Saturday, August 18, 2018

Video: Windows Subsystem for Linux and Golang Environment with Visual Studio Code

Recently I have been playing with Golang and I found that there few packages that do not work with windows. So for that most of people are using VirtualBox and then installing Linux on that But Actually, you don’t need to do that as now you already have windows Linux subsystem which provides you a complete Linux Environment in your windows environment itself.

To educate, this I have created a video for the same. You can find that video below.



Here in this video, You can see that I have installed Ubuntu Linux subsystem.

What is Linux Subsystem:

Windows Linux Subsystem is a compatibility layer developed by Microsoft and Linux distributions for running Linux Environment natively on Windows 10. It was introduced with the Anniversary update.

From the following links, you can find more about it.
https://en.wikipedia.org/wiki/Windows_Subsystem_for_Linux
https://docs.microsoft.com/en-us/windows/wsl/install-win10

Links in Video:

Followings are links that have been used in the video.

How to download Visual Studio Code: https://code.visualstudio.com/
How to install Golang on Linux: https://www.digitalocean.com/community/tutorials/how-to-install-go-1-6-on-ubuntu-16-04
Golang Extension for Visual Studio Code: https://marketplace.visualstudio.com/items?itemName=ms-vscode.Go


Please Enjoy this video wanted to have more content like this. Please do subscribe to my youtube at   - https://www.youtube.com/user/DotNetjalps
Share:
Saturday, June 16, 2018

Tree shakeable providers/services in Angular 6

Recently before some time Angular 6 was released and there are a couple of features that are added with Angular 6. In this blog post series, we are going to learn all these new features one by one. Today this post is all about Tree Shakeable providers in Angular 6 which is a new recommended way to create a new provider or service Angular 6.

What are Tree shakeable providers in Angular 6?

In an earlier version of Angular, we need to register service or provider under provider sections of your module like below.

Now with Angular 6, There is recommended a way to register a provider or service in Angular directly inside the @Injectable decorator using new providedIn attribute. It accepts ‘root’ as a value or any module of your application. When you use ‘root’ your services or providers will be registered as a singleton and you don’t need to add that provider or service in the module. Same way if you add module instead of ‘root’ it will act as a singleton on your module.

This is how its look like now.

This is the new way of registering provider or service. This led us to better tree shaking in the application. What was happening in an earlier version of angular is If you add a service in providers list it will finally be added in bungle which is created at the end. Even if it not used in the application which is sad and can increase your size of the bundle. Most of the time we don’t add services in the application which we are not going to use But when you use third-party services it provides a list of services and we want only a few. So new smart Angular 6 compiler add only those services in the bundle which is actually being used.

Demo:

Now let’s create an application and see how it looks like. So I’m going to create an Angular6Provider app with Angular CLI like following.

create-new-angular6-app-providers

Once we are done with creating angular 6 application we are going to create a new service called “MessageService” like following.

create-angular6-service-provider

And following is the code I’ve written for printing a simple message.



Here in the above code, you can see that I have created a method called ‘printMessage’ and I am returning a simple observable of the string as a message. Please do notice that providerIn attribute in injector decorator.

Now let’s write some code in ‘app’ component to get the message from service. Following is a code I have written for that.
Here in the above code, You can see that I have injected the message service in the constructor of the component and then I have created a ‘printMessage’ method to get a message from our message service. Now let’s print this message in HTML part of app component like below.

Here you can see I have just printed a message via two curly braces. Now let’s run this application and with ng serve command and here is output in the browser as expected.

angular-6-provider-service

That’s it. Hope you like it. Stay tuned for more!!.

You can find complete source code this application on Github.com at - https://github.com/dotnetjalps/Angular6Providers
Share:
Saturday, May 5, 2018

A minimal web application structure with technologies like node.js, typescript, express

Recently, I have been working the lot with Node.js and TypeScript. And I absolutely love TypeScript due to its features. I was actually looking for a boilerplate code to start which should be very easy to understand. But there was no code there. So I decided to create a minimum web application structure. I have used it in some project and I was quite happy with it.

So I thought why should I make it open source so that people can also get benefited by this. So here I am presenting A minimal Web Application Structure with technologies like Node.js, TypeScript, and Express.

You can find the complete source code on Github at following location - https://github.com/dotnetjalps/minimum-nodejs-typescript-express

How to Run this Project:

To run this project you need to first install all the NPM packages via the following command.
npm install 
Then you can run this project with the following command.
npm start

Directory Structure Of Project:

  • App.ts – Typescript file for creating express application class and where we have initialized the application.
  • routes.ts - Typescript files for creating all the routes under Init() Method.
  • package.json - Contains all the packages and dev dependencies required for this application. You can add more as your requirement.
  • tsconfig.json - Where all the typescript configuration is there and we converting typescript into ES5.
  • Controller Folder - Contains all the classes for the controller of the express application
  • tsconfig.josn  - Contains all the rules for TypeScript linting.
I’m looking for constructive feedback on this and I’m hoping that I will get it.
Share:

Video: Angular Language Service Extension with Visual Studio Code

I love Angular as Framework and I used it for many applications so I always look forward to how I can make my life easy as a developer and How I am more productive. So Angular Language Service Extension help do that.

In this Video, I have demonstrated Angular Language Service Extension with Visual Studio Code. It analyzes your property and methods from Angular Component and provides Great Intellisense in App component HTML pages in Visual Studio Code. So you don’t have to worry about your spelling mistakes and other stuff.

You can find angular language service extension at - https://marketplace.visualstudio.com/items?itemName=Angular.ng-template

Excited!. Here is the video for the same.



If you like this video then press like button and don't forget to subscribe to my YouTube channel for more videos and instant notification.

Here is the link for subscribing my youtube channel.
https://www.youtube.com/channel/UC5n1O3KCfG3ip3O3pvonCNw?view_as=subscriber

Stay tuned for more. An Angular 6 blog post coming soon!.
Share:

Video: How to debug Angular 5 application in Visual Studio Code with Chrome Debugger

Recently, I have been enjoying creating videos, So I have created a video related debugging of the Angular app in Visual Studio Code. In this video, I have shown how we can debug Angular 5 application in Visual Studio Code with Chrome Debugger Plugin and what configuration we need to make. And It always has a great feeling when you debug your application in the code editor itself instead of the browser.

You can install Chrome Debugger installer from here -
https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

So what we are waiting for following is a video.



If you like this video then press like button and don't forget to subscribe to my YouTube channel for more videos and instant notification.

 Here is the link for subscribing my youtube channel.
https://www.youtube.com/channel/UC5n1O3KCfG3ip3O3pvonCNw?view_as=subscriber

Stay tuned for more A great post about Angular 6 is coming soon.
Share:
Friday, April 27, 2018

Flexible Object Mapping in Entity Framework Core 2.0

Entity Framework 2.0 is out for some time. If you don’t know Entity Framework 2.0 is a lightweight, extensible and Cross-Platform Object-relational mapper from Microsoft. It is a new version of Entity Framework which is now cross-platform and can now run now operating system like Linux, Mac etc.With Entity Framework Core 2.0, There are tons of ways to create a table and we are going to see one of that. In this blog post, We are going to see how we are going to see how we can create a field for private fields in the table.

So what we are waiting for. Let’s get started.

Flexible Object Mapping in Entity Framework Core 2.0:

So in this example, We are going to create a Console Application like following.

new-project-entity-framework-core

Once we are done with Creating Application We are going to insert NuGet Package for EF Core like below.

nuget-package-entity-framework-core

You can also install it via running following command.
Install-Package Microsoft.EntityFrameworkCore -Version 2.0.2
Here we are going to install SQL Server Express as a database so we need to install Nuget Package for that also.

enttity-framework-core-sqlserver-nuget-package

You can also install via running following command.
Install-Package Microsoft.EntityFrameworkCore.SqlServer -Version 2.0.2
Now it’s time to write some code. First of all, We are going to create A model called Student and In that, we are going to have two private fields.
namespace EFCore2Mapping
{
    public class Student
    {

        public int StudentId { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }


        private string _standard;
        private string _division;


        public void AssignStandard(string standard)
        {
            _standard = standard;
        }

        public void AssignDivision(string division)
        {
            _division = division;
        }

        public string GetStandard()
        {
            return _standard;
        }

        public string GetDivision()
        {
            return _division;
        }
    }
}

Here in the above code, You have seen that I have created few fields for Student Model. If you see it carefully, You can see that there are two private fields _standard and _division.  And there are two methods for each field to get and set private variables.

Now let’s write our Entity Framework Data Context. That’s where the Magic going to happen.
using Microsoft.EntityFrameworkCore;

namespace EFCore2Mapping
{
    public class StudentContext : DbContext
    {
        public DbSet<Student> Student { get; set; }
        protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
        {
            optionsBuilder.UseSqlServer("Data Source=Your Server;Initial Catalog=Student;User ID=sa;[email protected]");
        }

        protected override void OnModelCreating(ModelBuilder modelBuilder)
        {
            modelBuilder.Entity<Student>().Property<string>("Division").HasField("_division");
            modelBuilder.Entity<Student>().Property<string>("Standard").HasField("_standard");
        }
    }
}

Here in the above code, If you see I have created a dataset for our student model that is a standard way to create a table for the map. There is another method OnCofiguring for giving database connection string. There are is another method called OnModelCreating which Entity framework core uses to create tables. Here If you see that I have written code to map private fields to Table Fields so that two fields Division and Standard will be created with tables.

Now let’s run the migration to create a table like following.

migration-to-create-private-fields-in-table-entity-framework-core

You need to go to the Nuget Package Manager Console and then run the following command.
Add Migration Initial Create
Once you are done with it. It will create the tables in the database like following.

fields-created-in-SQL-Server

Now let’s write some code insert data in the table. So following is code for the same.
using System;
using System.Collections.Generic;
using System.Linq;

namespace EFCore2Mapping
{
    class Program
    {
        static void Main(string[] args)
        {

            List<Student> ExistingStudents = new List<Student>();

            Student student = new Student
            {
                FirstName = "Joe",
                LastName = "Tailor",
            };
            student.AssignStandard("5");
            student.AssignDivision("A");

            using (StudentContext studentConext = new StudentContext())
            {
                ///Adding a new Student;
                studentConext.Student.Add(student);
                studentConext.SaveChanges();


                ///Retriviting newly added student
                ExistingStudents = studentConext.Student.ToList();
                
            }

            foreach(Student s in ExistingStudents)
            {
                Console.WriteLine($"Student Id: {s.StudentId}");
                Console.WriteLine($"First Name: {s.FirstName}");
                Console.WriteLine($"Last Name:{s.LastName}");
                Console.WriteLine($"Standard:{s.GetStandard()}");
                Console.WriteLine($"Division:{s.GetDivision()}");
            }
        }
    }
}

Here you can see that in the above code, I have created Student called Joe Tailor and then I have saved it in the database and then I have written the code for fetching the student data and print it via for loop.

When you run this application It will show like following.

output-entity-framework-core-flexible-column-mapping

That’s it. Here you can see that It’s very easy to Manipulate the Columns with Entity Framework core 2.0. Hope you like it.
This complete blog post source  code available on github at - https://github.com/dotnetjalps/EFCoreFlexibleObjectMapping
Share:
Thursday, April 26, 2018

Subscribe to my YouTube channel- DotNetJalps

Dear Friends,
Recently I have been creating lots of Videos. I feel that with videos People can learn and see what others are doing. So I have already started a YouTube channel for my blog. Where I am going to create videos and explain the topics which is difficult to understand.

So on this occasion, I would really like to ask a favor to subscribe to my channel. As I want to give it a proper URL and for that, I require more than 500 subscribers. So If you like the videos recently I have posted. Please do subscribe to my YouTube channel.

https://www.youtube.com/channel/UC5n1O3KCfG3ip3O3pvonCNw?view_as=subscriber

As always, I would to thanks for all the love that you are showering to my blog and I will try best to make my YouTube Channel a great hit.

Thanks in advance for the all the support and love you guys are providing.
Share:
Search This Blog
About Me
My Photo

Full Stack Developer, Blogger, Microsoft Mvp, Mentor, Lifelong learner, 12+ Years of Experience for JavaScript, web and Microsoft technologies. ASP.NET MVC/Core, C#, Angular,Vue.js and node.js
Subscribe to my blog

  

My You tube channel- Please Subscribe
Youtube Video Playlist
My Mvp Profile
Follow us on facebook
Blog Archive
Total Pageviews