angularjs coding interview questions - Wikitechy

What is the difference between Angularjs and Polymer ?

Editor — Sun, 11 Jul 2021 13:09:56 +0000

Difference between Angularjs and Polymer

Angularjs	Polymer
Angular is a framework written using javascript and is made for building single-page web applications.	Polymer’s webcomponents.js is a library that contains several polyfills for various W3C APIs that fall under the Web Components umbrella.
Angular’s data binding and dependency injection eliminate much of the code writing.It happens within the browser, making it an ideal partner with any server technology.	Polymer is a library that aims to use (and show how to use) Web Components.Its foundation is Custom Elements (e.g. everything you build is a web component) and it evolves as the web evolves.

What is the difference between Angularjs and Django ?

Editor — Sun, 11 Jul 2021 13:03:33 +0000

Difference between Angularjs and Django

Angularjs	Django
It’s a independent framework	It’s a independent framework
Is a frontend MVC framework build upon ‘JavaScript’.	Is a backend framework for python web language build upon ‘Python’.

What is the difference between Angularjs and reactjs ?

Editor — Sat, 10 Jul 2021 19:54:24 +0000

Difference between Angularjs and reactjs

Angularjs	ReactJS
AngularJS is developed with the primary purpose of addressing single page application development.	ReactJS is based on building reusable components of code base which make an app very lightweight, more of a library that makes it quite easy to work with.
AngularJS works with MVC platform.	ReactJS provides us high performance client and server side rendering with a one-way flow for data binding.
AngularJS follows some guidelines, like Angular data binding.In Angular, the Model and the View are linked to allow automatic data synchronization between the two.	React is more of a library than a framework.It can be described as an application view that allows the programmer to utilize reusable components again and again.
Complete Framework AngularJS is complete framework that can run in any browser or platform.	JSX Syntax JSX is a JS syntax that allows developer to use HTML quotes and usage of HTML tag syntax for subcomponents rendering. It promotes building of machine-readable code and provides ability to compound components in one compile-time verified file.
Two-Way Data Binding This property is probably the top feature of AngularJS, as it diffuses the impact after every minor data change and does way with the need for further effort with data sync in View and Model.	Rendering Rendering is the best features of React that gives a significant edge over Angular. The technology comprises smart methods to mitigate the amount of DOM operations, optimize and accelerate the updates process.

What is Dependency injection in AngularJS ?

Editor — Sat, 10 Jul 2021 19:41:48 +0000

Dependency injection in AngularJS

Dependency Injection is a software design pattern in which an object is given its dependencies, rather than the object creating them itself. Design pattern allows us to remove the hard-coded dependencies and making it possible to change them whenever needed.

Why do you need to inject dependencies ?

Separate the process of creation and consumption of dependencies.
Let the consumer worry only about how to use the dependency, and leave the process of creation of the dependency to somebody else.
Allow concurrent/independent development of the dependency and the dependent entity, while only maintaining a known contract.
Facilitate changing of the dependencies when needed.
Allow injecting mock objects as dependencies for testing, by maintaining the agreed contract.

There are only three ways a component (object or function) can get a hold of its dependencies:

- The component can create the dependency, typically using the new operator.
- The component can look up the dependency, by referring to a global variable.
- The component can have the dependency passed to it where it is needed.

The first two options of creating or looking up dependencies are not optimal because they hard code the dependency to the component. This makes it difficult, if not impossible, to modify the dependencies. This is especially problematic in tests, where it is often desirable to provide mock dependencies for test isolation.
The third option is the most viable, since it removes the responsibility of locating the dependency from the component. The dependency is simply handed to the component.

Example 1

function SomeClass(greeter) 
{
this.greeter = greeter;
}
SomeClass.prototype.doSomething = function(name) 
{
  this.greeter.greet(name);
}

This is desirable, but it puts the responsibility of getting hold of the dependency on the code that constructs Some Class.

To manage the responsibility of dependency creation, each AngularJS application has an injector. The injector is a service locator that is responsible for construction and lookup of dependencies.

Using the injector service:

Syntax :

// Provide the wiring information in a module
var myModule = angular.module('myModule', []);

Explain the injector how to build a greeter service. Notice that greeter is dependent on the $window service. The greeter service is an object that contains a greet method.

Example 2

 
myModule.factory('greeter', function($window) 
{
  return 
  {
    greet: function(text) 
    {
      $window.alert(text);
    }
  };
};

What is SPA in AngularJS ? – AngularJS programing questions and answers

Editor — Sat, 10 Jul 2021 19:31:44 +0000

SPA in AngularJS

Single page application (SPA) is a web application that fits on a single page. All your code (JS, HTML, CSS) is retrieved with a single page load. And navigation between pages performed without refreshing the whole page.

Advantages of SPA :

No page flicker. Native application feel.
Client side routing and data rendering on client side.
Data is from server is in JSON format.

Disadvantages of SPA :

User must enable JavaScript.
Security.

You need to write javascript, handle shared state between pages, manage permissions, etc.

The SPA works on the two Elements:

- Ng-Route
- Ng-view

ngRoute

Since we are making a single page application and we don’t want any page refreshes, we’ll use Angular’s routing capabilities.
The ngRoute module provides routing, deeplinking services and directives for angular apps.
We need to include angular-route script after the main angular script.

Then we need to specify that our module depends on ngRoute module to be able to use it.

Syntax :

var app = angular.module('myApp', ['ngRoute']);

Then we need to specify the place where HTML of each page will be placed in our layout. There is a ng-view directive for that.

ng-view

ng-view is an Angular directive that will include the template of the current route (for example, /blog or /about) in the main layout file.
In plain words, it takes the file we specified for current route and injects it into the layout in the place of ng-view directive.

Example 1

When HTML is ready, we need to configure our routes. We will use $route Provider service from the ngRoute module.

For each route, we need to specify template Url and controller.
If user will try to go to the route that does not exist, we can handle this by using otherwise function. In our case, we will redirect user to the “/” route:

Syntax :

var app = angular.module('myApp', ['ngRoute']);

Example 2 :










Home
Blog
About