Executor Framework

Executor Interface

  • The most important root interface in executor interface.
  • It has only one method
    void execute(Runnable task);

ExecutorService Interface

  • Extends Executor interface.
  • Provides an lifecycle to an executor i.e an initialization phase, service phase and destruction phase.
  • Some of the methods provided by ExecutorService are
    <T> Future <T> submit(Callable<T> task)
    <T> Future <T> submit(Runnable<T> task)
    void shutdown()
    List<Runnable> shutdownNow()
    boolean isShutdown()

Executors Class

  • It is a factory class that constructs and returns various kinds of instances of ExecutorService with commonly used Executors setting.
  • public static ExecutorsService newFixedThreadPool(int nThreads);
    • Specifies the number of threads you want in the pool.
  • public static ExecutorsService newCachedThreadPool(int nThreads);
    • This kind of ExecutorsService keeps on creating thread until no thread is available
  • public static ExecutorsService newSingleThreadExecutor();
    • Background thread that executes one by one from a queue sequentially
    • Never executes more than one thread simultaneously
  • public static ExecutorsService newSingleThreadScheduledExecutor();
    • Executes only one thread at a time.
    • Can schedules the delay when the thread has to be executed.

Simple Jenkins Job

First we will create a simple java program which will be executed by Jenkins

File nam : Demo1.java

public class Demo1 {
	public static void main(String[] args) {
		System.out.println("Hello Jenkins");
	}
}

Make sure your Jenkins service is running and hit the below URL
http://localhost:8080/

It will ask you to login and login into it and you will see below screen.Click on the New Item hyperlink.

After click one New Item, below screen will appear :

  • Enter the item name as “HelloWorld”
  • Select “Freestyle project” using mouse click and press on OK button.

In the build section :

And click on Save

After Clicking on Jenkins in the left top cornor you will be able to screen as above.
You build the project by clicking on the right side of the job.

That is how you create a jekins job.

Install Jenkins

Download jenkins from https://pkg.jenkins.io/debian-stable/

Jenkins URL After installation will be :
http://localhost:8080/

Jenkins Unlock using below file:
/var/lib/jenkins/secrets/initialAdminPassword

Use the text inside the file to unlock jenkins
o999be21ce834c8cb202f8671d46d999

Commands to stop start and check status of jenkins

  • sudo systemctl status jenkins
  • sudo systemctl stop jenkins
  • sudo systemctl start jenkins
  • sudo systemctl restart jenkins

Routing in Angular

Why do we use angular routing?

  • Lets say if you want to navigate to different pages in your application but you also want you application to be a single page application then we use angular routing.
  • That means even though you click on different links and the page loads without loading and refreshing of the page also the URL changes and the page is rendered.

Points to remember :

  • routerLink is an alternate to href on anchor tag which helps Angular nagivate without refreshing the whole page.
  • routerLink can also take array as an input for the case of multiple text seperated by [/]
  • <router-outlet> is a tag which is replaced with the component tag at run time i.e when you click on the a routerLink the corresponding component is fetched from the RouterModule mapping of URL and component and replaced at the place of router-outlet tag.
  • routerLinkActive is a style directive given by angular to show the selected routerlink
  • [routerLinkActiveOptions]=”{exact:true} is property binding which saying only turn routerLinkActive if exact URL is matched example “/” is part of all URL in this case we can use it.
  • We use routerLink to navigate from a UI(html) to another UI(html/component) but if we want to make a navigate programmatically via a typescript file then we need to
    • Inject router class using constructor of that type script class
    • Use the navigate method of router class to navigate to that page
    • Example : this.router.navigate([‘/users’]);
  • ActivateRouter is a class that gives the current route in a Type Script class
  • We can pass dynamic parameter into routes using : before the name of path of route
    Example : const appRoutes: Routes = [{ path: ‘users/:id’, component: UserComponent}];
  • We can read the dynamic parameters from the ActivatedRoute in TS file using
    • Inject a ActivatedRoute using constructor.
    • Read the dynamic parameter from the activated route using this.activatedRoute.snapshot.params[‘id’];
  • We can use Router Observables if you want change content of the same page asynchronously on some event performed/occured on the same page.

Example : In the below example we create a menu bar and corresponding pages to be displayed when the menu is clicked

We create a project in angular using angular cli and add three components into it.

ng new RouterDemo
ng g c home
ng g c reptiles
ng g c animals

We edit out app.module.ts file as per below :

import { Routes, RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Component } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BirdsComponent } from './birds/birds.component';
import { ReptilesComponent } from './reptiles/reptiles.component';
import { HomeComponent } from './home/home.component';

const appRoutes: Routes = [
  { path: '', component: HomeComponent},
  { path: 'birds', component: BirdsComponent},
  { path: 'reptiles', component: ReptilesComponent}
]

@NgModule({
  declarations: [
    AppComponent,
    BirdsComponent,
    ReptilesComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {

}

We edit the app.component.html file as below :

<div>

  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link" href="/">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/birds">Birds</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/reptiles">Reptiles</a>
    </li>
  </ul>

</div>
<router-outlet></router-outlet>

We edit home.component.html file as below :

<p>Welcome to the Zoo</p>

We edit birds.component.html file as below :

<p>Welcome to the Bird Sanctuary</p>

We edit reptiles.component.html file as below :

<p>Welcome to the world of reptiles</p>

And the output looks like below :

Service and Dependency Injection

First to demonstrate Service in Angular we need to create a demo project using angular CLI and make a child component and a service using the Angular CLI

ng new ServiceDemo
ng g c child
ng g s date

Now modify the date.service.ts as per below.

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DateService {
  showTodayDate() {
    return new Date();
 }
}

Modify app.component.html as below :

Todays Date time displayed in Parent Component : {{todaysDate}}
<app-child></app-child>

Modify app.component.ts as below :

import { DateService } from './date.service';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{
  title = 'ServiceDemo';
  todaysDate;

  constructor(private dateService: DateService) {}

  ngOnInit() {
    this.todaysDate = this.dateService.showTodayDate();
 }
}

Modify child.component.html as below :

<p>Hi This is child component!</p>
Todays date time displayed in child component{{todaysDate}}

Modify child.component.ts as below :

import { Component, OnInit } from '@angular/core';
import { DateService } from '../date.service';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  todaysDate;

  constructor(private dateService: DateService) {}

  ngOnInit() {
    this.todaysDate = this.dateService.showTodayDate();
 }
}

Note : We need to add the service in the providers section of app.module.ts file as below :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { ChildComponent } from './child/child.component';
import { DateService } from './date.service';

@NgModule({
  declarations: [
    AppComponent,
    ChildComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [DateService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Output will look like below :

Angular CLI Commands

$ node –v
(to check the version of node)

$ npm install –g @angular/cli
(to install the Angular CLI globally on our machine)

$ ng –v
(to verify the version of Angular CLI)

$ ng new FirstApp
(to generate a new app of name FirstApp)

$ ng new FirstApp –-dry-run
(this command will only report the files and not write them)

$ ng new FirstApp –-skip-install
(this command will generate a new app without running the npm install)

$ ng new –-help
$ ng new -h
(will list out all the flags associated with the ng new command)

$ ng new FirstApp –-style scss
(will be using sass instead of css in the generated app)

$ ng new FirstApp –-prefix YourName
(will set the default selector as YourName)

$ ng new FirstApp –-skip-test
(will not generate the spec files while creating the app)

$ ng new FirstApp –-routing
(will generate a new app with a default routing module)

$ ng new FirstApp –-routing –-style scss –-prefix YourName
(example of the above flags in a command combined)

$ ng lint
(will do the linting of the TypeScript code)

$ ng lint –-help
(will list out all the options available with the lint command)

$ ng lint –-format stylish
(will lint and format the output in a coloured manner)

$ ng lint –-fix
(will lint and fix all the problems if any)

$ ng generate component User
$ ng g c User
(g --> alias for generate, c --> alias for component)
(will create user.component.ts)

$ ng g c star –-flat
(Will not create a /star folder)

$ ng g c star --inline-template --inline-style 
$ ng g c star –it –is
(Will not create template/html and css file, it will be inline in ts file)

$ng g c star --spec false
(Will not create a spec file)

$ ng g c star --prefix pj
(Prefix the component with pj-)

$ ng generate service user-data
$ ng g s user-data
(will create user-data.service.ts)

$ ng generate class user-model
$ ng g c user-model
(will create user-model.ts)

$ ng g module admin
$ ng g m admin 
(It will create admin.module.ts)

$ ng g m sales --routing
(It will create sales.module.ts and sales-routing.module.ts)

$ ng serve --poll=2000
(If your server is not detecting the changes you call fire this command to increase the polling capacity of server)

$ ng serve -o
(opens the hyperlink in browser after compilation in successfull)

LifeCycle hooks in Angular

  • ngOnChanges
    • If a new component is create in Angular and if angular is responsible to create the component then ngOnChanges() method is called.
    • This lifecycle hook is also called when the value of variable decorated with @Input decorator changes.
  • ngOnInit
    • This lifecycle hook calls methos ngOnInit() and it is called when a component is initialized.
    • It does not mean the component has been rendered into the DOM but only means the object has been initialized.
    • ngOnInit() method is called after the constructor of that class.
  • ngDoCheck
    • This lifecycle hooks will run multiple times.
    • This method will be called whenever change detection runs.
    • In run when every there is a change on the DOM like a button press
  • ngAfterContentInit
    • This lifecycle hook is called whenever the content of ng-content has been projected into the view.
  • ngAfterContentChecked
    • Called when change detection happens to ng-content in our component.
  • ngAfterViewInit
    • Called when the view of the component has been finished initialising.(View has been rendered)
  • ngAfterViewChecked
    • Called when all the changes detected by change detection has been completed.
    • Or even when no changes has been detected in our component by change detector.
  • ngOnDestroy
    • Called once the component is about to be destroyed.
    • Best place to do the cleanup work

Using LocalReference with @ViewChild

  • Can be used in place of property binding.
  • Designed to send data between components
  • We can change the DOM data using Element Ref value of ViewChild but it not recommended to use in that way.
  • After Angular8 @ViewChild annotation takes two values.

Changes in app.component.html

    <label>Enter text here</label>
    <input type="text" #textBoxRef>
    <button (click)="onButtonClick()">Click Me</button>
    <p>The text entered in the text box is {{msg}}</p>

Changes in app.component.ts

import { Component, ViewChild, ElementRef } from '@angular/core';

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

  @ViewChild('textBoxRef', {static: true})
  textBoxRef: ElementRef;
  title = 'LocalReferenceDemo';
  msg: string;
  onButtonClick(){
    this.msg = this.textBoxRef.nativeElement.value;
  }
}

Output :