Angular 5- POC- techsith Topics with ng4

Angular-youtube-techsith
===================
Source code https://github.com/gnganpath/learningAngular4techsith
topics : Routing, ChildRouting based on url
Serivces, asObservables, BehaviorSubject

Angular 4 Tutorial series of beginners
=======================================
Video:1 -> setup using CLI
----------
node -v -> v6.11.11
npm install -g @angular/cli
to verify angular install
type ng or ng help
crate project with $ng new learningagular4
package.json
------------
All dev and dependecies are mentioned.
dev: agulare cli, karma, zone,
dependecies: angular core, common, http, rxjs
tsconfig.json
-----------
configuration file for compiler option, libra, target:es5

ng serve --open
change the default code and run
ng test will open in localhost:9876 -- some other port and provide the details
before commit your code do the difference
$git diff
$git status
$git add .
$git commit -m "first commit"
$git push -u remote branch

video:2 ->intro to Typescript
--------
typescript is created by microsoft.
Angular1 is MVC based. But want to crate in component archi based.
So, JS don't have component sbased archi. So typescipt will ES6 to transpile ot ES5.

http://www.typescriptlang.org/play/
Ts - data type
let x = 'hi;
x=2;  Type error string not assignable to number error.
But in JS
var x = 'hi';
x = 2; reassignable. not give error in string and number.
So, to solve  this issue,
let x;
x='hi'; then x =2. not error.

But TS standard is => let x:number =2;
Data Types in TS are => string, numberm, boolean, any; [array, null, undefined, void, enum]
public, private, protected access modifier

class car{
public maxSpeed:numner;
private color:string;
protected price:number;
}
class Toyota extends car{
    constructor(maxspeed, color,price ){
    this.maxspeed = maxspeed;  
    this.color = color;  // error. private var we can accesswith getter and setter method.
    this.price = price;
    }
}
public and protected variable are access thorugh subclass not private variable.

Video:3 -> components using cli
----------
component in angular is heart of app.
$ng new learningagular4 from video:1
$ng g c main-container
compontnent.ts
names = ['kt','sa', 'hcl','trz']
maincontainer.html
    <app-outer [outername]="names"></app-outer>
template.html
    {{names }} == > kt,sa,hcl,trz -->even names is arrya while to do interpolation its will be string
$ng g c outer
outer.component.ts
 @Input() outername;
outer.template.html
 <div>{{ outername}}</div>
$ng g inner
inner.component.ts
import { Component, OnInit,Input ,Output,EventEmitter} from '@angular/core';
@Input() innername;
@Output() eventFromInner = new EventEmitter<string>();
sendtoOuter(){
    console.log('emit')
    this.eventFromInner.emit(this.innername);
}
inner.html
<div class="inner">
  inner compoent
  <span class="name">name: {{innername}} </span>
  <button (click)="sendtoOuter()">send to outer</button></div>
 
modify outer

outer.component.ts
 name = '';
 @Input() outername;
  eventFromInner(passed:string){
    this.name = passed;
  }
outer.template.html
 selected : {{name }}
  <div>array names: => {{ outername}}</div>
  <app-inner *ngFor="let name of outername" [innername]="name" (eventFromInner)="eventFromInner($event)"></app-inner>

Conculstion: pass data from inner to outer and alos pass to main-conintainer
child to parent also grandparent

Video:5 angular4/5 HTTP GET/POST requests
----------
import the HttpClientModule in app.module.ts
next need to create server api file.
Same like myjson API, through github we can create and maintain the file like live API

https://github.com/techsithgit/json-faker-directory/profiles/name?=john

using httpInterceptorModule we can do the post opearaiton.

Video:6 => Routing
--------

Home page, about page, user page... inside user -user details page also
If not valid routing page also goto home page

const appRoutes : Routes =[
 
  { path:'home', component:HomeComponent },
  { path:'about', component:AboutComponent },
  { path:'user', children:
    [
      { path: 'list', component:UserlistComponent,
        children: [
          {path: 'detail/:name', component:UserComponent}
        ]
      }
    ]
  },
  { path:'', redirectTo:'/home', pathMatch: 'full'},
  { path:'**', redirectTo:'/home', pathMatch: 'full'}
]

Video:7  =>  Services
-----------
Share data between 2 services


Video:8 => services Data sync with Observable and behavior subject
-----------
$ng g c one
$ng g c two
$ng g service user
inside UserService ->
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
BehaviorSubject help us to front forth between front end and backend communication
need to broadcast to change the value updated by other component
import { Component, OnInit } from '@angular/core';
import { UserService } from '../user.service';

@Component({
  selector: 'app-two',
  templateUrl: './two.component.html',
  styleUrls: ['./two.component.css']
})
export class TwoComponent implements OnInit {
  user;
  constructor(private userService: UserService) { }

  ngOnInit() {
    this.userService.cast.subscribe( user => this.user = user)
  }

}

one.tempalte.html
<input type="text" [(ngModel)] = "editoneUser" > <button (click)="edittheUser()">change</button>
one.component.ts
import { UserService } from '../user.service';
export class OneComponent implements OnInit {
 user:string;
 editoneUser;
  constructor(private userService: UserService) { }

  ngOnInit() {
    this.userService.cast.subscribe( user => this.user = user)
  }
  edittheUser(){
    this.userService.editUser(this.editoneUser)
  }

}

Video:9 => Unit test cases
-----------
unit test, acceptance test e2e test
jasmine, karma, protractor
jasmine  behavior driven
karma help to run test cases in multiple brwoser
jsmine help to do structural code for better performance level

We can able to change the browser testenvironemnt using, karma-firefox-launcher, firefox browser

to install firefox brwoser enable
$npm install karma-firefox-launcher --save-dev

Video:10=> sass(scss), less to your angular project
---------
$ ng new projectName --style=scss
 to change sacc to less

$ng set defaults.stylesheet less -> automatically change the property to less

Video:11 => Angular e2e testi protractor
--------