Posts

Oauth 2.0 Authorization using OWIN OAuthon ASP.NET Web API

This solution was developed by Ole , it can be found in his blog https://olepetterdahlmann.com/2016/08/08/implement-an-oauth-2-0-authorization-server-using-owin-oauth-middleware-on-asp-net-web-api/ 1) Create an empty Web project with "Web API" as template and "No Authentication" as authentication mechanism 2) Install the below dlls Microsoft.AspNet.WebApi.Owin Microsoft.Owin.Host.SystemWeb Microsoft ASP.NET Identity Owin Microsoft.Owin.Security.Cookies Microsoft.AspNet.Identity.Owin Microsoft.Owin.Security.OAuth Update Newtonsoft.Json" version="12.0.1" 3) Package Json should be as below Package.config set up will be as below <package id="Microsoft.AspNet.Identity.Core" version="2.2.2" targetFramework="net461" /> <package id="Microsoft.AspNet.Identity.Owin" version="2.2.2" targetFramework="net461" /> <package id="...

Angular 2 Side Nav Bar

app.component.html import { Component } from '@angular/core' ; @ Component ({ selector: 'app-root' , templateUrl: './app.component.html' , styleUrls: [ './app.component.scss' ] }) export class AppComponent { title = 'app' ; isExpanded = true ; toggleFunction (): void { console . log ( 'I was clicked' ); if ( this . isExpanded ) { document . getElementById ( 'sidebar-wrapper' ). style . width = '0px' ; document . getElementById ( 'page-content-wrapper' ). style . marginLeft = '0px' ; this . isExpanded = false ; } else { document . getElementById ( 'sidebar-wrapper' ). style . width = '250px' ; document . getElementById ( 'page-content-wrapper' ). style . marginLeft = '250px' ; document . getElementById ( 'page-content-wrapper' ). style . overflowX ...

Install Angular 4 without CLI

Step 1 : npm init -- This will create a package.json file Step 2 : Copy the content of the below package.json in the created file Step 3 : npm install Step 4: Create Controller , Module ,main.ts ,tsconfig.json,systemjs.config.js,files from the below link Step 5: install http-server --save-dev -- This will add an entry in the package.json file Step 6: http-server -p 8090 --  run the application -- Access the application http:localhost:8090/index.htm Git Link : https://github.com/mazuami/Angular4Structure.git tsconfig.js { "compilerOptions" : { "target" : "es5" , "module" : "commonjs" , "moduleResolution" : "node" , "sourceMap" : true , "emitDecoratorMetadata" : true , "experimentalDecorators" : true , "lib" : [ "es2015" , "dom" ], "noImplicitAny" :...

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); }; ...

Angular Js PracticeDay2 $apply and $digest in Angularjs

Image
$apply and $digest is used to kick-in digest process manually . Mainly used when the scope variable are modified out of "Angular Context"  and /or UI need to refresh its data-bindings $apply behind the scene calls the $digest process $scope.$apply()  and $scope.$digest() $apply() it starts the digest process from the $RootScope ,After  evaluating the RootScope , the process continues through all child scopes and nested scopes one after another the angular events ng-click,$timeout and $http(ajax) etc operations  call $apply $digest - kicks digest process for the current scope (and its child.nested scopes ) only It doesn't starts from the RootScope or ParentScope If called from $Rootscope , it will be equivalent to $apply In the below example ng-model kicks in the digest process which will in turn update the UI Let understand one scenario of using $apply() Lets create the below div element in html <!-- UNDERSTANDING THE DIGEST PROCESS --> ...

Angular Js Day2 - $ watch $watchcollection, $watchgroup , ng-change

$watch keeps track of a variable and its value   <div ng-controller="mycontroller"> <input ng-model="a"> <div> {{ b }}</div> </div> app.controller('mycontroller',function(){ $scope.a=1; $scope.b=2; }) whenever a databinding with the scope variable is created , a $watch will automatically be created by the angular js framework $watch -a:1 and  $watch -b:2, And this will be used by the digest cycle . Since C is not used in any databinding , so $watch is not created for variable c. If the value gets changes for those variable, angular performs necessary updates to the DOM elements With the help pg $watch custom functions can be created which are called $watchListeners and this gets executed as soon a the value of the variables is changed They are mainly used for databinding and angular Js constantly uses watchers  behind the scene number of watchers should be kept less the 2000 There are number of ways to get...