 Hello. Hello, everybody. Can i take a selfie with all of y'all? it's so awesome that all Of you have come up. Can we do this before we get going? Is this within scope? Say cheese. Say angular j s. Say mbc. Say deep j s. We did it. Awesome. Okay. So this is intro. What does it say on the screen? intro to angular j s for Wordpress developers. I am in the right room. My name is josh pollock. I am out of range of my clicker. There we go. If you're not familiar from looking at me, That's what i look like. I built two plugins. It's an ab testing plugin. And the interesting thing is That we built the admin interface in angular. If you want to come back at three o'clock, i'll talk All about that. This is the basics of building a Of angular, front end, back end, whatever. These basics. I also make a drag and drop form Builder called catrwp. And the point that i'm telling You about the plugins i make is because you should check Out on the internet. But also i'm a plugin developer. And the stuff that we're talking about today could Translate to i'm going to make a wordpress site that Uses the rest api. I'm going to build a web app Using the rest api. In my choice is angular. Or it could translate to i'm going to build a plugin Interface. In my choice is going to be angular Across the rest api. So this can really go both ways. But my experience, i don't make websites. I make tools for everybody else to make websites. Also at josh 412, if you go to my twitter, the last Tweet had a link to an article that has a lot of Information including these slides. And there's going to be Some code examples. You may or may not be able to make Amount on the screen. They're all there. There's a link to a gist that has every single one. So you'll be able to see that and you'll be able to take this Home and play with it. And that's the link. Also that's my dog. More important. Yes, this is a link that you're going to want to go to. It's in my twitter. But more importantly, this is My dog jose wrapped in a blanket. There's some metaphor for that. That's important. But go to my twitter and get these slides up. And there's also one of the articles. Introduction to angior js. This is the live version of that. So obviously, as i said, we're talking about angior js for WordPress developers. And i want to touch briefly on why Not something else. For me personally, i can't tell you What framework you should use. Because i'd have to put all Of your problems in my head in order to find whether or Not this was the correct solution. But i wanted to share very Quickly why this was the correct solution for me. Is that i'm not an interface designer. I'm not a php developer. That is what i do. Yes, i'm a WordPress developer. So i do javascript. I do it a lot. But my core competency is php. But i believe that these javascript interfaces are the Future. This is how we are going to increase the user Experience in our sites, in our apps. I think this is really Important. So for me to have a complex php application And have a layer on top of it for its interface that can work Very quickly through age apps, this was the solution for me. Most of my business logic is still in php. And i'm using this as my ui level. That was the solution for me. Also, i like the way that the HTML is separated out. I like the way it integrates with Bootstrap and so on and so forth. That's what led me to make this Decision for me in my projects i'm working on now. So first thing we're going to talk about is nvc. Angular is an example of an nvc framework for javascript. Backbone is an example. React is an example. Ember is an example. And that means it is model view Controller. Before you can use any of these, You need to understand what model view controller is. Let's talk about that in the sense of angular. Model view controller has model view controller. And then the user sitting down here at the bottom. We're done. We all get it. It's a little tricky because Word press traditionally does not use this pattern. Lots of people try and force it into this pattern. There's plenty of ways. I've been down that road. But it's not what word press is. Think about view is easy. View is your template. How do you define it's basically html? Becomes your view. But it is a relationship between These three things. What does the user do to change The controller? Updates the model. The model is your stuff. We're going to get into detail. So that the view says this. It is currently there. Let's go through this a little bit quicker. The model. The model is the current state of data. The model is kind of abstract. There's no code. The next two slides, when i get into the view in controller, We're going to have some javascript and html over here. This isn't code. This is the current state of the application. This screenshot right here is in chrome inspector. I have this cool little add-on that lets me inspect the scope of angular js. So right now this is in this scope here. What is the current state of my application? I don't know. I have this array of objects. You can drill down into here. This is the model. This is the current data that the controller can put into the view. The view is the visual representation of your data. What data? What's currently in the model? So it's basically what does this run? Oh, we're working on refactoring the live commenting plugin. It currently uses some jQuery stuff. We're redoing it in angular. You can see this is looping through comments. This is an html file. This is my view, my template. How are we going to display the data? Oh, i don't know. We're going to wrap it up in a div with the ID comment and then you see the two curly brackets? That's representing the current object in the model. In this case it's comment. What do i want to get from it? I want to get comment.id. That's the id of the comment. So this is coming back from the rest api. And it's giving me an object that represents a comment. That i've queried from the rest api. And then i want to go through and say comment.authorurl, Author.avatar, comment.somewhere down here, Comment.content must appear. I don't know. Maybe it could cut off. That's the point of comments. What data is that? It's what's currently in the model. I have one view that will be used for whatever state the Model is currently in. And when the model changes, this will change. How? Magic. Angular is magic. The first time somebody really explained the Miangular, he said, josh, do you know what magic is? And i said, i'm a nerd. I know Arthur C. Clarke's third law. Magic is any technology sufficiently advanced to appear To be magic. Show your cell phone to somebody From 100 years ago. You showed them magic. Yeah, 20 years ago. How does it work? How does it notice cache? What's cache? How does it cache this partial file in the browser? I don't know, but it's magic. It works. When i got hooked on Angular, this guy showed me this app he Was working on. And he cleared his cache. He brought up the network inspector and loaded it. And all those requests came through that you would Expect of a css, of a js, all these different template Files, all these api requests, and they cooked a menu item And everything, but the menu disappeared and got repainted. And there were three http requests, and they cooked the Next one, and there was one http request. And then you cooked back to the first view, and there were No http requests. Why? Because Angular is magic, and it figured out that it didn't Need to go and get any of that stuff from the server. And that's why the browser was able to do it like this. Right? Browsers are fast. Computers are fast. The internet. Anybody hear a comcast customer? For me, comcast is good. The people i had before, it didn't Work when it rained. This stuff is very neat. Controllers. How do we know what is in the Controller? What is in the model? Sorry. What is my business logic to say, How do i get stuff from the server? And how do i put it Into the current model? That is my controller. This is a very tricky syntax, folks. Angular.module, the name of the app, .controller. Creates a controller. We can get that? We need to go deeper into javascript, or we can do that? Look at this. This is a complete Angular app Right here to loop through to get the input base at The top, lines 4, 5, 6, 7, 8, to get the site name, site Description from the settings. Right? That's a controller called header. A controller called post. That's hitting from, this is a dev site that i was using in My course, to get wp-json-wp-v2-posts. That is an ajax request. Anybody here heard of jquery? You'll notice the syntax is almost identical for the HTTP interface. Think dollar sign, HTTP? In your head, think dollar sign.ajax, or jquery.ajax. Your knowledge is almost 100% transferable. This url, i could put method equals post if i needed to. I could add a header if i needed to do authentication. Exactly the same way i would do it in jquery. Hit the post end point on that site. Success, right? dot function equals scope dot post. What is available to me in that template that i showed you Before? scope. This variable scope is what Is currently going to be available in the template. So in the template that i use, i can do posts, and i Will have all my posts. I can use a repeater, which We'll talk about in a little bit, to loop through and have a Post in post. By the way, this is a totally Separate custom post type slash news. It's own controller there. So this is a complete angular app to show two different Post types and get the information dynamic. What's interesting about this is, yes, they're all going to The same site. They're all, whatever, that url Is slash wb jason. There's nothing that would say These have to be from the same site. If you've got a scaling problem, why not move one custom post Type to one site and one to another site. Make two ax requests in parallel. So let's talk about bindings. How do we put this all Together? we've got model, we've got view, We've got controller. Model is a little nebulous. That model is what the application currently has. The controller controls the model. The view displays the Model. Right? what brings them together? Bindings. Why do i like angular j s? It's because i think html 5 isn't broken. I think html 5 is awesome. Data attributes and html 5 Are super slick. So let's talk about bindings. They connect, they allow our view to connect to our Controller. They are what binds the two together. So this is a very basic form. That also displays the current state of the model. Right? ngcontroller equals post example. What controller is this for? post example. Right? what are we going to do? we have a form here. Remember html forms? that's all we have here. Type equals text, but we say ng model, post. Title. That will figure out the rest for you Magically. Down here we have div that's Showing post.title. In the torque article that i have, I have a follow along with clunker where you can interactively do these. But what you would see is that as you type in post.title, This would automatically update on the fly. This display of what the post.title is. That's what angular does. Because this is the same binding as that. The input in that display. As you type in that input, it Will automatically be there and it will be automatically updated Inside of your controller. If you want to make an html Request back to the server to update that post, it's there Automatically. This experience that we've all Had of jQuery where it's like, okay, now it's time to save. Let me target this field to put that into here, into data Params or let me serialize everything in my form and make Sure i have it and validate it. That's all over. Wrong direction. So bindings. This is the other side. Bindings link to the controller. Same controller. Post example. This doesn't have an http request. We're hard coding it to make it Simpler for you. You can see it that Scope.post equals an object, title, enter title. So if you were to create this, this would start with enter Title in both places. But then when you change it, it Would update the model. The scope is what is available in the view. Scope is essentially a local variable available to the view. Let's get a little bit more trickier with this in terms of Bindings because bindings can call functions. So this form right here, this is similar to before, but I've added two new things to it. First thing i've added is on the Form element, i've added ng submit equals submit. That's going to cause it to call the function submit when this Form is submitted. We'll talk about that in your Head for a second. We'll see that when we switch back to The controller. And then i'm using ng hide to hide The submit button. This is a boolean function right now. If this, if ng hide will hide this, if post.Title is Enter title, which is its default value. So that means that when it says enter title, the submit button Will be hidden and as soon as somebody changes it to something Else, the submit button will magically appear. I could also put a function there if i needed more complex Logic and i could pass anything from the model back into it There, but forget it, it's a simple boolean. Does it equal that? Else hide it. There's all sorts of these, i'm not going to walk you through Every binding that's available. Angular has amazing docs. Every one of these, there is interactive docs where it says What it does in each parameter of the method and then they Have an example and then you can open the example up in Plunker. Do we all know what plunker.io is? It's sort of, it's similar to jf fiddle or codepen, but it Let's you run a jobs group application in the browser. So it's a great way to learn that stuff. Really, how did i learn angular jf? i read through the docs And i think that makes sense. I opened up the interactive Example, you could fork the example code and start playing With it. Plunker.io, but really go Through the angular docs, all of the docs have an open And plunker. That's what i'm saying, get to know That technology. So this is my view. This is my updated controller for that view now. Remember, we added that submit. I don't need to do anything for That hide. Angular handles all that. You'll see there's no logic for that here. This is just done. But same scope.post equals title. Again, it's a mock. And then for now, scope.submit equals Function, alert saving. Getting ahead. This function will be executed when you click on submit. Just say alert saving, right now. But we could put an http Request back to the server there. We're getting there. I'm going completely the wrong way here. I'm really good at this kind of stuff. I'm bad at the rest of the world. This thing, confusing to me. Angular, yeah, makes sense. This is our controller again. Okay, so this view here. I want to talk about repeat. This is one more binding. NG repeat. We're all used to PHP developers here. For each loop. For each post in post. The syntax is the other way around. NG repeat. Post in post. So if you're a PHP developer, you have To mentally flip those around to make sense of it. As long as we have posts, loop through them as post. Grab the first key of the array, call it post, render it. Grab the next one, call it post, render it. So we have this in our scope post. And then we're able to Loop through those and do post.title. So it's exactly the same as before, but now we can have Ten posts, right? Let's see. But we need a slightly different model here. So let's look at the controller for this. By the way, now you see that we have two controllers, right? This one up here is exactly where we left off. This one down here is new. That's post example. This is post example. This is the difference between the Archive view and the wordpress theme and the index in the Single post view. We have one that's designed To consume lots of posts and show me a list. And we have one that's designed to show me details about one post. I go to your site slash blog. I see ten posts. I click on one. I see one of those posts. Same thing here. We're still working with mock data. So it's just an array. Title post one, title post two. And that's what allows us, if I go back, to say I have This array of posts, let's loop through it to everyone. Treat it as post. Just like a 4H loop in PHP. So that's a good question that he asked, which is does it Include this outer div? No, this is the outer wrap. So anything inside of that, if i had div before those two Brackets, that would be repeated. Or if i had another, you Know, if i did post.content, that would be repeated. But the outer wrap that has the binding, that becomes What wraps this. So if i wanted to say, if i Wanted to add a class to that, called row, right? Because i'm using bootstrap, i would put it there and then Inside of it, i would do column small three. Inside of it, column small three got repeated. Or article, if i was doing a semantic for that. Which, by the way, is what i would do. I'm very interested in doing these sorts of things with Angular, but i'm always jumping into 2015 or 2016 to see What's the correct way to do a header and article and These things, because i just trust wordpress to know it. HTTP. So i've been sort of dancing around The fact that it's nice for me to explain to you where i Have a hard-coded controller or post title equals Enter title. That's not entirely practical. That's where we start. But without an HTTP interface To connect back to the wordpress rest api? Or any api? Honestly, i started with angular because i Wanted to play with firebase. Firebase is really cool stuff. Definitely get a chance to play with that. But you do need a remote api to give you some json for some Data, right? Wordpress rest api, anybody heard of that one? It's a good source. Angular HTTP. Again, very similar to jQuery's HTTP interface. Which is great because that's a good interface. But it does use the promise syntax. So this is, you can use success, but you can also use promises. So i'm now switched over to then. This is very similar to jQuery When ajax then. But you can see. URL. This one's getting now. This example code is going to my site. Let me post id one. And then response, scope.Post equals Reds.Data. The response for promise puts It's data. It resolved promise. It's right there in the key called data. So that's what it would take to get a singular post. We can do this, right? This is not a quantum leak. I'm telling you, this is not that incredibly. This is still fairly new to me. But my skills as a php Developer, especially because i had gone into symphony, so i Understood the mvc stuff. My skills as a javascript Developer. They're doing mainly jQuery stuff. They all transferred over. This is another thing on top of That. If this is your first day on javascript, Let's wait a little bit until we get into this. But if you've been doing WordPress javascript stuff, You should be able to get into this stuff. This one's slightly more complicated here. Because we're going to slash post. We're getting multiple, Ten posts, right? This one at the bottom here. For post example. Scope.Post equals res.Data. So now i'll be able to do post in post. Because scope.Post is an array of posts. But the other thing that i want to do is read headers. So i can do pageination. The rest api gives you back These xwp header sets that have cool stuff, like total Pages and total results. So now if i want to build Pageination, res.Headers is a method where i can pass in The name of a header and it puts that into a string. So if my site has 50 posts, 5 pages, i've now got 50 and 5. So i can do logic for pageination there. So it's very similar to that. This is an example where We've added a save callback. We could do call scope.save. This is that post example where we can get the data and put it Into post. And then down here i can have a function Called save. What's it going to do? It's going to make a request to the same endpoint. But it's method post. Just like in jQuery, it defaults To get requests. We can change it to post Keep options. Going further. This is part next. This is where y'all take over. This is the fundamentals of it. This is what you need to do to Start hacking through it. The shortest version of this talk Would be set up a view, set up a controller with some mock Data and make it loop and then start figuring out how to Loop that into your http api. The http api to hit your WordPress api on your site. So going further. Two things. One, i have a talk that's on wordpress tv that's on the server Side of this equation. Customizing the wordpress Rest api to work with to serve custom apis. That is 100% essential stuff to this. It's all php. It's out of scope for today. But these links are in my talk. You can get these slides on The slide share. That slides video more information. And then the other one is if you want a practical example of how To put this together, you can come back to this room at 3 p.m. Today and i'll be talking about my experience building a WordPress single, wordpress at plug and admin screen. That's a single page web app with angular. It's something that i've loved doing. My name is josh pollack. You can follow me on twitter. The fact that this room is filled with people means a lot to me. People are interested in this stuff and you want to learn it For me. It means a lot for me. You all are really awesome. I really appreciate it. Thank you.