0% found this document useful (0 votes)
41 views60 pages

250 Angular JS MCQs

AngularJS is a front-end JavaScript framework developed by Google, primarily used for building Single Page Applications (SPAs) with a focus on MVC architecture and two-way data binding. It allows developers to extend HTML with directives and provides features such as data binding, controllers, and expressions for dynamic content. Key directives include ng-app, ng-model, and ng-bind, which facilitate the connection between the view and the model.

Uploaded by

Adeniyi Victor
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
41 views60 pages

250 Angular JS MCQs

AngularJS is a front-end JavaScript framework developed by Google, primarily used for building Single Page Applications (SPAs) with a focus on MVC architecture and two-way data binding. It allows developers to extend HTML with directives and provides features such as data binding, controllers, and expressions for dynamic content. Key directives include ng-app, ng-model, and ng-bind, which facilitate the connection between the view and the model.

Uploaded by

Adeniyi Victor
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 60

🌼 Level 1: What is AngularJS?

Focus: Framework basics, purpose, setup, architecture, data binding

1. What is AngularJS?

a) A CSS styling library​


b) A server-side scripting language​
c) A front-end JavaScript framework​


d) A database engine​
Answer: c

2. What type of applications is AngularJS primarily used for?

a) Static websites​
b) Single Page Applications (SPAs)​
c) Backend services​


d) Game development​
Answer: b

3. Who developed AngularJS?

a) Microsoft​
b) Facebook​
c) Google​


d) Oracle​
Answer: c

4. AngularJS uses which architectural pattern?

a) MVT​
b) MVC​
c) MVVM​

d) MVP​
Answer: b

5. What is the main benefit of using AngularJS?

a) Server load reduction​


b) Faster page reloads​
c) Two-way data binding​


d) SQL support​
Answer: c

6. Which of the following best describes MVC?

a) Main Visual Code​


b) Model-View-Component​
c) Model-View-Controller​


d) Master View Container​
Answer: c

7. What is the difference between Angular and AngularJS?

a) AngularJS uses TypeScript​


b) AngularJS is a newer version​
c) AngularJS is based on components​


d) AngularJS is the older version using JavaScript​
Answer: d

8. What file type is AngularJS written in?

a) Java​
b) TypeScript​
c) JavaScript​


d) Python​
Answer: c
9. In which year was AngularJS first released?

a) 2008​
b) 2010​
c) 2015​


d) 2013​
Answer: b

10. What does data binding mean in AngularJS?

a) Styling data​
b) Encrypting data​
c) Linking data between model and view​


d) Connecting to databases​
Answer: c

11. AngularJS binds data using which symbol in HTML?

a) #​
b) @​
c) {{ }}​
d) [ ]​
✅ Answer: c

12. Where can you load AngularJS from?

a) Only offline zip files​


b) Browser extensions​
c) CDN (Content Delivery Network)​


d) npm only​
Answer: c

13. Which tag is used to start an AngularJS app in HTML?

a) <angular>​
b) <app>​
c) ng-app​
d) <script>​
✅ Answer: c

14. What happens if you forget ng-app in your HTML?

a) Code will run faster​


b) AngularJS features won’t work​
c) AngularJS won’t bind CSS​


d) It connects to MySQL​
Answer: b

15. Which is NOT a benefit of AngularJS?

a) Two-way data binding​


b) MVC architecture​
c) Built-in database storage​


d) Dependency injection​
Answer: c

16. AngularJS framework is loaded via what type of HTML element?

a) <style>​
b) <div>​
c) <script>​
d) <link>​
✅ Answer: c

17. Which file extension does AngularJS use when loaded via CDN?

a) .html​
b) .css​
c) .js​
d) .angular​
✅ Answer: c
18. What is a “single-page application”?

a) Page built in one CSS file​


b) Web page that reloads every time​
c) Page that loads once and updates dynamically​


d) A single HTML file with no styling​
Answer: c

19. What directive is required to start AngularJS?

a) ng-start​
b) ng-load​
c) ng-app​
d) angular-load​
✅ Answer: c

20. Can AngularJS and jQuery be used together?

a) No​
b) Yes, but Angular will stop working​
c) Yes, but only outside controllers​


d) Yes, but Angular has its own way to manipulate DOM​
Answer: d

21. How do you reference AngularJS via CDN?

a) <link href=\"angular.js\">​
b) <script src=\"https://...angular.min.js\"></script>​
c) <angular source=\"cdn\">​
d) <cdn angular>​
✅ Answer: b

22. AngularJS helps reduce...?


a) HTML readability​
b) Code duplication​
c) Function reuse​


d) Looping structures​
Answer: b

23. What does AngularJS extend in HTML?

a) It replaces the HTML engine​


b) It adds components​
c) It extends HTML vocabulary with directives​


d) It modifies HTTP headers​
Answer: c

24. AngularJS apps are generally...

a) Compiled​
b) Transpiled​
c) Interpreted in the browser​


d) Minified​
Answer: c

25. In AngularJS, you describe UI with...?

a) JavaScript only​
b) Directives in HTML​
c) CSS grid​


d) Controllers only​
Answer: b

26. What does MVC help separate in an application?

a) HTML and CSS​


b) JavaScript and jQuery​
c) Logic, data, and UI​

d) API and database​
Answer: c

27. What is the purpose of the Controller in AngularJS?

a) Display data​
b) Store HTML tags​
c) Manage application logic and data​


d) Render CSS​
Answer: c

28. In AngularJS, what is the role of the View?

a) Write JavaScript logic​


b) Define user interface using HTML​
c) Store the database​


d) Access APIs​
Answer: b

29. What is the role of the Model in AngularJS?

a) It styles the HTML​


b) It defines animations​
c) It holds the application data​


d) It formats JSON​
Answer: c

30. How does two-way data binding benefit the developer?

a) Automatically saves changes to the database​


b) Keeps the View and Model in sync​
c) Adds extra layers of security​


d) Avoids the use of controllers​
Answer: b
31. What is the default file extension of AngularJS files?

a) .angular​
b) .json​
c) .html​


d) .js​
Answer: d

32. What does it mean when we say AngularJS is declarative?

a) You must declare all variables manually​


b) You describe what the UI should do​
c) You need to define every function in advance​


d) AngularJS does not support dynamic data​
Answer: b

33. Which of these files must be included first to use AngularJS?

a) style.css​
b) bootstrap.min.js​
c) angular.min.js​
d) jquery.js​
✅ Answer: c

34. AngularJS code is usually written in...?

a) Python​
b) JavaScript​
c) PHP​


d) C#​
Answer: b

35. Which directive initializes an AngularJS application?

a) ng-controller​
b) ng-app​
c) ng-init​
d) ng-model​
✅ Answer: b

36. What happens if you have multiple ng-app on one page?

a) All will run at once​


b) Only the first one works​
c) AngularJS crashes​


d) It creates multiple single-page apps​
Answer: b

37. Where is the best place to include your AngularJS <script> tag?

a) Inside <head>​
b) At the bottom of <body>​
c) In a CSS file​


d) In an image tag​
Answer: b

38. What does SPA stand for?

a) Simple Page Application​


b) Styled Progressive Application​
c) Single Page Application​


d) Standard Page Angular​
Answer: c

39. Which one is not a feature of AngularJS?

a) Animation support​
b) RESTful API support​
c) Component-based system (like Angular 2+)​


d) Two-way binding​
Answer: c
40. AngularJS expressions are placed inside...?

a) () brackets​
b) // slashes​
c) {{ double curly braces }}​
d) [[ double square brackets ]]​
✅ Answer: c

41. AngularJS was designed to extend...?

a) JavaScript​
b) HTML​
c) CSS​


d) jQuery​
Answer: b

42. AngularJS expressions can be used to...?

a) Execute backend code​


b) Insert raw HTML​
c) Insert dynamic content in HTML​


d) Minify JavaScript​
Answer: c

43. Which of these is true about AngularJS expressions?

a) They can contain loops​


b) They can call alert()​
c) They evaluate simple JavaScript-like expressions​


d) They support AJAX​
Answer: c

44. AngularJS detects changes in data using...?


a) Interpreters​
b) Watchers​
c) HTTP polling​


d) Event handlers only​
Answer: b

45. The framework AngularJS is...?

a) Synchronous​
b) Procedural​
c) Declarative​


d) Object-oriented​
Answer: c

46. AngularJS applications are defined by...?

a) An HTML class​
b) A CSS selector​
c) The ng-app directive​
d) The ng-bind directive​
✅ Answer: c

47. Which is a correct CDN URL for AngularJS?

a) https://angular.org/cdn/angular​
b) https://cdn.angularjs.org/1.8.2/angular.min.js​
c) https://js.cdn/angular.js​
d) https://cdn.google.com/angular/latest​
✅ Answer: b

48. AngularJS can be tested using...?

a) Jasmine​
b) Mocha​
c) Karma​

d) All of the above​
Answer: d

49. AngularJS is typically loaded using...?

a) import statement​
b) require()​
c) <script> tag in HTML​
d) <angular> tag​
✅ Answer: c

50. AngularJS reduces...?

a) HTML flexibility​
b) Code redundancy​
c) API compatibility​


d) Runtime performance​
Answer: b

🌿 Level 2: AngularJS Basics


Focus: Expressions, ng-model, ng-init, ng-bind, Controllers, $scope, Two-way Binding

1. What does {{ 2 + 2 }} display in AngularJS?

a) 2 + 2​
b) 4​
c) NaN​


d) Error​
Answer: b

2. AngularJS expressions are evaluated in the context of...?


a) The browser window​
b) The controller scope​
c) The server-side language​


d) The CSS context​
Answer: b

3. Which directive binds a form input to a model?

a) ng-bind​
b) ng-model​
c) ng-click​
d) ng-controller​
✅ Answer: b

4. Which directive lets you initialize variables in AngularJS?

a) ng-model​
b) ng-init​
c) ng-start​
d) ng-value​
✅ Answer: b

5. Which directive inserts a value from the model into the view?

a) ng-model​
b) ng-repeat​
c) ng-bind​
d) ng-click​
✅ Answer: c

6. What will this display? <p ng-bind='4 + 6'></p>

a) 4 + 6​
b) 46​
c) 10​

d) Error​
Answer: c

7. What is the function of a Controller in AngularJS?

a) Style the UI​


b) Store HTML templates​
c) Add API integration​


d) Control logic and bind data to the view​
Answer: d

8. Which directive defines the Controller scope in AngularJS?

a) ng-app​
b) ng-controller​
c) ng-scope​
d) ng-bind​
✅ Answer: b

9. What is $scope used for in a controller?

a) To style CSS​
b) To bind data between view and controller​
c) To add links​


d) To reset the application​
Answer: b

10. Which of the following uses a controller correctly?

a) <div ng-controller=\"MyCtrl\">​
b) <div ng-model=\"MyCtrl\">​
c) <controller=\"MyCtrl\">​
d) <ng-controller name=\"MyCtrl\">​
✅ Answer: a
11. What is the output?
<div ng-init=\"x=5\"><p>{{ x + 10 }}</p></div>

a) x + 10​
b) 510​
c) 15​


d) Undefined​
Answer: c

12. What happens when you change an input with


ng-model=\"username\"?

a) The value updates only when form submits​


b) The value updates the DOM instantly​
c) The value does not update​


d) The controller restarts​
Answer: b

13. What best describes two-way data binding?

a) Model → View only​


b) View → Model only​
c) Model ←→ View (sync both ways)​


d) Asynchronous binding​
Answer: c

14. Where is data from ng-model stored by default?

a) In a JavaScript array​
b) In the $scope object​
c) In local storage​


d) In a directive​
Answer: b

15. Which is true about AngularJS expressions?


a) They can execute alerts​
b) They can contain loops​
c) They cannot contain conditionals​
d) They cannot contain statements like if or while​
✅ Answer: d

16. How does AngularJS update the view when model changes?

a) Manual refresh​
b) Form submission​
c) Two-way data binding​


d) Session reload​
Answer: c

17. What kind of value can be passed through ng-init?

a) Only numbers​
b) Only strings​
c) Any valid JS expression​


d) Only function calls​
Answer: c

18. Which directive connects the input field to the controller data?

a) ng-value​
b) ng-model​
c) ng-app​
d) ng-html​
✅ Answer: b

19. Which of the following will update both the model and view instantly?

a) ng-click​
b) ng-controller​
c) ng-model​
d) ng-bind​
✅ Answer: c

20. What will this display if the controller sets $scope.name = 'Favour'?
<p>{{ name }}</p>

a) name​
b) {{ name }}​
c) Favour​


d) undefined​
Answer: c

21. What will happen if ng-model is used without a controller or scope?

a) It will still bind data correctly​


b) It will break the HTML​
c) The binding won’t work as expected​


d) It will create a global variable​
Answer: c

22. What is the result of ng-init=\"greeting='Hello'\" and {{


greeting + ' World' }}?

a) Hello​
b) Hello World​
c) greeting World​


d) undefined​
Answer: b

23. Can you use multiple expressions inside a single HTML tag?

a) No​
b) Yes, but only in input elements​
c) Yes, using multiple {{ }}​

d) Only with controller logic​
Answer: c

24. AngularJS controller functions are written in...?

a) CSS​
b) HTML​
c) JavaScript​


d) TypeScript​
Answer: c

25. What is the correct way to define a controller in JS?

a) controller('myCtrl', () => {})​


b) app.controller('myCtrl', function($scope) {})​
c) controller: function($scope) {}​
d) myCtrl.controller(function) {}​
✅ Answer: b

26. If ng-model=\"age\", and the user types 25, what does $scope.age
equal?

a) undefined​
b) 0​
c) "age"​


d) 25​
Answer: d

27. What does ng-bind prevent that {{ }} does not?

a) Two-way binding​
b) Flash of unrendered content​
c) Variable overwrites​


d) Scope errors​
Answer: b
28. How many controllers can you use on a single page?

a) Only one​
b) Two​
c) Unlimited​


d) Only for forms​
Answer: c

29. What will ng-init=\"a=2; b=3\" and {{ a * b }} show?

a) a * b​
b) 6​
c) 5​


d) 23​
Answer: b

30. Which of the following is NOT a valid use of ng-model?

a) Text input​
b) Radio button​
c) Checkbox​


d) Image tag​
Answer: d

31. What does $scope help AngularJS achieve?

a) Inline CSS​
b) Component-based logic​
c) Separation of logic and view​


d) Custom animation​
Answer: c

32. What’s the difference between ng-bind and interpolation {{ }}?


a) ng-bind is synchronous​
b) Interpolation is one-way, ng-bind is two-way​
c) ng-bind avoids flickering before Angular loads​
d) {{ }} updates faster​
✅ Answer: c

33. What is the default state of a model variable?

a) null​
b) undefined​
c) 0​


d) NaN​
Answer: b

34. Which is better for dynamic text from external sources?

a) ng-app​
b) ng-model​
c) ng-init​
d) ng-bind​
✅ Answer: d

35. What keyword defines the view logic in AngularJS?

a) view-controller​
b) $scope​
c) DOMManager​
d) routeScope​
✅ Answer: b

36. If you change the value in the controller, what happens in the view?

a) It updates automatically​
b) It stays the same​
c) It flashes once​

d) You must refresh the page​
Answer: a

37. Can AngularJS handle expressions like {{ name.length }}?

a) No​
b) Yes​
c) Only with controllers​


d) Only in arrays​
Answer: b

38. Where should controller logic be defined?

a) In the HTML page​


b) Inside the view tag​
c) In JavaScript​


d) Inside the AngularJS link​
Answer: c

39. Can multiple controllers access the same $scope?

a) Yes, by default​
b) No, they each have isolated scopes​
c) Only in nested views​
d) Only if you call $scope.share()​
✅ Answer: b

40. What is a benefit of $scope?

a) It allows for jQuery manipulation​


b) It stores backend APIs​
c) It acts as a bridge between controller and view​


d) It tracks browser history​
Answer: c
41. Which directive allows you to quickly bind a value to a display area?

a) ng-show​
b) ng-repeat​
c) ng-bind​
d) ng-click​
✅ Answer: c

42. AngularJS controller functions use which parameter?

a) $model​
b) $data​
c) $scope​
d) $controller​
✅ Answer: c

43. How is a model bound to a <textarea>?

a) Using ng-html​
b) Using ng-style​
c) Using ng-model​
d) Using ng-init​
✅ Answer: c

44. Which is better for large apps?

a) Global variables​
b) $scope with nested controllers​
c) ng-app only​


d) Interpolation only​
Answer: b

45. What will be the output?


<input ng-model=\"age\">
<p>{{ age + 5 }}</p>

(If age = 10)​


a) 10​
b) 15​
c) age + 5​


d) undefined​
Answer: b

46. When is ng-model value updated in the scope?

a) After form submit​


b) Instantly as user types​
c) On page reload​


d) After 5 seconds​
Answer: b

47. Can you pass functions into the controller via $scope?

a) No​
b) Yes​
c) Only once​
d) Only if using ng-model​
✅ Answer: b

48. What does $scope.name = 'Dami' do?

a) Assigns Dami to controller’s name property​


b) Updates database​
c) Saves name permanently​


d) Creates a new directive​
Answer: a

49. AngularJS controllers are...?


a) Singleton​
b) Factories​
c) Regular JS functions​


d) HTML methods​
Answer: c

50. Which directive creates a “live” connection between view and model?

a) ng-click​
b) ng-init​
c) ng-model​
d) ng-bind​
✅ Answer: c

We’re locking in 50 medium-level MCQs on:

●​ ng-repeat​

●​ ng-if, ng-show, ng-hide​

●​ ng-click​

●​ Filters: uppercase, lowercase, currency, orderBy, filter​

🌻 Level 3: Built-in Directives & Filters


1. What does ng-repeat do in AngularJS?

a) Creates custom filters​


b) Repeats data from a list or array​
c) Initializes the controller​


d) Reloads the page​
Answer: b
2. Which is the correct syntax for ng-repeat?

a) ng-repeat=\"array in item\"​
b) ng-repeat=\"item in array\"​
c) ng-for=\"item in array\"​
d) ng-each=\"item: array\"​
✅ Answer: b

3. What does ng-if=\"false\" do to an element?

a) Hides the element​


b) Shows the element​
c) Removes the element from the DOM​


d) Disables the element​
Answer: c

4. What’s the difference between ng-show and ng-if?

a) ng-show removes the element​


b) ng-if hides the element​
c) ng-show hides via CSS, ng-if removes from DOM​


d) Both do the exact same thing​
Answer: c

5. If an element has ng-show=\"false\", what happens?

a) It displays as blank​
b) It's hidden via display: none​
c) It’s deleted permanently​


d) It gets stored in cache​
Answer: b

6. Which directive allows event handling like button clicks?


a) ng-show​
b) ng-controller​
c) ng-click​
d) ng-event​
✅ Answer: c

7. What will this do?


<button ng-click=\"count = count + 1\">Click</button>

a) Do nothing​
b) Reset the count​
c) Increment the count variable​


d) Reload the page​
Answer: c

8. What does ng-click=\"myFunction()\" do?

a) Creates a controller​
b) Starts the app​
c) Calls a function in the controller​


d) Adds a new view​
Answer: c

9. Which filter transforms text to uppercase?

a) ng-uppercase​
b) textToUpper()​
c) uppercase​
d) toUpperCase()​
✅ Answer: c

10. How would you display prices using the currency filter?
a) {{ price | currency }}​
b) {{ currency:price }}​
c) ng-currency=\"price\"​
d) {{ price.toCurrency() }}​
✅ Answer: a

11. What will {{ 'favour' | uppercase }} output?

a) favour​
b) FAVOUR​
c) UppercaseFavour​


d) Error​
Answer: b

12. What does filter do in AngularJS?

a) Validates a form​
b) Hides invalid input​
c) Filters array data by condition​


d) Filters based on tags​
Answer: c

13. What will orderBy do to an array?

a) Randomize it​
b) Reverse it​
c) Sort it​


d) Remove duplicates​
Answer: c

14. Which directive conditionally renders elements?

a) ng-hide​
b) ng-if​
c) ng-bind​
d) ng-order​
✅ Answer: b

15. What does this do?


<p ng-show=\"isVisible\">Hello</p>

(If isVisible = false)​


a) Shows "Hello"​
b) Deletes paragraph​
c) Hides it with CSS​


d) Throws error​
Answer: c

16. Can filters be chained in AngularJS?

a) No​
b) Yes​
c) Only one per expression​


d) Only inside controllers​
Answer: b

17. Which filter would best sort items alphabetically?

a) currency​
b) uppercase​
c) orderBy​
d) ng-sort​
✅ Answer: c

18. Which of these is NOT a valid AngularJS filter?

a) currency​
b) date​
c) sort​
d) filter​
✅ Answer: c

19. What is required to use a filter like uppercase?

a) Include an extra CDN​


b) Define it in a controller​
c) Nothing – it’s built-in​


d) Add a pipe directive​
Answer: c

20. Filters are typically used...?

a) In JS files only​
b) In the controller logic​
c) Inside {{ }} expressions in HTML​
d) Inside <script> tags​
✅ Answer: c

21. Which of these can be combined with ng-repeat to display filtered


data?

a) ng-bind​
b) filter​
c) ng-if​
d) ng-model​
✅ Answer: b

22. What will this output?


<li ng-repeat="item in items">{{ item.name }}</li>

a) A list of object keys​


b) One list item​
c) Each item’s name value in the list​

d) Syntax error​
Answer: c

23. What does this directive do?


<p ng-hide="isHidden">Hello</p>

(If isHidden = true)​


a) It shows “Hello”​
b) It hides the paragraph with CSS​
c) It deletes the paragraph​


d) It throws an error​
Answer: b

24. What’s the main difference between ng-show and ng-hide?

a) ng-show uses JavaScript, ng-hide uses CSS​


b) They are opposites in logic​
c) One is deprecated​
d) ng-hide does not support expressions​
✅ Answer: b

25. Which AngularJS directive is used to handle button clicks?

a) ng-bind​
b) ng-controller​
c) ng-repeat​
d) ng-click​
✅ Answer: d

26. What happens when ng-click="count = count + 1" is triggered?

a) count decreases​
b) count resets​
c) count increases by 1​

d) No change happens​
Answer: c

27. What’s the default currency symbol used by the currency filter?

a) ₦​
b) €​
c) $​


d) £​
Answer: c

28. How can you specify a currency symbol in currency filter?

a) {{ price | currency:'₦' }}​


b) {{ price | ng-currency='₦' }}​
c) currency='₦'​
d) currency(price, '₦')​
✅ Answer: a

29. Which of the following filters supports pagination-like features?

a) uppercase​
b) orderBy​
c) limitTo​
d) filter​
✅ Answer: c

30. How would you reverse an array using orderBy?

a) orderBy:'desc'​
b) orderBy:reverse​
c) orderBy:'-property'​
d) orderBy:'reverse'​
✅ Answer: c
31. What happens if ng-repeat is given a non-array?

a) It runs once​
b) It throws an error​
c) It does nothing​


d) It repeats indefinitely​
Answer: c

32. You can combine multiple filters using...?

a) Commas​
b) Brackets​
c) The | pipe symbol​


d) Parentheses​
Answer: c

33. In ng-repeat="item in items", what does item refer to?

a) The object key​


b) The loop index​
c) A single object inside the array​


d) The outer controller​
Answer: c

34. How do you apply multiple filters to an expression?

a) Separate with spaces​


b) Chain them with |​
c) Use multiple curly braces​


d) Not possible​
Answer: b

35. Which of these can be filtered using filter?


a) Strings​
b) Arrays of objects​
c) HTML templates​


d) Controllers​
Answer: b

36. What will ng-click="total = total - 1" do?

a) Reset total​
b) Decrease total by 1​
c) Print total​


d) Multiply total by -1​
Answer: b

37. Which of the following can you pass into ng-repeat?

a) An array​
b) An object​
c) A filter expression​


d) All of the above​
Answer: d

38. When using ng-if, the element is...?

a) Hidden with CSS​


b) Not rendered unless condition is true​
c) Disabled​


d) Always in the DOM​
Answer: b

39. What happens when ng-show="true" is set?

a) It hides the element​


b) It renders nothing​
c) It displays the element​

d) It creates an error​
Answer: c

40. ng-click="alert('Hello')" will...?

a) Do nothing​
b) Show a pop-up with “Hello”​
c) Bind text​


d) Print to console​
Answer: b

41. What happens if ng-hide="false"?

a) The element hides​


b) The element shows​
c) It's deleted​


d) It’s made read-only​
Answer: b

42. What’s true about filter in AngularJS?

a) Only works on numbers​


b) Is case-insensitive by default​
c) Requires backend configuration​


d) Doesn’t work with strings​
Answer: b

43. What is the output of {{ 'YES' | lowercase }}?

a) YES​
b) Yes​
c) yes​


d) lowercaseYES​
Answer: c
44. Which is NOT a valid use of filters?

a) With ng-model​
b) Inside {{ }}​
c) In ng-repeat​


d) Inside controller logic​
Answer: a

45. ng-click can be used to...?

a) Create new routes​


b) Fetch APIs​
c) Call functions on user events​


d) Create filters​
Answer: c

46. Can filters format numbers and text?

a) Only numbers​
b) Only text​
c) Yes, both​


d) Neither​
Answer: c

47. How do you make AngularJS display only the first 3 items of an array?

a) {{ array | limitTo:3 }}​


b) {{ array | slice(0, 3) }}​
c) ng-model=\"array[3]\"​
d) ng-loop limit=3​
✅ Answer: a

48. Where should ng-click logic be defined?

a) Inside controller as function​


b) Directly inside HTML​
c) In CSS file​


d) In the route definition​
Answer: a

49. Which of these allows hiding elements without removing them from the
DOM?

a) ng-if​
b) ng-show​
c) ng-click​
d) ng-repeat​
✅ Answer: b

50. What happens if a filter expression fails?

a) AngularJS crashes​
b) Default value is returned​
c) Nothing renders​


d) Silent fail, no output​
Answer: d

🌷 Level 4: Forms & Validation


Let’s begin!

1. Which directive binds an input field to a variable?

a) ng-submit​
b) ng-controller​
c) ng-model​
d) ng-bind​
✅ Answer: c
2. What is the function of ng-submit?

a) It resets the form​


b) It submits the form data through Angular​
c) It validates only numeric fields​


d) It creates new input fields​
Answer: b

3. What happens when a field with required is left empty?

a) Angular skips the field​


b) It throws an error​
c) The field becomes invalid​


d) The form submits anyway​
Answer: c

4. What does the pattern attribute do in a form input?

a) Adds background style​


b) Prevents typing numbers​
c) Validates input against a regex​


d) Converts input to lowercase​
Answer: c

5. Which AngularJS directive handles form validation on submission?

a) ng-bind​
b) ng-submit​
c) ng-controller​
d) ng-app​
✅ Answer: b

6. What does $valid represent in AngularJS forms?

a) If the input is styled​


b) If the user touched the input​
c) If the field passes all validation​


d) If the form has been reset​
Answer: c

7. What does $dirty mean in AngularJS forms?

a) The field has validation errors​


b) The field has been modified​
c) The field contains symbols​


d) The form is hidden​
Answer: b

8. What does $touched mean in a form field?

a) The field is focused but not changed​


b) The field is focused and then blurred​
c) The field has a filter applied​


d) The user double-clicked​
Answer: b

9. How can you check if a form is invalid?

a) form.$invalid​
b) form.$clean​
c) form.invalid()​
d) ng-invalid(form)​
✅ Answer: a

10. What attribute is used to enforce minimum character length?

a) ng-min​
b) min-char​
c) ng-minlength​
d) minlength​
✅ Answer: d
11. What will happen if an input has required but is not filled?

a) It submits blank​
b) $valid becomes false​
c) $touched becomes false​


d) AngularJS refreshes the page​
Answer: b

12. What happens when $pristine is true?

a) The field was modified​


b) The form is dirty​
c) The field hasn’t been changed yet​


d) The form is submitted​
Answer: c

13. What is a good way to show a custom error message?

a) Use alert() in the controller​


b) Use ng-show with $error properties​
c) Use ng-hide on the whole form​
d) Use form.error()​
✅ Answer: b

14. What does this show if the field is invalid?


<span ng-show=\"myForm.email.$error.required\">Email is required</span>

a) Nothing​
b) Shows message always​
c) Shows message only if email is required and missing​


d) Shows only after blur​
Answer: c
15. Which state means the field was changed after focus?

a) $pristine​
b) $untouched​
c) $dirty​
d) $pending​
✅ Answer: c

16. What is the correct directive to validate email?

a) type=\"email\"​
b) ng-email​
c) validate-email​
d) ng-type=\"email\"​
✅ Answer: a

17. How do you disable a submit button unless the form is valid?

a) ng-if=\"form.$valid\"​
b) ng-disabled=\"!form.$valid\"​
c) form.$invalid = false​
d) ng-show=\"form.valid\"​
✅ Answer: b

18. What does ng-pattern="/^[0-9]{4}$/" validate?

a) Any 4-digit number​


b) Any letter​
c) 4 lowercase letters​


d) 4 symbols​
Answer: a

19. When does $touched become true?


a) When the input is edited​
b) After user clicks and leaves the input​
c) When the controller is loaded​


d) Only on blur event​
Answer: b

20. How do you access error info of an input named username in myForm?

a) myForm.username.errors​
b) myForm.username.$error​
c) $error.username​
d) myForm.errors.username​
✅ Answer: b

21. What is the default value of $pristine in an AngularJS input field?

a) false​
b) true​
c) undefined​


d) ""​
Answer: b

22. If a user focuses and types in a field, which becomes true?

a) $touched​
b) $untouched​
c) $pristine​
d) $invalid​
✅ Answer: a

23. In AngularJS, the form will be $invalid if...?

a) All required fields are filled​


b) A field fails validation​
c) ng-model is not declared​

d) The controller is missing​
Answer: b

24. AngularJS form validation runs...?

a) On page reload​
b) On form submit only​
c) Automatically and instantly​


d) After timeout​
Answer: c

25. When using type="email", what kind of error will be triggered on


invalid input?

a) $error.text​
b) $error.email​
c) $error.invalid​
d) $error.string​
✅ Answer: b

26. How do you apply a minimum character length of 8 to an input field?

a) ng-minlength="8"​
b) minlength="8"​
c) Both a and b​
d) ng-validate="8"​
✅ Answer: c

27. What does novalidate do in AngularJS forms?

a) Disables HTML5 validation​


b) Prevents Angular from validating​
c) Validates server-side only​


d) Hides error messages​
Answer: a
28. What is a key advantage of using AngularJS form validation?

a) Larger HTML files​


b) Server-heavy checks​
c) Real-time feedback to the user​


d) Slower input response​
Answer: c

29. What AngularJS directive should wrap around all form inputs?

a) <section>​
b) <form name="formName">​
c) <form ng-control>​
d) <div ng-model>​
✅ Answer: b

30. To validate that a user enters only digits, use...?

a) ng-filter​
b) ng-input="number"​
c) type="number"​
d) validate="digits"​
✅ Answer: c

31. What does $error return in an AngularJS form?

a) Boolean true​
b) Error message​
c) Error object with validation keys​


d) Scope variable​
Answer: c

32. Which validation property will be true when a form is modified?


a) $valid​
b) $dirty​
c) $touched​
d) $error​
✅ Answer: b

33. How do you conditionally show an error if username is missing?

a) ng-show="myForm.username.$dirty"​
b) ng-show="myForm.username.$error.required"​
c) ng-show="!username"​
d) ng-show="myForm.$valid"​
✅ Answer: b

34. How do you write a form that prevents native HTML5 validation?

a) <form validate="false">​
b) <form ng-novalidate>​
c) <form novalidate>​
d) <form block-validation>​
✅ Answer: c

35. How do you bind a checkbox to a boolean variable in AngularJS?

a) ng-boolean="isChecked"​
b) ng-value="true"​
c) ng-model="isChecked"​
d) ng-check="true"​
✅ Answer: c

36. What does $untouched mean in form input?

a) It has been changed​


b) It has not been focused or blurred​
c) It’s invalid​


d) It’s complete​
Answer: b

37. What will ng-disabled="form.$invalid" do to a button?

a) Enable the button​


b) Show the form​
c) Disable the button until the form is valid​


d) Hide the button​
Answer: c

38. What class is added when a field fails validation?

a) .ng-failed​
b) .ng-error​
c) .ng-invalid​
d) .ng-wrong​
✅ Answer: c

39. What class is added when the input becomes valid again?

a) .ng-valid​
b) .ng-valid-true​
c) .ng-ok​
d) .ng-confirm​
✅ Answer: a

40. You can combine required and minlength on one field?

a) No​
b) Only with forms​
c) Yes​


d) Only using JS​
Answer: c
41. Which of the following is a built-in validation key in AngularJS?

a) $error.pattern​
b) $error.custom​
c) $error.regex​
d) $error.formatted​
✅ Answer: a

42. What’s the difference between $pristine and $dirty?

a) $pristine = untouched; $dirty = modified​


b) $pristine = invalid; $dirty = valid​
c) $pristine = valid; $dirty = invalid​


d) They’re the same​
Answer: a

43. How can you reset form validations manually?

a) Use resetValidation()​
b) $scope.myForm = {}​
c) Use native HTML form reset​
d) $setPristine() method​
✅ Answer: d

44. Can you show an error message only when the user interacts with a
field?

a) No​
b) Yes, use $dirty and $touched​
c) Yes, use $error.show​


d) Only with backend help​
Answer: b
45. What is true about ng-model in forms?

a) It binds input to controller​


b) It controls layout​
c) It filters data​


d) It tracks DOM history​
Answer: a

46. How do you show a custom message when a form is invalid?

a) Use alert()​
b) Use ng-show="form.$invalid"​
c) Use ng-bind="error"​
d) Use ng-form-message​
✅ Answer: b

47. What’s the correct directive to apply validation logic only on submit?

a) ng-validate​
b) ng-submit​
c) ng-check​
d) ng-delay​
✅ Answer: b

48. Which of the following is NOT a valid validation class?

a) ng-valid​
b) ng-invalid​
c) ng-dirty​
d) ng-submitted​
✅ Answer: d

49. What’s the purpose of $error.pattern?


a) Shows invalid data only​
b) Returns true if pattern is matched​
c) Checks if regex pattern failed​


d) Highlights border​
Answer: c

50. What does $submitted indicate?

a) The user pressed Enter​


b) The form was submitted​
c) The field was submitted​


d) Angular reloaded​
Answer: b

🌺 Level 5: Advanced AngularJS


Let’s gooooo!

1. What is the main purpose of a custom directive in AngularJS?

a) To style elements​
b) To reuse components or UI behavior​
c) To call APIs​


d) To create routes​
Answer: b

2. How do you create a custom directive?

a) app.directive()​
b) ng-directive()​
c) angular.create()​
d) makeDirective()​
✅ Answer: a
3. What must a custom directive return?

a) A controller​
b) An array​
c) A directive definition object​


d) A service​
Answer: c

4. In a directive, what does restrict: 'E' mean?

a) Only usable on external files​


b) Used as a custom element​
c) Only works inside forms​


d) Used as a class​
Answer: b

5. Which option restricts a directive to attributes only?

a) 'E'​
b) 'A'​
c) 'C'​
d) 'M'​
✅ Answer: b

6. Which restrict option allows both element and attribute usage?

a) 'EA'​
b) 'EM'​
c) 'AE'​
d) 'AC'​
✅ Answer: a

7. What does the template property define in a directive?


a) External file location​
b) A CSS class​
c) The inline HTML used by the directive​


d) The API route​
Answer: c

8. What’s the purpose of scope in a directive?

a) To load the controller​


b) To create isolated data-binding​
c) To import jQuery​


d) To define filters​
Answer: b

9. What is $http.get() used for in AngularJS?

a) Get DOM elements​


b) Get user location​
c) Make GET requests to APIs​


d) Call another controller​
Answer: c

10. What does $http.post() do?

a) Posts HTML content​


b) Sends data to a server endpoint​
c) Creates a blog post​


d) Gets user info​
Answer: b

11. What object handles server requests in AngularJS?

a) $scope​
b) $view​
c) $http​
d) ng-http​
✅ Answer: c

12. $http.get(url) returns...?

a) HTML​
b) A promise​
c) JSON only​


d) Nothing​
Answer: b

13. What does .then() handle in $http?

a) Errors only​
b) DOM updates​
c) Successful responses​


d) Server logs​
Answer: c

14. What’s the use of .catch() in $http calls?

a) Executes on success​
b) Triggers before request​
c) Handles error responses​


d) Sends POST data​
Answer: c

15. What is a common use case of ngRoute?

a) Filtering items​
b) Displaying lists​
c) Creating single page navigation​


d) Refreshing data​
Answer: c
16. Which module must be included to use routing?

a) ngRoute​
b) ngBind​
c) ngForm​
d) ngHttp​
✅ Answer: a

17. What is configured using $routeProvider?

a) Validation​
b) Controllers​
c) Route paths and templates​


d) CSS classes​
Answer: c

18. What directive is used to load route views?

a) ng-content​
b) ng-view​
c) ng-router​
d) ng-controller​
✅ Answer: b

19. Which of these is part of routing setup?

a) $routeConfig()​
b) $router.on()​
c) $routeProvider.when()​
d) route.enable()​
✅ Answer: c

20. Which method defines what to load at a specific path?


a) .when('/path', {...})​
b) .use('/path')​
c) .route('/path')​
d) .path('/view')​
✅ Answer: a

21. What happens when a path is unmatched in routing?

a) It loads nothing​
b) It throws an error​
c) You use .otherwise() to handle it​


d) The app crashes​
Answer: c

22. What does templateUrl define in a route?

a) A controller name​
b) A CSS file​
c) An external HTML file to render​


d) A filter​
Answer: c

23. How do you declare a dependency on ngRoute?

a) angular.module('app')​
b) angular.module('app', ['ngRoute'])​
c) angular.route()​
d) ng-view()​
✅ Answer: b

24. Which property maps the route to a controller?

a) routeControl​
b) controller​
c) viewHandler​
d) routeBind​
✅ Answer: b

25. What does ng-view do?

a) Controls visibility​
b) Loads the content defined by the route​
c) Creates form​


d) Filters results​
Answer: b

👑💥
Let’s finish this, Queen Favour! ​

🌐🛠️
You’re about to wrap up Level 5: Advanced AngularJS with Q26–Q50 — this round
includes custom directives, $http, and real-life mini project logic

26. What AngularJS method loads external data into the controller?

a) ng-model​
b) $scope.set()​
c) $http.get()​
d) ng-get()​
✅ Answer: c

27. How do you define what happens after a successful API call?

a) .done()​
b) .result()​
c) .then()​
d) .show()​
✅ Answer: c

28. How would you handle API errors in AngularJS?


a) .catch()​
b) .fail()​
c) try/catch block​
d) onError()​
✅ Answer: a

29. What does ng-view replace in a routed AngularJS app?

a) The model​
b) The HTML body​
c) A section of the DOM​


d) The controller​
Answer: c

30. What kind of object does $http.get() return?

a) String​
b) JSON​
c) Promise​


d) Controller​
Answer: c

31. Why is $http considered asynchronous?

a) It blocks UI​
b) It runs in the DOM​
c) It fetches data without reloading the page​


d) It pauses the app​
Answer: c

32. What kind of view system does AngularJS routing use?

a) Server-rendered views​
b) Client-side dynamic templates​
c) Static HTML​

d) Web components only​
Answer: b

33. Which of these is an example use of a custom directive?

a) <my-popup></my-popup>​
b) <ng-repeat></ng-repeat>​
c) <body-directive>​
d) <custom-click>​
✅ Answer: a

34. How do you pass data into a custom directive?

a) Use ng-model​
b) Use @, =, or & in scope​
c) Use $inject​
d) Use $directive.data()​
✅ Answer: b

35. Which of the following is a reason to use a directive?

a) Data binding​
b) Code reuse for UI logic​
c) Dependency injection​


d) Page styling​
Answer: b

36. What’s the role of controllerAs in routes?

a) Binds multiple controllers​


b) Uses alias for controller in views​
c) Disables scope​


d) Makes controller global​
Answer: b
37. Can custom directives be used multiple times in a single page?

a) No​
b) Only in ng-app​
c) Yes​


d) Only once per view​
Answer: c

38. What’s true about directive templates?

a) They must use jQuery​


b) They’re written in JSX​
c) They define the directive’s view​


d) They can only load inline HTML​
Answer: c

39. What does templateUrl do in a directive?

a) Connects to an API​
b) Loads a CSS file​
c) Links an external HTML view​


d) Runs a JavaScript function​
Answer: c

40. In a mini project (e.g., To-Do app), how can AngularJS help?

a) Create static content​


b) Manage backend routes​
c) Bind UI to data dynamically​


d) Compile Sass​
Answer: c

41. What’s a good use for $http.post() in a blog app?

a) Deleting a post​
b) Sending a new blog post to the server​
c) Fetching list of posts​

d) Styling blog posts​
Answer: b

42. What’s the benefit of using routing in a blog viewer app?

a) Creates multiple pages with refresh​


b) Allows navigation without reloading​
c) Syncs databases​


d) Avoids using controllers​
Answer: b

43. In AngularJS, how do you fetch and display posts from an API?

a) Use ng-model and filter()​


b) Use $http.get() and ng-repeat​
c) Use document.querySelector()​
d) Use angular.api()​
✅ Answer: b

44. Which is a valid state for ngRoute navigation?

a) /home​
b) .home​
c) route.home()​
d) #home​
✅ Answer: a

45. Which of the following best represents AngularJS routing setup?


$routeProvider
.when('/about', {
templateUrl: 'about.html',
controller: 'AboutCtrl'
});
a) Syntax is incorrect​
b) Defines a new directive​
c) Maps a route to a template and controller​


d) Executes a POST request​
Answer: c

46. Can you reuse a directive in multiple projects?

a) No​
b) Yes, if exported properly​
c) Only with Bootstrap​


d) Only inside controller​
Answer: b

47. What lifecycle hook can you define inside a directive?

a) run()​
b) onClick()​
c) link()​
d) scope.init()​
✅ Answer: c

48. Which routing method handles unmatched routes?

a) .catch()​
b) .default()​
c) .otherwise()​
d) .fallback()​
✅ Answer: c

49. What does controller: 'MainCtrl' inside a route do?

a) Imports controller from a file​


b) Links the controller to that route​
c) Starts the app​

d) Applies ng-click​
Answer: b

50. What is the final goal of using all these AngularJS features together?

a) Backend database control​


b) Static blog rendering​
c) Build dynamic, responsive, SPA experiences​


d) Replace HTML and CSS​
Answer: c

You might also like