 Alright, so yeah, my name is Jonathan Brown, I'm a full stack web developer and I have almost three years of professional development experience, almost, that's about it. And today we were talking about getting started with the REST API and AngularJS. I know it's not React, the new hotness and all that stuff, but I still like it, so. First thing we're going to do is go over the folder structure. For anybody who's done Angular 4, I kind of structure the AngularJS structure the same way, where you have a lot of components and shared components and your application folder with your JavaScript and CSS and SAS and things like that all separated nice and neat. And then we're going to show you the WordPress setup because we can't have Angular about WordPress setup. The WordPress setup specifically, we're going to be using 4.9 because I don't think it's like 4.7. Pretty sure, maybe 4.6, the REST API, you have to use a plugin to actually access the REST API on the box. We will not be using a theme. The plugins will be ACF Pro, ACF to REST, and a custom post type manager because I'm lazy and I don't feel like writing a code to register my custom flow types. If you do write the code or use the manager, you need to make sure that you have shown REST set to true or else you can't access the post to the REST. Here is the folder structure. You have your index.html file, which is going to be your file. You can kind of consider that like the header and footer for WordPress. Everything in between the header and footer is going to be your views. You have sidemore and global services and your shared thing. The opposite shared is going to be anything that is used on multiple controllers throughout your application. Then for this particular project, we have articles, home, movies, and shows, which are going to be the different sections of the site. You have a shows list or an individual show. You have your home page, things like that. Common files are going to be your home controller, your home service, and your home view. Notice that I've made the folder name home and then everything after that is like folder name controller, folder name service, folder name view. It makes it easier to navigate through your site and pretty much know where you're at at any given time. It's kind of like the gist of it for the introduction part. Now we're going to actually get into the creative and mainnet file. I'm going to have a code for you guys to see because I don't like seeing slides that are just slides. I'm just like, okay, I guess I'm just going to put what you're saying and hope you got it. That's kind of what you want to see. Angular itself has to be defined in a variable inside of a module file. You can include it in your application and it's not going to work. You've got to tell it like, hey, I'm going to be instantiating you. I need to do some stuff. To do that, you have this app.module.js file and call a variable. I'm calling it app because I'm creative. You give it a namespace essentially. Then you tell it what dependencies that particular Angular installation or instantiation is going to use. Once you have that, that's how you start using Angular. You come in here and where it says ngapp, that's kind of a declaration for Angular to recognize that this is the essential Angular module you're using. Then that namespace you gave that variable is what you're going to be using. Once you do that, you start using Angular. You can use all this cool little built-in functions and things like that. Are you using any plugins to help you develop Angular? Not right now. I was going to use Gulp as a task manager, but I didn't have time to do that. I kind of built this out halfway yesterday. Yeah, there's that. We're including Angular.bin, Angular route, Angular resource, Angular sanitize. I downloaded those because the Wi-Fi here was kind of spotty yesterday and my application completely broke when I couldn't load Angular. It doesn't have Angular. Normally, CDN links will work just as well. I'll tell Leon I said that because he's all about downloading all your stuff to make sure that you have access to it. I didn't give him time because CDN links might go down but whatever, it's not going to work properly. Let me move back. This is kind of what it describes, the index.html file. We declared ngapp on the top and then we included the dependencies for the Angular file, all the little libraries that Angular has with it. Then we included our controller files and bootstrap, I know it's not foundation and it's not cool but Angular runs one bootstrap. If you use Angular 4, it actually comes with bootstrap by default. What's next? Whatever you name, you don't have to use app as your variable name or your name space. I was not creative in the naming convention so I was just doing something really basic. A lot of the tutorials you'll see will call it, if you're looking at scotch, I think they call their scotch app or something like that. Whatever you want, whatever's comfortable for you. I do things a little bit differently. I would like to know what routes I have before I start actually coding stuff so that I can build my controller and things like that more efficiently. What routes are basically how your application handles URLs. By default, it's not like WordPress where you just build a page and it generates the URL for you. You kind of have to tell it what to expect and what to do whenever it hits that route. You can load a template which is kind of like a string representation of the output you want to output whenever it hits that URL. I don't like doing it though because I don't like doing markup in strings. It's very disgusting to me personally. Then you tell it what controller to use. So the controller, we're going to get to that a little bit. For a little warning, when you write URLs, I don't know about you guys but I have your relative URLs on PHP where you just do like forward slash the thing, whatever post you're trying to go to. That doesn't work for the thing. It doesn't like that. You have to do the hash bin symbol which is this pound exclamation point and then you can do your relative URL from there because the pound exclamation point kind of tells it where it's going to start the URL from. And that's called hash bin. Sounds cool. Controllers, that power. This is the stuff that actually powers your Angular app. And by power, I mean it's, I'll explain in just a minute. They're the heavy lifters. Angular is considered an NB whatever application. So it's normally it's a Model B controller. You go through and you have your code split up and all those three different things. With Angular though, it's a little weird. From my perspective, the model in this case is kind of like the controller. It does a little bit of both. So the controller is going to be handling the data as opposed to it being handled by the model. And the controller would just pass it back and forth to the views. This kind of goes and gets the data and updates the data and sets the data and then passes it back to and from the view. With this specific thing being related to WordPress and the REST API, it's going to go, like I said, get the data from the REST API. If you didn't modify it after you get it, you can go through it and do things like that. And it's going to pass it to the view. Let me show you. I think the next one. Yeah, scope. So scope. Has anybody here worked with .NET before? Yes? Okay. Do you know what the view bag is? Now, okay, so it's basically a bag where you just stuff everything you care that the view is going to use and the view can access it. So that's essentially what the view bag is. Scope does the same thing. It's literally just a bag where you stuff data into it. And whatever data you stuff in there, you have access to in front of the view. So I have a little example for this. It is super basic. Okay. I think it's... I don't know. I'm going to do this one. I don't know. It was the right one. That's all both. All right. So the scope right here, that is essentially the bag. And then you just say the scope.message. And you can put in whatever you want in that message. And then in the home view, you just say, can I have the message from the scope? Fair enough. And there you go. That's essentially what scope is. Just one large bag that you're going to stuff a ton of things into. One thing is if you define the scope, come on. Well, let's say define. But if you use scope among controller, another controller doesn't have access to that scope variable. So they're separate from each instantiation of the controller. Dependency injection. This is kind of the work force of Angular. So dependency injection sounds super complicated. It's going to be this massive beast, and it's really not. Using the scope variable is actually dependency injection. You inject it into the controller, and the controller has access to all the methods and properties and things like that that it comes with. And then you can obscene the scope situation. You can adjust the right properties to it and do things of that nature. This is a service looking for that just a little bit. I was going to do a slideshow. And I realized I'm glossing over this and making it sound super quick and super simple, but there's a ton of stuff to cover. So services. Services are pretty simple. It's kind of like making sure that your code is dry. If you see something that you're reusing in multiple controllers or multiple functions, you would create a service for it that's tied to the application module. So in this case, the app module. So that you can use that service wherever you want. You can do whatever you want. And then from there, you would inject it into your controller, just like you would the scope variable or a couple of other things we're going to cover. Here's an example of it right here. So app.service, you know, it's a cool service. I have amazing naming conventions. And then you say this.coolstuff is equal to a function, and it logs out and do stuff. You would inject that into this controller right here, and then you would just call that function. And it would do whatever is inside that function. So again, you know, it's keeping your stuff dry. Let's go back to the slideshow. So views. Views, if you've done that, are really any type of MVT framework. They are the Markup that you're going to be using for your application. It's literally just HTML. There's some custom things that Angular does. It actually gets put onto the Markup itself, which I'm going to show you guys in just a little bit as we get to the cool code demo. It can be as big or small as you need it to be. I have a view that is all of, I think, six lines long. And I have another one that's, you know, a little longer, but I don't need a big chunk of code to do it. It's something very small. And personally, I don't have it really needed, something that's been on the entire web page in a view. It's a little tongue here and there. And then you just output a little front end, and the view gets tied to the controller. As I said, views are powered by their respective controllers. You can, I think, have this view that does, like, no custom data. It just outputs some work up. But for the most part, you're going to have something that's tied to a controller. As I showed you earlier, accessing the scope variable. When I first started, I was like, OK, so I'm on the front end. I get under scope dot whatever the variable is going to be. And it took me about 10 minutes to figure out why my variable was not outputting this, because Angular, by default, kind of knows that when you're using a variable on the front end. It's like, OK, this is going to be a scope variable. So I don't need to know that it's in the scope. So just tell me what it is in the scope that you want me to access, and we'll do it. And if you're familiar with handlebars or some other type of template language, you'll see, come here. You just do double-curl the braces around it and it outputs the front end. So looping over an object in the scope. Does anybody hear it on PHP? Yes. Yes, everybody? OK. There we go. So this is kind of the same. Let's say you have a list of items in navigation, for example. And you want to output every single element in this navigation list. There we go. You would do ng-repeat. It's able to have an item, in this case, and have items, so then have items that's declared and your controller, you know, and you fill it up with all the data you want. You would do that on the list item, though, and not on the actual UL. Otherwise, you're going to have a repeating list of ULs and not a repeating list of LIs. So be careful with that. And again, this goes on to work up. Here's a quick example of that. Share. OK, that's right. Put it in the index file because I'm lazy. Yeah, so nav-item, ng-repeat. Nav-item in all nav-items. And then it just goes through and builds out all the things. These properties are built from WordPress access and the REST API. I'll show you guys that in just a couple of minutes once we get to the actual demo and cool code stuff and all that sort of stuff. You can use other properties such as ng-f to check the value of certain things that you're on. ng-f, ng-repeat, ng-app, and ng-init are considered directives, and you can create custom directives to do whatever that you needed to do. You either just do ng and then the directive name. Yeah, this is directives. I'm not going to show you guys how to build one because that's just a little too much for these conversations, but it's there. Filters. We're not talking about Instagram people. This is Angular, OK? We're going to show you guys some cool stuff that Angular does with filters. I don't know if you guys have ever had some issues where you have something, you want to change the display format, and you have to write up some JavaScript function to go through and do it. Angular has a bunch of filters built in by default that you just can use out of the box. Super simple. In this case, post.publishdate. Let's say you have it in one format and you want another. You just type pipe, date, and then you just pass it a format you want. It has some defaults set to it so that you don't have to go through and do it for every single one of them. There's currency, date, limit to, and limit to is kind of like a trim for JavaScript. So if you want to create a custom excerpt and you don't feel like accessing the rest API of the excerpt or somebody didn't fill it in, you can just get the post content and put limit to on it and call it a day. I know I've reached over the Angular part. It's kind of attitude to actually get to this part. It's the important part. It's why everybody's here. Everybody likes accessing the rest API. Right? Just me? So again, so long as you have access to the rest API without the plug-in. If you do use the plug-in, you have to change your URL structure because it does something a little bit different. To access all your routes, which this is incredibly helpful, just go to whatever the WordPress install name is, four-size-30-day-json. And that gives you a list of all your routes that are registered to your WordPress install. And it's not just WordPress routes either. It'll give you your ACF routes. I'll show you all those too. Basically, any API you've pointed in registered to your WordPress install will show up there. So it's kind of like the master map. Let's see. So types. And by types, I mean post types. So let me switch over to this. So this is a wonderful Angular app. It's working. It's a home page. So these are all post types. The pages, media, movies, articles, shows, posts. Those are all post types. And to get those, I'm literally just going to this URL right here and then putting four-size types in it. And it'll give you a list of all the post types in there with some unique data for each one. So that's my URL. You can see each one of these is the post type. You can do descriptions and get some other information from it. So for this particular one, though, I'm just giving the name in the slide. From each one of those. You can see that right here. That's where that navitem.name, navitem.slug. Notice the hash bang right there. If you do the relative URL, it's not going to know what to do with that and give you the URL. And we're just looking through the all navitems, which you get from this controller. We're passing in scope and HTTP. HTTP is basically their way of accessing AJAX methods. We're doing a get method. I have this REST path right here built out as a constant because I don't want to have to change this in multiple places for everywhere that I use a REST API code. So define it once. And if you need to update it because for some reason and I don't see it ever happening, but they update their API URL, you only change it in one place. Let's see if we're running out of that. Passing in the types, doing a get method. And then from there you say, on the success callback, you'll pass back all the data that you've just requested, which in this case is this massive thing of JSON with all the different post types in there. And then we're just outputting it on front. It's next. To get all posts of a specific type, you would just type in... You would pass in the type you want after the WPB2 and it would give you a list of all the posts that are inside of that post type. To get a specific one, you just say... I think I did two slashes. That's just a guide for that particular post type. And it'll give you all the posts that you have for that. Notice with ACF REST, ACF key. And then from there it has all the metafields that we registered for it. If you don't have that, you have to go through and update your REST routes to get the post meta and attach it to the route and send it to you. That's why I like using ACF REST on them where they have to do much work for it to activate it. There we go. Good to go. It's never getting the post. You just pass the post ID. Not much to it. And ACF REST, with REST, I don't want to do a ton of work when it comes to getting a post meta. I feel like it should come by default for the most part. And you have to make the plug-in and it automatically does all this stuff for you. It makes life a lot easier. So now put multiple posts. You would do an ng-repeat. In each one of those you'd say nav-item. You know, slugger.name. If you have a single one, you don't have to do a look-through ID to say give me the post.id or case.acf.post.acf.fieldname. What if you don't want the light to see it better? I don't want to. Are you going to provide the slides? Yeah, absolutely. I mean that's... This is for the most part the end of the slide demo. I do have a bunch of code written so that you guys can see it and how it works and how everything kind of interacts with each other. I only did the shows on the show. So it kind of worked over there. So right here when you find the controller, you're telling it what dependencies to use and use on scope. HTTP, SCVP, interval and timeout. SCE is just sanitization which you can see right here. We're passing in the route, the resource on sanitize. So the routes you have to have in one of these route programs, the route itself. You have resource which is the HTTP methods and then you have sanitize which is that but there's a reason I'm using that and it's not because I'm sanitizing data. It's because I'm telling it not to sanitize data because by default Angular sanitizes your data. To get the content from the REST API from a busy way, it's got 18-law market benefit and it's going to treat it as a string if you go to inject it by default into your view which is awful. Okay, quick question. So where do those dependencies actually get passed into this function? Does Angular do that automatically just based on the variable name? I'm sorry. HTTP and SCE. Where do you pass those into the function? Does Angular do that automatically for you just based on matching the variable name to the service name? For the most part, yeah. Inside of the f.module, we can see that we actually have to tell it that these are things it has access to based off of those files that we looked at in Flutter. And then from there, each one of these could have multiple services that are tied to a specific file. HTTP is in the resource file, but I think it has a couple of things that are defined on it. Sanitize, I know it has SCE, I don't know what else is in there, but it could potentially have multiple dependencies that you could then inject inside of your controllers. So, we have let me show you guys this. It's pretty cool. I'm pretty proud of this again with last night. I thought it was pretty awesome. So, these are the shows. I clearly grew up in the 90s because Hello Family Guy, King of the Hill, and The Simpsons, Parks and Recreation. Still awesome. If you guys haven't watched it yet, you can get to watch it. Super fun. So, we have essentially an interval watcher going right now that will watch for data updates on the REST API and reflect it inside of view without you having to do anything outside of update posts or something like that. So, you set this to draft and do this. You do anything. It automatically went through what it considers a digest cycle, which is like when you call something like this time-on function right here, the digest cycle will actually take the data that you're passing into it, go to the view and update the view based off the data that it just got. So, it's kind of like, I would say, a refiring of the WordPress loop that will go through and see if anything's been updated. If it has, it will go through and update your front-end view. So, it's just pulling the server every 10 seconds? Right now, yeah. There's other ways you can do it. I kind of can't put this on the fly. It doesn't really... I've had this running for 30 minutes now and it hasn't had any type of noticeable impact in terms of performance right now. If there's a couple hundred writing on the page, you probably have a performance hit right there. You can go through them. There's one of these. Actually, control it. You can update it into the content in here and it will update on the... Oh, did I? I did. And then inside this, I have a little date ticker that will work on shows that haven't actually expired yet because King of the Hill last aired in 2010, unfortunately. It might bring it back. It might bring it back. Well, obviously, it's a teenager. Nice. It's a teenager based off of the data for this particular one that is in the post itself. I've manually coded this. There's probably a way you can access another API to pull in information and update things. So... I've manually entered this data so that it happens on the front end and does a nice little ticker on it to show you how much longer you have until the show airs. I'm super excited about King of the Hill coming back. Yeah, so this pulls it every 10 seconds to go through, update. We have a getData by default because if you look at the page the first time, it'll take 10 seconds to actually display the data if you don't have that first call right there. And if you're doing an individual show, this one's kind of more JavaScript than Angular with this... the timer. It's more just JavaScript that outputs some work up and does some calculations based off the time that gets chassed into it on the front end, which you can see while there's air date. And that's right. Put it in control of itself. So once it gets the data, it'll initialize the clock and then do scope, show, ACF, show next episode to render out the countdown clock. Yeah, that's pretty much it. Getting started with Angular is not difficult at all. I built this thing out in a couple of hours yesterday, which I don't think it did too bad in four hours of work. And as long as you have a good handle on JavaScript, which I would highly recommend you have before you jump into any type of framework, you can pretty much figure out without an extensive amount of work how it actually works. And then Angular itself has... Let's see here. I'll cause an error around here. That's... Oh, another show. I'll go to these shows. It has this nice little error message on here that when you click, please don't do bad Wi-Fi. It'll actually tell you, relatively speaking, what happened with your application and why it's not working. In this case, it'll say the show's controller isn't registered. That pulled in from your application and tells you what the problem is right there. So as long as you have decent Wi-Fi, you can trouble to your application pretty simply, despite looking at the error messages that Angular throws, which I'm very grateful for because I don't like the ones that are an absolute amount of callback and I have to follow a massive stack to get down to where the actual issue is. Can I just have any questions? Is it going to be possible to use Angular 2.0 with WordPress because of all that compiling? Absolutely. The main thing with Angular 2.0 to 4.0, nothing's really going to change in how you access the REST API. You're still going to be getting the data and then you would just stuff it inside of a class variable that you would then just access on the front end. You're going to be accessing the REST API the same way and you're going to be getting the data in the same structure. So from there, it's just looking through it and putting into the proper variables that you can use on the front end. How is it like building though to use the CLI because it just makes life easier? The Angular CLI? I have a small project going right now that's just consuming the API of news that will then save it a little storage. You can do the same thing though with the REST API. You can just bring the REST API, look through it, stuff your data in whatever variable or class or whatever you really need to to output it on the front end. The structure is different but the way you would go about getting the data and outputting it is kind of the same except you wouldn't be using a scope in this case. You would use whatever your class is that's powering where your controller is that's powering your view. Yeah, that's the great thing about the REST API is that it doesn't matter really what framework you're using. If you're accessing the REST API, it's always going to feed you the data in the same format and then you can just look through that and use it however you need to. Do you know of any like single page applications using WordPress Angular? Not off the top of my head. I personally love how WordPress stores data. I do not like these massive 200 column-wide tables that I can interact with. If it's PostMeta, just give me all PostMeta and I can do something with that from there. It makes my life so much easier working with it. I just don't like working with custom tables too much anymore. I used to and now it's like, God, this is awful. You want to show you that application real quick aside. Something specific to WordPress but it'll kind of consume the data in the same way. Oh wait, now it's on my computer home. Yeah, so I will put it up as part of the repo and add that to this too. Any other questions right now? Yeah. Sorry. Comments on the frameworks, I'm mostly back-end developer. So why Angular overreactor and you? It's just I get better, that's fine. I'm just curious. I honestly don't have a preference. I have a preference. It doesn't matter which one you're using. React is more what they consider like a library. You have to add things to it in order to do things. Angular obviously has some stuff built into it and then you're still having access outside but other resources that come along with it to do some of the functionality. I just learned Angular first, so it's my preference. It's one time obviously a bad choice since they're pushing over to React for gluten blocks and things like that but it's whatever. I'm okay with it. I haven't had a reason yet to build like a headless WordPress Angular app but it's not something that's going to be difficult to do at this one time. I'm really just a fan of Angular. If you're okay with React, which I hear... I haven't really picked one. I guess that's why I'm asking. I have mostly two backends though. So, View is supposed to be the easiest one in terms of barrier or entry. Barriers of entry. React might have extended Angular at last which I haven't really used React or View so I can't really attest to either one of those at this point in time but that's just what I heard. I like this and especially like Angular 4 with TypeScript. I don't know if you've used TypeScript yet. It reminds me a lot of .NET which I haven't done much .NET but I used to hate defined variables like this has to be the specific type of data and strongly type there we go. I used to hate strongly type. Now I'm like, God, give me strongly type data all the time because I know exactly what it is and I know exactly how to handle it. So that's why I'm kind of moving to Angular 4 and AngularJS is really quick like get out and running because it took me a couple hours to build something that does all this stuff. Thanks. Any other questions? I'll get the mail back. Send them the repo link because that guy said they don't put it on. I'll put it on my slide at the end of the year before I send them because I'm apparently the last person to send the slides in. So, thank God for procrastination. Our next session in here is at 9.30. It's a show in tablets. Basically the goal is that we have people sign up and just take five minutes to show us what you're working on and maybe go recently that you think might be of interest to everybody.