Let the build begin

Last night after some tinkering with the Roots.IO and banging my head against the wall I realized that I should probably re-read the instructions on how to set it up. If you are getting 404 on all asset directory files (js, css), then check to see if you have all the necessary plugins also required for the roots.io theme to work.

Starting the WordPress App Theme

The first thing I needed to get the WordPress App theme ready for our work is to make sure that our theme can connect to the WP-API. In order to do that there has to be some localized variables defined for the URL and a nonce object for security reasons.

To keep things separated from Roots.IO just in case you wanted to use another theme, I created a new directory to do all the enqueue’ing of scripts and connected it via the functions file. In that new file (lib/wp-app-theme.php) I put in a general base JS that I may use for jQuery or other scripts I want to keep out of AngularJS code, and a localized script. You can see the code on GitHub.

Once i had that in place the next thing I needed to do was add in the core AngularJS code, which I am pulling from Google’s CDN. When dealing with AngularJS you also need to include their routing and resource as well since they are injectables. They are not required and you can use other routing libraries  (which we will), but I just wanted to get a base set up that we can work from.

The last piece of the first stage of the whole process was to create our Angular APP main file. In large builds I like to keep this separate, and just have the app definition and run function in a single file, but since we only have a few routes / pages that we are going to be using, I thought I would condense and put the route definitions in the same file (angular-app-routes.js). In this file you will see what starts our Angular journey.

This is our app definition. I have defined it to wpApp (as both an object and as the angular module). I have injected the ngRoute and ngResource since we have enqueued them as well, and we will use those later.

AngularJS Basics

I am not going to spend too much going over AngularJS, and hope that any small things I explain will help you understand the fundamentals. If you want to learn more about AngularJS specifically and want to “AngularJS 101” please contact me directly and I would be happy to go over things with you and get you started.

That being said, there are some things I want to clear up right now. Consider this a AngularJS Glossary

  • Directives  – These are HTML attributes which we can define, or use the built in ones (or even grab code that adds new ones). Some of the ones you will see a lot are:
    • ng-click – This runs a function on click in Angular JS, and is similar to the jQuery on(‘click’) functionality
    • ng-repeat – This is a loop. Defined by “singleObj in array”. An example might be “post in posts” where you loop though. This is similar to a jQuery or PHP for each loop.
  • Variables – There are many awesome variables in Angularjs, but there are a few you need to know
    • $scope – This object is used a lot and usually defined uniquely per controller. For example if you define $scope.posts in the user controller, it will not be defined in another controller without redefining.
      • There are exceptions, you can have parent controllers or root scope, but I will try not to use that much
    • $rootScope – This is just like $scope except it is a globally defined automatically. Will be useful for currently logged in user and authentication across the site.
    • Injectables – I will me mentioning injectables a lot, and this can be a few things. However in a nutshell some things are defined as being bale to “inject” themselves into controllers.
      • Example: Factories are a way to create easy RESTful points in your app, once defined these become injectable (We will have Users and Guides to start)
    • Factories – Factories or Service Factories are a way to easily create an RESTful endpoint. By defining out the factory and pointing it to a URL path, you have the ability to easily deal with that route.
      • Example: Factory “Users” will be pointing to /wp-json/users, once defined and injected into a controller we will be able to do Users.save(); Users.get(); Users.query(); which all run CRUD commands.

Starting the WordPress App Plugin

The WordPress App plugin was a much easier setup, just like every other WordPress plugin. Step 1 is to register the new ‘Style Guides’ Custom Post type. Eventually I will add taxonomies and any new endpoints for the WP-API into this plugin.

 

GitHub Repo

Don’t forget the GiHub repos where you can collaborate on the project is ready.

There are 3 comments

Comments are closed.