Home Ask Login Register

Developers Planet

Your answer is one click away!

Christopher300 February 2016

AngularJS: Different Views and Different Controller by Data

Lets assume I want to make a quiz page. I have different question types. I.e. the task is to find the right order, to choose one answer, to choose multiple answers, or to fill some spaces with predefined words and so on. So, I have 5 questions in my data context. 2 of them are multiple-choice, 1 is a right order question and the other 2 are clozes. The main point is: I have no clue how many different question types are in the current quiz. All of them need an own view, an own controller and an own data model, because there is no universal data model that applies for clozes and for right-order-questions at the same time (correct me, if I am wrong).

What is the best way in AngularJS and MVC-pattern in general to do this? Is this even applicable? Does this contradicts the MVC-pattern in general?


Amy Blankenship February 2016

The way we do it is to start with the data. Most of our sections have only one type of question, but several can have two or more types of question. Each question type has a factory that can take the JSON that started out as XML and was run through a conversion process and adds in all the "hooks" each question needs. We have something called a "questionBuilder" that looks at a questionType property on each section and looks in the $injector for questionType + 'Factory'.

Edit: You can think of a builder as like when you order something from Amazon. Amazon has no idea how to make a coffee pot or a can of tennis balls. What it does have is a long list of suppliers that do know how to make these things. So when you order from Amazon, it goes in its list of factories that supply these things, pulls out the one that can make a coffee pot, and asks the factory for a coffee pot. It then sticks it in a box and ships it to you.

Angular is like the UPS. It doesn't know or care what's in the box. When you get to the View, you pull out the boxes that are the questions you care about at the moment. Your View understands the question type (just like you know how to use that coffee pot, or you can find out).

Conveniently, Angular is also like the list of suppliers (or the $injector is). Anything the $injector knows about, you can pull out in your builder, which is how you can have whatever factories you need without cluttering up your code with a bunch of logic to hard-code the dependencies on particular factories. You're looking in the $injector for the factory that matches the question type specified in the data.

If there is more than one question type in the section, we put down "composite" for the ques

Jason Goemaat February 2016

So you have 5 questions, I'd do an ng-repeat over the questions and ng-switch on each of the views you want.

<div ng-repeat="question in questions" ng-switch="question.questionType">
  <div ng-switch-when="MultipleChoice" ng-controller="MultipleChoiceCtrl">
    ... multiple choice
  <div ng-switch-when="RightOrder" ng-controller="RightOrderCtrl">
    ... right order

Post Status

Asked in February 2016
Viewed 1,546 times
Voted 8
Answered 2 times


Leave an answer

Quote of the day: live life