Week 08

Instructions

Fork this repo.

Clone your fork.
Fill in your answers by writing the appropriate area, or placing an 'x' in the square brackets for multiple-choice questions.
Add/Commit/Push your changes to Github.
Open a pull request.

Question 1

Instantiate a new Angular module called BlogPost that takes ui.router as a dependency. Use Angular code style conventions.

Your answer:

(function(){
  angular
  .module("BlogPost", [
    "ui.router"
  ])
})

Question 2

Given a custom directive whose link function contains the line:

scope.status = "Click";

Which one of the following buttons would not be displayed?

[ ] A: <button data-ng-if="status">Click</button>
[ ] B: <button data-ng-show="status">Click</button>
[ ] C: <button data-ng-hide="status">Click</button>
[ x] D: <button>{{status}}</button>

Question 3

One button below has an ng-click attribute; the other has data-ng-click instead. What difference does it make?

<button ng-click="create()">Click</button>
<button data-ng-click="create()">Click</button>

Your answer: data just makes it validate

...

Question 4

Which of the following demonstrates the best usage of ng-app? Explain your answer. A - Your answer: put it at the highest level of your app, to instantiate your app and every module and dependency attached to it.

...

A:

<!DOCTYPE html>
<html data-ng-app="myapp">
  <head>
    <title>My app</title>
  </head>
  <body>
    <h1><a data-ui-sref="index">My App</a></h1>
    <div></div>
  </body>
</html>

B:

<!DOCTYPE html>
<html>
  <head data-ng-app="myapp">
    <title>My app</title>
  </head>
  <body>
    <h1><a data-ui-sref="index">My App</a></h1>
    <div></div>
  </body>
</html>

C:

<!DOCTYPE html>
<html>
  <head>
    <title>My app</title>
  </head>
  <body>
    <h1><a data-ui-sref="index">My App</a></h1>
    <div data-ng-app="myapp"></div>
  </body>
</html>

Question 5

Imagine an app in which a change to the view updates the model without a page refresh, and a change to the model updates the view without a page refresh.

Which one of the following concepts does this best illustrate?

[ ] A: Modularity
[ ] B: MVC
[ x] C: Two-way data-binding
[ ] D: Separation of concerns

Question 6

What is an IIFE, and why might you use it?

Your answer: Immediately Invoked Function Expression to protect your variables from global scope, and as a way to initialize.

...

Question 7

What is the ui-sref directive, and how is it used?

Your answer: comes form ui.router ui-sref="index" would load the index state in the specified container.

...

Question 8

One of the lines of code in the following snippet will throw an error. Which one is it, and why?

Your answer: the whole if statement

...

/*1*/ "use strict";
/*2*/ var max = 100;
/*3*/ for(i = 1; i < max; i++){
/*4*/   if(i % 15 == 0) console.log("FizzBuzz");
/*5*/   else if(i % 3 == 0) console.log("Fizz");
/*6*/   else if(i % 5 == 0) console.log("Buzz");
/*7*/   else console.log(i);
/*8*/ }

Question 9

Custom directives can be embedded in HTML four different ways. Demonstrate two of these four with a directive called my-directive. (Hint: "MACE")