Welcome to the latest installment of the WP Collab App!

We are now getting hands on and creating a controller and view, and tying all functionality together.

I figured the place to start is Signup for new users to register

Signup Controller Dependencies / Injectables

Before creating the actual controller and theme for Signup we need to figure out what routes we will need and create factories for it.

User Factory

Creating a factory is easy and will make our life way easier in the long run. I created a JS file for all factories (wp-app-factories.js) which will house all the factories moving forward. Factories create an injectable variable which we can use. In the “User” factory case, we will be able to use User.save, User.get, User.delete with the WP-API. Each factory is associated to an API route, so lets look at our Users factory:

We are setting the $resource for the factory to a the API route for users, I am also passing in a variable “:id” so we can pass a specific ID when doing user updates or deletion. Pretty nifty, eh?

Also note the nonce, there are few different ways to do authorization with WP-API, check out the authorization docs. I chose this method for ease of use in showing everyone.

If you are not sure where APIdata came from, it is a localized script I included in the wp-app-theme.php file in the lib directory. 

Signup Route & Template Setup

Before we tell AngularJS which template to point to, first lets create the template. Template files in AngularJS are in easy to code HTML (yay back to basics). Yes there is some tricky stuff in it including {{}} usage, but overall the template files are 100% html. I started by just creating a HTML file called signup.html and decided to put all my AngularJS templates into a subdirectory of the theme called wp-app-templates. For just starting out, put a simple “hello” in and the goal will be to spit that out.

Template – When it comes to the view, we need to tell AngularJS which template to load into our main <ng-view> and routes is how you do it. Again, I created a separate JS file to handle all our routes (wp-app-routes.js). The route definition is based on the base app route, which in our case will be our main URL, so for signup I simply made it ‘/signup/’. I now use another localized variable for the theme directory to define the path to the signup.html file.

Controller – The route also defines which controller will be loaded. Go ahead and name it something appropriate. Just like the template, you will need SOMETHING there to make it all work, and since it is JavaScript, I like to console.log something like ‘console.log(‘hello’);’ just so I can test in 1 refresh if both my template and controller are working properly. Depending on your app you may choose to have 1 JS file for all your controllers, but for ease of reading and coding, I am going to separate them out. You can find the controller in /assets/js/wp-app/controllers/wp-app-signup.js.

If you are going to try to add a new route and template, that is the easiest way to do it. Template first with a simple html tag for verification, and then the route setup.

We will get into more complex route parameters later.

Signup Template

Now it is time to make some magic happen. Just like any other build you have the choice of building out the functionality of the page first (in the controller) then the UI, or visa-versa. I usually opt for UI first, then tie in functionality. However, it helps to know what you are doing to make your life easier (thinking back to my days of coding HTML/CSS before PHP files for WordPress themes..).

The Signup template is simple, we want to have a form that users can fill out to create a user account in WordPress.

Since we are using Twitter Bootstrap across the site, I already had a ‘container’ and ‘row’ wrapping the content, so I went straight into column building. The form is a Bootstrap form and I only needed a few fields:

  • Username
  • First Name & Last Name
  • Email
  • Password

ng-model vs. name on form fields

With AngularJS you don’t need to have name attributes on form fields. AngularJS takes care of all that logic for you. All you need to do is set ng-model and have it equal something in the $scope object and it will make sure that the data is passed into the controller without dealing with any type of jQuery serialization or POST handling. This will become clearer once we look at the controller.

I setup the whole new user form to map out to $scope.newUser object, that way I could easily call on that when I wanted to save the data. It is also important to keep naming conventions identical to what WP-API needs. For example doing use ‘firstName’ when the API is expecting ‘first_name’ as the parameter.

ng-submit is like .on(‘submit’)

You will see the ng-submit in the form tag. This defines which AngularJS function should run when a user clicks submit. Similar to doing a jQuery.on(‘submit’) function, this takes care of everything you need. Since we are using a $scope variable we don’t need to grab any content from the form itself since it will already be saved into the variable for us.

Signup Controller

Now to bring it all together. Lets go into the controller file and check out what is there.

$rootScope, $scope, Users

These are injectables which I have talked about before. Users it he factory and $rootScope and $scope are both for setting objects/variables for the controller (or $rootScope for all controllers).

$scope.newUser

I started the controller off with defining out $scope.newUser as an empty object, just so there is no undefined errors.

newUserSubmit();

The next thing I did was setup the function I have tied into the ng-submit which is ‘newUserSubmit’. As you can see, just like any other $scope object we are saving this function as a $scope object. This function first console logs the newUser object.. which can be removed, but good for testing if you are going to add any fields or want to confirm the fields that are there.

Now its time to save our new user.

This piece of code is a handy thanks to the magic of factories. AngularJS knows that the .save() needs to POST to the url we setup in the factory. We are passing along $scope.newUser as the data object to go along with it. We then have a response function. By default the WP-API responds with a new user object, so we check if the ID exists (we can do error handling later) and if so empty out the $scope.newUser object (which will clear the form). I finalized the whole thing by adding in a confirmation which in the UI will make the form disappear and show just a welcome message. I did this using ng-show

 

That is it! We have our first real AngularJS view, controller, and functionality hooked up. With some experience this should take you at most 30 minutes, pretty quick for the amount of functionality built into this 1 page.

 

There are 9 comments Join the conversation

Comments are closed.