Programming paradigm

InterView Preparation -

Log Day 1 -

1) Angular 2 + supports various javascript frameworks

2) Dart, Typescript,ES6 ,ES5 --> langulages used to develop applications in Angular 2 framework

3) Javascript modules are the collection of javascript objects using JS Module Pattern

   a)  classic Pattern i.e

   var sampleModule = (function() {

//private variables
var a=10;
var b=20;

//private functions
var getSum = function(){
return (a+b);
};

//private functions
var getProduct = function(){
return  (a*b);
};

//expose objects
return{
sum: getSum,
procduct: getProduct
}


   })();

   Console.log(sampleModule.sum());
   console.log(sampleModule.product());

   ()--> is for exexuting the objects



  b) CommonJs Pattern

  var sampleModule = function() {

//private variables
var a = 10;
var b = 20;

this.sum = function(){
return (a+b);
};

this.product = function(){
return (a*b);
};

  }

  module.export= sampleModule; 

  /* using the module  */

  var mod = require('sampleModule');
  var obj = new mod();  ()--> is used for executing the funtions
  console.log(obj.sum());
  console.log(obj.product());


  c) AMD Pattern

   define([] , function() {
    //private variables

var a = 10;
var b = 20;

    // exposes public object/Members
return {
sum: function(){
return (a + b);
},
product: function(){
return (a * b);
}

};
   });

   var o = require('sampleModule');
   console.log(o.sum());
   console.log(o.product());

or

  require(['sampleModule'],function(o){
console.log(o.sum());
console.log(o.product());
  });



  d) TypeScript Pattern

class SampleModule{

private a:number = 10;
private b:number = 20;

}

public sum() {
return (this.a + this.b);
};

public product() {
retrun  (this.a * this.b);
};

};

export (sampleModule) ;

import {sampleModule } from "./sampleModule";
let obj=new sameplModule();

console.log(obj.sum());
console.log(obj.product());

4) Classic pattern is supported by all the browser , the other pattern require special libraries for them to working , i.e System.js WebPack (they are the module loader to make
   the browser undertand the export and import , require keywords ) and Typscript(Transpiler) to convert the typescript pattern to javascript

5) Angular modules -->
   Angular module is a way of bringing the UI componets , metadata markups etc under same unit . They will enable to load the UI components stiched togeter with the
   metadat

   Angular Module Template -->
 
   import { NgModule }  from '@angular/core';
   import ...;
   @NgModule ({
...
   })
   export class DempClassModule {
...

6) Angular 2 application will have a at least one module i.e appmodule or the rootmodule , It can have multiple modules and are called feature modules specific to fun
   ctional aspect of the application

7) Angular 2 component is the collection of markup + class handling the events from the markup + metadata . Components should be a part of the module. The AppModule
   will bootstrap the components

   Angular component
 
   import { component } from '@angular/core'
   ...
   @Component ({
})

   export class AngularComponent {
   ...
   }

8) Angular CLI - tool that provides all the libraries for developing an application in Angular 2
9) Js Module Loader - is required if the Javacript module patteren like common , AMD, typescript pattern and would require System.js, Require.js, Webpack
10) JS TaskRunner - > gulp , grunt, webpack


11) Bootstrap --> "How to start an application " based on the platform in which the application is running . the libraries , framework would get adjusted accroding to the browser ,mobile  etc
    There are mainly three types of BootStrapping -  server side, browser based , mobile based
12) Angular 2 JIT compiler -> all the marksups are sent to the browser and the browser compiles all the markups dynamically within the browser and load the applition - Development Purpose
    Angular 2 AOT compiler (Ahead of time) - precompiled files are sent to browser and loads the application - Production Purpose
13) main.ts will be the starting point of the application and is quite generic across all the applications . main.ts will bootstrap the root module or the app module
    platformBrowserDynamic().bootstrapModule(AppModule)
    @angular/platform-browser-dynamic - > Compiler JIT


Important libraries for Angular which is required in the package.json file

Internal Libraries

@angular/compiler
@angular/core
@angular/forms
@angular/http
@angular/platform-browser
@angular/platform-browser-dynamic
@angular/router


External Libraries
1) core-js
2) rxjs
3) zone.js

Javascript ModuleLoader
1) systemjs

transpiler
2) typescript

Day - 2

1) npm install will restore the node modules by referencing the package.json files

2) Angular Js
   Angular expression {{ }} ---> angular evaluates the {{ }} and replaces the expression with the result
3) Angular Module --> this is contain all the application related logic . this will contain all the different components which will be resposible for individual functionality

   angular.module("Sample",[]) --> "Sample" is the name of the module , [] -> implies that we are creating the module . If we do not provide the second parameter [] , it will imply that
   that the module is an already existing one . [] -> also signifies that there is no dependency

4) ng-app directive --> binds the angular application to the index html at any level (body,div,head)
5) ng-app cannot be nested
6) {{ }} --> this is an angular expression and will contain javascript code , without if, loop, etc
7) ng-controller , when a html directive is decorated with the ng-controller directive , a spearated memory block out of browser's allocated memory is allocated to it and any operation within the
   controller function is done and templated and appended to the main html. We can say a logical context is created for that particular html block. This context related to controller is called scope
   wheneve a controller instance is created , a $scope is created by angular and merged with the controller instance , so this scope will act a mediator between controller and view . Controller instances are
   destroyed one the application is routed to different route

var sample = angular.module("sample",[]); ---> Step 1 : Module is created by the name "Sample" with no dependecies

sample.controller("emp",["$scope",function($scope){ ---> Step 2 : Controller "emp" is defined created
$scope.Name="Hello"
}]);


sample.controller("empdetails",["$scope",function($scope) { ---> Step 3 : Controller "empdetails " is defined
$scope.Sal= 3400;
$scope.Dept = "Sales";
}])

when the below code is executed the parsers does the below

<body ng-app="sample"> ---> the module instance is created . and the rootScope is created
<div ng-controller="emp"> ---> $scope is created and then emp instance is created and  $scope is assigned to it , $scope will have scope for the entire block
details of <strong> {{ name }} </strong>      $scope is associated with the DOM level object.Once the $scope is assigned to the controller , the controller function is executed and
---> all the variable,expressions in the block and nested blocks are assigned value .
<div ng-controller = "empdetails"> ---> Angular Js compiler creates a new $scope object nested within the parent $scope created above . The child scope will have all the members of the parent $scope by $scope inheritence .
{{ Name }} earns {{ Sal }} and works in {{ Dept }} department --> The expressions are evaluted and if values is not present in the current scope , it is searched in the parent scope and searched level up
</div>
</div>
</body>

8) from the above we can summerise the lifecycle of a $scope object

1) Creation of $scope object for the html controller block
2) Creation of Controller instance associated and assignment of $scope to the controller instance
3) The controller function is executed and $scope will get all the properties defined in the controller
4) The compiler will evalute all the expression based on the $scope object

9) The Scope that is created at the ng-app level is the rootscope
10) one way binding ---> Data flows from $scope to view  i.e ng-bind -> the view only receives data from the $scope 
    two way binding ---> Data flows from $scope to view and from view to $scope i.e ng-model
    one time data binding ---> all the $scope data is propagated to the view only one time . performed by :: as a part of evaluation expression

Day ----> 3

11) Service ---> special unit of code which can used across different controller , This is instantiated only once and same instance is shared across all the angular js controllers and modules
12) Controller are created immediately once the angular parser finds a reference  of the controller in the view . But when the controller refers to a service or a controller is instantiated , then service is in
    instantiated .
13) Service can use another service . Srvice i.e $log ,$http,$location etc
14)  There are three types of service , Factory , Provider , Services

Factory --->  Returns an object to the controller which can be used to access the services

var app= angular.module("app",[])
app.controller('emp',["$scope" , function($scope,MyFactory) --> the factory instance is accessed here
MyFactory.dosum();
}]);

app.factory('MyFactory',function(){
var service_ = {}     --> The service instance is created and properties are assigned to it
service_.dosum= function(){}
return service_
});

Service --->

var app= angular.module("app",[])

app.controller('emp',["$scope" , function($scope,MyService) --> the service instance is created or accessed here by Angular js
MyService.dosum();
}]);

app.service('MyService',function(){ --> All the methods are associated with the service in the constructor function like controller
this.dosum= function(){}
});

Note: The difference between Service and Factory is that in case of service the instance is created by Angular Js and in case of factory we need to create the instance of the service

provider ---> Underlying Service and Factory we use provider, While sending configuration information into service and factory
var app= angular.module("app",[]);

app.controller("emp",[$scope,calService,function($scope,calService){ --> calls the calServiceProvider instance
calService.doSum();
}]);

app.provider('calService',function(){
var baseUrl='';
this.config= function(url){
baseUrl=url;
}
this.$get = function(){
var myService= {};
myService.doSum = function(){

};

return myService;
}
});

app.config(["calServiceProvider",function(calServiceProvider){
calServiceProvider.config('http://localhost:XXXX');
}]);

Day 4 --->

Directive -> mainly three types
. Components --> Custome Element and containing its own template , will be independent on its own
. Decorator  --> Enhance functionality of existing directive , Here we have a ng-click directive , so Decorator directive will enhance the exiting functionality of ng-click
. Templating --> a kind of a directive which manupulates the DOM and have its own structural templates
Day 5 --->

1)Comilation phase is performed only once
2)Complile --> Controller --> Pre --> Post

Day 6 --->

Angular 2
Component - The are the building block of angular application . It consists of class which is exported and decorators contain templating , selector and styles . Components can be imported like any other modules
consists of
templates : Defines the HTML view to be displayed in the application
Metadata : Used to decorate the class and extend the functionality of the class , They decorates the class as components (@component() as a decorator) or service (@Injectable() as decorator)
Class : This is like other OO programin class which consistes of methods and properties

typescript - It provides a modular programming approach in javascript with features like strong typed , OO structure etc over normal javascript coding . We have typescript compiler which converts the typescript to javascript understandable by the browser.
Serivce - They are code blocks which is used to share data among different componenets
Modules - they are logical separation of application and may consists of multiple components
Templates - this is a view binded to each components of Angular 2 app
Metadata - They decorates the class as components (@component() as a decorator) or service (@Injectable() as decorator)


Modules consists
1) Bootstrap Array - this will give information about which component needs to be loaded  and its functionality can be accessed across applications
2) Export Array - This can be used to export components , directives and pipes which can be used in other modules
3) Import Array - this is used to import the functionalities

Directive - *ngIf,*ngFor - This is a custom HTML which is used to extend the power of HTML , *ngIf and *ngFor are the two custom directives

Error Handling - Angular 2 applications can handle error using the ReactJS catch library . The catch function will have links to different Error handling functions . The error can be outputed to console

Routing - This component helps user to move to different route/paths defined in the application and based on the selection ,appropriate component will be rendered

Angular CLI-  Helps in creating Angular JS application . It also helps in creating Unit and end-to-end test for the application

Dependency injection - to make a class injectable use decorator @injectable() and the class instance can be passed as a parameter in the constructor of a component class . For Angular 2 it the injectable class
must be included as a provider array in the angular module with @NgModule() along with ( declaration array, imports array, provider array, bootstrap array).Dependency injection is a combination of two terms, those
are dependency and injection . Dependency is a object or service that can be used in any another object and injection is a process of passing the dependency to a dependent object.It creates a new instance
of class along with its required dependency

ngOnChanges -- When the value of a data bound property changes, then this method is called.
ngOnInit -- This is called whenever the initialization of the directive/component after Angular first displays the data-bound properties happens
ngDoCheck -- This is for the detection and to act on changes that Angular can't or won't detect on its own
ngAfterContentInit -- This is called in response after Angular projects external content into the component's view.
ngAfterContentChecked -- This is called in response after Angular checks the content projected into the component.
ngAfterViewInit -- This is called in response after Angular initializes the component's views and child views.
ngAfterViewChecked -- This is called in response after Angular checks the component's views and child views.
ngOnDestroy -- This is the cleanup phase just before Angular destroys the directive/component.

Angular 2 Directive

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

@Directive({
selector:'[my-highlighter]'
})

export class MyClassHighlighter{
constructor(el:ElementRef){
el.nativeElement.style.background='yellow';
}
}


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

@Component({
template:`
<h1 my-highlighter> My Directive </h1>
`
})

export class AppComponent{}

Token based Authentication

http://bitoftech.net/2014/06/01/token-based-authentication-asp-net-web-api-2-owin-asp-net-identity/

Angular 2 ,4 Installation

1) npm init
2) npm install --save @angular/common
3) npm install --save @angular/compiler
4) npm install --save @angular/forms
3) npm install --save @angular/http
3) npm install --save @angular/platform-browser
3) npm install --save @angular/platform-browser-dynamin
5) npm install --save @angular/router
npm install --save core.js
npm install --save rxjs
npm install --save zone.js
npm install --save systemjs