The checkpoint-06 from justin-shin

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

Part I: Angular

Question 1

Instantiate a new Angular module called blog that takes ui.router as a dependency.

angular
  .module("blog",["ui.router"])

Question 2

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

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

no difference except that ng-click is not html-validator compliant.  For all intents and purposes they are the same

Question 3

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

A - data-ng-app designates the entry point of the application, so we would want to place it where there is the widest domain for directive, which is the entire html tag.

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 4

Imagine an app in which a change to the view updates the model without a page refresh. Similarly, 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 5

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

it binds an anchor tag to a state. Depending on the value given, it will update the "href" of the anchor tag with the appropriate URL. when clicked it will shift states without refreshing the page.

Part II: APIs & AJAX

Question 6

Below is an index controller action that maps to a Post model in a Rails application. How would you modify it so that it can respond with a list of posts in either HTML or JSON form, depending on the incoming HTTP request?

class PostsController < ApplicationController
  def index
    @posts = Post.all
  end
end

class PostsController < ApplicationController
  def index
    @posts = Post.all

    respond_to do |format|
      format.html { render :index }
      format.json { render json: @posts }
    end
  end
end

Question 7

Let's say the Posts in the previous question are available at http://localhost:3000/posts. In a front-end application, how could you do the following using AJAX?

Retrieve all the posts in JSON form
If Step 1 is successful, print the resulting JSON to the console
If Step 1 is unsuccessful, print an error message to the console

let url = "http://localhost:3000/posts"
$.getJSON(url)
  .done( (response) => {
    console.log(response)
  })
  .fail( (response, textStatus, message)=> {
    console.log(`Sorry, we had an issue retrieving the data from ${url} (${message ? message : ""}).  Please try again.`)
  })

Question 8

Using the same front-end application and Rails API from the previous question, how would you use AJAX to create a Post through the API? You can assume the following...

The API is RESTful
The PostsController contains a strong params method that is used when creating an instance of the Post model
Each Post has title and body attributes, both of which are strings

If the Post creation is successful, the new Post should be printed to the browser console. Otherwise, an error message should be printed to the console.

$(document).ready(()=>{
  let url = "http://localhost:3000/posts"
  $(".post").on("click", () => {
    $.ajax({
      type: 'POST',
      data: {
        post: {
          title: "Title Here",
          body: "Content Blah blah Lorem Ipsum, big beautiful wall",
        }
      },
      dataType: 'json',
      url: url
    }).done((response) =>  {
      console.log(response);
    }).fail((response, textStatus, message)=> {
      console.log(`Sorry, we had an issue posting the data to ${url} (${message ? message : ""}).  Please try again.`)
    })
  })
})

justin-shin / checkpoint-06 Goto Github PK

checkpoint-06's Introduction

Instructions

Part I: Angular

Question 1

Question 2

Question 3

A

B

C

Question 4

Question 5

Part II: APIs & AJAX

Question 6

Question 7

Question 8

checkpoint-06's People

Contributors

Watchers

Recommend Projects

Recommend Topics

Recommend Org

Jobs