‭AngularJS Question Bank‬

‭1. What are the features of AngularJS?‬

‭ ngularJS is a JavaScript framework developed by Google used for building dynamic,‬

A
‭single-page web applications (SPAs). It allows developers to extend HTML syntax with‬
‭additional features and bind data seamlessly between the model (data) and view (UI).‬

‭‬ T
● ‭ wo-way data binding‬‭: Keeps the model and the view‬‭in sync automatically.‬
‭●‬ ‭MVC architecture‬‭: Splits the app into three parts‬‭– data (Model), display (View), and‬
‭logic (Controller)‬
‭●‬ ‭Directives‬‭: Adds extra features to HTML (like‬‭ng-model‬‭for inputs).‬
‭●‬ ‭Routing‬‭: Supports SPA for seamless navigation. (Single‬‭page application)‬
‭●‬ ‭Filters‬‭: Format data for display.‬
‭●‬ ‭Single Page Application (SPA)‬‭: Updates only parts‬‭of the page, so no full page‬
‭reload is needed.‬

‭2. Explain‬‭ng-app‬‭,‬‭ng-model‬‭,‬‭ng-bind‬‭directive‬
‭3. Explain Two-way Binding in AngularJS‬

‭ wo-way data binding‬‭means that the data between the‬‭model (JavaScript variables) and the‬
T
‭view (HTML) is always in sync. When one changes, the other updates automatically.‬

‭How It Works:‬

‭●‬ M ‭ odel to View‬‭: When the model (data) changes, the‬‭view (what the user sees)‬
‭updates.‬
‭●‬ ‭View to Model‬‭: When the user updates the view (like‬‭typing in a textbox), the model‬
‭automatically updates.‬

‭Benefits:‬

‭‬ S
● ‭ aves time: No need to write extra code to update both the view and the model.‬
‭●‬ ‭Real-time updates: The app feels more interactive and responsive.‬

‭In short,‬‭two-way binding‬‭keeps the user interface‬‭and data in sync automatically!‬

‭4. Explain‬‭ng-switch‬‭directive with an example‬

‭ he‬‭
T ng-switch‬‭directive is used to conditionally display‬‭elements based on a value or‬
‭expression. It works like a switch-case statement in programming, where different views are‬
‭shown depending on the value.‬

‭How It Works:‬

ng-switch‬
‭●‬ ‭You specify the expression to evaluate using‬‭ ‭.‬
 ng-switch-when‬‭to define what to display for each possible value.‬
‭●‬ ‭Then use‬‭

‭Explanation:‬

‭●‬ ‭
ng-switch="color"‬ color‬‭variable.‬
‭: The switch is based on the‬‭
‭●‬ ‭
ng-switch-when="red"‬ color‬‭is‬‭
‭: Displays "You selected Red!"‬‭if‬‭ red‬
‭.‬
‭●‬ ‭
ng-switch-default‬
‭: This shows if no matching value‬‭is found.‬

color='red'‬
‭In this example, since‬‭ ‭, the message "You‬‭selected Red!" will be displayed.‬

‭Benefits:‬

‭‬ E
● ‭ asily manage multiple conditional views.‬
‭●‬ ‭Makes the code cleaner and more readable when dealing with multiple conditions‬
‭6. Explain Scope Hierarchy and write short notes on SPA‬

‭Scope Hierarchy:‬

‭‬ A
● ‭ ngularJS uses a hierarchical structure of scopes.‬
‭●‬ ‭Each controller has its own scope, and child controllers inherit the parent controller's‬
‭scope.‬
‭●‬ ‭$digest cycle: Angular checks for any changes to variables.‬
‭●‬ ‭$apply phase: Invokes changes to the scope model.‬

‭7. Explain SPA‬

‭Short Notes on SPA (Single Page Application)‬

‭ ingle Page Application (SPA)‬‭is a web application that loads a single HTML page and‬
S
‭dynamically updates content as the user interacts, without reloading the entire page.‬

‭Key Points:‬

‭1.‬ ‭No Full Page Reload‬‭:‬

‭○‬ ‭Only parts of the page are updated, leading to faster and smoother user‬
‭experiences.‬
‭2.‬ ‭Improved User Experience‬‭:‬
‭○‬ ‭SPAs feel more like desktop applications because they don’t need to reload the‬
‭entire page.‬
‭3.‬ ‭Examples‬‭:‬
‭○‬ ‭Popular SPAs include Gmail, Google Maps, and Facebook.‬
‭4.‬ ‭AngularJS in SPAs‬‭:‬
‭○‬ ‭AngularJS is commonly used to build SPAs because of its powerful‬
‭data-binding and routing features, which help in updating views without a full‬
‭page refresh.‬

‭8. Write a Program to create custom directives in AngularJS‬

‭10‬‭.‬‭Difference between AngularJS and JavaScript‬

‭9. Explain‬‭ng-if‬‭,‬‭ng-show‬‭, and‬‭ng-hide‬‭in AngularJS‬
‭11. Explain MVC Architecture‬

‭MVC Architecture‬

‭ VC (Model-View-Controller)‬‭is a design pattern used‬‭to separate an application into three‬

M
‭main components: Model, View, and Controller. This separation helps organize code and‬
‭makes it easier to manage and scale applications.‬

‭1. Model:‬

‭‬ R
● ‭ epresents the‬‭data‬‭and the business logic of the‬‭application.‬
‭●‬ ‭Responsible for retrieving, storing, and processing data (like from a database).‬
‭●‬ ‭Notifies the View when data changes.‬

‭Example‬‭: In a shopping app, the Model would manage‬‭products, prices, and inventory.‬

‭2. View:‬

‭‬ T
● ‭ he‬‭user interface‬‭(UI) of the application.‬
‭●‬ ‭Displays data from the Model to the user and sends user inputs back to the‬
‭Controller.‬
‭●‬ ‭Updates automatically when the Model changes.‬

‭Example‬‭: The View would show the list of products,‬‭shopping cart, and checkout forms.‬

‭3. Controller:‬

‭‬ A
● ‭ cts as the‬‭intermediary‬‭between the Model and the‬‭View.‬
‭●‬ ‭Handles user inputs (like button clicks) and updates the Model or View accordingly.‬
‭●‬ ‭Contains the logic for processing data and deciding what to display.‬

‭ xample‬‭: The Controller would handle actions like adding a product to the cart or‬
E
‭processing payments.‬

‭How It Works:‬

‭ .‬
1 ‭ he user interacts with the View (e.g., clicks a button).‬
T
‭2.‬ ‭The Controller receives the input, processes it, and updates the Model.‬
‭3.‬ ‭The Model changes (if needed) and notifies the View.‬
‭4.‬ ‭The View updates to reflect any changes in the Model.‬

‭Benefits of MVC:‬

‭●‬ S
‭ eparation of Concerns‬‭: Keeps data, UI, and logic‬‭separate, making the code‬
‭cleaner and more maintainable.‬
 ‭‬ R
● ‭ eusability‬‭: Components can be reused across different parts of the application.‬
‭●‬ ‭Testability‬‭: Easier to test each component individually.‬

1‭ 2.‬‭Write an AngularJS script to display a list of games stored in an array on click of a‬

‭button using‬‭ng-click‬‭. Demonstrate‬‭ng-init‬‭,‬‭ng-bind‬‭directive‬

‭HTML Structure‬‭:‬

‭●‬ ‭Defines a basic HTML document with AngularJS.‬

‭Script Tag‬‭:‬

‭●‬ ‭Loads AngularJS from a CDN.‬

‭ng-init‬‭:‬

‭●‬ ‭Initializes an array of games (‬‭

games‬ Football‬
‭) with three items:‬‭ Basketball‬
‭,‬‭ ‭,‬
Tennis‬
‭and‬‭ ‭.‬

‭Button‬‭:‬

showGames‬‭to‬‭
‭●‬ ‭Displays a button that, when clicked, sets the variable‬‭ true‬
‭.‬

‭Conditional List‬‭:‬

ng-if‬‭to show a list (‬‭

‭●‬ ‭Uses‬‭ <ul>‬ showGames‬‭is‬‭
‭) of games only if‬‭ true‬
‭.‬
<li>‬‭elements are generated with‬‭
‭●‬ ‭The‬‭ ng-repeat‬
‭, creating‬‭a list item for each‬
games‬‭array.‬
‭game in the‬‭
‭13. Using AngularJS display the 10 student details in Table format‬

‭14. Explain the life cycle of AngularJS‬

 ‭1.‬ ‭Bootstrap Phase‬‭:‬
‭○‬ ‭This is the initial stage where AngularJS initializes the application.‬
‭○‬ ‭The‬‭ ng-app‬‭directive is located, and the module is loaded.‬
‭○‬ ‭Dependency injection sets up services and controllers.‬
‭2.‬ ‭Compilation Phase‬‭:‬
‭○‬ ‭The HTML DOM is scanned for AngularJS directives (‬‭ ng-model‬ ‭,‬
ng-repeat‬
‭ ‭, etc.).‬
‭○‬ D ‭ irectives are compiled, and data bindings are linked to the scope (the‬
‭model).‬
‭○‬ ‭The template (view) is ready with dynamic content.‬
‭3.‬ ‭Runtime Phase‬‭:‬
‭○‬ ‭Once compiled, AngularJS enters the runtime phase.‬
‭○‬ ‭Any changes in the model (scope) trigger updates to the view (DOM) via‬
‭two-way data binding.‬
‭○‬ ‭The digest cycle runs to check for changes and update the UI accordingly.‬

‭These phases together allow AngularJS to manage dynamic applications.‬