AngularJS interview questions
0 likes293 views
The document summarizes two AngularJS interview questions and their potential answers. The first question asks what would be displayed on an index.html page with code that filters a greeting. The answer is it would display "Good Evening, World!" based on the code provided. The second question describes an error encountered with an SVG circle attribute binding and asks how to solve it. Potential solutions provided are using ng-attr-r instead of r, or creating a custom directive.
![© 2013 www.Codelect.net
AngularJS Interview Questions
1. Consider the below AngularJS application, what will be displayed in the index.html page?
//index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Greeting</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="scripts.js"></script>
</head>
<body >
<div ng-app="myApp">
<div>
{{ 'World' | eveningGreeting }}
</div>
</div>
</body>
</html>
//scripts.js
var myAppModule = angular.module('myApp', []);
myAppModule.filter('morningGreeting', function() {
return function(name) {](https://image.slidesharecdn.com/angularjsinterviewquestions-150723113242-lva1-app6892/85/AngularJS-interview-questions-1-320.jpg)
![© 2013 www.Codelect.net
return 'Good Morning, ' + name + '!';
};
});
var i18nModule = angular.module('I18NApp', []);
i18nModule.filter('eveningGreeting', function() {
return function(name) {
return 'Good Evening, ' + name + '!';
};
});
Answers:
1. Good Evening, World!
2. Good Morning, World!
3. An $injector error will occur
4. An empty page
2. While running the below AngularJS code, you have encountered the following error in the console:
Error: Invalid value for <circle> attribute r="{{r}}"
What can be done to solve this error?
//AngularJS Code
<!doctype html>
<html ng-app>
<head>](https://image.slidesharecdn.com/angularjsinterviewquestions-150723113242-lva1-app6892/85/AngularJS-interview-questions-2-320.jpg)
More Related Content
What's hot (20)
Similar to AngularJS interview questions (7)
Recently uploaded (20)
AngularJS interview questions
- 1. © 2013 www.Codelect.net AngularJS Interview Questions 1. Consider the below AngularJS application, what will be displayed in the index.html page? //index.html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Greeting</title> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script> <script src="scripts.js"></script> </head> <body > <div ng-app="myApp"> <div> {{ 'World' | eveningGreeting }} </div> </div> </body> </html> //scripts.js var myAppModule = angular.module('myApp', []); myAppModule.filter('morningGreeting', function() { return function(name) {
- 2. © 2013 www.Codelect.net return 'Good Morning, ' + name + '!'; }; }); var i18nModule = angular.module('I18NApp', []); i18nModule.filter('eveningGreeting', function() { return function(name) { return 'Good Evening, ' + name + '!'; }; }); Answers: 1. Good Evening, World! 2. Good Morning, World! 3. An $injector error will occur 4. An empty page 2. While running the below AngularJS code, you have encountered the following error in the console: Error: Invalid value for <circle> attribute r="{{r}}" What can be done to solve this error? //AngularJS Code <!doctype html> <html ng-app> <head>
- 3. ҧ © 2013 www.Codelect.net <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script> </head> <body> <div> <label>Name:</label> <input type="text" ng-model="r" placeholder="Enter Radius Size"> <hr> <svg width="200" height="200"> <circle cx="150" cy="150" r="{{r}}" stroke-width="4" fill="blue" /> </svg> </div> </body> </html> Answers: 1. Nothing, AngularJS does not support SVG 2. Use the following attribute ng-attr-r (instead of r) 3. Use the following attribute radius (instead of r) 4. Add you own custom directive to create circles Copy protected with Online-PDF-NoCopy.com