- 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
Instantiate a new Angular module called blog
that takes ui.router
as a dependency.
angular
.module("blog", ["ui.router"])
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.
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.
<!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>
<!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>
<!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>
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
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.
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
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!")
})
})
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");
})
})
})