250 Angular JS MCQs
250 Angular JS MCQs
1. What is AngularJS?
✅
d) A database engine
Answer: c
a) Static websites
b) Single Page Applications (SPAs)
c) Backend services
✅
d) Game development
Answer: b
a) Microsoft
b) Facebook
c) Google
✅
d) Oracle
Answer: c
a) MVT
b) MVC
c) MVVM
✅
d) MVP
Answer: b
✅
d) SQL support
Answer: c
✅
d) Master View Container
Answer: c
✅
d) AngularJS is the older version using JavaScript
Answer: d
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
a) Styling data
b) Encrypting data
c) Linking data between model and view
✅
d) Connecting to databases
Answer: c
a) #
b) @
c) {{ }}
d) [ ]
✅ Answer: c
✅
d) npm only
Answer: c
a) <angular>
b) <app>
c) ng-app
d) <script>
✅ Answer: c
✅
d) It connects to MySQL
Answer: b
✅
d) Dependency injection
Answer: c
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”?
✅
d) A single HTML file with no styling
Answer: c
a) ng-start
b) ng-load
c) ng-app
d) angular-load
✅ Answer: c
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
a) <link href=\"angular.js\">
b) <script src=\"https://...angular.min.js\"></script>
c) <angular source=\"cdn\">
d) <cdn angular>
✅ Answer: b
✅
d) Looping structures
Answer: b
✅
d) It modifies HTTP headers
Answer: c
a) Compiled
b) Transpiled
c) Interpreted in the browser
✅
d) Minified
Answer: c
a) JavaScript only
b) Directives in HTML
c) CSS grid
✅
d) Controllers only
Answer: b
a) Display data
b) Store HTML tags
c) Manage application logic and data
✅
d) Render CSS
Answer: c
✅
d) Access APIs
Answer: b
✅
d) It formats JSON
Answer: c
✅
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
✅
d) AngularJS does not support dynamic data
Answer: b
a) style.css
b) bootstrap.min.js
c) angular.min.js
d) jquery.js
✅ Answer: c
a) Python
b) JavaScript
c) PHP
✅
d) C#
Answer: b
a) ng-controller
b) ng-app
c) ng-init
d) ng-model
✅ Answer: b
✅
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
✅
d) Standard Page Angular
Answer: c
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
a) JavaScript
b) HTML
c) CSS
✅
d) jQuery
Answer: b
✅
d) Minify JavaScript
Answer: c
✅
d) They support AJAX
Answer: c
✅
d) Event handlers only
Answer: b
a) Synchronous
b) Procedural
c) Declarative
✅
d) Object-oriented
Answer: c
a) An HTML class
b) A CSS selector
c) The ng-app directive
d) The ng-bind directive
✅ Answer: c
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
a) Jasmine
b) Mocha
c) Karma
✅
d) All of the above
Answer: d
a) import statement
b) require()
c) <script> tag in HTML
d) <angular> tag
✅ Answer: c
a) HTML flexibility
b) Code redundancy
c) API compatibility
✅
d) Runtime performance
Answer: b
a) 2 + 2
b) 4
c) NaN
✅
d) Error
Answer: b
✅
d) The CSS context
Answer: b
a) ng-bind
b) ng-model
c) ng-click
d) ng-controller
✅ Answer: b
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
a) 4 + 6
b) 46
c) 10
✅
d) Error
Answer: c
✅
d) Control logic and bind data to the view
Answer: d
a) ng-app
b) ng-controller
c) ng-scope
d) ng-bind
✅ Answer: b
a) To style CSS
b) To bind data between view and controller
c) To add links
✅
d) To reset the application
Answer: b
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
✅
d) The controller restarts
Answer: b
✅
d) Asynchronous binding
Answer: c
a) In a JavaScript array
b) In the $scope object
c) In local storage
✅
d) In a directive
Answer: b
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
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
✅
d) It will create a global variable
Answer: c
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
a) CSS
b) HTML
c) JavaScript
✅
d) TypeScript
Answer: c
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
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
a) a * b
b) 6
c) 5
✅
d) 23
Answer: b
a) Text input
b) Radio button
c) Checkbox
✅
d) Image tag
Answer: d
a) Inline CSS
b) Component-based logic
c) Separation of logic and view
✅
d) Custom animation
Answer: c
a) null
b) undefined
c) 0
✅
d) NaN
Answer: b
a) ng-app
b) ng-model
c) ng-init
d) ng-bind
✅ Answer: d
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
a) No
b) Yes
c) Only with controllers
✅
d) Only in arrays
Answer: b
✅
d) Inside the AngularJS link
Answer: c
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
✅
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
a) $model
b) $data
c) $scope
d) $controller
✅ Answer: c
a) Using ng-html
b) Using ng-style
c) Using ng-model
d) Using ng-init
✅ Answer: c
a) Global variables
b) $scope with nested controllers
c) ng-app only
✅
d) Interpolation only
Answer: b
✅
d) undefined
Answer: b
✅
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
✅
d) Creates a new directive
Answer: a
✅
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
● ng-repeat
● ng-click
✅
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
✅
d) Disables the element
Answer: c
✅
d) Both do the exact same thing
Answer: c
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
a) Do nothing
b) Reset the count
c) Increment the count variable
✅
d) Reload the page
Answer: c
a) Creates a controller
b) Starts the app
c) Calls a function in the controller
✅
d) Adds a new view
Answer: c
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
a) favour
b) FAVOUR
c) UppercaseFavour
✅
d) Error
Answer: b
a) Validates a form
b) Hides invalid input
c) Filters array data by condition
✅
d) Filters based on tags
Answer: c
a) Randomize it
b) Reverse it
c) Sort it
✅
d) Remove duplicates
Answer: c
a) ng-hide
b) ng-if
c) ng-bind
d) ng-order
✅ Answer: b
✅
d) Throws error
Answer: c
a) No
b) Yes
c) Only one per expression
✅
d) Only inside controllers
Answer: b
a) currency
b) uppercase
c) orderBy
d) ng-sort
✅ Answer: c
a) currency
b) date
c) sort
d) filter
✅ Answer: c
✅
d) Add a pipe directive
Answer: c
a) In JS files only
b) In the controller logic
c) Inside {{ }} expressions in HTML
d) Inside <script> tags
✅ Answer: c
a) ng-bind
b) filter
c) ng-if
d) ng-model
✅ Answer: b
✅
d) It throws an error
Answer: b
a) ng-bind
b) ng-controller
c) ng-repeat
d) ng-click
✅ Answer: d
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
a) uppercase
b) orderBy
c) limitTo
d) filter
✅ Answer: c
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
a) Commas
b) Brackets
c) The | pipe symbol
✅
d) Parentheses
Answer: c
✅
d) The outer controller
Answer: c
✅
d) Not possible
Answer: b
✅
d) Controllers
Answer: b
a) Reset total
b) Decrease total by 1
c) Print total
✅
d) Multiply total by -1
Answer: b
a) An array
b) An object
c) A filter expression
✅
d) All of the above
Answer: d
✅
d) Always in the DOM
Answer: b
a) Do nothing
b) Show a pop-up with “Hello”
c) Bind text
✅
d) Print to console
Answer: b
✅
d) It’s made read-only
Answer: b
✅
d) Doesn’t work with strings
Answer: b
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
✅
d) Create filters
Answer: c
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?
✅
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
a) AngularJS crashes
b) Default value is returned
c) Nothing renders
✅
d) Silent fail, no output
Answer: d
a) ng-submit
b) ng-controller
c) ng-model
d) ng-bind
✅ Answer: c
2. What is the function of ng-submit?
✅
d) It creates new input fields
Answer: b
✅
d) The form submits anyway
Answer: c
✅
d) Converts input to lowercase
Answer: c
a) ng-bind
b) ng-submit
c) ng-controller
d) ng-app
✅ Answer: b
✅
d) If the form has been reset
Answer: c
✅
d) The form is hidden
Answer: b
✅
d) The user double-clicked
Answer: b
a) form.$invalid
b) form.$clean
c) form.invalid()
d) ng-invalid(form)
✅ Answer: a
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
✅
d) The form is submitted
Answer: c
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
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
✅
d) 4 symbols
Answer: a
✅
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
a) false
b) true
c) undefined
✅
d) ""
Answer: b
a) $touched
b) $untouched
c) $pristine
d) $invalid
✅ Answer: a
a) On page reload
b) On form submit only
c) Automatically and instantly
✅
d) After timeout
Answer: c
a) $error.text
b) $error.email
c) $error.invalid
d) $error.string
✅ Answer: b
a) ng-minlength="8"
b) minlength="8"
c) Both a and b
d) ng-validate="8"
✅ Answer: c
✅
d) Hides error messages
Answer: a
28. What is a key advantage of using AngularJS form validation?
✅
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
a) ng-filter
b) ng-input="number"
c) type="number"
d) validate="digits"
✅ Answer: c
a) Boolean true
b) Error message
c) Error object with validation keys
✅
d) Scope variable
Answer: c
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
a) ng-boolean="isChecked"
b) ng-value="true"
c) ng-model="isChecked"
d) ng-check="true"
✅ Answer: c
✅
d) It’s complete
Answer: b
✅
d) Hide the button
Answer: c
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
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
✅
d) They’re the same
Answer: a
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?
✅
d) It tracks DOM history
Answer: a
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
a) ng-valid
b) ng-invalid
c) ng-dirty
d) ng-submitted
✅ Answer: d
✅
d) Highlights border
Answer: c
✅
d) Angular reloaded
Answer: b
a) To style elements
b) To reuse components or UI behavior
c) To call APIs
✅
d) To create routes
Answer: b
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
✅
d) Used as a class
Answer: b
a) 'E'
b) 'A'
c) 'C'
d) 'M'
✅ Answer: b
a) 'EA'
b) 'EM'
c) 'AE'
d) 'AC'
✅ Answer: a
✅
d) The API route
Answer: c
✅
d) To define filters
Answer: b
✅
d) Call another controller
Answer: c
✅
d) Gets user info
Answer: b
a) $scope
b) $view
c) $http
d) ng-http
✅ Answer: c
a) HTML
b) A promise
c) JSON only
✅
d) Nothing
Answer: b
a) Errors only
b) DOM updates
c) Successful responses
✅
d) Server logs
Answer: c
a) Executes on success
b) Triggers before request
c) Handles error responses
✅
d) Sends POST data
Answer: c
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
a) Validation
b) Controllers
c) Route paths and templates
✅
d) CSS classes
Answer: c
a) ng-content
b) ng-view
c) ng-router
d) ng-controller
✅ Answer: b
a) $routeConfig()
b) $router.on()
c) $routeProvider.when()
d) route.enable()
✅ Answer: c
a) It loads nothing
b) It throws an error
c) You use .otherwise() to handle it
✅
d) The app crashes
Answer: c
a) A controller name
b) A CSS file
c) An external HTML file to render
✅
d) A filter
Answer: c
a) angular.module('app')
b) angular.module('app', ['ngRoute'])
c) angular.route()
d) ng-view()
✅ Answer: b
a) routeControl
b) controller
c) viewHandler
d) routeBind
✅ Answer: b
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
a) The model
b) The HTML body
c) A section of the DOM
✅
d) The controller
Answer: c
a) String
b) JSON
c) Promise
✅
d) Controller
Answer: c
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
a) Server-rendered views
b) Client-side dynamic templates
c) Static HTML
✅
d) Web components only
Answer: b
a) <my-popup></my-popup>
b) <ng-repeat></ng-repeat>
c) <body-directive>
d) <custom-click>
✅ Answer: a
a) Use ng-model
b) Use @, =, or & in scope
c) Use $inject
d) Use $directive.data()
✅ Answer: b
a) Data binding
b) Code reuse for UI logic
c) Dependency injection
✅
d) Page styling
Answer: b
✅
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
✅
d) They can only load inline HTML
Answer: c
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?
✅
d) Compile Sass
Answer: c
a) Deleting a post
b) Sending a new blog post to the server
c) Fetching list of posts
✅
d) Styling blog posts
Answer: b
✅
d) Avoids using controllers
Answer: b
43. In AngularJS, how do you fetch and display posts from an API?
a) /home
b) .home
c) route.home()
d) #home
✅ Answer: a
✅
d) Executes a POST request
Answer: c
a) No
b) Yes, if exported properly
c) Only with Bootstrap
✅
d) Only inside controller
Answer: b
a) run()
b) onClick()
c) link()
d) scope.init()
✅ Answer: c
a) .catch()
b) .default()
c) .otherwise()
d) .fallback()
✅ Answer: c
50. What is the final goal of using all these AngularJS features together?
✅
d) Replace HTML and CSS
Answer: c