Angular interview questions – part 1

1 What is typescript? It is a strict syntactical superset of JavaScript, and adds optionaltype-checking along with the latest ECMAScript features. 2 What is two way data binding in angular? Two-way Binding. Data binding in AngularJS is the synchronization between the model and the view. When data in the model changes, the view reflects the change, and when data in the view changes, the model is updated as well. Binding   3 Types of bindings in angular ? 1 Interpolation -eg- <h1>{{user.name}}</h1> //interpolation is in braces 2 Two way binding – <input [(ngModel)]=”user.name”/> 3 One way binding – <h1 [innerText]=”user.name”></h1> //Bindings like inner text 4 Event Binding – <button ng-click=”userData()”>Send</h1> //Binding events like click   4 What are authGuards? With AuthGuards/RouterGuards we can prevent users from accessing areas that they’re not allowed to access.Or prevent navigating away. There are four kinds of guards.You have to import it from the @angular/router module CanActivate Checks to see if a user can visit a route. CanActivateChild Checks to see if a user can visit a routes children. CanDeactivate Checks to see if a user can exit a route. Resolve Performs route data retrieval before route activation. CanLoad Checks to see if a user can…

Top 10 Javascript interview questions : Concepts every javascript developer should know
interview questions , Javascript / August 20, 2018

1  Explain let,var and const variable declaration and explain their scope .what is strict mode? 2  What are callbacks and callback hell in javascript . What are higher order functions? 3 What is  hositing in javascript ? 4 What are prototypes and explain Prototypal inhertiance ? 5 What are Closures in javascript? 6 What are arrow functions / fat arrow functions  in Javascript? 7 What doe this keyword indicate in javascript? 8 What are promises in JavaScript? 9 What is bubbling and propogation in Javascript? 10 What are generators in Javascript? ANSWERS 1  The scope of var is the current execution context.That is, scope of var is global,if used outside a function and the scope is the function block if used inside the function. See more here  Understanding variable scope(let,var,const),hoisting in Javascript and Temporal Dead Zone(TDZ) 2  In  most programming languages , functions can accept other function(s) as arguments or return a function .Such functions are called Higher order functions.In JavaScript most APIs and Modules can accept function as an argument to a function .The functions are called  callbacks.see more here Understanding Callbacks and Callback hell in JavaScript : asynchronous behaviour of Javascript Part -1 3 To hoist means to pull or move up . Javascript hoisting means variable and function declarations are pulled to the top of the scope while…

Http interceptor in AngularJS : adding tokens and loading image to every http request

While creating AngularJS applications,we might need to send multiple  http requests to backend apis to fetch the data that need to be populated within our HTML.In most cases, these backend apis might be protected using token .Also we might need to add a loading image to indicate the user that the data is being fetched. HttpInterceptor helps us to a display the loader image before and hide the loader image after completing the request  and also add token to every request header.This tutorial helps us to create an HttpInterceptor in AngulaJS. We create an  app using the following code

Now we create a factory which will intercept http requests.Inside the interceptor we use a variable httpRequestNumber,which tracks the number of requests.When a new request comes up we increment it httpRequestNumber++ and on response or error we decrement it httpRequestNumber– .We also inject $q and $rootScope.$q is service that helps you run functions asynchronously, and use their return values (or exceptions) when they are done processing.$rootScope is the root scope .every app has single root scope. All other scopes are descendant scopes of the root scope.We also add a token to the request header using the following code.

The interceptor factory will look like this….

Join two tables and get count in mysql:Example with hasMany relations in sequelize

Consider we have two tables ‘users‘ and ‘comments‘.Each user can have multiple comments so that ‘users‘ and ‘comments‘  have ‘hasMany‘ relation. The foreign key is user_id in the comments table. The structure of both tables are as follows Users id    | name |    email 1    userone    user1@gmail.com 2    usertwo    user2@gmail.com Comments id    | comment        | user_id 1      commentone      1 2      commenttwo      1 3      commentthree    2 4      commentfour     2 5      commentfive      2 6      commentfive      2 As you can see, the user with id 1 has two comments and the user with id 2 has  4 comments. To get all users with their respective number of comments, we can use the following query.

The result will be 1 userone user1@gmail.com 2 2 usertwo user2@gmail.com 4 Sequelize Example   To learn more about sequelize, see the following article https://truetocode.com/orm-using-sequelize-orm-with-express-node-js/418/ For our example, we need to create two model files usersModel.js

  commentsModel.js

  hasMany relation Now we need to define hasMany relations from users to comments, in your db.js file….

How can I convert timestamp value to Readable date time in ng-repeat-Angular JS
Requests / August 8, 2018

Q: I have an array of data,with date stored as timestamp value.How can I convert it to readable date in html.I am using angular 1 with ionic 1 framework A:Use the following code to display date in readable format from timestamp

 

Angular JS 1.6 – server side pagination with sorting using Angular UI Bootstrap

Angular 1.6 SPA server side pagination of data with sort. To create a SPA which lists user data with pagination  and sorting we need the following CDN links – Angular JS 1.6.9 js CDN. – Angular JS UI bootstrap -Bootstrap components written in pure AngularJS . – Bootstrap CSS file. STEP 1 – Create file index.html and add the relevant CDN links using the following codes.

STEP 2 – CREATING ANGULAR MODULE and DEFINE THE APP create, register and retrieve Angular JS module using the following code.The name of the module is ‘userLog’.

and in the HTML.

STEP 3 – DEFINE THE CONTROLLER AngularJS applications are controlled by controllers. The ng-controller directive defines the application controller.The name of the controller here is ‘listController’.In HTML , add the following code

STEP -4 CREATING SERVICES AND INJECTING THEM In this example we will create two services one for getting the total number of users and other for getting the data each page.The name of the first service is ‘count’ and name of the second service is ‘getloglist’

Services in both cases send HTTP requests to the APIs.For this we inject $http service.The $http service get takes a single argument which…

Async/await in JavaScript : asynchronous behaviour of Javascript Part -4

For part 1,part 2 and part 3 of this series , see the following links https://truetocode.com/understanding-callbacks-and-callback-hell-in-javascript-asynchronous-behavior-of-javascript-part-1/697/ https://truetocode.com/understanding-promises-in-javascript-asynchronous-behavior-of-javascript-part-2/730/ https://truetocode.com/generator-functions-in-javascript-asynchronous-behavior-of-javascript-part-3/744/ In the previous three articles in this series,we learned about doing asynchronous operations with callbacks,promises and generator functions.In ES7 ,Javascript introduces a new kind of syntax called async/await functions which makes it more easier to do asynchronous operations. Async/await syntax is actulally just syntactic sugar over promises and callbacks The following example shows the basic syntax for performing async/await operations.Here too,we use fetch function which returns a promise.Remember that this block of code is run on chrome 60.Earlier versions of chrome does not support async await. the fetch()  and json() returns promise

Now using async/await

The fetch  here returns a promise so we await for fetch .The json() function also returns a promise so we await for that too.Here we can see that using the async/await made the code more easier to read and understand. As you can see that  async/await helps you to write code in a way that  asynchronous code look and behave a  more like synchronous code.On each await keyword, the function pauses as you can see in the below example

  Async/await is just syntactic sugar over promises and Generators.We…

Generator Functions in JavaScript : asynchronous behaviour of Javascript Part -3

For part 1 and part 2 of this series , see the following links https://truetocode.com/understanding-callbacks-and-callback-hell-in-javascript-asynchronous-behavior-of-javascript-part-1/697/ https://truetocode.com/understanding-promises-in-javascript-asynchronous-behavior-of-javascript-part-2/730/   In ES6 version , a new kind of functions called generator functions were introduced.These special functions helps you to manage asynchronous operations with more ease .Generator functions can be paused and then continued.Generator functions are declared with an asterisk (*) and has an yield keyword which yields data. See the following example to see the proper syntax for using a Generator functions.

    You can see the next method in the generator function prototype.To get the value of the first yield we use the next() method.

  Here you can see that the response object has a key value which gives the value of the yield and a done key which represents the status.Here in our example, value will be 1 and done will be false. We have two yields in the generator function .next() gives false two times and a third time gives done as true.If you add a return to the generator function next() will have key done as true.

  Now, if a return is done before an yield

Here you an see that the second yield will…

Share this page in social media platforms