Angularjs 2

Angularjs 2

It is very powerful and latest advanced language makes easy development;it gives full control on business logic which is related to specific HTML page. It provides predefined directives and makes developers job easy. It is simply like Java. This language is very easy for java developers to learn.
It is streamlined front end development and editor support to show compilation errors.

It provides library modules. These starts with @angular prefix and these should be installed using npm package manager Ex: npm install --save react

Each and every angularjs 2 application have a bootstrap root component it hosts all the application views and this should be specify with @NgModule under meta-data.

Sample bootstrap root component:
import { NgModule }      from '@angular/core';
...other imports...
@NgModule({
  imports:        [ imported components with comma separated ],
  providers:     [ providers with comma separated ],
  declarations: [ ------------------------------ ],
  exports:         [ ------------------------------ ],
  bootstrap:      [ ------------------------------ ]
})
export class AppModule { }

Angulajs 2 uses type script so files will be saved with .ts extension. File contains might three sections
such as 1) imports - we will import pre defined angularjs directives and user defined components  etc, 2) meta-data - this information is about class 3) class - it contains member variables, constructor, life cycle methods and user defined  methods.

This is component based language and it separates clearly HTML code and model code.

Component:

Component through which we can access html elements. Implement html elements events methods in component. Component is similar to class only but it has life cycle methods and constructor. Angularjs2 provides predefined directives and we can import them on demand to use.

Component controls the view and provides functional support for events of view. Need to define for functionality for each and every event of the view in component.

Client side business logic can be implemented  as service which we can use wherever we want.

Member variables of the component can be mapped to html controls.

The class must be annotated with @Component in the meta data section then only AngularJs treats as component otherwise it is a simple class

Sample component syntax:

import { Component, OnInit, ngAfterViewInit,ngOnDestroy } from '@angular/core';


import { HelloService } from './hello.service';

@Component({
  selector: 'hello-world-app',
  templateUrl: 'hell-world-app.html',
  styleUrls: ['hell-world-app.css'],
  providers: [HelloService]
})

export class HelloWorldAppComponent implements OnInit {
  var title:string = 'Hello World';

  constructor(private _helloService: HelloService) { }

  userdefeined methods  to handle html events

  ngOnInit() {// Initializes the component
     ---------------
     ---------------
     ---------------
  }
  ngAfterViewInit() { //this method will be called after rendering component and its child components
--------------
--------------
--------------
  }
  ngOnDestroy() {// this method will be called before destroying component
--------------
--------------
--------------
  }
}

component have name, member variables which are available to all component methods and can be linked to html elements, and member methods which can be linked to html element events.

Angulajs-2 files need to save with .ts as it uses typescript.

 selector: 'hello-world-app'
        hello-world-app will be used to include this component in other html pages.

class HelloWorldAppComponent
       HelloWorldAppComponent it will be used to include this component in other components.

 template : It allows to write html code in the component between backticks. This is not good pactice.
templateUrl : it will be used to specify html file

providers: we have to specify here with comma separated if component required any other services.

export: if you want import this component in other components then then it must be defined with export key word.

Development story starts using npm install, npm start commands and visualstudio editor

Life cycle hooks:


ngOnInit:
------------
It will executed only once in the component creation to do initialize; It will be executed after constructor and after first ngOnChanges execution.

ngOnChanges :
--------------------

This method will be execute whenever input data properties resets and this method will be called before ngOnInit. Previous and current values are available for this method.

ngAfterViewInit:
----------------------
In Parent component - This method will be called after rendering child components and parent component.

In Child component -
      Case 1: This method will be called after rendering child component
      Case 2: Special case suppose in your application back and forward buttons implemented and     while navigating between components and changed input then it renders child components again
  so then also it will be executed (We used this functionality in child components only).

Routes in angularjs2:
----------------------------

We have to put base anchor tag in index.html, need to pass as array ROUTER_PROVIDERS to bootstrap in boot.ts, need to define router links and router outlet in app component, need import ROUTER_DIRECTIVES and RouterConfig in app component, need to define RouterConfig which is decorator with all the routes.

step 1: <base href="/">       in index.html

step 2: bootstrap(AppComponent, [ROUTER_PROVIDERS]     in boot.ts

step 3: In app component html under header need to specify router links
            <nav>
                <a [routerLink='routerLink1']> Click Link1</a>
                <a [routerLink='routerLink2']> Click Link2</a>
            </nav>

step 4: In app component html need to specify router outlet
            <div>
               <router-outlet></router-outlet>
           </div>
step 5: Need to mention ROUTER_DIRECTIVES in directives section.

step 6: Need to define RouteConfig decorator in app component
         
           @RootConfig([

                     {path:"link1", name:"routerLink1", component:"UserDefinedComponent1", useAsDefault:"true" },

                    {path:"link2", name:"routerLink2", component:"UserDefinedComponent2", }

             ])

Site for complete documentation: https://angular.io 

B star tree structure

B star tree structure

Journey of byte

Journey of byte

Step 1: Whenever user tries to open file in system or save file; application manger sends request to file manger.
Step 2: The file manger handovers the request to I/O manager.
Step 3: The I/O manger handovers the request to disk manager.
Step 4: Disk manger reads the contents of disk and fillis into buffer and handover back to I/O. I/O to file  manger. File manager to application. Finally Application shows the file contents.
Step 5: Disk manager reads contents from sector. sector is set of bytes. And file is not stored into continues sectors. Read write head is responsible to read or write contents from the disc so read write head has to identify starting of the sector and ending of the sector. After reading or writing contents into sector it has to identify sector ending so it is required some time. As well it has to identify next sector staring this also required some time. So while storing file contents into disc; it writes contents into first sector and leaves some sectors and it writes; it continues like that. So one spindle of the disc it reads or writes into multiple sectors.

Each sector contains the information about ending of the sector and next sector starting.