Know About Web Technologies: angular

Showing posts with label angular. Show all posts

Saturday, September 8, 2018

Generally asked MEAN stack question part 2

Questions:

1. Digest cycle https://www.youtube.com/watch?v=SYuc1oSjhgY

2. $watch,$watchCollection and $watchGroup

3. How change detection work in angular js

4. Why we use link from CDN

5. What is blocking and non-blocking in node

6. $ajax callback, Complete and Done.

7. {{}} and ng-Bind

8. $httpclient

9. Closure function in javascript

10. Directive lifecycle in angular

11. How change detection work in angular

12. Component lifecycle hooks

13. Difference b/w onChange and doChange

14. Difference b/w constructor and onInit

15. Which type of work we do in constructor and which type of work we do in onInit

16. What is the use of $resource

17. prototype in javascript

18. Inheritance in javascript

19. scope life cycle

20. $digest loop

21. Difference b/w javascript and node js

Monday, June 13, 2016

Calling RESTful API in Angular Js

Here, we will call the RESTful API from angular js.

Suppose there is a RESTful API which URL is: http://localhost:8080/saveDetails

And I want to save employee information using angular js. We will call the above API using “POST” method.

There is a button in html page. When I will click this button it will save the employee information. Data is being sent in JSON format.

Here, I am using “$resource” service to call RESTful API.

The $resource service is a factory which creates a resource object that lets you interact with RESTful server-side data sources as per the angular js documentation.

Note: It requires the ngResource module of angular js to be installed.

1. Testing.html

<!DOCTYPE html>

<head>

</head>

</body>

</html>

2. testing.js

var demoApp = angular.module("demoApp", ['ngResource']);

demoApp.factory('employee', function ($resource) {

return $resource('/employee/:cmd', {}, {

saveDetails: { method: 'POST', isArray: true, params: { cmd: 'saveDetails' } },

});

demoApp.controller("demoCtrl", ['$scope', 'employee', function ($scope, employee) {

var config = {

"empID": 1001,

"firstName": "Shshi Bhooshan",

};

$scope.saveDetails = function () {

employee.saveDetails(config, function (data) {

// here data will come as JSON array in "data" object

// it will be used to show input source fields

document.write(JSON.stringify(data));

}, function (err) {

console.log('saveDetails error:', err);

});

}

]);

Hope this is helpful example for you. Leave your comment and provide your suggestion if any.

Sunday, April 10, 2016

track by in angular js

What is the use of track by in angular js ?

Angular js uses key to associate the DOM element with the items in the model or collection that you are using in ng-repeat.

You cannot use duplicate key in angular js while using ng-repeat. To avoid this problem, you can use "track by" with ng-repeat.

In track by you have to use angular expression that will be used to uniquely identify the each items in collection or model. "track by" tells the angular js that how angular js will track the association between DOM and the model (i.e. collection). Internally angular js uses "track by $id(obj)" for this purpose. You can use track by $index if you do not have a unique identifier.

If you are using "track by" then it will avoid generating DOM elements every times for element that are already rendered. It improves the rendering performance.

Run the below example:

<!DOCTYPE html>

<head>

<title>Track By</title>

</head>

</div>

</div>

</div>

</body>

</html>

Note:

1. ng-repeat in First and second div will throw following error (you can check in your browser console)

"Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: item in [12,15,15,11] track by $id(obj), Duplicate key: undefined:undefined, Duplicate value: 15"

It is because of duplicate item in array [12,15,15,11].

2. Angular Js internally use $id(obj) for track by.

3. ng-repeat in third div will not throw error and work properly because we have used "track by $index". It will solve the problem of duplicate key.

Hope you have enjoyed. Thanks for reading.

Sunday, February 28, 2016

Angular Js

What is Angular Js?

Angular Js is Javascript Framework. It has been build on the top of javascript. It is used to minimize the code we write for client side coding. It extends HTML attributes.It provides client side MVC framework. It facilitates to create single page application (SPA). It is easy to maintain. It provides the unit test functionality to our web applications. It provide functionality to create dynamic web application.

It has been created by Google. It is an open source Web App Framework for creating web applications.

How can we starts with Angular Js?

Download the angular js library from following locations:

https://angularjs.org/