GO - Basic Variable declaration - Part 3

Image result for golang
Defining variables in the go
we use var to define a variabler in the GO. In GO we put the variable type only at the end of the variable name like:
var variable_name varaiable_type
var muNumber int

we can define multiple variable by this way
var variable1, variable2, variable3 variable_type
var num1, num2 int
here all variable will the of the type vatiable_type

defining the variable with the initial value
var variable_name type = value
eg. var age int = 14

defining multiple variable with intial value
var num1, num2, num3 = 2, 3, 4
// same as num1 = 2, num2 = 3, num3 = 4

lets define three variable without the type and the var keyword with their initial values
vname1, vname2, vname3 := v1, v2, v3
Now it looks much better. Use := to replace var and type, this is called a brief statement.
its simple but it has one limitation: this form can only be used inside of functions. You will get compile errors if you try to use it outside of function bodies. Therefore, we usually use var to define global variables.

blank variable 
"_" is known as blank variable in GO because it's blank :). for eg:
_ , a := 10, 20 
here 20 given to a but 10 is discarded, we will use this on the later examples in real case

NOTE: GO will give compile time error if we didnt use the variable which are already defined.

GO - Introduction - Part 1

Image result for golang

What is "go"?
Go or golang is the new programming language developed by google for their most roboost and to manage the large scale application.

Why go?
It is lightweight and more managable and is awesome for the web services and last but not the least it is easy to learn.

What are its features?

  1. Support for environment adopting patterns similar to dynamic languages. For example type inference (x := 0 is valid declaration of a variable x of type int)
  2. Compilation time is fast.
  3. InBuilt concurrency support: light-weight processes (via goroutines), channels, select statement.
  4. Conciseness, Simplicity, and Safety
  5. Support for Interfaces and Type embedding.


But to make it more simpler following features haves been ommited


  1. Production of statically linked native binaries without external dependencies.
  2. No support for type inheritance
  3. No support for method or operator overloading
  4. No support for circular dependencies among packages
  5. No support for pointer arithmetic
  6. No support for assertions
  7. No support for generic programming

Angular 2 - Part 9 [Template-Driven Form]


In this tutorial we will create a template-driven form which will contain username, email, password and gender fields. which is as shown below:


here is the template-driven.html template file for this form:

<h2>Template Driven</h2>
<form (ngSubmit)="onSubmit(f)" #f="ngForm">
  <div ngModelGroup = "userData">
    <div class="form-group">
      <label for="username">Username: </label>
      <input type="text" class="form-control"
             minlength="4"
             id="username"
             [(ngModel)]="user.username" name="username" required
             >
    </div>
    
    <div class="form-group">
      <label for="email">Email: </label>
      <input type="text" class="form-control"
             pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"
             id="email"
             [(ngModel)]="user.email" name="email" required
            >
    </div>
  </div>
  <div class="form-group">
    <label for="password">Password: </label>
    <input type="password" class="form-control"
           id="password"
           [(ngModel)]="user.password" name="password" required>
  </div>
  <div class="radio" *ngFor="let g of genders">
    <label>
      <input type="radio" [(ngModel)] = "user.gender" name="gender" [value]="g"> 
       {{g}}
    </label>
  </div>
  <button type="submit" class="btn btn-primary" >Submit</button>
</form>

Now let create a component for this form
template-driven.component.ts




import { Component, OnInit } from '@angular/core';
import {NgForm} from "@angular/forms";

@Component({
  selector: 'app-template-driven',
  templateUrl: './template-driven.component.html',
  styleUrls: ['./template-driven.component.css']
})
export class TemplateDrivenComponent{

  user = {
    username:"Yubraj",
    email:"yubraj@gmail.com",
    password:"asdfasdf",
    gender: "male"
  }
  
  genders = ["male", "female"];

  constructor() { }

  onSubmit(form: NgForm){
    console.log(form.value);
  }
}



What we did here is:
1. We created a html template
2. then we bind the html input with the user object which is in the component.
3. [(ngModel)]="user.username" .. is used to bind using two way data binding in the form
4. in the form we use (ngSubmit)="onSubmit()" to submit the form and #f is used to hold the form.
5. once submitting the form we will display the form value in the console.

What we need to implement is:
1. Only allow submission only when all the form data is valid.
2. show errors in the forms.

lets add some more attributes in the input fields i.e. #username, #email in order to represent the given field so we can show errors once it has been changed. Before that let us know that angular will add its own classes in the input field when running it, which are ng-valid if the form is valid and ng-invalid if the form is invalid as well as ng-dirty if the form value is changed and ng-touched if the form input
is touched or selected. which is as shown below:



so we modify the class ng-invalid and ng-valid which is used to highlight the input field if the data is not valid.

template-driven.component.css

.ng-invalid{ border-color: red; }
.ng-valid{  border-color: forestgreen; }

so once the input is invalid the border color will turn to red and on valid it will turn to green.


Adding the error message in the form:
we will add this line of code in the form to show the error in the form for each fields

<div class="alert alert-danger" role="alert" *ngIf="!username.valid">Invalid username</div>

here #username is used to reference the username input field in the form. So once it is invalid this above line will be displayed.  Similarly we can also make the submit button disabled if the form which is referenced by f. by this way:
<button type="submit" class="btn btn-primary" [disabled]="!f.valid">Submit</button>

lets check it out all together:

template-driven.component.html

<h2>Template Driven</h2>
<form (ngSubmit)="onSubmit(f)" #f="ngForm">
  <div ngModelGroup = "userData">
    <div class="form-group">
      <label for="username">Username: </label>
      <input type="text" class="form-control"
             minlength="4"
             id="username"
             [(ngModel)]="user.username" name="username" required
             #username="ngModel">
    </div>
    <div class="alert alert-danger" role="alert" *ngIf="!username.valid">Invalid username</div>
    <div class="form-group">
      <label for="email">Email: </label>
      <input type="text" class="form-control"
             pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"
             id="email"
             [(ngModel)]="user.email" name="email" required
             #email="ngModel">
    </div>
    <div class="alert alert-danger" role="alert" *ngIf="!email.valid">Invalid email address</div>
  </div>
  <div class="form-group">
    <label for="password">Password: </label>
    <input type="password" class="form-control"
           id="password"
           [(ngModel)]="user.password" name="password" required>
  </div>
  <div class="radio" *ngFor="let g of genders">
    <label>
      <input type="radio" [(ngModel)] = "user.gender" name="gender" [value]="g"> {{g}}
    </label>
  </div>
  <button type="submit" class="btn btn-primary" [disabled]="!f.valid">Submit</button>
</form>


So here is the output:


This whole code is available in the github. check it out here 
#happyCoding


Angular 2 - Part 8 [ Forms ]


Forms in Angular has always been so interesting. We can do lots of stuffs in the forms using a little and simple techniques in angular. Forms are very important in the web applications. Forms are used to login, registrations and also for many stuffs. Dynamic web is not possible without the forms. In angular 1.x we have seen how angular helps us in developing much user friendly forms. In angular 1.x all the forms are template driven where as in angular 2 we can also create a data-driven forms too which are much easier and easy to learn as well.
So in the later two tutorial we will discuss on how we can create two types of forms using angular 2 which are: 
  1. Template-Driven: Most of the logic are included in the template 
  2. Data-Driven: Logic are applied via a internal implementations
Check it out the examples of each type of in the upcoming tutorials. 
#happyCoding


Anagram Solution in Java

Recently, I gave a technical interview one of the reputed software company in silicon valley. Here are the question and it's solution.

Problem: Anagram Problem

Anagram is a word that can be obtained by rearranging letter of the another word, using all the constituent letter exactly once.

Solution:




//Ouput will be

//{"apple", "perl"}, this is not anagram and to make we need to add: 2 character
  //{"lemon", "melon"} , this is anagram and it return 0

Angular 2 - Part 7 - [Routing]





This is the most interesting in the angular which makes our app super awesome. Using this techniques we can make our app single page application. In order to use this in angular 2 we need to use the @angular/router module. There are various steps to accomplish this feature in the angular app.

1. Set the base url
In every single page application we need to set the base URL in angular 2 we will do this using the
<base href="/" /> tag in the header section of the index.html page

2. Now we need to create a file in order to save all the routing information. So lets create a file call app.route.ts in the app directory. inside that we need to specify our routing information like:

import {Routes, RouterModule} from "@angular/router";
import {HomeComponent} from "./home/home.component";
import {VideosComponent} from "./videos/videos.component";
import {BlogsComponent} from "./blogs/blogs.component";
import {ContactComponent} from "./contact/contact.component";


const APP_ROUTE: Routes = [
  {path: '', component: HomeComponent},
  {path: "videos", component: VideosComponent},
  {path: "blogs", component: BlogsComponent},
  {path: "contact", component: ContactComponent}
];

export const routes = RouterModule.forRoot(APP_ROUTE);

here we are crating the routes as a constant value which stores all the routing information and is also ready to share with external elements using the export keyword. We have added this route information for the root using the forRoot().
so when ever we hit the root url the home componet will get called. similary if we hit url with /videos then the VideosComponent will get loaded and so on.

3. Now we need to import the route information in our app.module.ts file like:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { routes } from "./app-routing.module";
import { VideosComponent } from './videos/videos.component';
import { BlogsComponent } from './blogs/blogs.component';
import { ContactComponent } from './contact/contact.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    VideosComponent,
    BlogsComponent,
    ContactComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routes
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. Now everything is set up. Then we need to decide where to use the routes. In my condition I have used this in the appComponet using the <router-outlet></router-outlet>. Which means the dynamic views will be loaded on this tag and other parts will remains the same. here is the code for the app-componet.html:

....
....
<main class="mdl-layout__content">
    <div class="page-content mdl-grid portfolio-max-width">
          <router-outlet></router-outlet>
      </div>
</main>
...
...

Here the view will be loaded dynamically inside the <router-outlet> tag.


5. Now we are ready to use this module but still we cannot use the #/youlink like tag like in
angular 1. To call the router link from the html we need to use routerLink attribute in the link like this


...
<nav class="mdl-navigation">
        <a class="mdl-navigation__link" routerLink="/"><i class="material-icons">home</i> Home</a>
        <a class="mdl-navigation__link video" routerLink="/videos"><i class="material-icons">music_video</i> Videos</a>
        <!--<a class="mdl-navigation__link" routerLink="/"><i class="material-icons">developer_board</i> Experiences</a>-->
        <a class="mdl-navigation__link blog" routerLink="/blogs"><i class="material-icons">library_books</i> Blogs</a>
        <a class="mdl-navigation__link contact" routerLink="/contact"><i class="material-icons">mail_outline</i> Contact</a>
      </nav>
...

Now if we run the application then we can see our router in effect. Here we can add extra attribute called routerLinkActive inorder to change the style for our active link. for this we need to pass the css class.


You can see the full code of the application used in this totorial at here
Stay tuned for more awesome tutorial. happy coding :)