rmilford / week-08

[angular, spa, javascript, js]

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Week 08

Instructions

  1. 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:

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

Question 2

Given a custom directive whose link function contains the line:

<input type="text" ng-model="scope.status" placeholder="name" />

Which one of the following buttons would not be displayed?

[x] A: <button data-ng-if="status">Click</button>
[ ] B: <button data-ng-show="status">Click</button>
[ ] C: <button data-ng-hide="status">Click</button>
[ ] 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:

The data-ng-click can be verified in an html validator.

Question 4

Which of the following demonstrates the best usage of ng-app? Explain your answer.

Your answer:

The first one because it is in the html.

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
[ ] C: Two-way data-binding
[x] D: Separation of concerns

Question 6

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

Your answer:

it is a way to enclose a function in a wrapper so there are no global variables polluting the global space.

Question 7

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

Your answer:

it does the same thing as $state.go and navigates to the url link associated with the state.

Question 8

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

Your answer:

use strict, there is a global variable, so it throws an error.

/*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")

Your answer:

<input ng-model="foo">
<person>{{name}}</person>

Question 10

Of the three following options, which is the most "correct" way of organizing the files that make up an Angular app? Why is this option considered "better" than the other two?

Your answer:

option A

A:

/js
  app.js
  controllers/
    artist_index.js
    artist_show.js
  directives/
    artist_form.js
    song_form.js
  views/
    artist_index.html
    artist_show.html
    artist_form.html
    song_form.html

B:

/js
  app.js
  artists/
    index.controller.js
    index.html
    show.controller.js
    show.html
    form.directive.js
    form.html
  songs/
    form.html
    form.directive.html

C:

/js
  app.js
  controllers/
    artists_controller.js
  directives/
    songs_directive.js
/html
  artists/
    index.html
    show.html
    form.html
  songs/
    form.html

About

[angular, spa, javascript, js]