panpsychism/unit_03/w08d04/homework

WDI-PANTHALASSA

---

Title: Angular Techniques I
Type: Homework
Duration: One day
Creator: Thom Page
Course: WDIr-Panthalassa
Prerequisites: Basic Angular, $http service
Competencies: Events, Include, Custom Directives

---

ANGULAR TECHNIQUES I

Exercises on various Angular techniques

• $http
• Events: $scope.$broadcast
• Events: $scope.$emit
• Events: $scope.$on
• ng-include (templating)
• Custom Directives (templating)

Starter Code

You will receive a simple backend and an incomplete Angular front-end. You will need to complete the Angular front-end. The back-end comes with an index route that serves JSON data from a users model. This data is just some made up stuff about Ryan Gosling and Hypatia of Alexandria.

Seed your database by going to /users/seed, and verifying the JSON in the index route, /users. Go back to the root page.

Your incomplete Angular front-end should look like this on the landing page:

###1. $scope.$broadcast, $scope.$on

You have two controllers separate from each other, RyanController and HypatiaController. They are marked as such in the html and the javascript files. In the html, each of these contains the same child, InfoController.

The format looks like this:

* Ryan
*	-child
*		-display data
*	-end child
* end Ryan


* Hypatia
*	-child
*		- display data
*	-end child
* end Hypatia

Make it so that when you click the 'Get Ryan' button, Ryan's data is retrieved from the database.

• use the $http service for ajax requests

Show the data on the page within the child controller, infoController: $broadcast the data to the child from the parent, and $on receipt the child should display that data.

• use $scope for broadcasting and receiving scoped data.

NOTE: In the ajax results, Ryan should be results.data[0] and Hypatia should be results.data[1], but double check.

When you are done the page should look like this after you click the 'Get Ryan' button:

---

** Commit your work.**
The commit message should read:
"Commit 1: Got Ryan".

---

Next, do the same for Hypatia. The result should look like this:

---

** Commit your work.**
The commit message should read:
"Commit 2: Got Hypatia".

---

###2. $scope.$emit, $scope.$on

We have sent information from the parent to the child, now we will send information from the child to the parent.

Put a button with the text 'Send Message' inside Ryan's 'Info Controller' div. The button will send a message from the Info Controller back up to the Ryan Controller parent controller. It will run a function in the Info Controller (the child) that will $emit a message, any message, back up to the parent (Ryan), and $on receipt will display inside the parent.

Do the same with Hypatia.

ng-if : use ng-if to hide the button until the child has information from the Get Ryan and Get Hypatia buttons.

Result when both 'Get Ryan' and 'Get Hypatia' are pressed (they each have a 'Send Message' button):

Result when both of the 'Send Message' buttons are pressed (each parent receives the same message because they share a child controller):

Make it so that both Ryan and Hypatia get the message.

---

** Commit your work.**
The commit message should read:
"Commit 3: Ryan and Hypatia get the message".

---

###3. ng-include

In our index.html, we have two sets of references to infoControllers that contain the same information. Let's re-arrange our code to make it DRYer. Let's make the Info Controller divs into a single template and put it in an info_controller.html file, and use ng-include to load the template in our index.html. Our template will work perfectly well with directives, references to controllers, etc.

• Make a partials folder within the public folder
• Make an info_controller.html file inside partials
• Put an entire InfoController div and everything in it into info_controller.html
• Use ng-include in the index.html to load the template into both the Ryan and Hypatia divs, replacing the old info controller divs.

The page should look and behave the same as before, the difference is that our code has been refactored.

---

** Commit your work.**
The commit message should read:
"Commit 4: Used ng-include to load templates".

---

###4. Custom Directives

We are going to make a simple directive that displays a form. This is not a fancy directive, it is just an example of a custom directive to get you used to the syntax. After this, there is a much more abstract and interesting use of custom directives.

The form will display inside each of the divs that reference the InfoController (the children of Ryan and Hypatia).

• In your info_controller.html template (or just in your InfoController html if you did not do ng-include), put a custom tag called formsender at the bottom and inside of the info controller div.

	<formsender></formsender>

This tag is where your custom directive will be invoked.

• In app.js make an app.directive named formsender. Your directive should return an object with the properties:
  • restrict, just set it to E
  • templateUrl, path to a form template that you should put in the partials folder
  • controller, set this to a separate formController that you will make soon
  • controllerAs, an alias for your formController (you could use the word 'form')

---

** Commit your work.**
The commit message should read:
"Commit 5: Added app.directive".

---

The form should allow you to edit the information from the InfoController. The form should be pre-populated with Ryan's or Hypatia's name, gender, etc, from the InfoController.

• In app.js make a separate controller called formController and give it $scope and $http. You will want to be able to access the data from the parent: the data for Ryan and/or Hypatia resides inside the InfoController where the $http request took place. For this, you can use $scope.$parent.controllerAsName.property, where controllerAs is the alias of the controller you are referencing. You can set a variable like so: var formdata = $scope.$parent.info.information.

• Make the form template and get it so that it shows the pre-populated data. You can use ng-model to show the data, and this same data can be passed to the backend upon ng-submit.

It should look like this:

---

** Commit your work.**
The commit message should read:
"Commit 6: Custom directive will display with populated data".

---

• Upon submit, the form should send a PUT request to the server. The route already exists in the server, in usersController, you just have to get data to it (and sent back for verification). To get the id for the route, you can take it from the formdata.

You should be able to change Ryan and Hypatia to whatever you like:

---

** Commit your work.**
The commit message should read:
"Commit 7: Custom directive can update data".

---

NOTES ON CUSTOM DIRECTIVE SYNTAX

You don't have to put the controller constructor inside the directive like this:

app.directive('myDirective', function() {
	controller: the entire controller written
	              out here inside the directive
	              lots of code
	              doing things
	            end of controller constructor
});

You can decouple the directive and its controller like this:

app.controller('formController', [function() {
	the controller written
	here like we do with other controllers
	doing things
]);

app.directive('myDirective', function() {
	controller: 'formController'
});

BONUS

###4. Advanced Custom Directives

Separately from this, go through the following tutorial for creating draggable DOM elements with Angular custom directives: https://blog.parkji.co.uk/2013/08/11/native-drag-and-drop-in-angularjs.html

---

** Commit your work.**
The commit message should read:
"Commit 8: Completed draggable tutorial".

---

More information on custom directives: http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-i-the-fundamentals