Giter Club home page Giter Club logo

checkpoint-06's Introduction

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

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>
data-ng-click is able to be validated by an html validator.

Question 3

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

A - ng-app should go in the location you'd like your angular app to be recognized to start. since <html> is the first tag, it makes sense to put it there as a best practice but also to support other coders being able to find 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 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?

ui-sref is used in angular instead of an href to show a link's path to a state.  

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
    respond_to do |format|
      format.html
      format.json { render json: @posts }
    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?
1. Retrieve all the posts in JSON form
2. If Step 1 is successful, print the resulting JSON to the console
3. If Step 1 is unsuccessful, print an error message to the console

$(document).ready(()=>{
    var url = "http://localhost:3000/posts.json"
      $.ajax({
        url: url,
        type: "get",
        dataType: "json"
      }).done(() => {
        console.log("@posts")
      }).fail(() => {
        console.log("Ajax request fails!")
      })
    })

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(()=>{
$(".post").on("click", () => {
   $.ajax({
     type: 'POST',
     data: {
       post: {
         title: "Hello World",
         body: "Hello world, I hope all is well.",
       }
     },
     dataType: 'json',
     url: "/posts"
   }).done((response) =>  {
     console.log(response);
   }).fail((response) => {
     console.log("AJAX POST failed");
   })
 })
})

checkpoint-06's People

Contributors

amaseda avatar daniellefricke avatar superbuggy avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.