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

Read More

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 :)

Read More