Categories
Angular

Angular vs. React vs. Vue: A 2020 comparison

Last year saw the emergence of React as the frontrunner of the front end frameworks competition, leaving Angular way behind. But more importantly, Vue emerged as the one with the largest gain. It increased its share in the market with good growth and a high number of downloads.

What does the year 2020 have in store for them? Will we have the same result or will there be a massive change about to happen??

Read more to find out:

Before starting the comparison between the frameworks, let us have a quick review of Javascript. Javascript is a programming language. It is the most preferred language for web development. The user interface of websites is made by using Javascript. People have a higher chance of recruitment if they have knowledge of Javascript as well as Javascript frameworks.

Javascript Frameworks are of two types:

  • Front end Frameworks
  • Back end Frameworks.

Now that you reviewed the basic definition of Javascript Framework, we shall initiate the comparison of the frameworks by describing each one:

1. Angular

Angular

Angular is an open-source, free-for-all Javascript Framework developed by Google. It is the oldest framework available in the market right now and is considered as the best framework when it comes to front end frameworks.

Angular was launched for the first time by AngularJS way back in 2010. But it lacked a lot of essential features due to the changing trends of the markets. Hence, a major change took place in 2016 when Angular2 was launched with major modifications in the previous versions.

The latest version of the Angular is Angular 8 that has reduced the lag and prompted the faster compilation of the Angular apps by using Ivy, a new compiler for Angular apps. It has also reduced its bundle size.

Since the release of React, it has faced some competition and due to the increasing popularity of Vue, it has grown slowly compared to previous years. Although, it has enjoyed the number one position for a long time in the past

Advantages of Angular:

  1. It is very easy to develop applications in Angular.
  2. Angular can distribute a single block into multiple blocks. Hence, gives the developer the ease to act on the components individually.
  3. Angular enjoys large community support since it is the oldest framework available.
  4. Since it has a component-based structure, its components can be used again.
  5. The programming quality on Angular is very high, thus it gives good programming feel to the programmers.
  6. It consists of built-in functionalities.

Disadvantages of Angular:

  1. It requires a lot of learning and study because of its complex syntax.
  2. Angular consists of a steep learning curve.

2. React

React

React is a Javascript library developed by Facebook and maintained by a large community of users and developers that was released in 2013. React became famous among the masses from the day it was released.

It was constantly giving tough competition to Angular and the breaking point came in November 2019, when it recorded the highest number of downloads. It has been the market leader from its day of release.

Many companies use it as their primary framework tool. One of the primary features of React is the use of the Virtual Document Object Model(DOM). DOM is the basic representation of nodes in terms of HTML. It uses an extension known as JSX(Javascript XML) which allows the user to write HTML in React, which makes it easy to write applications.

React is simple to code if you know the basics of Javascript and alternate versions of React such as React Native is used to develop mobile applications. Additionally, these Javascript libraries help in improving the performance by the implementation of reusable code.

Advantages of React:

  1. It has many tools that allow the developer to play with it and make changes.
  2. React enjoys good community support and developers and users keep contributing to it to maintain its relevance.
  3. React has an easy learning curve and it doesn’t require complex study for coding on it.
  4. It has high efficiency and flexibility. Due to this, its performance improves.

Disadvantages of React:

  1. React doesn’t have an easy programming style so it is not understood by many.
  2. React uses JSX, instead of HTML.
  3. React focuses on creating UIs. Thus, you’ll need third-party libraries to make it.

3. Vue

vue

Vue is one of many front end frameworks of Javascript Frameworks used for improving web page interfaces. Vue was released six years ago and is developed by Evan You, a former developer at Google.

While working on Angular, he noticed how heavy Angular was as it consumed a lot of power. This resulted in poor performance, so he thought of developing a lighter framework that yields higher performances.

He turned his expectation into reality. At 20KB, Vue is the lightest framework and it results in a bloat-less experience.

Advantages of Vue:

  1. Vue is the lightest framework at 20KB and simple to work.
  2. It integrates with other programming languages very easily.
  3. It is easier to work on Vue since it has an easy learning curve.
  4. Vue gives faster performance due to its small size.
  5. Users have started switching over to it over other options.
  6. It has good documentation.

Disadvantages of Vue:

  1. It has a small community of users and developers in comparison to React and Angular.
  2. It is not very flexible when teaming up with large projects.
  3. Vue has very limited features.

Comparison between React vs Angular vs Vue

  • The number of downloads– For the purpose of comparison on the basis of downloads, we would need to refer to a graph.
comparison

As it is visible from the graph, React is the most downloaded framework of the three. These many downloads show the confidence of users in React. Vue comes second by a long distance, surpassing Angular.

Also, it shows that users are moving towards Vue very fast and Angular comes a distinct third. This shows that new users are not keen on using Angular and they are preferring Vue and React over Angular.

  • Learning Curve – The Learning curve is defined as the basic study you need to do before starting a framework. For Angular, the learning curve is steep because you need to learn about concepts like Model View Control(MWC). You need to know about TypeScript. It is necessary to know these concepts for advanced coding. React requires a less steep curve than Angular since it works on Javascript. It supports third-party libraries, which ease the curve. But it requires a study about JSX to do coding. Vue has an easy learning curve. This is because it is simple and doesn’t have complex code.
  • Framework Size – When it comes to the framework, the size of the libraries become an important characteristic. This is because runtime depends on the size. Angular consists of the framework of the largest size at 500KB. React comes second at 100KB. Vue is the lightest at 80KB(Bundle size).
  • Community Support – React and Angular has the largest community support because of the support from Facebook and Google respectively. They are regularly updated with one major update in six months. Vue, on the other hand, doesn’t have a huge community like React or Angular.
  • Configuration – Angular is a framework based on TypeScript. React consists of Javascript libraries. Vue is a convenient, simple-to-code Javascript framework.
  • Languages used – Coding on Angular is done through TypeScript whereas Vue and React work on Javascript.

Conclusion

All the three frameworks compared are good but what you prefer is entirely up to you as per the specific needs of your project’s needs. Each framework comes with its own set of advantages and disadvantages and their usage depends on how you want to use these front end frameworks.

So, to make the framework selection easy for you, we have made some quick short points for you:

  1. If you love coding in Javascript, then React is the best option for you.
  2. If you love good performance and bloat-free experience, then you should go for Vue.
  3. Angular would be preferable for you if you like (OOPs) object-oriented programming.

Categories
Angular Backend Developer Development Express Frontend Developers Node Programming

MEAN Stack Development Influences The Future Of Web Apps

The implementation and usage of Web app development is increasing and currently in a fast-moving realm. A highly competent architecture and navigation are in demand in today’s web applications. They need to be dynamic, user-friendly, robust, and flexible. With the developments and evolutions in technology leaves web developers with many choices for their app. One essential factor while choosing a suitable framework for the solution, it is essential to determine a software technology that combines the best features to work.

MEAN stack is a growing contemporary trend for JavaScript development. This stack is the one technology that meets all the requirements for a fully efficient development in the best possible way. An open-source JavaScript bundle for web apps, MEAN is an acronym that stands for:

  • M stands for MongoDB,
  • E stands for Express,
  • A for AngularJS and
  • N for NodeJS.
mean stack development
Mean Stack Development

Web developers find MEAN stack application development as an attractive choice and are switching to it as it is on the latest technology-go-to basis, the full-stack JavaScript. The flawless combination of these 4 robust technologies makes it the most sought out bundle for web app development services.

What makes this stack an ideal choice for developing a website is as follows:

  • Flexible in developing for any size and type of organization.
  • Best viable technology solutions for all Business segments from startups, SMEs, or large enterprises.
  • Straightforward for frontend and backend developers to apply this framework.
  • Suitable framework for any multi-layer application.
  • Immense benefit in terms of productivity and performance.

Knowledge of JavaScript language mechanisms from the presentation layer to the database is all you need to proceed with the MEAN stack software.

A brief look into the 4 Components of MEAN

MongoDB is the open-source, NoSQL database framework for JavaScript

  • Cross-platform document-oriented database model
  • A schema-less, independent NoSQL database
  • With JavaScript, it limits to a single language for the complete application development
  • Collects and stores the application’s database in MEAN
  • High scalability in both storage and performance
  • Cost-effective and useful in transferring both client and server-side data without compromising data access
  • Expandable resources, load balancing and handling increased activity durations

ExpressJS is the lightweight server-side JavaScript framework

  • Web application framework for NodeJS and simplifies the development process
  • Cuts down the entire process of writing secure code for web and mobile applications
  • Developers can include New features and enhancements
  • Minimal structure mainly used for backend development and aids decluttering
  • Building smooth server-side software with NodeJS
  • Prevents accidental redefinition of a variable, therefore, eliminating errors and time-saving

AngularJS is the web frontend JavaScript framework

  • A browser-free MVC JavaScript UI framework with data binding
  • Popular Google’s front end framework that enables smooth flow of information throughout the application
  • Enables rapid development of dynamic single-page web apps (SPA’s)
  • Modular structure and develops for both mobile and web
  • Easy-to-use templates and high scalability for full stack front end augmentation

NodeJS is the open-source JavaScript-based runtime framework

  • Built on Chrome’s JSV8 engine
  • Before execution, compiling JavaScript source code to native machine code is done
  • Helps build scalable, secure web applications and comes with an integrated web server
  • Maintains a vast ecosystem of open source libraries and components
  • Quickly responds to usage spikes during runtime

The reasons behind why the preference for this Stack Development software for Web Applications are as follows

  • Inexpensive in Nature

Due to its budget-friendly nature, development finds its main reason to be a cut above other technology frameworks in existence. Also, as it is a full-stack development, unnecessary expenditure over resources can be eliminated for the customers as well as the developers. Hence, a large volume of reusability and sharing of code amongst the developers occurs. This process, thereby, restrains the budget considerably.

  • Full JavaScript Framework

Since the framework is entirely JavaScript, it has its set of benefits to provide in terms of exceptional user experience and data handling. Both Linux, as well as Windows OS, are supported. Data recovery is speedy due to the power and dependability of the framework. Seeing that both NodeJS and AngularJS contribute to a better condition to build competent web apps and more traffic occurrences.

  • Universal Accessibility to JSON

It adds to the advantage of having a seamless expanse of data within layers because JSON is present all over, whether it’s AngularJS, MongoDB, NodeJS, or ExpressJS. The highlight is that rewriting the code is not necessarily required. Data flow between the layers is much more comfortable and not necessary to be reformatted. MEAN utilizes a standard JSON format without exception for data. Also, it becomes increasingly simpler while functioning with APIs.

  • Highly Scalable and so very Popular

Full-stack development with MEAN is scalable, and its ability to handle multiple users makes it a reliable choice and a business favorite. In addition to that, all four components are open source. The development time is also faster, owing to the presence of various frameworks, libraries, and reusable modules. Because of its swiftness in operation, easy to collaborate, easy to learn, and takes less time to develop cloud-native applications, it’s eventually a developer’s choice.

Being an open-source makes it available for free. MEAN can be easily deployed as it includes its web server. The development potential is on the higher side for many other JavaScript resources with this stack technology. Because of this, MEAN stack web development has made avid developers look ahead to work, and the built-in elements of JavaScript make it even more, easier to utilize resources in this sector.

  • Reusability and Fixing is much simpler

Streamlining the development process by using a single language across the whole application is possible. Thus it becomes easy for developers as it eliminates the need for different specialists for developing each part of any web application. It also enables easy tracking of the entire development flow, monitor data exchange, and catch sight of errors/bugs. This technology can be even more improvised with the help of a few third-party opensource tools and libraries that allow the frontend and the backend to reprocess quickly.

  • Lowered Development Expenses

A MEAN application penetrates the tech-world improvised to take advantage of all the cost savings and performance improvements of the cloud. The primary feature of this innovative technology is that it does not incur any needless expenses, thereby a large volume of concurrent users can be reached. Code reuse across the entire application reduces reinvention, and code sharing helps developers to reach their target objective within the committed time frame and allocated budget.

  • Enables Collaboration Between Developers

The stack technology has a lot of community support behind, and finding answers to questions or even hiring assistance can be obtained. All developers speak the same programming fundamentals, and so it’s effortless and efficient for them to understand the nuances of web app development mutually. The advantage of hiring MEAN stack developers is more since they can effectively understand, facilitate association, and manage the project with ease.

  • Access to Congruent Coding

MEAN stack helps to transfer within frames, i.e., the server-side and the client-side. Creating code in one framework and transferring to another is achievable without any difficulty or disruption in performance. It is yet another critical feature of this technology in comparison to the rest.

  • Systematic & Exceptionally Flexible

It is incredibly swift to prototype because the stack has its internal web server that enables opening without difficulty, and the database can be systemized on-demand to contain momentary usage spikes. Consistent language and flexibility give it an added competitive edge for developers.

Some of the famous and familiar websites that use MEAN stack are Netflix, Uber, LinkedIn, Walmart, PayPal, and Yahoo. The web development frameworks and databases are enhancing every day. This is the most suitable stack technology for cutting-edge web and mobile applications development.

Categories
Angular Development Frontend Developers Javascript Node React Developers ReactJS

23 JavaScript Interview Questions And Answers

JavaScript is a high-level, dynamic, untyped, and interpreted programming language. It has been standardized in the ECMAScript language specification. Alongside HTML and CSS, it is one of the three essential technologies of World Wide Web content production; the majority of websites employ it and it is supported by all modern web browsers without plug-ins or any kind of other extensions.

“Javascript is the duct tape of the Internet.”

Let’s starts with some common Qs about JavaScript.

  • JavaScript is developed by- Netscape Communications Corporation Mozilla Foundation, Ecma International.

  • It designed by- Brendan Eich

  • JavaScript is called- JS

  • The extension filename of JavaScript- .js

  • JavaScript Media type- application/javascript, text/javascript.

  • The current version of JavaScript- ECMAScript 2018.

In this guide, you’ll find example interview Qs and answers you can refer to when seeking a new JavaScript developer to make your dynamic user interfaces come to life. You’ll also get some practical Qs on how to use these Qs to reliably identify results.

Q 1. Is JavaScript and JScript the same?


Answer. Both JavaScript vs JScript is designed to make dynamic web pages and interactive content.

  • Javascript is a scripting language (supports scripts) for Web pages but it is also used in non-browser environments as well. It is a powerful, lightweight, interpreted, scripting language with first-class functions (i.e. the language supports passing functions as arguments to other functions).
  • JScript is also a scripting language, much similar to JavaScript. It is a dialect of the popular ECMAScript standard reverse-engineered by Microsoft. JScript is subsidy by Microsoft and used in one of the most popular web browsers Microsoft’s Internet Explorer. JScript can also be called “Microsoft’s JavaScript”.
DifferenceJavaScriptJscript
TypeScripting languageScripting language owned by Microsoft.
SimplicityIt needs to write scripts manually. Same as JavaScript in this context.
Browser
Compatibility
It needs to handle multiple
browsers compatibility.
Only support by Microsoft’s internet
explorer.
Active Content
Creation
Does not support active content
creation.
With JScript, you can create active
online content for WWW.
Object
Access
JavaScript cannot access web browser
objects.
JScript can easily access-
objects exposed by internet explorer.

Q 2. Justify the use of let and const in JavaScript?


Answer. Earlier in javascript, developers use the var keyword for creating variables. let & const keyword is introduced in version ES6 with the vision of creating two different types of variables in javascript one is immutable and the other is mutable. The use if let and const in JavaScript:

  • let

let is used for variable declaration as it comes as an improvement to the var declarations. let is a block code bounded as {}. So a variable declared in a block with the let is only available for use within that block.

  • Example:
let greeting = "say Hi";
   let times = 4;

   if (times > 3) {
        let hello = "say Hello instead";
        console.log(hello);//"say Hello instead"
    }
   console.log(hello) // hello is not defined
  • const

Variables declared with the const maintain constant values. const declarations share some similarities with let declarations.

Like let declarations, const declarations can only be accessed within the block it was declared in.

const cannot be updated or re-declared

This means that the value of a variable declared with const remains the same within its scope. It cannot be updated or re-declared. So if we declare a variable with const.

  • Example:
const greeting = "say Hi";
    greeting = "say Hello instead";//error : Assignment to constant variable. 

Q 3. Explain the MUL function in JavaScript?


Answer. MUL means a simple multiplication of numbers. It is a technique in which you pass one value as an argument in a function and that function returns another function to which you pass the second value and the process goes on. Multiplies two expressions. This is the functional equivalent of the (*) operator.

Q 4. List the Frameworks and Data types supported by JavaScript?


Answer. The frameworks used by JavaScript are:

  • Node.js
  • Angular.js
  • React
  • Vue.js
  • Ember.js
  • Meteor
  • Backbone.js

Data types supported by JavaScript are:

  • Symbol
  • String
  • Boolean
  • Null
  • Undefined
  • Number
  • Object

Q 5. How you can redirect a page to another page in JavaScript?


Answer. There are several ways to redirect the page to another page in JavaScript. These are:

  • Using location.href: It is the first approach to redirect page. In this, we can go back to access the original document.

  • Using location.replace: Another approach to redirect page. In this, it is not possible to navigate back to the original document by clicking on the back button as it removes the URL of the original document. 

Q 6. Clarify some design patterns in JavaScript?


Answer. The design pattern is a reusable solution to a commonly occurring problem in software design. Some of the design patterns are:

  1. Behavioral Patterns: 
    These patterns are to improve communication between objects and to recognize patterns. Visitor, states, strategy, Memento, Mediator, Iterator, Command, Chain of responsibility and observer are examples of Behavioral patterns.

  2. Creational design pattern: 
    These patterns deal with the mechanism of object creation which optimizes object creation with the basic approach. Factory method, Abstract Factory, Builder, Prototype, and Singleton are the categories of Creational design pattern.

  3. Concurrency design patterns: 
    These patterns handle with multi-thread programming paradigms. Some popular categories of concurrency design patterns are Scheduler, Nuclear reaction, and Active object.

  4. Structural design pattern: 
    These patterns deal with different classes and objects to provide new functionality. Adapter, Bridge, Composite, Decorator, Facade, Flyweight, and proxy are the categories od structural design patterns.

  5. Architectural design patterns: 
    These patterns used to deal with architectural designs. Like: MVC (Model-View-Controller), MVVM (Model-View-ViewModel), and MVP (Model-View-presenter).

Q 7. Explain promise in JavaScript?


Answer. A Promise is a proxy for a value not necessarily known when the promise is created. It allows the developers to associate handlers with asynchronous action’s eventual success value or failure reason. Essentially, a promise is a returned object that you can attach callbacks to, instead of passing callbacks into a function.

  • 3 states to a promise:
  1. pending: awaiting promise response.
  2. resolve : promise has successfully returned.
  3. reject: failure occurred.
  • Syntax:
new Promise(executor);
Function process of promise

Q 8. What are the advantages of using JavaScript?


Answer. Some key advantages of JavaScript are:

  • JavaScript is an easy language to learn.

  • It is comparatively fast for the end-user.

  • Easy to debug and test.

  • JavaScript is platform-independent.

  • It works on the client6-side.

  • Also, has powerful frameworks.

  • Event-based programming language.

  • Procedural programming capabilities.

Q 9. How to get inner HTML of an element in JavaScript?


Answer. InnerHTML property of HTML DOM is used to get inner Html of an element in JavaScript.

  • Example:
<script type="text/javascript">
	var  inner= document.getElementById("inner").innerHTML ;
	console.log(inner); // This is inner Element
	document.getElementById("inner").innerHTML = "Html changed!";
	var  inner= document.getElementById("inner").innerHTML ;
	console.log(inner); // Html changed!
</script>

Q 10. What are the Arrow functions in JavaScript?


Answer. Arrow functions were introduced in ES6. Arrow functions allow the developers to write shorter function syntax.

hello = () => {
  return "Hello World!";
}

An arrow function expressions is a syntactically compact alternative to a regular function expression, but this function has its own bindings to the arguments, super, this, and new.target keywords.

Q 11. How to encode and decode a URL in JavaScript?


Answer. Encode and Decode a URL in JavaScript:

  • encodeURI() function is used to encode an URL in Javascript.It takes a url string as parameter and return encoded string. Note: encodeURI() did not encode characters like / ? : @ & = + $ #, if you have to encode these characters too please use encodeURIComponent().

    Usage:
var uri = "my profile.php?name=alex&occupation=danciNG";
var encoded_uri = encodeURI(uri);
  • decodeURI() function is used to decode a URL in Javascript. It takes an encoded URL string as a parameter and returns decoded string.

    Usage:
var uri = "my profile.php?name=alex&occupation=danciNG";
var encoded_uri = encodeURI(uri);
decodeURI(encoded_uri);

Q 12. Classify the different ways of empty an array in javascript?


Answer. In Javascript, there are many ways to empty an array, here are the four major ways to empty an array:

  • By poping the elements of the array.
var arr2 =[1,4,5,6];
while(arr.length > 0) {
    arr.pop();
}
  • Assigning array length to 0.
var arr2 =[1,4,5,6];
arr2.length=0;
  • Using .splice().
var arr =[1,4,5,6];
arr.splice(0,arr.length)
  • By assigning an empty array.
var arr1 =[1,4,5,6];
arr1=[];

Q 13. How to remove duplicates from JavaScript Array?


Answer. The three main approaches to remove duplicates from JavaScript Array:

  • By using Set:

It is the simplest way to remove duplicates because Set is an inbuilt object to store unique values in an array.

How to use set:

 function uniquearray(array) { 
       let unique_array= Array.from(set(array)) 
       return unique_array;}

By this code, you can easily create a set of an array that automatically eliminates duplicate values in JavaScript.

  • By using Filter:

This is another way to remove duplicates from an array. In the Filter method, it requires three arguments: Current element, Index of the current element, and Array.

How to use Filter:

function unque_array (arr){
 let unique_array = arr.filter(function(elem, index, self) {
 return index == self.indexOf(elem); } 
return unique_array }
 console.log(unique_array(array_with_duplicates));
  • By using for loop:

This is also a way to remove duplicates, but in this developer make an empty array in which those elements will be added from the duplicate array to get the unique elements.

Code use as:

Array dups_names = ['Tom', 'Pal', 'Fred', 'Rongo', 'Ron'];
function dups_array(dups_names) {
 let unique = {};
 names.forEach(function(i) {
    If (!unique[i]) {
      unique[i] = true;    }
  });
return Object.keys(unique);}   // Tom, Pal, Fred, Rongo
Dups_array(names);

Q 14. Are the results of 6 + 4 + ‘45’ and 6 + 4 + 45 the same?


Answer. No, the results should be different from each other because the results for the two statements are very different from each other. 6 + 4 + 45 gives the result 55, which is the expected answer for the addition of numbers. But, 6 + 4 + ‘45’ returns 1045 as a result. This is because 45 is a string and 6 and 4 are numbers. The presence of the string specifies that the + operator is a string operator for concatenation rather than an arithmetic operator.

Q 15. What is null, undefined, and undeclared JavaScript variable?


Answer.

  • Null

It can be assigned to a variable to represent no value. It is an assignment value.

var b = null;
console.log(b); //null
console.log(typeof b); //object
  • Undefined

It means a variable has been declared but has not yet been assigned a value

var a;
console.log(a); //undefined
console.log(typeof a); // undefined
  • Undeclared

If a variable is not declared then the browser throws an error.

console.log(nonDeclaredVariable);
 
// Uncaught ReferenceError: nonDeclaredVariable is not defined
//    at <anonymous>:1:13
 
console.log(typeof nonDeclaredVariable); //undefined

Q 16. What is the purpose of ‘This’ operator in JavaScript?


Answer. The JavaScript this keyword refers to the object it belongs to. This has different values depending on where it is used. In a method, this refers to the owner object and in a function, this refers to the global object.

Q17. Explain the terms synchronous and asynchronous code.


Answer. The synchronous code is something that should be finished before anything else can happen, or in other words, the synchronous code is blocking. And the Asynchronous code is something in which actions can happen and is not dependent on other actions- in other words, it is non-blocking.

Q 18. Are “==” and “===” operators different in JavaScript?


Answer. “==” checks only for equality in value whereas “===” is a stricter equality test and returns false if either the value or the type of the two variables are different. So, the second option needs both the value and the type to be the same for the operands.

Q 19. How to Calculating the Fibonacci series in JavaScript?


Answer. Fibonacci Series is a sequence of numbers where the first two Fibonacci numbers are 0 and 1, and each subsequent number is the sum of the previous two.

function fibonacci(n) {
let arr= new Array(n+1);
arr[1]=1;
arr[2]=1;
for(let i=3;i<=n;i++)
{
 arr[i]=arr[i-1]+arr[i-2];
}
for(let i=1;i<=n;i++)
{
 console.log(arr[i]);
}
return;
} 


Answer. The process of Create, Read, and Delete a cookie by using JavaScript:

  • Cookie creating process-

The simple way to create a cookie is to assign a string value to the document.cookie object.

Syntax:

document.cookie = "key1 = value1; key2 = value2; expires = date";
  • Reading a cookie-

It is just as simple as writing one for the developers because of the value document.cookie object is the cookie. So you can use this string whenever you want to access it.

This fulfills your two conditions:

  1. The document.cookie string will keep a list of anme= value pairs separated by semicolons.

  2. It is easy for the developers to use the string’s split() function to break the string into key and values.
  • Delete a cookie-

If you want to delete a cookie, that subsequent attempts to read the cookie return nothing, you just need to set the expiration date to a time in the past. You should define the cookie path to ensure that you delete the right cookie. Some browsers will not let you delete a cookie if you don’t specify the path.

Q 21. Consider the following code:

function test() {
console.log(a);
console.log(foo());
var a = 1;
function foo() {
return 2;
}
}
test();

What is the result of executing this code and why?

Answer. The result of this code is undefined and 2.

The reason is that both variables and functions are hoisted but variables don’t retain any assigned value. So, at the time the variable “a” is printed, it exists in the function but it’s still undefined. Stated in other words, the code above is equivalent to the following:

function test() {
var a;
function foo() {
return 2;
}
console.log(a);
console.log(foo());
a = 1;
}
test();

Q 22. List the comparison operators supported by JavaScript?


Answer. The comparison operators are:

  • < Less than
  • > Greater than
  • <= less than or equal to
  • >= Greater than or equal to
  • == Equal to
  • != Not Equal to
  • === Equal to with datatype check
  • !== Not equal to with datatype check

Q 23. How you can clone an object in JavaScript?


Answer. Object.assign() method is used for cloning an object in Javascript.

Syntax:

 var x = {myProp: "value"};
 var y = Object.assign({}, x); 

Categories
Angular Development Javascript Remote developer Startup Top Coder

Top 5 Programming Languages For Jobs And Future

So many programming languages- confused about what to choose or pursue as a job. In this article, every programming language is briefly described which make easy for you to choose and learn according to your interest.

Sometimes it is difficult to find the best out of the rest. Here are the top 5 programming languages and their job rates and future scope.

Before starting with languages, let’s brief that what is programming language is?

Introduction to Programming Language

The programming language is a language which contains a set of instructions that produce various kinds of outputs. It is used in computer programming to execute algorithms.

Thousands of different programming languages built and many more created every year but only a few implemented in the market or used by developers.

But only those programming languages, that are easy to use and understand. The classification of a programming language usually divided into two ingredients- syntax (form) and semantics (meaning).

Syntax

  • It is the surface form of a programming language.
  • Most of the programming languages are purely textual, so they use sequences of text including words, numbers, and punctuation.
  • The syntax of a language expresses the possible compounds/combination of symbols.

Semantics

  • The meaning of programming languages.
  • There are two types of semantics-
    (1) Static semantics: The static semantics defines restrictions on the structure of valid texts that are hard or impossible to express in standard syntactic formalisms. and
    (2) Dynamic semantics: The machine must be instructed to perform operations on the data. 

TOP PROGRAMMING LANGUAGES AND THEIR JOBS AND FUTURE SCOPES

The popularity of top programming languages


Several new programming languages are coming up that revised for different categories of developers (beginners, average, and experts). As well as for different use cases (web application, mobile applications, game development, distributed system, etc).

The most essential skill to learn in today’s scenario is how to write a computer program. The programming and developer community are emerging at a rate faster than ever before.

Python


It is a general-purpose programming language, which is used to build easy and tools and libraries. For backend web development, artificial intelligence, data analysis, and scientific computing- python is a great language.

There are many developers who use python and find it simple and easy to learning. Therefore, they have used python to build productivity tools, games, and desktop applications. 

Today, Python has multiple implementations including Jython, scripted in Java language for Java Virtual MachineIronPython has written in C# for the Common Language Infrastructure, and PyPy version written in RPython and translated into C.

While these implementations work in the native language they are written in, they are also capable of interacting with other languages through the use of modules. Most of these modules work on the community development model and are open-source and free.

Advantages/Benefits of Python


The various application of the Python language is a combination of features which give this language advantages.

  • Supportive Libraries: Python provides a large standard library which includes areas like internet protocols, string operations, web services tools, and operating system interfaces.
  • Presence of Third Party Modules: The Python Package Index (PyPI) contains numerous third-party modules that make Python capable of interacting with most of the other languages and platforms.
  • Productivity and Speed: Python has a clean object-oriented design which provides enhanced process control capabilities and possesses strong integration as well as text processing capabilities.
  • Open Source and Community Development: Python language is developed under an OSI-approved open source license, which makes it free to use and distribute, including for commercial purposes.
  • Learning Ease and Support Available: Python gives excellent readability and uncluttered easy-to-learn syntax which helps beginners to utilize this programming language. The code style guidelines, PEP 8, provides a set of rules which help to format the code.
  • User-friendly Data Structures: Python has built-in list and dictionary data structures which can be used to create fast runtime data structures. Secondly, it also provides the option of high-level data typing which decreases the length of the support code that is needed.

Career With Python

  • With many different programming languages available, Python has tremendously outraced the other languages.
  • Career opportunities associated with Python have also grown significantly as its popularity has increased by 40%.
  • Many IT businesses are looking for more candidates with experience and skills in Python programming languages.
  • This has illustrated the better career scope for the Python programmers in the near future.
Top Companies using Python Programming Language


Why Python has a bright future ahead?


Python has been voted for the most favourite programming language. It is assuredly beating other programming languages. It has been used for developing almost every kind of applications whether it is web applications or game applications.

[Important] Recently, on 2nd July 2019, Python 3.6.9 offers drastic improvement, among other new features. Python 3.7.4 is the current version of Python which is released on July 8, 2019.

JavaScript


JS is the high-level, interpreted scripting language which follows the ECMAScript specification. It is the multi-paradigm, supporting object-oriented, dynamic, imperative, declarative and a prototype-based language.

Even it’s used in many non-browser environments. Javascript is an easy and the language which use to design or program the webpages. Also, for controlling webpage behaviour.

In Javascript, the basic syntax, intentionally related to Java and c++ languages to reduce the number of new concepts required to learn this language.

But “Javascript has not interpreted java”. The language constructs are such as:
– if statements,
– for and while loops,
– switch, catch blocks function.

JS is the dynamic capabilities include runtime object construction, function variables, dynamic script creation, variable parameter lists, object introspection, and source code recovery. the common application for Javascript is the web server-side scripting language.

A Javascript web server would host object represents HTTP request and response objects for javascript program to generate dynamic web pages. The most popular example of Javascript is Node.js.

There are some databases like MongoDB and CouchDB which use Javascript as their programming language.

Different features of Javascript


Career with JS


There are so many options for freshers or experienced people:

  • Front-End web developer: This job focussed on HTML, CSS, JavaScript and light backend.
  • Web Application developer: Creating web-based software application including interactive online forms, shopping carts, word processing, Email software, and file conversions using Javascript.
  • Javascript developer: Designing and developing new front-end applications for various platform.
  • UX/UI designer: Design the product features according to users or clients. And find innovative ways to resolve UX problems as well as collaborate with UI designers to execute attractive designs.
  • Full-stack developer: Design the architecture of the web application.
  • DevOps engineer: This job is a link between IT and Developers like testing servers, deploying, version control, build processes and server software.

Advanced future of JS

No doubt that there are various frameworks (VUE.js, jQuery, Angualr.js, and React.js) that have their own established in the market which is constantly growing as well as some frameworks might fail in future and some continually grow.

Comparison of Javascript frameworks


Looking at the statistics and market position, it does not seem that react.js will leave its popularity in recent time as well as in the future.
The future, however, it will be a hybrid of everything available today. Where one framework, which is defined as the easiest to adopt by developers and proposes a complete solution, uses complementary techniques such as web components, web assembly, and AI, to create an end to end solution for developing applications.

JAVA


It is a general-purpose programming language that is class-based, and object-oriented. Java code can run anywhere or on all platforms that support Java without the need for recompilation. And Java applications are typically compiled to bytecode that can run on any Java virtual machine (JVM). The syntax of Java is similar to C and C++.

Java is one of the popular programming languages. it is a widely-used programming language that designed according to any distributed environment of the internet. As well as Java can be used for creating complete applications.

Java is popular because-

  • data is secure
  • easy to learn
  • code robust
  • applets give flexibility
  • portability in a network
  • object-oriented
  • platform-independent

Three main platforms of Java:

  • Java SE (Standard Edition)
  • Java EE (Enterprise Edition)
  • JavaME (Micro Edition)

[Important] The latest version is Java 12 which is released in March 2019.

Different features of Java

The Career path with JAVA


There are many career options with Java:

  1. Back-end developer: This career path is the one most in-demand and offers worldwide. As freelancer or remote developers or in-office, companies demand back-end developers for them and with a good salary package.
  2. Big data developer: This is fastly growing career option as most of the companies are looking for leveraging large data sets for various business and marketing.
  3. Android developer: An android programmer as a career is a really good option with java.
  4. Embedded devises developer: Using Java, this is a niche path which also has growth opportunities for the developers.
Developers position using Java

In the above graph, you find three years of representation of developers positions.
However, Java is the one outstanding Android versatile application that improving market. The popularity of Java is high than other programming languages.

Future of JAVA


No doubt that java would have an amazing future, as it is a future-oriented programming language for years. Secondly, Java has brought many new concepts in which the most significant one is the security of applications and programs. So, in the upcoming years, business organizations find Java applications more secure.

Ruby on Rails


It is an interpreted, high-level, general-purpose programming. Ruby is used to collecting garbage, it is a dynamic type language which supports multiple programming paradigms. Also, it includes procedural, object-oriented and functional programming.

Rails is a development tool that gives web developers a framework and a structure to write code. It simply helps to build websites and applications. ” Convention over configuration” is the key principle of Ruby.

Why developer go with Ruby on Rails?

  • Ruby is faster than other framework and language.
  • Same coding structure which makes coding easy for the developers.
  • Good for rapid application development (RAD) as well as easy to accommodate changes.
  • It developed a strong focus on testing.
  • Also, it has open-source libraries
Amazing features of Ruby

Boost your career with Ruby


As now ruby on rail becomes the popular programming language. Ruby on rails entry-level jobs is Junior programmer and co-developers. As well as the experienced person get the good opportunity of high-position jobs like chief technology officer, project leader, and senior developers. With these amazing jobs, they get an annual salary which is starts at $100,000 to $154,000.

Three levels:

  • The entry-level Ruby on Rails developer jobs includes setting up rail environment, managing database, handling requests, basic HTML, JavaScript, and CSS knowledge and performing basic tasks related to the development of Ruby on Rails application.
  • The mid-level RoR developer job requires you to have knowledge about ActiveRecord Associations, Design patterns, and Object Orientation.
  • The senior-level jobs in Ruby on Rails require the developers to have skills such as understanding of Ruby Metaprogramming, database modelling, monitoring skills, planning, and estimation.

Future track with Ruby on Rail


After watching the career scope of Ruby, it looks like Ruby has a huge and bright future because:

  • Apt for a low budget
  • Community
  • Easy testing
  • Consistency
Companies using Ruby on Rails

PHP


Hypertext Preprocessor (PHP) is a general-purpose programming language which is designed for web development. PHP code is usually processed by PHP interpreter as a module in the webserver secondly, the PHP code executed with a command-line interface (CLI). It is a scripting language that adopts to server-side web development. So, it can be used for client-side GUI and command-line scripting. Many web hosting providers support PHP for their clients. Also, PHP is free of cost.

The main use of PHP is that it acts like a filter, which takes input from text and converts it into output another stream. And it common output as HTML. PHP main focuses on the server-side scripting languages that provide dynamic content from a webserver to the client.

Some features of PHP

Why developers choose PHP?

  • PHP supports database management system and other open-source.
  • It also supports MySQL, Oracle, Sybase, etc.
  • It is simple and easy to learn.
  • Runs on platforms such as Linux, Windows, etc.

Career with PHP


Becoming a PHP developer can open several doors throughout your career. The first step up the ladder from this position is a senior web developer job.

In this role, your responsibilities encompass all aspects of creating websites and software, including supervision of PHP. From the position of a senior web developer, you can go on to become an IT manager, development director, Chief Technology Officer, or a senior .NET developer. These are just a few options you can take depending on your other qualifications.

Future of PHP

Categories
Angular Development Frontend Developers Javascript ReactJS

Angular 5 Tutorial: Step 2- Connecting Angular with Firebase


Here we are continuing this tutorial with connecting Angular with Firebase. In the previous article of Angular 5, you get to know about Angular, Typescript and Angular CLI. As well as how to build your app with Angular 5. In that article, you learned App composition in Angular, Component communication and working with native events as well as Angular Forms.

To create a backend for your Angular 5 App. You need to create a demo project in Firebase and then connect Angular with Firebase.


Working with Backends

Here you are creating a backend for your Angular 5 app. Since you are not going to build server-side here. You can use Firebase for your API. If you actually do have your own API backend you can also configure your back-end in development server.

To do that create proxy.conf.json in the roof of the project and add this content there:

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false
  }
}


For every request from your app to its host. Which you remember is Webpack dev server. The /api root server should proxy the request to
http://localhost:3000/api. For that, to work, you also need to add one more thing to your app configuration; in package.json, as well as you need to replace the start command for your project.

[...]
"scripts": {
[...]
  "start": "ng serve --proxy-config proxy.conf.json",


Now, you can run your project with yarn start or npm start and get proxy configuration in place. How can you work with the API from Angular? Angular gives you HttpClient. Let’s define your CardService for your current application:

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
@Injectable()
export class CardService {
  constructor(private http: HttpClient) { }
  get() {
    return this.http.get(`/api/v1/cards.json`);
  }
  add(payload) {
    return this.http.post(`/api/v1/cards.json`, {text: trim(payload)});
  }
  remove(payload) {
    return this.http.delete(`/api/v1/cards/${payload.id}.json`);
  }
  update(payload) {
    return this.http.patch(`/api/v1/cards/${payload.id}.json`, payload);
  }
}


So what does Injectable here mean? You already established that Dependency Injection helps you to inject your components with the services you use.But for getting access to your new service, you need to add it to the provider list in your AppModule :

[...]
import { CardService } from './services/card.service';
[...]
@NgModule({
[...]
 providers: [CardService],


Now you can inject it in your AppComponent, for example:

import { CardService } from './services/card.service';
[...]
  constructor(private cardService: CardService) {
    cardService.get().subscribe((cards: any) => this.cards = cards);
  }


Connecting Angular With Firebase

So let’s configure Firebase now, creating a demo project in Firebase and hitting the Add Firebase to your app button. Then, we copy credentials that Firebase shows us into the Environment files of your app, here: src/environments/.

export const environment = {
[...]
  firebase: {
    apiKey: "[...]",
    authDomain: "[...]",
    databaseURL: "[...]",
    projectId: "[...]",
    storageBucket: "[...]",
    messagingSenderId: "[...]"
  }
};


You need to add it both environment.ts and environment.prod.ts. and just to give you some understanding of what environment files are here, they are actually included in the project on compilation phase, and .prod. the part being defined by the –environment switch for ng serve or ng build. You can use values from that file in all parts of your projects and include them from environment.ts while Angular CLI takes care of providing content from the corresponding environment.your-environment.ts .


Add your Firebase support Libraries:

yarn add firebase@4.8.0 angularfire2
yarn add v1.3.2
[1/4]   Resolving packages...
[2/4]   Fetching packages...
[3/4]   Linking dependencies...
[...]
success Saved lockfile.
success Saved 28 new dependencies.
[...]
  Done in 40.79s.


And now just change your CardService to support Firebase:

import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireList, AngularFireObject } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';
import { Card } from '../models/card';
@Injectable()
export class CardService {
  private basePath = '/items';
  cardsRef: AngularFireList<Card>;
  cardRef:  AngularFireObject<Card>;
  constructor(private db: AngularFireDatabase) {
    this.cardsRef = db.list('/cards');
  }
  getCardsList(): Observable<Card[]> {
    return this.cardsRef.snapshotChanges().map((arr) => {
      return arr.map((snap) => Object.assign(snap.payload.val(), { $key: snap.key }) );
    });
  }
  getCard(key: string): Observable<Card | null> {
    const cardPath = `${this.basePath}/${key}`;
    const card = this.db.object(cardPath).valueChanges() as Observable<Card | null>;
    return card;
  }
  createCard(card: Card): void {
    this.cardsRef.push(card);
  }
  updateCard(key: string, value: any): void {
    this.cardsRef.update(key, value);
  }
  deleteCard(key: string): void {
    this.cardsRef.remove(key);
  }
  deleteAll(): void {
    this.cardsRef.remove();
  }
  // Default error handling for all actions
  private handleError(error: Error) {
    console.error(error);
  }
}


You see something interesting here, on the first model for the card being imported. So Let’s take a look at its composition.

export class Card {
    $key: string;
    text: string;
    constructor(text: string) {
        this.text = text;
    }
}


So you are structuring your data with classes and, aside from your text, you add $key from Firebase. Let’s change your AppComponent to work with that service.

[...]
import { AngularFireDatabase } from 'angularfire2/database';
import {Observable} from 'rxjs/Observable';
import { Card } from './models/card';
[...]
export class AppComponent {
public cards$: Observable<Card[]>;
addCard(cardText: string) {
  this.cardService.createCard(new Card(cardText));
}
constructor(private cardService: CardService) {
  this.cards$ = this.cardService.getCardsList();
}


What is cards$? You mark your observable variables by adding $ to them to make sure you treat them as you should. So add your cards$ to the AppComponent template.

[...]
<app-card-list [cards]="cards$"></app-card-list>


But in return, you get this error in the console:

CardListComponent.html:3 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.


Why so? you are getting observables from the Firebase. But your *ngFor in the CardList component waits for the array of objects, not observable of such arrays. so you can subscribe to that observable and assign it to a static array of cards, but there is a better option:

<app-card-list [cards]="cards$ | async"></app-card-list>


The asynchronous pipe, which is practically another syntax sugar that Angular gives to you. Subscribe to the Observable and return its current value as a result of the evaluation of your expression.


Reactive Angular – Ngrx

Let’s talk about your application state. Application state means all properties of your application that define its current behaviour as well as state literally. State is a single, Immutable data structure – the way Ngrx implements for you. Ngrx is an RxJS powered state management library for Angular applications, inspired by Redux.

“Redux is a pattern for managing application state. So it’s more like a set of conventions that allow you to answer the question of how your application should decide its needs to display some interface element. Or where it is supposed to store its session state after receiving it from the server.


Let’s see how it can be achieved. So you already know about State as well as its immutability. Which means you can’t change any of its properties after creating it. So this makes it all impossible to store your application state in your state. But not completely, every single state is immutable, but the store which is your way of accessing state is actually an observable of the state.

So State is a single value in any stream of store values. In order to change the app’s state not only, you need to make some Action that will take your current state but also replace it with a new one. Both are immutable but the second one is based on the first, so instead of mutating values on your State, you create a new State object. For that you use Reducers as pure functions, meaning that for any given State and Action as well as its payload reducer. It will return the same state as in any other call of that reducer function with same parameters.


Actions consist of action type and optional payload:

export interface Action {
  type: string;
  payload?: any;
}


For your task, let’s view how the action for adding a new card could be:

store.dispatch({
  type: 'ADD',
  payload: 'Test Card'
});


And also see a reducer for that:

export const cardsReducer = (state = [], action) => {
  switch(action.type) {
    case 'ADD':
      return {...state, cards: [...cards, new Card(action.payload)]};
    default:
      return state;
  }
}


This function is being called for every new Action event. So if you dispatch your ADD_CARD action, it’ll get into that case statement. What is happening there? You are returning your new State based on your previous State by using TypeScript spread syntax, so you don’t have to use something like Object.assign in most cases. You never should change your state outside of those case statements, because it will make life miserable as you waste time searching for the reason why your code is behaving unpredictably.


Let add Ngrx to your application. For that, run next in your console:

yarn add @ngrx/core @ngrx/store ngrx-store-logger
yarn add v1.3.2
[1/4]   Resolving packages...
[2/4]   Fetching packages...
[3/4]   Linking dependencies...
[...]
[4/4]   Building fresh packages...
success Saved lockfile.
success Saved 2 new dependencies.
├─ @ngrx/[email protected]
└─ @ngrx/[email protected]
└─ [email protected]
  Done in 25.47s.


Now, add your Action definition ( app/actions/cards.ts ):

import { Action } from '@ngrx/store';
export const ADD = '[Cards] Add';
export const REMOVE = '[Cards] Remove';
export class Add implements Action {
    readonly type = ADD;
    constructor(public payload: any) {}
}
export class Remove implements Action {
    readonly type = REMOVE;
    constructor(public payload: any) {}
}
export type Actions
  = Add
| Remove;


And your Reducer definition ( app/reducers/cards.ts ):

import * as cards from '../actions/cards';
import { Card } from '../models/card';
export interface State {
    cards: Array<Card>;
}
const initialState: State = {
    cards: []
}
export function reducer(state = initialState, action: cards.Actions): State {
    switch (action.type) {
      case cards.ADD:
        return {
            ...state, 
            cards: [...state.cards, action.payload]
        };
      case cards.REMOVE:
        const index = state.cards.map((card) => card.$key).indexOf(action.payload);
        return {
            ...state, 
            cards: [...state.cards.slice(0, index), ...state.cards.slice(index+1)]
        };
      default:
        return state;
    }
}


Here you can see how you can use spreads as well as native TypeScript functions like map to drop the element off your list.

Let’s go one step further and make sure that if your application state will contain more than one type of data, you are composing it from a separate isolated state for each kind. So for that, use module resolution using ( app/reducers/index.ts ):

import * as fromCards from './cards';
import {ActionReducer, ActionReducerMap, createFeatureSelector, createSelector, MetaReducer} from '@ngrx/store';
import {storeLogger} from 'ngrx-store-logger';
import {environment} from '../../environments/environment';
export interface State {
    cards: fromCards.State;
}
export const reducers: ActionReducerMap<State> = {
    cards: fromCards.reducer
}
export function logger(reducer: ActionReducer<State>): any {
    // default, no options
    return storeLogger()(reducer);
}
export const metaReducers: MetaReducer<State>[] = !environment.production
  ? [logger]
  : [];
/**
 * Cards Reducers
 */
export const getCardsState = createFeatureSelector<fromCards.State>('cards');
export const getCards = createSelector(
    getCardsState,
    state => state.cards
);  


You also include a logger for your Ngrx in the development environment and create a selector function for your card array. So include it in your
AppComponent :

import { Component } from '@angular/core';
import { CardService } from './services/card.service';
import { Observable } from 'rxjs/Observable';
import { Card } from './models/card';
import * as fromRoot from './reducers';
import * as cards from './actions/cards';
import { Store } from '@ngrx/store';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public cards$: Observable<Card[]>;
  addCard(card: Card) {
    this.store.dispatch(new cards.AddCard(card));
  }
  constructor(private store: Store<fromRoot.State>) {
    this.cards$ = this.store.select(fromRoot.getCards);
  }
}


So, you see how can you dispatch your actions using your store. But this code is still non-usable, as you don’t include your reducers (reducer as well as metaReducer) into your app. Let’s do it by changing your AppModule :

[...]
import { StoreModule } from '@ngrx/store';
import {reducers, metaReducers} from './reducers/index';
[...]
imports: [
[...]
  StoreModule.forRoot(reducers, { metaReducers }),
[...]


And now it’s working. Kind of. Remember, you can use something like ngrx-store-localstorage to store your data the browser’s localStore, but how about working with APIs? Maybe you can add your previous API integration into your Reducer? But you can’t, as your Reducer function is supposed to be a pure function. So, “evaluation of the result does not cause any semantically observable side effect or output, such as mutation of mutable objects or output to I/O devices”… What can you do with that? The answer is actually right in that definition. Side-effects of Ngrx to the rescue.

Ngrx effects

So what is a side effect? Its piece of code that catches your Actions more or less the same way as your reducers do, but instead of changing something in your state, they actually send API requests and, on the result, dispatch new Actions.

As always, it’s simpler to show you than to tell you. Let’s make your new configuration support Firebase. For that, install the effects module:

yarn add @ngrx/effects
[...]
success Saved 1 new dependency.
└─ @ngrx/[email protected]
  Done in 11.28s.


You will also add new actions to your Card Actions for loading support ( src/app/actions/cards.ts ):

[...]
export const LOAD = '[Cards] Load';
export const LOAD_SUCCESS = '[Cards] Load Success';
export const SERVER_FAILURE = '[Cards] Server failure';
[...]
export class Load implements Action {
    readonly type = LOAD;
}
export class LoadSuccess implements Action {
    readonly type = LOAD_SUCCESS;
    constructor(public payload: any) {}
}
export class ServerFailure implements Action {
    readonly type = SERVER_FAILURE;
    constructor(public payload: any) {}
}
[...]
export type Actions
[...]
    | Load
  | LoadSuccess
  | ServerFailure


So you have three new actions, one for loading the card list and two for dealing with successful and unsuccessful responses. Let’s implement your effects ( src/app/effects/cards.ts ):

import {Injectable} from '@angular/core';
import {Actions, Effect} from '@ngrx/effects';
import {CardService} from '../services/card.service';
import { of } from 'rxjs/observable/of';
import * as Cards from '../actions/cards';
import {exhaustMap, map, mergeMap, catchError} from 'rxjs/operators';
@Injectable()
export class CardsEffects {
    @Effect()
    loadCards$ = this.actions$
        .ofType(Cards.LOAD).pipe(
            mergeMap(action => {
                return this.cardService.getCardsList().pipe(
                map(res => new Cards.LoadSuccess(res)),
                catchError(error => of(new Cards.ServerFailure(error))))}
            )
        );
    @Effect({dispatch: false})
    serverFailure$ = this.actions$
        .ofType(Cards.SERVER_FAILURE).pipe(
        map((action: Cards.ServerFailure) => action.payload),
        exhaustMap(errors => {
            console.log('Server error happened:', errors);
            return of(null);
        }));        
    constructor(
        private actions$: Actions, 
        private cardService: CardService) {}
}


So you have injectable CardsEffects, which use the @Effect decorator for defining effects on top of your Actions and filtering only necessary actions by using the ofType operator. You may use ofType to create an effect that will be fired on multiple action types.

But for now, you only need two out of your three actions. For the Load action, you are transforming every action into a new observable on the result of your getCardList method call.

In the case of success, the observable will be mapped to a new action LoadSuccess with a payload of your request results, but in the case of error, you’ll return a single ServerFailure action. Mind the of operator there—it converts a single value or array of values to the observable.

So your Effects dispatch new Actions after making something that depends on the external system (your Firebase, to be precise). But within the same code, you see another effect, which handles the ServerFailure action using the decorator parameter dispatch: false.

What does this mean? As you can see from its implementation, it also maps your ServerFailure action to its payload and then displays this payload (your server error) to console.log. Clearly, in that case, you should not change state contents, so you don’t have to dispatch anything. And that’s how you make it work without any need for empty actions.

So, now that you’ve covered two of your three actions, let’s move on to LoadSuccess. From what you know so far, you are downloading a list of cards from the server and you need to merge them into your State. So you need to add it to your reducer ( src/app/reducers/cards.ts ):

[...]
switch (action.type) {
[...]
case cards.LOAD_SUCCESS:
        return {
            ...state,
            cards: [...state.cards, ...action.payload]
        }  
[...]


So same story as before, you open your object and card array in it by using the spread operator and join it with the spread payload (cards from the server, in your case ). Let’s add your new Load action to your AppComponent.

[...]
export class AppComponent implements OnInit {
  public cards$: Observable<Card[]>;
  addCard(card: Card) {
    this.store.dispatch(new cards.AddCard(card));
  }
  constructor(private store: Store<fromRoot.State>) {
  }
  ngOnInit() {
    this.store.dispatch(new cards.Load());
    this.cards$ = this.store.select(fromRoot.getCards);
  }
}


This should load your card from Firebase. Let’s take a look at the browser:


Something is not working. You are clearly dispatching the Action, as can be seen from your logs, but no server request is here for you. What’s wrong? you forget to load your effects to your AppModule. Let’s do that:

[...]
import { EffectsModule } from '@ngrx/effects';
import { CardsEffects } from './effects/cards.effects';
[...]
imports: [
[...]
    EffectsModule.forRoot([CardsEffects])


So now back to the browser:


Now it’s working. So that’s how you integrate effects into loading data from the server. But you still need to send back there on your card creation. Also, make that works, For that change your CardService createCard method:

createCard(card: Card): Card {
    const result = this.cardsRef.push(card);
    card.$key = result.key;
    return card;
  }


And add an effect for the Adding card:

@Effect()
    addCards$ = this.actions$
        .ofType(Cards.ADD).pipe(
            map((action: Cards.Add) => action.payload),
            exhaustMap(payload => {
              const card = this.cardService.createCard(payload);
                if (card.$key) {
                    return of(new Cards.LoadSuccess([card]));
                }
            })
        );


So if the card is to be created, it will get $key from Firebase and you will merge it into your card array. You also need to remove the case cards.ADD: branch from your reducer. try it in action:


For some reason, you are getting duplicated data on the card add operation. Try to figure out why. If you look closely at the console, you’ll see two LoadSuccess actions first being dispatched with your new card as it is supposed to be, the second one is being dispatched with both of your cards. If not in effect, where in your action is it being dispatched?

Your load effect on cards has this code:

return this.cardService.getCardsList().pipe(
  map(res => new Cards.LoadSuccess(res)),


And your getCardsList is observable. So when you add a new card to your card collection, it is output. So either you don’t need to add that card on your own, or you need to use a take(1) operator in that pipe. It’ll take a single value and unsubscribe. But having live subscription seems more reasonable (presumably, you will have more than one user in the system), so let’s change your code to deal with the subscription.


Let’s add a non-dispatching element to your effect:

@Effect({dispatch: false})
addCards$ = this.actions$
  .ofType(Cards.ADD).pipe(
    map((action: Cards.Add) => action.payload),
    exhaustMap(payload => {
      this.cardService.createCard(payload);
      return of(null);
    })
  );


Now you only need to change the reducer LoadSuccess to replace the cards, not combine them:

case cards.LOAD_SUCCESS:
  return {
    ...state,
    cards: action.payload
  };


And now it’s working as it should:


So you can implement remove action the same way now. As you get data out of that subscription, you only have to implement the Remove effect.

Preparing for production

So let’s build your app for production use. And for that, let’s run the build command:

ng build --aot -prod
 65% building modules 465/466 modules 1 active ...g/getting-started-ng5/src/styles.scssNode#moveTo was deprecated. Use Container#append.
Date: 2018-01-09T22:14:59.803Z
Hash: d11fb9d870229fa05b2d
Time: 43464ms
chunk {0} 0.657b0d0ea895bd46a047.chunk.js () 427 kB  [rendered]
chunk {1} polyfills.fca27ddf9647d9c26040.bundle.js (polyfills) 60.9 kB [initial] [rendered]
chunk {2} main.5e577f3b7b05660215d6.bundle.js (main) 279 kB [initial] [rendered]
chunk {3} styles.e5d5ef7041b9b072ef05.bundle.css (styles) 136 kB [initial] [rendered]
chunk {4} inline.1d85c373f8734db7f8d6.bundle.js (inline) 1.47 kB [entry] [rendered]


So what’s happening here? You are building your application to static assets that could be served from any web server (if you want to serve from subdirectory ng build, have the option –base-href ). By using -prod, you are telling AngularCLI that you need the production build. And –aot is telling it that you like to have ahead-of-time compilation. In most cases, it is preferable, as it allows you to get the smaller bundle and faster code. Also, keep in mind that AoT is way too strict on your code quality, so it may produce errors that you haven’t seen before. Run the build earlier so it’s easier to fix.

If you want to develop an app with angular or any other technology and it seems difficult, there is no issue Codersera is here to help you by providing the top coder for your project:- Click here to Hire A Coder

And if you belong to the ones who are passionate about coding, Codersera can give you the opportunity to work on interesting and challenging projects. All you need to do is:- Click here to Apply As Coder

Categories
Angular Frontend Developers Javascript React Developers React Native Developers React Native Web Top Coder

An Angular 5 Tutorial: Step 1 – Guide To Your First Angular 5 App

Let’s get started with your Angular 5 tutorial. First, let me introduce you to Angular 5. Angular 5 is a new version of the AngularJS framework. It is developed by Google. It comes with various improvements like optimized build and faster compile times. Angular 5 also comes with a complete rewrite.

If you want to learn Angular 5 this Angular 5 tutorial is for you. Here we are going to build a notes app from scratch.

An Angular 5 Tutorial: Step By Step Guide To Your  First Angular 5 App


There are two versions of frameworks:-

-AngularJS(Version 1)
-Angular(Version 2+)

There is a huge difference between these two is AngularJS is a javascript framework but version 2 Angular is not a javascript framework.

Conflict b/w use or not to use Angular 5:-


Some developers prefer to use React and build their components without additional codes. But that may be a problem, too.

On the other hand, some developers choose Angular as it is a fully integrated framework. Angular allows you to quickly start working on your project without giving thought about which library to select and also how to deal with everyday problems. That is why here we are building our first Angular 5 App.

TypeScript


TypeScript is easy to learn if you have a good knowledge of JavaScript. Most modern editors are quite effective in helping with that. Nowadays the most preferable options are VSCode and any of the JetBrains IntelliJ family-like Webstorm and RubyMine.

It’s good to use a smarter editor than vim. As TypeScript is strongly typed, it will give you an extra hands-up on any mistakes in the code. One more thing is that Angular CLI with its Webpack takes care of compiling TypeScript to JavaScript. So you shouldn’t let the IDE compile it for you.

Angular CLI


Angular has its own CLI (command line interface), which will do most of the routines for you. You have to install it first to start using Angular. It requires Node 6.9.0 or higher as well as NPM 3 or Higher. You need to install both for that find up-to-date documentation for installation. Once they both install, you can install Angular CLI by running the following.

npm install -g @angular/cli

Once you successfully install Angular CLI, you can generate a new project by running the ng new command.

ng new getting-started-ng5
  create getting-started-ng5/README.md (1033 bytes)
  create getting-started-ng5/.angular-cli.json (1254 bytes)
  create getting-started-ng5/.editorconfig (245 bytes)
  create getting-started-ng5/.gitignore (516 bytes)
  create getting-started-ng5/src/assets/.gitkeep (0 bytes)
  create getting-started-ng5/src/environments/environment.prod.ts (51 bytes)
  create getting-started-ng5/src/environments/environment.ts (387 bytes)
  create getting-started-ng5/src/favicon.ico (5430 bytes)
  create getting-started-ng5/src/index.html (304 bytes)
  create getting-started-ng5/src/main.ts (370 bytes)
  create getting-started-ng5/src/polyfills.ts (2405 bytes)
  create getting-started-ng5/src/styles.css (80 bytes)
  create getting-started-ng5/src/test.ts (1085 bytes)
  create getting-started-ng5/src/tsconfig.app.json (211 bytes)
  create getting-started-ng5/src/tsconfig.spec.json (304 bytes)
  create getting-started-ng5/src/typings.d.ts (104 bytes)
  create getting-started-ng5/e2e/app.e2e-spec.ts (301 bytes)
  create getting-started-ng5/e2e/app.po.ts (208 bytes)
  create getting-started-ng5/e2e/tsconfig.e2e.json (235 bytes)
  create getting-started-ng5/karma.conf.js (923 bytes)
  create getting-started-ng5/package.json (1324 bytes)
  create getting-started-ng5/protractor.conf.js (722 bytes)
  create getting-started-ng5/tsconfig.json (363 bytes)
  create getting-started-ng5/tslint.json (3040 bytes)
  create getting-started-ng5/src/app/app.module.ts (316 bytes)
  create getting-started-ng5/src/app/app.component.css (0 bytes)
  create getting-started-ng5/src/app/app.component.html (1141 bytes)
  create getting-started-ng5/src/app/app.component.spec.ts (986 bytes)
  create getting-started-ng5/src/app/app.component.ts (207 bytes)
Installing packages for tooling via yarn.
yarn install v1.3.2
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "@angular/cli > @schematics/angular@0.1.10" has incorrect peer dependency "@angular-devkit/schematics@0.0.40".
warning "@angular/cli > @angular-devkit/schematics > @schematics/schematics@0.0.10" has incorrect peer dependency "@angular-devkit/schematics@0.0.40".
[4/4] 📃  Building fresh packages...
success Saved lockfile.
✨  Done in 44.12s.
Installed packages for tooling via yarn.
Successfully initialized git.
Project 'getting-started-ng5' successfully created.

When it’s done, you can ask for your fresh application to start by running ng serve out of its directory:

ng serve
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2017-12-13T17:48:30.322Z
Hash: d147075480d038711dea
Time: 7425ms
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 20.8 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 554 kB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 34.1 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 7.14 MB [initial] [rendered]
webpack: Compiled successfully.


When you navigate your browser to that link, It will be displayed as pictured here:

Let’s get started with Angular 5 Tutorial


Now let’s see what is actually happening here. Angular CLI runs webpack dev server, which renders your app on the next free port because of this you can run multiple apps on the same machine with live reload. It also watches for every change in the project source and recompiles all changes. After that, it asks the browser to reload the open page. So we are already working in a development environment without writing a line of configuration by using Angular CLI. But it’s just a start here…

App composition in angular


You have your empty app running. Now let’s talk about app composition in Angular. If you have basic knowledge of AngularJS you know there were controllers, directives, and components that were somehow like directives but simpler, to allow you to upgrade to Angular 2.

Those who don’t have that wonderful experience of having to choose between them and also figure out what goes where. But you do not need to worry. Nowadays it’s mostly just a component. In the Angular world component is the most basic building block.

Let’s look at the code that was generated for you by Angular CLI.

First, here’s index.html :

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>GettingStartedNg5</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>



It looks like the kind of markup. But there’s a special tag, app-root. How does Angular make this work, and how can we know what’s happening inside it?

Let’s open the src/app directory and see what’s there. You can see ng new output from earlier here or open it in your chosen IDE. You will see app.component.ts there were the next bit( this may vary depending on how recent your version of Angular is):


import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
} 

@components(—) here looks like a function call. What is it? there is a TypeScript decorator we will discuss it later. For now let’s concentrate on what it’s doing, with passed parameters like selector being used to generate your component declaration. It just goes a lot of boilerplate work for you as well as giving back your component declaration in its working form. You don’t have to implement additional code to support any of the decorator’s params. It’s all handled by the decorator. Generally, it is called the Factory method.

You already saw app-root in your index.html. Here’s how Angular knows how to find the component corresponding to your tag. Obviously, templateUrl and styleUrls define where Angular should take your markup and CSS from. there are a lot more params for the component decorator. We are also going to use some of them in our new app.

Let’s look at the component’s markup:

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>


So, aside from embedding the Angular Logo as an SVG, which is pretty neat, this seems like typical everyday markup as well. Aside from one thing ( Welcome to {{ title }} !), If you look at your component code again, you will see title=’app’;. So, if you already have some practice in template languages or have worked with AngularJS, it’s pretty obvious what’s happening here. It is called Angular Interpolation by which the expression inside the double curly braces is being pulled from your component( you can think of {{ title }} as a simplified form of {{ this.title }} ) and also displayed on your markup.

Now you have seen all the parts of your auto-generated Angular app that actually take place in the page displayed in your browser. Let’s recap how it actually works- Angular CLI runs Webpack, which is compiling your Angular app into Javascripts bundles and injecting them into your index.html. If you take a look at the actual code in your browser using the inspect feature, you see something like this:


Every time you change your code, Angular CLI will recompile, re-inject if needed, and also ask your browser to reload the page if it’s open. Angular does it quite quickly, so in most cases, while you are switching your windows from the IDE to the browser, it will all be reloaded for you.

So let’s start moving towards your goal and, for a start, let’s switch your project from CSS to Sass and open your .angular-cli.json and edit styles and styleExt properties thusly.

"styles": [
  "styles.scss"
],
[...]
"defaults": {
  "styleExt": "scss",
  "component": {}
}


You also need to add Sass library to our project and rename styles.css to styles.scss. So to add Sass you need to use yarn :

yarn add sass 
yarn add v1.3.2
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[...]
[4/4] 📃  Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
└─ sass@1.0.0-beta.4
✨  Done in 12.06s.
yarn add node-sass@4.7.2 --dev
✨  Done in 5.78s.


If you also want to use Twitter Bootstrap on your project so you also need to runyarn add bootstrap@v4.0.0-beta.2 and edit your styles.scss to include this:

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/scss/bootstrap";
body {
  padding-top: 5rem;
}


you need to edit index.html to make your page responsive by changing the meta for your markup to this:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">


And now you can replace app.componant.html with this:

<!-- Fixed navbar -->
<nav>
  <a href="#">Angular Notes</a>
</nav>
<div>
  <div style="text-align:center">
    <h1>
      Welcome to {{title}}!
    </h1>
  </div>
</div>


now, if you open your browser, you see the following:


And that’s it for the boilerplate. Let’s move on to creating your own components.

First Components


Let’s start by generating your first component, representing the card itself. For that, use Angular CLI by running the following command:

ng generate component Card
  create src/app/card/card.component.scss (0 bytes)
  create src/app/card/card.component.html (23 bytes)
  create src/app/card/card.component.spec.ts (614 bytes)
  create src/app/card/card.component.ts (262 bytes)
  update src/app/app.module.ts (390 bytes)


But if you look into src/app/card/card.component.ts , you can see they are almost the same code, as you have in your AppComponent, with one small difference:

[...]
@Component({
  selector: 'app-card',
[...]
export class CardComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}



At this point, that it’s considered good practice to preface your component selectors with a common prefix, and by default, it’s app- You can change it to the prefix of your preference by editing the prefix property in .angular-cli.json ,so it’s preferable to do so before using ng generate for the first time.

So, you have a constructor for your component as well as a ngOnInit function for it. On a basic level, think about these methods like this: A constructor is being called right after the creation of the component, long before data to be passed to it is ready and populated, while ngOnInit only runs after the first cycle of changes to the data, so you have access to your component inputs. Just remember that it is preferable to use the constructor for constants, like things that are actually being hard-coded into your component, as well as ngOnInit for everything that depends on external data.

Let’s populate your CardComponent implementation. To start with, let’s just add some markup to it. Default contents for markup are something like this:


<p>
  card works!
</p>


Replace it with code so it will behave like a card:

<div>
  <div>
    <p>Text</p>
  </div>
</div>


Now is a good time to display the card component, but this raises additional questions: Who will be responsible for displaying the cards? AppComponent? But AppComponent will be loaded before anything else in the app, so you have to consider it to be tidy and small. you’d better create one more component to take care of storing a list of cards and displaying it on your page.

As described component’s responsibilities, it is clear that this is supposed to be a Card List Component. Let’s ask Angular CLI to generate it for you:

ng generate component CardList
  create src/app/card-list/card-list.component.scss (0 bytes)
  create src/app/card-list/card-list.component.html (28 bytes)
  create src/app/card-list/card-list.component.spec.ts (643 bytes)
  create src/app/card-list/card-list.component.ts (281 bytes)
  update src/app/app.module.ts (483 bytes)

Before we start implementing it, Angular CLI tells you that it updated app.module.ts for you, correct it:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { CardComponent } from './card/card.component';
import { CardListComponent } from './card-list/card-list.component';
@NgModule({
  declarations: [
    AppComponent,
    CardComponent,
    CardListComponent,
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }


Obviously, BrowserModule and NgModule are internal Angular modules. AppComponent was here before you started to generate any code, so your new components actually populated the modules in two places. First, they are imported from their definition files and then they are included in the declaration array of your NgModule Decorator. If you are creating a new component from scratch and forget to add a new module to NgModule but try to add it to your markup, your app won’t work with the next error in the JS console.

Uncaught Error: Template parse errors:
'app-card-list' is not a known element:
1. If 'app-card-list' is an Angular component, then verify that it is part of this module.
2. If 'app-card-list' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("


So check your console if your app is not working for no apparent reason.

Let’s populate your card list component markup ( src/app/card-list/card-list.component.html )

<div>
  <div>
    <app-card></app-card>
    <app-card></app-card>
    <app-card></app-card>
  </div>
</div>


If you open it in your browser, you will see something like this :


Currently displaying cards out of the hard-coded markup. Let’s bring your code one step closer to a real case scenario by moving a hard-coded array of cards into your application:

export class AppComponent {
  public cards: Array<any> = [
    {text: 'Card 1'},
    {text: 'Card 2'},
    {text: 'Card 3'},
    {text: 'Card 4'},
    {text: 'Card 5'},
    {text: 'Card 6'},
    {text: 'Card 7'},
    {text: 'Card 8'},
    {text: 'Card 9'},
    {text: 'Card 10'},
  ];
}


You have your initial list, but still, you need to pass it to the component and render it there. for that, you need to create your first input. Let’s add it to your CardList component:

import {Component, Input, OnInit} from '@angular/core';
[...]
export class CardListComponent implements OnInit {
  @Input() cards: Array<any>;
[...]



Imported Input from the Angular code and used it as a decorator for class-level variables cards with type Array of objects of any kind. Ideally, you should not use any but should use strict typing so that you can define something like an interface card, which will contain all the properties of your card.

Now you have your card array in your CardList. Let’s take a look at the new code in your card list component.


<app-card *ngFor="let card of cards"></app-card>



An attribute name that starts from an asterisk. What does it mean? It’s a default convention for naming Angular structural directives. Structure directives control the structure of your template. The asterisks here is actually “syntax sugar,“. But for your current example, its enough to understand what will happen when you add it to your component. So ngFor a repeater directive and it will repeat your app card for every element in the array of cards. If you look at the browser, you see this next:



Something is not right; you have your array of cards, but you are getting an empty page.

You define your array of cards on the AppComponent level, But you haven’t passed it to CardList input. Let’s edit your AppComponent template to do that.


<app-card-list [cards]="cards"></app-card-list>



This syntax – The attributes in the square brackets – tells angular that you would like to one-way bind your component variable cards to your Card List component [cards] input. As soon as you do that, you get this:


Of course, you want to display the actual contents of your card array, and for that, you need to pass the card object to the card component as well. Let’s extend your Card List component:

<app-card *ngFor="let card of cards" [card]="card"></app-card>



And if you look in the browser right now, you’ll get the next error in the JS console: Can’t bind to ‘card’ since it isn’t a known property of ‘app-card’ .. Angular is telling us that you still need to define your input in the Card component. So you can edit thusly:


import {Component, Input, OnInit} from '@angular/core';
[...]
export class CardComponent implements OnInit {
  @Input() card:any;
[...]


And let’s add your card text property to the Card component template:

[...]
<p>{{ card.text }}</p>
[...]


Let’s see how it works now:


Looks fine, but the styling is a little off. Let’s fix that by adding a new style to card.component.css :

.card {
    margin-top: 1.5rem;
}

And now it looks better:

Component Communication


Let’s add a New Card Input component that will allow you to do add notes:

ng g component NewCardInput
  create src/app/new-card-input/new-card-input.component.scss (0 bytes)
  create src/app/new-card-input/new-card-input.component.html (33 bytes)
  create src/app/new-card-input/new-card-input.component.spec.ts (672 bytes)
  create src/app/new-card-input/new-card-input.component.ts (300 bytes)
  update src/app/app.module.ts (593 bytes)


And add this next to its template:

<div>
  <div>
    <input placeholder="Take a note...">
  </div>
</div>


Next, add this to the component decorator:

[...]
@Component({
  selector: 'app-new-card-input',
[...]
  host: {'class': 'col-4'}
})
[...]


And add your new component to the AppComponent template:

[...]
<div>
  <div>
    <app-new-card-input></app-new-card-input>
  </div>
</div>
<app-card-list [cards]="cards"></app-card-list>


Let’s take a look at the browser.


The problem is that your new component is not doing anything. Let’s make it work – by adding a variable that will hold your new card:

[...]
export class NewCardInputComponent implements OnInit {
[...]
public newCard: any = {text: ''};
[...]


How do you populate it with your input? If you have worked with AngularJS before, you may know the concept of two-way data binding. Or, you might have seen it in all those fancy AngularJS demos, where you input value to input and it updates the page content for you.

Here’s an interesting tidbit: Two-way data binding is no longer with you in Angular. But that doesn’t mean you have lost access to the behavior. You already saw and used [value]=”expression”, which binds the expression to the input element’s value property. But you also have (input)=”expression”, a declarative way of binding an expression to the input elements input event. Together they can be used thusly:

<input [value]="newCard.text" (input)="newCard.text = $event.target.value">

So, every time your newCard.text value changes, it’ll be passed to your component input. And every time the user inputs data into your input and the browser outputs input $event, you assign your newCard.text to the input value.


One more thing before you implement it: This input looks like a little much, doesn’t it? Actually, Angular gives us a little syntax sugar for it, which you can use here, so started from a different angle to explain how this sugar works.

<input placeholder="Take a note..." [(ngModel)]="newCard.text">

This syntax,( [ ] ), called banana in a box or ngModel, is the Angular directive that takes care of getting value out of events and all that. So you can just write a simpler code that takes your value and binds it to both the value of the input and your variable in code.

Unfortunately, after you added ngModel, you are getting the error, Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’. You need to import ngModel to your AppModule. But from where? If check the documentation, you can see that it’s in the Angular Forms module. So you need to AppModule thusly:


[...]
import {FormsModule} from "@angular/forms";
@NgModule({
[...]
  imports: [
    BrowserModule,
    FormsModule
  ],
[...]

Working with native events

So you have your variable populated, but you still, need to send that value to the card list in AppComponent. For communicating data to the component Angular, you must have input. It seems that to communicate data outside the component, you have output, and you use it, in the same way, you would use input— import it from the Angular code and use a decorator to define it:

import {Component, EventEmitter, OnInit, Output} from '@angular/core';
[...]
export class NewCardInputComponent implements OnInit {
[...]
@Output() onCardAdd = new EventEmitter<string>();
[...]
}



But there is more than just output; you also define something called EventEmitter because the component output is supposed to be an event, but you shouldn’t think about it the same way you did those old JavaScript events. They aren’t bubbles. You don’t need to call preventDefault in every event listener. To send data from the component, you should use its payload. So you need to subscribe to the events—how do you do that? Let’s change the AppComponent template:


<app-new-card-input (onCardAdd)="addCard($event)"></app-new-card-input>


You are also binding an expression to the event onCardAdd, just as you mentioned in our NewCardInput component. Now you need to implement the addCard method on your AppComponent.

[...]
export class AppComponent {
[...]
addCard(cardText: string) {
  this.cards.push({text: cardText});
}



But you’re still not outputting it from anywhere. Let’s try to make it happen when the user hits the enter key. You need to listen for the DOM keypress event in your component as well as output the Angular event triggered by that. For listening to DOM events, Angular gives you the HostListener decorator. It’s a function decorator that takes the name of a native event you want to listen for as well as the function Angular wants to call in response to it. Let’s implement it and discuss how it works:


import {Component, EventEmitter, OnInit, Output, HostListener} from '@angular/core';
[...]
export class NewCardInputComponent implements OnInit {
[...]
@HostListener('document:keypress', ['$event'])
handleKeyboardEvent(event: KeyboardEvent) {
  if (event.code === "Enter" && this.newCard.text.length > 0) {
    this.addCard(this.newCard.text);
   }
}
[...]
addCard(text) {
  this.onCardAdd.emit(text);
  this.newCard.text = '';
}
[...]

So, if the document:keypress event happens, you check that the key pressed was Enter and your newCard.text has something in it. After that, you can call your addCard method, in which you output Angular onCardAdd with text from your card and reset the card text to an empty string so the user can continue to add new cards without editing the old card’s text.

Working with Forms

There are a couple of approaches to working with forms in Angular—one is template-driven and you are already using the most valuable part of it: ngModel for two-way binding. But forms in Angular are not only about model values but also about validity. Currently, you check for the validity of NewCardInput in your HostListener function. Let’s move it to a more template-driven form. For that, you can change the template for your component:

<form novalidate #form="ngForm">
  <input placeholder="Take a note..." name="text" [(ngModel)]="newCard.text" required>
</form>

Here’s another syntax sugar from Angular. The hash #form is a template reference variable that you can use to access your form out of your code. Let’s use it to make sure you actually use the required attribute validation instead of the manual check on value length:

import {Component, EventEmitter, OnInit, Output, HostListener, ViewChild} from '@angular/core';
import {NgForm} from '@angular/forms';
[...]
export class NewCardInputComponent implements OnInit {
[...]
@ViewChild('form') public form: NgForm;
[...]
  @HostListener('document:keypress', ['$event'])
  handleKeyboardEvent(event: KeyboardEvent) {
    if (event.code === "Enter" && this.form.valid) {
[...]

One more new decorator is here: ViewChild. Using that, you can access any element marked by template reference value—in this case, your form, as well as you actually, declare it as your Component public variable form, so you can write this.form.valid.

Working with template-driven forms is absolutely the same as you did before with simple HTML forms. But if you need something more complex, there is a different kind of form for that case in Angular: reactive. You’ll cover what they react on after converting your form. For that, let’s add a new import to AppModule.

[...]
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
[...]
imports: [
[...]
ReactiveFormsModule,
]
[...]

Reactive forms are defined in code instead of template-driven forms, so let’s change the NewCardInput component code:

[...]
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
[...]
export class NewCardInputComponent implements OnInit {
[...]
newCardForm: FormGroup;
constructor(fb: FormBuilder) {
  this.newCardForm = fb.group({
    'text': ['', Validators.compose([Validators.required, Validators.minLength(2)])],
  });
}
[...]
if (event.code === "Enter" && this.form.valid) {
   this.addCard(this.newCardForm.controls['text'].value);
[...]
addCard(text) {
  this.onCardAdd.emit(text);
  this.newCardForm.controls['text'].setValue('');
}


In addition to importing new modules, some new things are happening here. First of all, you are using dependency injection for FormBuilder on your constructor and also building your form with it. The text there is a name of your field, an empty string is the initial value, and Validators.compose obviously allows you to combine multiple validators on a single field. You use
.value  and .setValue(”)  to access value for your field.

Let’s look at your markup for this new way of working with forms:

<form [formGroup]="newCardForm" novalidate>
  <input placeholder="Take a note..." name="text" formControlName="text">
</form>


You are using FormGroupDirective to tell Angular what form group Angular needs to look in for its definition. By using formControlName, you are telling Angular what field in the reactive form you should use.

For now, the main difference between the previous approach with template-driven forms and the new approach with reactive forms is in more coding on the reactive side. Is it really worth it, if you don’t need to define the form dynamically?

It absolutely is. To understand how it may be helpful, let’s discuss why this approach is called “reactive” in the first place.

Let’s start by adding additional code to your NewCardInput component constructor:

import { takeWhile, debounceTime, filter } from 'rxjs/operators';
[...]
this.newCardForm.valueChanges.pipe(
    filter((value) => this.newCardForm.valid),
  debounceTime(500),
  takeWhile(() => this.alive)
).subscribe(data => {
   console.log(data);
});


Open the browser and developer tools console, and watch what will happen when you input new value into your input

RxJS


So what’s actually happening here? You are seeing RxJS in action. Let’s discuss it. I guess you all know at least something about promises as well as building asynchronous code. Promise handling a single event. You ask the browser to make POST, for example, and it returns you a promise. RxJS operates with Observables, which handle streams of events.

Think about that like this: You have just implemented code that is called on every change of your form. If you process user changes with promises, only the first user change will be processed before you need to resubscribe. The Observable, at the same time, is able to process every event in a virtually endless stream of “promises.” You can break that by getting some error along the way or by unsubscribing from the Observable.

What is takeWhile here? You are subscribing to your Observables in your components. They are used in different parts of your app, so they may be destroyed along the way—for example, when you use components as pages in your routing. But while the promise in place of the Observable will run only a single time and will be disposed after that, the Observable is built to last as long as the stream is updating and you don’t unsubscribe. So your subscription needs to be unsubscribed (if you are not looking for memory leaks) like this:

const subscription = observable.subscribe(value => console.log(value));
[...]
subscription.unsubscribe();

But in your app, you have a lot of different subscriptions. Do you need to do all that boilerplate code? Actually, you can cheat and use the takeWhile operator. By using it you make sure that your stream will stop emitting new values as soon as this.alive becomes false and you just need to set that value in the onDestroy function of your component.

Summary

So this was your first Angular 5 App. In this article, you get to know about Angular 5, Typescript and Angular CLI as well as how to build your app in Angular 5. With the help of this, you can learn App composition in angular, component communication and work with native events as well as Angular forms.

It will be continued with Connecting Angular with Firebase in the next article.

If you want to develop an app with angular or any other technology and it seems difficult, there is no issue Codersera is here to help you by providing the top coder for your project:- Click here to Hire A Coder

And if you belong to the ones who are passionate about coding, Codersera can give you the opportunity to work on interesting and challenging projects. All you need to do is:- Click here to Apply As Coder

Categories
Angular Frontend Developers Javascript React Developers React Native Developers React Native Web ReactJS Remote developer Top Coder

ReactJS v/s AngularJS

It is really important to choose the right platform where you should develop your web applications. ReactJS or AngularJS which framework is more important to build the application. Before talking about the contrasts that both have here is the brief introduction given below to simplify the concept of ReactJS and AngularJS. They both are well-known program developing languages that help coders or developers to build an application or websites.

ReactJS vs AngularJS

reactjs vs angularjs


Although, there are a lot of frameworks that help you in building the website. And each framework has its own strengths and qualities which could be used for a particular web application. AngularJS and ReactJS are the most popular frameworks for building a web application. And the difference between these two topics is really interesting. And they also make it hard for the web app developers and entrepreneurs to choose one for their project. There are many JavaScript frameworks available that developers or programmers can choose from, to build an amazing and innovative web application.

AngularJS

angularjs

AngularJS is a JavaScript Web application framework originally created by Google, and it is actively supported by Google and a wide community of developers. These two factors makes Angular a great platform for web applications.

AngularJS is comprehensive, which directly means that it is so familiar with MVC or knockout or cappuccino, even the developers have no trouble learning Angular testing API. As well as, it is a complete solution for rapid front-end development, so the developer doesn’t need a plug-in to build or create any data-driven web application.

◾ The interesting facts behind AngularJS:

  • The innovative idea behind the Angular is to combine all the well-known components, designs, patterns, and development practices into a single framework which is known as ‘single page application’ (SPA).
  • As well as to achieve this, AngularJS support standardized components such as the models, views, controllers, and services. And this Lead to angular making use of two important software design patterns:

    1. Model View Controller (MVC) and
    2. Dependency Injection.
  • The AngularJS is best because developing web applications with AngularJS is fast. And developers can easily use the AngularJS framework.
  • There are so many developers who use Angular to build their web applications. Besides that, Angular makes use of many ideas including, balancing modularity and complexity, being a few.
  • Angular is also updated with the latest versions too, where Angular8 being the current version, which is very powerful. It just the same, how we update our mobile applications with better and advanced features.

ReactJS

reactjs

ReactJS is one of the most popular frameworks for developing web applications, which attracted a large and active community. React consist of reusable components that will save the time of developers, while coding, helping the developers in writing modular codes. As we all know that Facebook created React, and chooses a design different from AngularJS but implements MVC in a different way than AngularJS.

ReactJS is cooler than Angular because there is no particular structure for applications built with ReactJS. React is used from website development to mobile application development using React-Native, based entirely on React. Making it an allrounder in the development field.

◾ The impressive facts behind ReactJS:

  • With React JS, developers can build the application around discrete components, with each handling its own rendering as well as their state.
  • React is fast and easy to develop UI/UX because it minimizes the number of writes to DOM(the slowest part of any client-side application) on each update, switching Browser DOM with Virtual DOM.
  • In order to implement less data flow to React, Facebook designed its own application architecture called flux. But other libraries like Redux, etc. are also quite popular.
  • Flux controls the flow of data to react component through one control point which is the dispatcher. So, flux dispatcher receives an object which is called action and allows it to an appropriate store, which then updates the global state.
  • Secondly, there are three ways of using ReactJS, which developers use to design different platform application i.e.

    – First, React
    – Second, React Native and
    – Third, React Native Web
  • Although it is recommended to write the react code using JSX – (an extension to JavaScript which directly donates components as HTML elements), but other alternative approaches are also available.

Difference between ReactJS and AngularJS.

It is quite difficult to relate the most compatible programming frameworks to each other. There are many aspects where both are equally good. Sometimes it is impossible for the developers to choose which one is better, so they try to learn both the framework. Although there are some major and impactful differences between ReactJS and AngularJS, which will help you to choose the right one according to your needs.

The different Scalability:

scalability
  • The first difference between AngularJS and ReactJS is AngularJS as a framework is easier to scale. It has its own limits and checks on how things are done which is the plus point of the AngularJS.
  • With its clearly-defined boundaries, it is easier to understand the right way of doing things in AngularJS, as it closely implements MVC. Also following the best practices in Angular is easier, compared to the React. 
  • As well as, in React, there are a lot of ways to do the same thing that makes it confusing and hard to follow best practices. There are a lot of parts that you need to figure out yourself when using React, parts which are easily clear in Angular.

Let’s talk about their Compatibility:

compatibility
  • Compatibility is the second major difference between them. With AngularJS if developers or coders have an existing code with a lot of 3rd party libraries. You as a developer may have to rebuild each and everything, whereas React is really very flexible. React can be used wherever you need it.
  • Also, it is essential to note that the AngularJS takes JavaScript into HTML projects with the help of a real DOM client-side version. On the other hand, the React JS framework does the same by including the use of a virtual DOM client-side version.
  • Another thing that should be noted is that the data binding in the Angular JS is two-way, while the type of data binding in React is one-way binding.

Know the Community Support

support
  • The third difference of this is, React is easier to use than AngularJS as we are saying from the beginning.
  • And is just because React makes it easier or the developers to pass data chunks to different parts of the application. But these things are not possible in Angular.
  • React is one of the most popular frameworks on the web to design, to create, to develop the applications. Whereas Angular is trying to catch up. But it is simpler to find the reusable code for the React than for Angular.

Think Beyond the Web:

  • The fourth difference is React has React Native and Angular has Ionic for structure Native apps for mobile devices. There always debate which is better than the other, but they are relatively equal.
  • React Native is still considered faster and more constant. If needed an all-in-one solution, go with Angular, but if you want to incrementally improve your application existing codebase, developers sometimes go with React.

The simplicity of Code:

  • The fifth most important difference is AngularJS drives with the template approach with HTML, which creates the code shorter and easier to recognize in the program.
  • React, on the other hand, has the “HTML written in JavaScript”, which can be complicated sometimes. Both AngularJS and ReactJS are great with their component structure and the problem they are trying to solve.
  • The choice between both can be based on your existing code, which is in need according to the developer’s preference.

Know the Development Time:

  • The sixth difference is the development time in AngularJS is relatively fast, mostly because of the way it is organized. There is less confusion about the best approach to do assure things, whereas in React this can be boring sometimes.
  • Setting up a new project is quicker in Angular with its boilerplate and CLI. Whereas, In ReactJS you can find many resources and projects that can help you do it faster. But still, require a lot of experiments. If you are planning to set up everything from scratch in either of the technologies.
  • The size of the React core file is smaller than Angular and Angular contains a lot of code out of the box that you might not even use. React is a library, so optimizing the code is more flexible than Angular.

Fixing the Code:

  • Last difference but not least, Debugging the code in React is much more effective. Because it catches errors with line numbers while compilation and Angular only break while it runs on the browser, which can be difficult to debug.
  • Angular has two-way data binding, which can be helpful as you can send data from children to its parents and vice versa. But it can give a lot of headaches while fixing.
  • In React, the data flows just one way, making it easier to catch the break with ease with the loss of two-way data flow at the same time.

SUMMARY

The ReactJS and the AngularJS both are strong and comparative excellent in their own framework and library. There is no doubt between their compatibility that the developers of both programming language have demand in the market.

Future of AngularJS and ReactJS is– now Angular 8 is the latest version for Angular. This is a huge step up from AngularJS. Most of the changes are behind the scenes. The update from AngularJS to Angular 8 did not change how the coder code. Now Google introducing Angular8 in the market which is the advanced version of Angular. These show how the Angular improve itself from time to time.

And Facebook is working on React Fiber, which is an update to its core system. This will increase the performance of React, add more support for animation, layout, and gestures by adding a lot of new functionalities for developers.

There are many companies where demand for ReactJS and AngularJS is still on high. As they both are really good in their working space. Also, you can read the interview questions on Angular, which is helpful to crack the major interviews of Angular. Also, the new technology named React-Native-Web.
Here you can read all the top questions on React-Native-Web interview questions, the developers are also in demand in the companies.

Hire a coder
or
Apply as a coder

Categories
Angular Development Javascript React Developers React Native Developers React Native Web ReactJS

Best Programming Languages for 2019.

To get an awesome and expensive project for your company, here are some best programming languages which you have to know to build an application.

It’s really important to know your projects as well as the programming languages that help you to build the application. The programming language is the language which helps to create the application and developers first learn all the programming language which they apply in the programs.

Technically, a programming language is a formal language or you say it is a set of instructions which help to help to build the application or program which gives various outputs.

Every different project has a different use of programming language, meanwhile, it’s all up to the developer that which kind of programming language he/she uses for his/her project as well as it is not also compulsory to use one language to all the project.

Before you know the programming languages the first thing comes in your mind is the projects, there are different types of project that are list below:

  1. Mobile apps
  2. Machine language, AI and big data analytics
  3. Back-end software development
  4. websites

Here we explain all the best programming languages according to the above projects, which is easy to understand for you and help you to create the program for the same.

Mobile Apps


It is quite difficult for everyone nowadays to stay away from their mobile phones as well as mobile phones are part of our life. Meanwhile, the use of movie phones are now is so much that everyone had using it. As well as it influences the consumers and the companies as well.

The applications that you use are built by the developers using different programming languages like JAVA, React Native as well as JavaScript. One more language that the developer uses is Swift.

Machine language, AI and big data analytics


We are in the era of big data revolution where machine learning, data analytics as well as artificial intelligence use every day. there come languages used by the developers to participate in this new revolution.
The programming languages are:
1. Java
2. Python
3. Scala

For the machine language, AI, as well as data analytics above programming languages, are best for this.

Back-end software development:

For the gaming purpose or websites, there is always a back end of supporting infrastructure. For back-end programming, for the software, the language such as Java, Ruby, Python, C#, as well as PHP are the best programming language.

Ruby is for prototyping and MVP( minimum viable data) whereas Python is the favorite to all. Moreover, PHP represents the back-end of more than approx. 80% of the website.

Websites:

Web development is divided into two parts first the front-end and the second one is back-end. The front end is everything you use and interacts with and back-end is data management. Meanwhile,
JavaScript is the most easier platform to build a website as well as one more programming language which is React-Native-Web, but this language is not used by everyone as people know less about it and this language is also easy to run.

JavaScript has three main frameworks:
1. React
2. Vue.js
3. Angular

There are some more best as well as useful programming languages that are given below:

Programming languages:

Here all the best programming languages are written in this article which is useful as well as help you to build your applications and websites.

Categories
Angular Development

AngularJS Interview Questions asked In 2019

AngularJS, the ‘Swiss army knife’ of the developer community, has been seeing exponential growth in popularity and career opportunities in the recent years. No surprises there, as the development framework is known for its ability to create single-page web applications that encompass three critical components – speed, agility and a strong community backing it up. AngularJS continues to dominate the arena of Javascript framework and has proved itself to be a worthy investment for web developers who seek to fast-track their career. To help you get started, we have compiled a list of the most frequently asked AngularJS interview questions that will help you ace the AngularJS interviews that come your way.

AngularJS Interview Questions:

1. What is the difference between Angular and jQuery?

FeaturesjQueryAngular
DOM ManipulationYesYes
RESTful APINoYes
Animation SupportYesYes
Deep Linking RoutingNoYes
Form ValidationNoYes
2 Way Data BindingNoYes
AJAX/JSONPYesYes

2. Name the key features of AngularJS?

The key features of AngularJS are:

  • Scope
  • Controller
  • Model
  • View
  • Services
  • Data Binding
  • Directives
  • Filters
  • Testable

3. Explain data binding in AngularJS.

According to AngularJS.org, “Data-binding in Angular apps is the automatic synchronization of data between the model and view components. The way that Angular implements data-binding lets you treat the model as the single-source-of-truth in your application. The view is a projection of the model at all times. When the model changes, the view reflects the change and vice versa.”

There are two ways of data binding:

  1. Data mining in classical template systems
  2. Data binding in angular templates

4. What are directives in AngularJS?

A core feature of AngularJS, directives are attributes that allow you to invent new HTML syntax, specific to your application. They are essentially functions that execute when the Angular compiler finds them in the DOM.  Some of the most commonly used directives are ng-app,ng-controller and ng-repeat.

The different types of directives are:

  • Element directives
  • Attribute directives
  • CSS class directives
  • Comment directives

5. What are Controllers in AngularJS?

Controllers are Javascript functions which provide data and logic to HTML UI. As the name suggests, they control how data flows from the server to HTML UI.

6. What is Angular Expression? How do you differentiate between Angular expressions and JavaScript expressions?

Angular expressions are code snippets that are usually placed in binding such as {{ expression }} similar to JavaScript.

The main differences between Angular expressions and JavaScript expressions are:

  • Context: The expressions are evaluated against a scope object in Angular, while Javascript expressions are evaluated against the global window
  • Forgiving: In Angular expression, the evaluation is forgiving to null and undefined whereas in JavaScript undefined properties generate TypeError or ReferenceError
  • No Control Flow Statements: We cannot use loops, conditionals or exceptions in an Angular expression
  • Filters: In Angular, unlike JavaScript, we can use filters to format data before displaying it

7. What is the difference between link and compile in Angular.js?

  • Compile function is used for template DOM Manipulation and to collect all the directives.
  • Link function is used for registering DOM listeners as well as instance DOM manipulation and is executed once the template has been cloned.

8. What are the characteristics of ‘Scope’?

Scope is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can watch expressions and propagate events. The characteristics of Scope are:

  • Scopes provide APIs ($watch) to observe model mutations.
  • Scopes provide APIs ($apply) to propagate any model changes through the system into the view from outside of the “Angular realm” (controllers, services, Angular event handlers).
  • Scopes can be nested to limit access to the properties of application components while providing access to shared model properties. Nested scopes are either “child scopes” or “isolate scopes”. A “child scope” (prototypically) inherits properties from its parent scope. An “isolate scope” does not. See isolated scopes for more information.
  • Scopes provide context against which expressions are evaluated. For example {{username}} expression is meaningless, unless it is evaluated against a specific scope which defines the username property.

9. What are the advantages of using Angular.js framework?

Angular.js framework has the following advantages:

  • Supports two way data-binding
  • Supports MVC pattern
  • Support static template and angular template
  • Can add custom directive
  • Supports REST full services
  • Supports form validations
  • Support both client and server communication
  • Support dependency injection
  • Applying Animations
  • Event Handlers

10. What is the difference between AngularJS and backbone.js?

AngularJS combines the functionalities of most third party libraries and supports individual functionalities required to develop HTML5 Apps.  While Backbone.js does these jobs individually.

11. Explain what is injector in AngularJS?

An injector is a service locator, used to retrieve object instance as defined by provider, instantiate types, invoke methods, and load modules.

12. What is factory method in AngularJS?

Factory method is used for creating a directive.  It is invoked when the compiler matches the directive for the first time. We can invoke the factory method using $injector.invoke.

Syntax: module.factory( 'factoryName', function );
Result: When declaring factoryName as an injectable argument you will be provided with the value that is returned by invoking the function reference passed to module.factory.

13. What is ng-app, ng-init and ng-model?

  • ng-app : Initializes application.
  • ng-model : Binds HTML controls to application data.
  • ng-Controller : Attaches a controller class to view.
  • ng-repeat : Bind repeated data HTML elements. Its like a for loop.
  • ng-if : Bind HTML elements with condition.
  • ng-show : Used to show the HTML elements.
  • ng-hide : Used to hide the HTML elements.
  • ng-class : Used to assign CSS class.
  • ng-src : Used to pass the URL image etc.

14. Does Angular use the jQuery library?

Yes, Angular can use jQuery if it’s present in the app when the application is being bootstrapped. If jQuery is not present in the script path, Angular falls back to its own implementation of the subset of jQuery that we call jQLite.

15. Can AngularJS have multiple ng-app directives in a single page?

No. Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. If another ng-app directive has been placed then it will not be processed by AngularJS and we will need to manually bootstrap the second app, instead of using second ng-app directive.

16. Can angular applications (ng-app) be nested within each other?

No. AngularJS applications cannot be nested within each other.

17. What is internationalization and how to implement it in AngularJS?

Internationalization is a way in which you can show locale specific information on a website. AngularJS supports inbuilt internationalization for three types of filters: currency, date and numbers. To implement internalization, we only need to incorporate corresponding js according to locale of the country. By default it handles the locale of the browser.

18. On which types of component can we create a custom directive?

AngularJS provides support to create custom directives for the following:

  • Element directives − Directive activates when a matching element is encountered.
  • Attribute − Directive activates when a matching attribute is encountered.
  • CSS − Directive activates when a matching css style is encountered.
  • Comment − Directive activates when a matching comment is encountered.

19. What is $rootscope in AngularJS?

Every application has a single root scope. All other scopes are descendant scopes of the root scope. Scopes provide separation between the model and the view, via a mechanism for watching the model for changes. They also provide event emission/broadcast and subscription facility.

20. Can we have nested controllers in AngularJS?

Yes, we can create nested controllers in AngularJS. Nested controllers are defined in hierarchical manner while using in View.

21. What is bootstrapping in AngularJS?

Bootstrapping in AngularJS is nothing but initializing, or starting the Angular app. AngularJS supports automatic and manual bootstrapping.

  • Automatic Bootstrapping: this is done by adding ng-app directive to the root of the application, typically on the tag or tag if you want angular to bootstrap your application automatically. When angularJS finds ng-app directive, it loads the module associated with it and then compiles the DOM.
  • Manual Bootstrapping:Manual bootstrapping provides you more control on how and when to initialize your angular App. It is useful where you want to perform any other operation before Angular wakes up and compile the page.

22. What does SPA (Single Page Application) mean? How can we implement SPA with Angular?

Single Page Applications (SPAs) are web apps that load a single HTML page and dynamically update that page as the user interacts with the app. Since SPA the page never reloads, though parts of the page may refresh. This reduces the round trips to the server to a minimum.

It’s a concept where we create a single shell page or master page and load the webpages inside that master page instead of loading pages from the server by doing post backs. We can implement SPA with Angular using Angular routes. You can read up about SPAs here.

23. Why AngularJS?

AngularJS lets us extend HTML vocabulary for our application resulting in an expressive, readable, and quick to develop environment . Some of the advantages are:

  •     MVC implementation is done right.
  •     It extends HTML using directives, expression and data binding techniques to define a powerful HTML template.
  •     Two way data-binding, form validations, routing supports, inbuilt services.
  •     REST friendly.
  •     Dependency injection support.
  •     It helps you to structure and test your JavaScript code.

24. Is AngularJS compatible with all browsers?

Yes AngularJS is compatible with the following browsers: Safari, Chrome, Firefox, Opera 15, IE9 and mobile browsers (Android, Chrome Mobile, iOS Safari).

25. How to implement routing in AngularJS?

It is a five-step process:

  • Step 1: – Add the “Angular-route.js” file to your view.
  • Step 2: – Inject “ngroute” functionality while creating Angular app object.
  • Step 3: – Configure the route provider.
  • Step 4: – Define hyperlinks.
  • Step 5: – Define sections where to load the view.

26. Explain $q service, deferred and promises.

  • ‘Promises’ are post processing logics which are executed after some operation/action is completed whereas ‘deferred’ is used to control how and when those promise logics will execute.
  • We can think about promises as “WHAT” we want to fire after an operation is completed while deferred controls “WHEN” and “HOW” those promises will execute.
  • “$q” is the angular service which provides promises and deferred functionality.

Feeling overwhelmed with all the questions the interviewer might ask in your AngularJS interview? It’s never too late to strengthen your basics. Learn from industry experts on how to use AngularJS in real life use cases via a structured course.