Web Prepration

Web Concept Tutorials

Webprepration

Install Laravel 6 with Vue JS

by Leave a Comment

If you are beginner with Laravel 6 and Vue then I am sure I can help you to install Vue in Laravel 6. It’s very simple way to install using Laravel UI composer package. Laravel ui provide way to install bootstrap, vue and react setup. they also provide auth scaffold for login and register. laravel 6 provide easy way to work with bootstrap, vue and react.

If you want to use Vue Js in application then before install you must need to install Node js and NPM (Node Package Manager). If your system is not ready with Node js and NPM then you need to install. You can download the Node Js from its official site. After a successful installation, you are ready to start with Vue Js tutorials.

You can use the following commands to check the current version of Node js and NPM.

1
2
3
4
5
6
7
 
// Node js Version
node -v
 
// NPM Version
npm -v
 

The laravel/ui is a separate package that provides the UI scaffoldings for bootstrap, vue and react. Alongside with the auth scaffold for login and registration.

Read Also: How to Integrate Stripe Payment Gateway in Laravel

If you already have a Laravel project setup. then open your terminal and run below command

1
2
3
 
composer require laravel/ui
 

After successfully installation of package, Now we can add Vue in our application

Copy below command and run your terminal

1
2
3
 
php artisan ui vue
 

Installing Node Modules

You can use the “npm” command to install the necessary node modules.

1
2
3
 
npm install
 

After successful installation of node modules, you can see the new directory named “node_modules” at the root of your application. This directory contains all the necessary modules.

Vue Js Folder Structure and Files

In the Laravel app, all the necessary Vue Js component found at the “resources/js/components”.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card card-default">
                    <div class="card-header">Example Component</div>
                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>
 

In the “resources/js/app.js” file, we will do the basic logic which is required for our application.

Read Also: Angular 8 interview questions and answer

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('example-component', require('./components/ExampleComponent.vue'));
const app = new Vue({
    el: '#app'
});
 

Blade Template
You can add the required component to your blade template. For example:

1
2
3
4
5
6
 
@extends('layouts.app')
@section('content')
    <example-component></example-component>
@endsection
 

Compiling the Vue Js Component
You can use the following NPM command to track the changes in your application and compile the components and other required files.

1
2
3
4
 
// command
npm run watch
 

 

How To Log All SQL Queries In Laravel | Log SQL query in Laravel

by Leave a Comment

In this article, we will discuss “How to Log All SQL Queries in Laravel”, Log SQL query in laravel or check last execute sql query in laravel. As we know, Laravel provides rich features and flexibility to make development easy. SQL Query Logging is the most common way to debug any application. Today, I will explain Log all SQL Queries in your Laravel application.

There are multiple ways to create SQL Query Log

Default Log file

You can log all sql queries in default laravel log file laravel.log which is located at “storage/logs”. To log SQL queries, we need to add the following code snippet in the “AppServiceProvider.php” file in the “boot()” function.

1
2
3
4
5
6
7
8
9
10
11
12
13
 
use DB;
use Log;
...
// Add in boot function
DB::listen(function($query) {
    Log::info(
        $query->sql,
        $query->bindings,
        $query->time
    );
});
 

Create a custom query log file

If you want to create custom query log file “query.log” under the “storage/logs” directory. Then need to add the following code snippet in the “AppServiceProvider.php” file in the “boot()” function.

1
2
3
4
5
6
7
8
9
10
11
12
 
use DB; // Illuminate\Support\Facades\DB;
use File; // Illuminate\Support\Facades\File;
...
// Add in boot function
DB::listen(function($query) {
    File::append(
        storage_path('/logs/query.log'),
        '[' . date('Y-m-d H:i:s') . ']' . PHP_EOL . $query->sql . ' [' . implode(', ', $query->bindings) . ']' . PHP_EOL . PHP_EOL
    );
});
 

Read Also: Integrate PayUmoney Payment Gateway

Whenever the model executes then each time query is logged in the “query.log” file. And, log data looks like:

1
2
3
4
5
6
 
[2020-01-09 10:24:06]
select * from "users" where "id" = ? limit 1 [7]
[2020-01-09 10:25:04]
select "type" from "in_item" where "code" = ? and "vendor_id" = ? order by "id" desc [400000132365, 1]
 

 

How to setup Virtual Host Xampp Server

by Leave a Comment

In this article, I am going to explain “How to setup Virtual Host in Xampp server”, “Create Virtual Host” or Setup Virtual host in apache. before setup virtual host you must be aware of XAMPP Server. XAMPP is a free and open-source cross-platform web server solution stack package developed by Apache Friends, consisting mainly of the Apache HTTP Server, MariaDB database, and interpreters for scripts written in the PHP and Perl programming languages.

Why we need Virtual Host?

Virtual hosting is a method for hosting multiple domain names on a single server. This allows one server to share its resources, such as memory and processor cycles, without requiring all services provided to use the same host name. Virtual address means IP-based, you can use different IP or different name for each IP.

Read Also: Integrate PayUmoney Payment Gateway

Assume your site resides in http://localhost/client/site1 and when you want to run the site on the browser. Then it’s hard to write complete path manually.

For example: In this case, URL becomes http://localhost/client/site1
and after virtual host implements then URL becomes http://site1.dev.

Using virtual host, you can load assets from the root of your document without any movement of your site files.

Here we need to change in these important files.

httpd-vhosts.conf file located under {xampp folder}\apache\conf\extra
Window Host file located under C:\Windows\System32\drivers\etc

First we need to change apache virtual host configuration file. To create a virtual host for your website, you need to add your code in this file.

1
2
3
4
5
6
7
8
9
10
 
<VirtualHost site1.dev>
    ServerAdmin webmaster@site1.dev
    DocumentRoot "D:/xampp/htdocs/site1/public"
    ServerName site1.dev
    ServerAlias site1.dev
    ErrorLog "logs/dummy-host2.site1.dev-error.log"
    CustomLog "logs/dummy-host2.site1.dev-access.log" common
</VirtualHost>
 

Read Also: Paytm Payment Gateway Integration in Laravel

As you can see in the above code, we have ServerAdmin, DocumentRoot, ServerName, ServerAlias, ErrorLog, CustomLog.

ServerAdmin: Email address that the server includes in error messages sent to the client.
ServerAlias: Alternate names for a host used when matching requests to name-virtual hosts.
ServerName: Hostname and port that the server uses to identify itself.
DocumentRoot: Directory that forms the main document tree visible from the web.
Almost done, as we have made changes in httpd-vhosts.conf files please save it.

Now, it’s time to tell the browser how to handle your new server name. So please open the windows host file. It’s located in this given path C:\Windows\System32\drivers\etc\hosts

Here’s you can add your host, as like given below:

127.0.0.1 site.dev

Like above, you can add as many as your hostname for local websites.

Now, Restart your Apache and visit the site1 using URL http://site1.dev

Integrate PayUmoney Payment Gateway in PHP with Mysql

by 1 Comment

In this article, I am going to explain “How to Integrate PayUmoney Payment Gateway” in PHP with database. PayUmoney is one of the best and user friendly online payment gateway from India. It is very easy to integrate in web applications and App. Also you can send Payment link for a perticular amount through PayUmoney payment button.

PayUmoney comes with all modern payment option like debit card, credit card, net banking, UPI, EMI option etc. Newbies are always curious to know “how to integrate PayUmoney with PHP website?”, “what is the PayUmoney integration process?”

In this article , we will clear out all your doubts regarding integrating PayUmoney payment gateway in different types of websites, Apps and plugins, you just need to follow very easy steps to integrate it into you web application.

Step 2. At the time of signup, you need to use your valid email address. As you are creating test account, you can enter whatever details for the testing purpose.

Once you’re done with your test merchant account live, you will get your Merchant Id, Merchant Key, and Merchant Salt to use in your code in config.php file.

Read Also: How To Integrate PayKun Payment Gateway In Laravel

Below is the complete code to integrate PayUMoney payment gateway:

Now create config.php file and copy below code and paste.

1
2
3
4
5
6
7
 
<?php
  // Test Key and Test Salt
  define('MERCHANT_KEY', "xxxxxxxx");
  define('SALT',  "xxxxxxxx");
?>
 

PayUmoney Merchant Test Key & Test Salt Credentials change in config.php file

Step 3) Create request.php file and copy below code and paste it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<?php
if(strcasecmp($_SERVER['REQUEST_METHOD'], 'POST') == 0){
  //Request hash
  $contentType = isset($_SERVER["CONTENT_TYPE"]) ? trim($_SERVER["CONTENT_TYPE"]) : '';
  if(strcasecmp($contentType, 'application/json') == 0){
    $data = json_decode(file_get_contents('php://input'));
    $hash=hash('sha512', $data->key.'|'.$data->txnid.'|'.$data->amount.'|'.$data->pinfo.'|'.$data->fname.'|'.$data->email.'|||||'.$data->udf5.'||||||'.$data->salt);
    $json=array();
    $json['success'] = $hash;
      echo json_encode($json);
  
  }
  exit(0);
}
?>
 

 

Read Also: How to Integrate Stripe Payment Gateway in Laravel

Step 4) Create index.php file and copy below code and paste on it

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
 
<?php
include_once('config.php');
 
function getCallbackUrl()
{
  $protocol = ((!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] != 'off') || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
  return $protocol . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'] . 'response.php';
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="canonical" href="https://www.webprepration.com/" />
  <meta name="author" content="Webprepration">  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">  
  <title>Integrate PayUMoney Payment Gateway in PHP | Webprepration</title>
  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
  <!-- Custom fonts for this template -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css" />
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
</head>
<body>
  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top" style="background: ##FFFFFF!;">
  <div class="container">
    <a class="navbar-brand font-weight-bold" href="https://webprepration.com"><h1>Webprepration</h1></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="https://webprepration.com/">Home                
              </a>
        </li>        
      </ul>
    </div>
  </div>
</nav>
<section class="showcase">
  <div class="container">
    <div class="pb-2 mt-4 mb-2 border-bottom">
      <h2>PayUMoney Payment Gateway Integration in PHP</h2>
    </div>
    <div class="row">      
      <div class="col-md-12 gedf-main">
        <form action="#" id="payment_form">
          <input type="hidden" id="udf5" name="udf5" value="BOLT_KIT_PHP7" />
          <input type="hidden" id="surl" name="surl" value="<?php echo getCallbackUrl(); ?>" />
          <input type="hidden" id="key" name="key" placeholder="Merchant Key" value="<?php print MERCHANT_KEY;?>" />
          <input type="hidden" id="salt" name="salt" placeholder="Merchant Salt" value="<?php print SALT; ?>" />
          <input type="hidden" id="txnid" name="txnid" placeholder="Transaction ID" value="<?php echo  "Txn" . rand(10000,99999999)?>" />
          
          <div class="row align-items-center">
            <div class="form-group col-md-6">
              <label for="inputEmail4">Amount</label>
              <input type="email" class="form-control" id="amount" name="amount" placeholder="Amount" value="10.00">
              </div>
 
            <div class="form-group col-md-6">
              <label for="inputEmail4">Product Info</label>
              <input type="text" class="form-control" id="pinfo" name="pinfo" placeholder="Product Info" value="Product-001">
            </div>
          </div>
 
        <div class="row align-items-center">
           <div class="form-group col-md-6">
            <label for="inputEmail4">Frist Name</label>
            <input type="text" class="form-control" id="fname" name="fname" placeholder="First Name" value="">
          </div>
 
          <div class="form-group col-md-6">
            <label for="inputEmail4">Email</label>
            <input type="email" class="form-control" id="email" name="email" placeholder="Email ID" value="">
          </div>
        </div>
 
        <div class="row align-items-center">
          <div class="form-group col-md-6">
            <label for="inputEmail4">Mobile Number</label>
            <input type="text" class="form-control" id="mobile" name="mobile" placeholder="Mobile Number" value="">
          </div>
        </div>
            
        <div class="row justify-content-start">
          <div class="col text-center">
            <button type="submit" class="btn btn-primary mt-4" onclick="launchBOLT(); return false;">Pay Now</button>
          </div>
        </div>
 
        <input type="hidden" id="hash" name="hash" placeholder="Hash" value="" />
        </form>
           <hr>
        <div class="row mt-4">
          <div class="col-md-3">(Visa) Card Name: Test</div>
          <div class="col-md-3">Card Number: 4012001037141112</div>          
          <div class="col-md-3">Expiry Date : <?php  print date('m/y',strtotime('+1 years', time()));?></div>          
          <div class="col-md-3">CVV : 123</div>
        </div>
 
        <div class="row">
          <div class="col-md-3">(Master) Card Name: Test</div>          
          <div class="col-md-3">Card Number: 5123456789012346</div>          
          <div class="col-md-3">Expiry Date : <?php  print date('m/y',strtotime('+1 years', time()));?></div>          
          <div class="col-md-3">CVV : 123</div>
        </div>
 
      </div>      
    </div>
  </div>
</section>
<!-- Footer -->
  <footer class="footer bg-light footer-bg-dark">
    <div class="container">
      <div class="row">
        <div class="col-lg-6 h-100 text-center text-lg-left my-auto">          
          <p class="small mb-4 mb-lg-0" style="color: #E6ECF0;">Copyright &copy;  2019 - <?php print date('Y', time());?> <a style="color: #E6ECF0;" href="https://webprepration.com/">Webprepration.com</a> All rights reserved.</p>
        </div>
      </div>
    </div>
  </footer>
  <!-- Bootstrap core JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
  <script id="bolt" src="https://sboxcheckout-static.citruspay.com/bolt/run/bolt.min.js" bolt-
color="e34524" bolt-logo="http://boltiswatching.com/wp-content/uploads/2015/09/Bolt-Logo-e14421724859591.png"></script>
<script type="text/javascript"><!--
  $('#payment_form').bind('keyup blur', function(){
    $.ajax({
      url: 'request.php',
      type: 'post',
      data: JSON.stringify({
        key: $('#key').val(),
        salt: $('#salt').val(),
        txnid: $('#txnid').val(),
        amount: $('#amount').val(),
        pinfo: $('#pinfo').val(),
        fname: $('#fname').val(),
        email: $('#email').val(),
        mobile: $('#mobile').val(),
        udf5: $('#udf5').val()
      }),
      contentType: "application/json",
      dataType: 'json',
      success: function(json) {
      if (json['error']) {
        $('#alertinfo').html('<i class="fa fa-info-circle"></i>'+json['error']);
      }
      else if (json['success']) {
        $('#hash').val(json['success']);
      }
      }
    });
});
//-->
</script>
<script type="text/javascript"><!--
  function launchBOLT() {
    bolt.launch({
      key: $('#key').val(),
      salt: $('#salt').val(),
      txnid: $('#txnid').val(),
      hash: $('#hash').val(),
      amount: $('#amount').val(),
      firstname: $('#fname').val(),
      email: $('#email').val(),
      phone: $('#mobile').val(),
      productinfo: $('#pinfo').val(),
      udf5: $('#udf5').val(),
      surl : $('#surl').val(),
      furl: $('#surl').val(),
      mode: 'dropout'
    },
    {
      responseHandler: function(BOLT){
      console.log( BOLT.response.txnStatus );  
    if(BOLT.response.txnStatus != 'CANCEL') {
      //Salt is passd here for demo purpose only. For practical use keep salt at server side only.
      var fr = '<form action=\"'+$('#surl').val()+'\" method=\"post\">' +
      '<input type=\"hidden\" name=\"key\" value=\"'+BOLT.response.key+'\" />' +
      '<input type=\"hidden\" name=\"salt\" value=\"'+$('#salt').val()+'\" />' +
      '<input type=\"hidden\" name=\"txnid\" value=\"'+BOLT.response.txnid+'\" />' +
      '<input type=\"hidden\" name=\"amount\" value=\"'+BOLT.response.amount+'\" />' +
      '<input type=\"hidden\" name=\"productinfo\" value=\"'+BOLT.response.productinfo+'\" />' +
      '<input type=\"hidden\" name=\"firstname\" value=\"'+BOLT.response.firstname+'\" />' +
      '<input type=\"hidden\" name=\"email\" value=\"'+BOLT.response.email+'\" />' +
      '<input type=\"hidden\" name=\"udf5\" value=\"'+BOLT.response.udf5+'\" />' +
      '<input type=\"hidden\" name=\"mihpayid\" value=\"'+BOLT.response.mihpayid+'\" />' +
      '<input type=\"hidden\" name=\"status\" value=\"'+BOLT.response.status+'\" />' +
      '<input type=\"hidden\" name=\"hash\" value=\"'+BOLT.response.hash+'\" />' +
      '</form>';
      var form = jQuery(fr);
      jQuery('body').append(form);                
      form.submit();
      }
    },
      catchException: function(BOLT){
      alert( BOLT.message );
    }
    });
  }
//--
</script>
</body>
</html>
 

 

Read Also: Paytm Payment Gateway Integration in Laravel

Step 5) Create a file named response.php and copy below code and paste it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
<?php
include_once('config.php');
$postdata = $_POST;
$msg = '';
if (isset($postdata ['key'])) {
$key =   $postdata['key'];
$salt =   SALT;
$txnid = $postdata['txnid'];
    $amount       = $postdata['amount'];
$productInfo   = $postdata['productinfo'];
$firstname     = $postdata['firstname'];
$email         = $postdata['email'];
$udf5 =   $postdata['udf5'];
$mihpayid = $postdata['mihpayid'];
$status = $postdata['status'];
$resphash = $postdata['hash'];
 
//Calculate response hash to verify
$keyString    =   $key.'|'.$txnid.'|'.$amount.'|'.$productInfo.'|'.$firstname.'|'.$email.'|||||'.$udf5.'|||||';
$keyArray    = explode("|",$keyString);
$reverseKeyArray = array_reverse($keyArray);
$reverseKeyString = implode("|",$reverseKeyArray);
$CalcHashString = strtolower(hash('sha512', $salt.'|'.$status.'|'.$reverseKeyString));
if ($status == 'success'  && $resphash == $CalcHashString) {
$msg = '<div class="alert alert-success" role="alert">Transaction Successful and Hash Verified...</div>';
//Do success order processing here...
}
else {
//tampered or failed
$msg = '<div class="alert alert-danger" role="alert">Payment failed for Hasn not verified...</div>';
}
}
?>
 

 

Read Also: Integrate CCAvenue Payment Gateway in PHP

Test Card details for PayUMoney Payment Gateway

(Visa) Card Name: Test
Card Number: 4012001037141112
Expiry Date : 05/20
CVV : 123

(Master) Card Name: Test
Card Number: 5123456789012346
Expiry Date : 05/20
CVV : 123

Github link: Download from Github

Angular 8 interview questions and answer

by Leave a Comment

Angular is an app-design framework and development plate form for creating web applications, Angular is a leading technology in web development as well as we know angular has great demand in the market.

Q) What are new features in Angular 9?

Ans:-

  • An undecorated class migration schematic added to the core.
  • Numeric Values are accepted in the formControlName.
  • Selector-less directives have now been allowed as base classes in View Engine in the compiler.
  • Conversion of ngtsc diagnostics to ts.Diagnostics is possible

Q) What is the difference between $scope and scope in Angular?

Ans:-  $scope in Angular is used for implementing the concept of dependency injection (D.I) on the other hand scope is used for directive linking.
$scope is the service provided by $scopeProviderwhich can be injected into controllers, directives or other services whereas Scope can be anything such as a function parameter name, etc.

Q) What is the purpose of Wildcard route?

Ans:- Wildcard routing is used in Angular 8 for defining the route of pages. Specific changes/updates can be made when defining the route using Wildcard.

Q) How to detect a route change in Angular?

Ans:- To detect router change in Angular 8, the $on() method is used. This is an event handler used to handle $routeChangeSuccess when triggered by a route/view change or update.

Q) What is the difference between Angular 7 and Angular 8?

Ans:- 

Angular 7 Angular 8
i) Angular 7 is difficult to use
ii) It has features such as Virtual scrolling, CLI prompts, Application performance, Drag, and drop, Bundle budget, Angular compiler, Angular elements, NativeScript, Better error handling, etc.
iii) Breaking changing in Angular 7 are- Component Dev Kit (CKD), Material design library and virtual scrolling.
iv) It will support a lower version of typescript version 3.4.
v) It supports all types Node.js version		 i) Angular 8 is easier to use
ii) It has unique and advanced level features such as Differential Loading, Ivy rendering Engine, API builders, Bazel support, Support for $location, Router backward compatibility, Opt-In Usage sharing, web- workers, etc.
iii) Breaking changing in Angular 8 are- Core framework, Angular, material library and CLI.
iv) It will not support a lower version of typescript version 3.4.
v) It supports Node.js version 12 or later

Q) What is the difference between promise and observable in angular8?

Ans:-

Observables Promises
i) Both synchronous as well as asynchronous
ii) Can emit multiple values
iii) It is lazy		 i) Always asynchronous
ii) Provides only one single value
iii) It is eager

 

Read Also: Laravel Interview Questions & Answers

Q) What is the difference between virtual Dom and real Dom?

Ans:-

Virtual DOM Real DOM
i) Is a collection of modules designed to provide a declarative way to represent the DOM for an application.
ii) A virtual DOM object is a representation of a DOM object, like a lightweight copy.
iii) Virtual DOM is ideal for mobile-first applications.		 i) DOM is a language-neutral interface allowing programs and scripts to dynamically access and update multiple objects like content, structure, and style of a document
ii) The DOM represents the document as nodes and objects.
iii) It is an object-oriented representation of a web page, modified with a scripting language like JavaScript.

Q) How to install Angular 8?

Ans:- Steps for the Installation of Angular 8 environmental setup

Step 1)  Before installing Angular, first you need to install the Node.js in your system install it using the following steps.
The basic requirement of Angular 8 is Node.js version 110.9.0 or later.

  • Download it using https//nodejs.org/en/
  • Install it on your system
  • Open node.js command prompt
  • Check the version run command, node-v in the console window

Step 2) In order to install Angular CLI, use the following commands

1
2
3
4
5
 
npm install –g @angular/cli
or
npm install –g @angular/cli@latest
 

Step 3) Check the installed node and angular version using below command, run the command in terminal

1
2
3
 
ng –version
 

Q) What is a service in Angular?

Ans:- Services allow for greater separation of concerns for your application and better modularity by allowing you to extract common functionality out of components. A service is used when a common functionality needs to be provided to various modules. Let’s create a repoService which can be used across components,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
 
@Injectable({
  providedIn: 'root',  
})
export class RepoService{
  constructor(private http: Http){
  }
 
  fetchAll(){
    return this.http.get('https://api.github.com/repositories');
  }
}
 

Q) How to pass headers for HTTP client?

Ans:- You can directly pass object map for http client or create HttpHeaders class to supply the headers.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
constructor(private _http: HttpClient) {}
this._http.get('appURL',{
   headers: {'header1':'value1','header2':'value2'}
});
 
(or)
let headers = new HttpHeaders().set('header1', Value1); // create header object
headers = headers.append('header2', headerValue2); // add a new header, creating a new object
 
let params = new HttpParams().set('param1', value1); // create params object
params = params.append('param2', value2); // add a new param, creating a new object
 
return this._http.get<any[]>('appURL', { headers: headers, params: params })
 

Q) What is the purpose of common module?

Ans:- Common module is used to export all basics Angular directives and pipes, such as NgIf , NgForOf , DecimalPipe , and so on. Directives provided by @angular/common module. Apart from these HttpClientModule is available under @angular/common/http.

Q) What are pipes in angular?

Ans:- A pipe is a class decorated with pipe metadata. A pipe takes in data as input and transforms it to a desired output. For example, let us take a pipe to transform a component’s birthday property into a human-friendly date using date pipe.

1
2
3
4
5
6
7
8
9
10
11
 
import { Component } from '@angular/core';
 
@Component({
  selector: 'app-birthday',
  template: `<p>Birthday is {{ birthday | date }}</p>`
})
export class BirthdayComponent {
  birthday = new Date(1993, 6, 18); // June 18, 1993
}
 

Q) What is TypeScript?

Ans:- TypeScript is an open-source programming language developed and maintained by Microsoft. TypeScript is a typed superset of JavaScript and has optional types, classes, async/await, and many other features, and compiles to plain JavaScript. Angular built entirely in TypeScript and used as a primary language. You can install it globally using below command.

1
2
3
 
npm install -g typescript
 

Q) What is Angular Router?

Ans:- Angular Router is a mechanism in which enables to show different components and data to the user based navigation happens from one view to the next as users perform application tasks. It borrows the concepts or model of browser’s application navigation.

Read Also: Top Interview Questions & Answers on Angular

Q) What is JIT?

Ans:- JIT stands for Just-in-Time, Angular offers two ways to compile your application.
Just-in-Time (JIT) is a type of compilation that compiles your app in the browser at runtime. JIT compilation is the default when you run the ng build (build only) or ng serve (build and serve locally) CLI commands. i.e, the below commands used for JIT compilation.

1
2
3
4
 
ng build
ng serve
 

Q) What are the router imports?

Ans:- Angular router is an optinal service and it is not a core part of Angular. The Angular Router which represents a particular component view for a given URL is not part of Angular Core. It is available in library named @angular/router to import required router components. For example, we import them in app module as below.

1
2
3
 
import { RouterModule, Routes } from '@angular/router';