panpsychism/angular_resources/to_be_replaced/angular_potpourri

ADVANCED ANGULAR POTPOURRI

exercises on various Angular techniques

Starter Code

You will receive a simple backend with an index route that serves Ryan Gosling and Hypatia of Alexandria (from our Wednesday dating app). Seed your database by going to /users/seed, and verifying the JSON in the index route, /users.

NOTE This app doesn't do much, but serves as a platform for you to practise various Angular helpers and techniques: ######various

• $http
• $scope
• events
  • $emit, $broadcast, $on
• ng-include (templating)
• custom directives (templating)

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

index.html
You have two controllers separate from each other, RyanController and HypatiaController. Each of them contains the same child controller InfoController. The child controller will display the information associated with both Ryan and Hypatia.

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 getInfo() button in either controller, the data is retrieved from the database and then shown on the page from within the child. The data must be broadcast to the child, and on receipt the child should displays that data.

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

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

Next, put a button inside the child that runs a function in the child controller. The function should emit a message back up to the parent, and on receipt display inside the parent (not in the child).

##3. ng-include

Use ng-include to load a template that displays the data inside the child, so that you don't have to write all the curlies each time within each child.

Hint on broadcasting multiple values: You can broadcast an array of separate values.

##4. Custom Directives and $scope.$parent

This is really difficult, so please have a nutritious smoothie before you begin. Deep breaths.

• Make a custom directive that renders a form. In index.html, put the directive inside each of the child controllers. In app.js your directive should have restrict:, templateUrl:, controller:, and controllerAs:.

• The form should be a template in a form.html file that the directive's templateUrl: uses.

• The form should edit the information from the InfoController, so it should be pre-populated with the user's name, gender, etc, from the InfoController.

• Upon submit, the form should send a PUT request to the server. You will need to make a PUT route in the server code (usersController).

• In the controller of the custom directive, you will need to be able to access the ng-model from its parent. For this, you can use $scope.$parent.whateverthemodelis

This process is really difficult, just making an attempt at it is great

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'
});

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

BIG BONUSES

• ADVANCED CUSTOM DIRECTIVES:

Have a look at this tutorial for making a directive for creating draggable DOM elements to get an idea of fancy stuff that directives can do: https://blog.parkji.co.uk/2013/08/11/native-drag-and-drop-in-angularjs.html

• PASSPORT

If you get this far, you should look into using authentication in a single-page app. You will need to serve up an .ejs file as your landing page / single-page.