Multipage Sites with Laravel and AngularJS

so my name is Brandon Boswell I I've used laravel for a little bit uh initially in level 3 did a talk about moving from level 3 to level 4 um built a fairly decent-sized level site at constant calm over the last 18 months where we basically started as a static laravel site and then we slowly moved things over to angular um and that's kind of the impetus of what I'm gonna talk about tonight is so many people talk about angular they're always talking about single page apps but there's actually a couple different approaches you can take we'll go into that awesome so who is used angular before in some way shape or form awesome cool so most of you and in general most people talk about angular in a single cage site perspective so the idea is if you have a client-side JavaScript app where basically you have a JavaScript API and then angular basically drives all of your UI and that's cool it works great um but the only thing is it's kind of extreme like you can't exactly tell your boss that today we're going to see everything we had and we're going to throw it away and we're going to start a client-side JavaScript app um and you kind of have to be all-in and really committed and it's not exactly the easiest thing in the world to convince your boss oh so a different perspective that doesn't really get a lot of credit is actually the concept of a multi-page angular site or the idea of just having static pages with angular components on them um and that's kind of what I want to talk a little bit about tonight um you know you can basically take a more simple approach where you swap out small components of your site that you know basically take the most important parts and then dip your toe in try it out and it's a lot easier to get started you don't have to basically say we're going to scrap everything and start over so that was the shortest presentation in the world and we're going to actually do some demo so what's up done you know everything you need to know about angular now ok let's kill this and let's that's what work ok cool so we have this SuperDuper simple laravel site and basically what it allows you to do is to search Twitter for laravel users around the world by location so basically we pull this from Twitter we're going to throw it in the database hang on to it and then from here what we can do is we can actually search for a specific place so let's see if there's any laravel devs in Arkansas there is one um and this is cool it's a good start um however like I do a search and I press ENTER and I wait a second and then I get results and it's a decent start but it's not exactly the best user experience in the world so realistically how you probably want this to work is basically as you type get results in real time and basically what we're doing is we're simulating a site that you already have you have some basic static functionality that was relatively easily to get to and then you go I want this to be a little bit better I want this to be over and above but we can do a static and rather than like scrap everything and start over with a client-side JavaScript app what we can actually do is we can actually just take this one section and power it up with angular um and especially if you have an existing site that's been around for a couple years ah swapping out the whole thing is not really something that you can do so let's jump into the code we'll do like a quick kind of intro into what we've got so we've got some routes so this users controller is basically what we're using here's the root route that actually drives all this let's throw up that users controller BAM we have an index method we're sleeping for a second to simulate the real world and then we're going to boot up this user search service that's basically going to search our back-end for users so we're going to pass in our input in this case a query parameter so let's show that real quick so if you look up here query equal Chicago so that's going to get passed back into that service so let's hop over to user search service okay we're going to take in some data and we only want ten results and then we're going to just do a really simple query then we're going to return the results back to the controller everybody with me relatively straightforward all right and then our user controller we have a few just index pretty straightforward so let's pull it bootstrap let's pull in some basic styles got a header and then we've got our user search component that lives right in here so little form with some search then we're going to loop over the results if there are any if there aren't any we're going to tell the user that there weren't any good pretty straightforward cool let's get started actually converting this over to angular um so one of the other things that I wrote that's kind of cool it's this thing called angular booter and basically what it allows you to do is to basically create an object at the top of your page and then anywhere in your views or sub views register different angular components with it so register controllers services directives factories any of that stuff anywhere in your sub use and then at the bottom of your page boot it and they all play well together and they all talk together but they're not dependent on each other um it allows you to kind of take advantage of what later ball has with blade partials and also be able to reuse some of these components and multiple pieces so we're going to use this as part of our workflow as well okay so let's hop back in so the first thing we need to do is we need to actually bring in and you learn so let's go script tag source equals and let's pull in BAM sweet okay now we've got a UI and let's also bring in our booter let's see where are you public J s yeah cool sweet let's make sure I know what I'm talking about yes so angular booter is basically just an object that we can load at the top of our page that lets us register angular components on demand so that we only have to register the things that we're going to use on this page and then we can also later make these individual components talk to each other across multiple pages and I'll go into a little bit you know it's worried about just yet okay cool so with angular booter let's jump back over make sure we're not blowing up tah-dah all as well okay so now let's actually create the angular booter so let's just say window dot my app equals new angular booter so we're going to create new instance of that class that we just brought in and we're going to tell it what we want call our app we're going to call it my app so let's know if any of you guys have used angular before you've heard of ng app basically it tells angular what aspects of the page it can touch so basically angle will be able to touch anything deeper than this let's just throw in the body tag BAM we'll try this it's going to blow up it's going to tell us that basically you haven't created your app yet so let's fix that so now at the bottom of the page we can basically take that my app object that we created from angular booter let's boot it and bam life is good angular is happy we haven't done anything but everything's good and also in this console you'll you'll get that we've booted our dependencies our services our directives our controllers any configuration and our filters in this situation we don't have any yet but that's okay so let's move on cool so now let's actually prove that let's get a controller running and actually prove that angular is working so let's just do ng-controller equals users search controller BAM again angular she's gonna get mad says I don't know what you're talking about all right let's add it so basically rather than go to the end of the page we can actually just do this in line so let's grab this user search controller and then just after it let's open up some script tags and we're basically going to say my app controllers and we're going to call this user search controller and its function so every controller in angular is just a function that gets calling manages scope so let's just say console dot log hola is it working and yeah we got hola okay so we now have a controller in angular let's just prove it let's create a message and sinkhole you know the funny thing is I actually use Allah as my test message all the time it just so happens that I'm actually giving this talk on Cinco de Mayo which is okay so in angular we can basically do these double curly braces to do to a binding basically have whatever's talked about in the controller and angular actually be represented on the screen um so look yeah let's screw it up first BAM uh oh yeah so blade also uses those so what we can do is we can actually just throw an at in front of it and that will cancel it out and bam we have a message that doesn't work because it doesn't need that hmm what's the problem now how did I break it hmm oh yeah I have to import scope thank you guys um so thank you this is the that doesn't happen when you're doing it on your own it does happen when you're in front of people um so so basically angular actually has dependency injection just like laravel and so basically we do it just like we do in laravel so we basically we can tell angular that we want an instance of a service that angular knows about in this case scope is a service that angular ships with we could also register our own services um so now that we have scope BAM we have sync oh uh but let's go ahead and do it right so every every controller is actually a function but if we were to minify this scope would no longer be called scope yeah like so if you did like an uglify it could be called A or B or whatever letter it wanted to be and then angular doesn't know what to inject so the way we get around that is angular has this really beautiful array syntax and basically what we can say is this first argument is is scope now if it minifides minification is not actually going to change the value of it right so if we go back doesn't that's the only reason you need it if you don't minify you could not do it but I recommend always doing it okay so we indeed do have Cinco so let's actually move on so um so scoop is this really interesting angular thing allows twee data binding and basically what happens is anytime I make a change to this it will get updated inside of angular also get updated inside the view so let's now talk about let's let's create a scope variable to hold users so scope users equals an empty array and then basically what we'll do is we'll later populate this with something and then let's also tell angular to talk to this input so ng model is how we can do that and basically what it'll do is it'll tie the value of this input to a scope variable inside of angular so let's just call this search query and then if we were to hop over here we can say scope dot search query and then if we want we can even pass in a default and now if we come back do to refresh please BAM default and then if we change this it's also going to change in angular so let's prove that so let's just inspect this element so scope is actually tied to the Dom element so it's actually grabbed as controller and then we can do this kind of nifty thing say thanks scoop oh and we can easily say angular and then pass in an element and ask for the scope of that element um and basically there's this dollar sign zero does anyone know what that dollar sign zero does it's kind of a nifty little browser trick umm dollar sign zero is whatever element you have selected in web tools um so I highlight ng-controller I come over here and I say give me the scope for dollar sign zero BAM magic and then if I go and look at my search query it is indeed this developers control just do window got scope equals and that way the scope objects tied to the global window then it can cause all linkages you could do that but you have to tie it to a specific element so you shall have to find some way to get the element and then do that because a scope so scope starts at the window object really really high um and then it can become more granular as you go down lower so you want to do it as low as possible to make sure you're getting access to everything um but yes this isn't a few little trick you ever forget like how to do it yeah I create a snippet for it because I can't remember that um but I end up using it all the time there's also this thing called angular Batarang that does a similar thing it's probably going to break everything but you can see values in here as well it's a chrome plug-in um so yeah I just go to the chrome store it's called angular Batarang this is something I think it's little finicky um but it's really nice for debugging okay so BAM it is indeed tied we're in good shape okay so now let's go in and if you notice when we type in here we get this little autocomplete and that's kind of annoying so let's get rid of that sort of say autocomplete equals BAM and okay so now we have a scope variable tied to this let's now trigger some action whenever this changes so we can say ng change and basically what it's going to do is anytime this model would change it's going to perform some function that we say so let's perform search and we're going to pass in the current value of this elements and obviously that function doesn't exist let's go create it BAM we're gonna take a query as a parameter and Arriba why not and passing a query oh yes trying to get to BAM cool it's now doing stuff sweet all right now let's actually do some search scope dots let's say get search results from server and it's going to the function we're gonna give a query basically we're gonna do something in this case we want to actually talk to our back-end and lucky for us we have a round just for that so API slash p1 user search is actually going to use users API controller and it's going to use that same search service that we use in our controller and that's going to basically return JSON results back to us okay so let's figure out how to talk to it um so angular a lot like it has scope it also has service for just doing HTTP requests so let's do that so first thing we have to do is we have to import the service and we'll pass it in here ah a nifty thing is you can actually call this anything you want so let's call this HTTP Day of the Dead I don't know call whatever we want and because we're telling it what thing we want here we can call whatever one so we can actually namespace our own things so like if I know a guy who actually takes jQuery any injection a query to make sure that he's talking to the specific version of jQuery that he wants to do and he'll just do this so the state dollar sign J um but basically you can inject anything this way and it works really well so now that we have HTTP Day of the Dead we can now talk to our back-end um and it has this get method that basically does HTTP GET whoever we tell so let's send it to API v1 users search and then we need to basically pass over whatever the query is so it knows what to do um so it supports this config object that we pass in is the second parameter and one of the things that that accepts is a params object and in that params object let's just pass in the query and we'll call it query BAM so let's return this so another nifty thing that angular has that you may or may not have used is the concept of promises anyone ever use promises okay they will like open your eyes like it was like it took me a little while to get it um and then it I got it and I was like oh my god this is great so basically what a promise does is it's it's exactly what it says it's a promise of some future thing but basically you hold a reference to it and then whenever that thing comes true it'll actually perform an action so in this case let's say we want to talk to our scope dot get search results from search we're gonna pass in our query and then the cool thing about promises is they have the option to pass call been on them and basically what happens is when the data comes back from the server it's going to call this ven function and then we can basically do whatever we want in here so let's just throw function as a callback it's going to return a response and HP status if we want and they basically want to do is we want to update that scope dot user's property with the result so we say response that data so just out of curiosity let's just grab postman and let's say HP and you guys use postman oh it's amazing find a dev yes with dashes API one user search BAM hey JavaScript sweet um so yeah we know it indeed actually works okay so let's try this out let's see if it screws up ah Chicago okay all right let's see see if it gave us anything useful ah we got users sweet okay let's see if angular knows about them in scope sweet kabbala bam users we have to users also we're now talking okay cool so now let's let's start swapping out some of this blade code okay so where do we start we don't need this message let's get rid of this where you actually want a regular search okay so now we can basically start swapping out this stuff um actually before we do that instead of users being an empty array let's actually put some data in here um so basically we can do is we can say okay want blade to do something we're getting this users property back from angular um let's convert it to an array and let's also JSON and code the results basically laravel sorry this is what happens when you jump and do both okay so now we're basically taking the users that were passed into the controller results and we're going to pass in the results as user into the blue and then users index is basically going to have access to the users object that was returned back from the search cool okay so now we can do let's start converting over this stuff so let's start with let's get rid of this if we have users and if we don't have users and we're going to replace them with their angular counterparts and we're basically gonna say show this list if there are users so ng show the FF users great that's easy and let's now show it let's hide this if there are users so basically we will see this if there aren't users will see this if there are let's watch it blow up cool doesn't blow up but we haven't converted anything over yet so let's actually get rid of the for each since where it starts to get interesting okay so angular also has its own kind of for each is called ng-repeat now and it's a little backwards instead of saying like users and blah you say ng-repeat user in users where users is in scope and okay we're going to repeat this we're going to call it user um so let's see let's see this is going to blow up great undefined variable user yeah we would expect that so now let's convert the rest of this laravel code over to angular so we're going to do is we're going to take these opening braces we're going to swap them out with their commented angular ones everyone with me there so that will basically escape out the blade template and use angular instead and then we also need to convert all these fun arrows over to dots just JavaScript school like that um and then the last little thing we have to do is um basically what happens is there's a split second before angular actually kicks in and if you have a image tag it's actually going to try and find this URL and obviously that's not a real URL but angular is a fixture that we used ng source and basically what happens is it'll wait until that thing actually exists before it actually goes to the server to try and find it so you know if you ever have a bunch of 404s on your back-end server and you're wondering why using angular that's probably why um flip by goer ah to top we have stuff and it's not made by laravel it's made by angular so let's try this out Chicago yay Seattle yay London yay Washington yay so now we have this running command what's that what's I didn't do it this is what Twitter said so but yeah so now this is completely running only and angular and the rest of our site is running in laravel uh our site could be huge we multiple components on this page and have just this running and angular and let's do one last step let's actually this is kind of the beauty of angular booter is let's take this component and let's actually throw this into we don't need that last little div let's actually throw this into a partial so we'll say you make and then we're going to pass in partials and then user search um obviously that doesn't exist Oh surely I'll type I do need that last little brace boom this is okay now we're good and now let's go ahead and create that partial views new file partials slash user circle HB BAM and okay the only last little bit is we need to make sure we pass in that user property so with users users and hopefully if my life is good it will still work and now basically what I could do is I could use that user search component anywhere on my site um and the beauty of it is angular booter is actually going to register it on the fly so you don't even have to tell it to do it you just throw the component in it's going to work um because it's registering it with this global object that we create at the top um you could actually namespace this under your app so like if you wanted to create a say window dots let's F ad which is for find a developer and just create an empty objects and then we could do window dot f8 d dot my app um if you're worried about polluting the global namespace but so yeah so that's that's at a basic level how you can basically say in an afternoon I want to add angular components to my site not have to ask your boss not have to throw away everything you have and basically take individual pieces of your site that needs some additional love and basically do that on the fly um so yeah a nutshell that's it uh any questions what's up depends on what I'm doing um so I've not really used resource a lot I've used ACP a lot and I've used restangular a lot um HTTP just gives you a ton of flexibility if you ever have to like fall away from convention resource really kind of falls down um so either restangular or HCP is kind of where I normally devil um but now I mean as long as you can make your request and you can use the promise it comes really I don't know if I really like talked about this really deeply but the the really really awesome part about promises is that you don't have to do callback hell you can basically create a service let's actually look at this real quick you can basically create a service that does a very specific thing all this does is goes to the server um and returns back results and typically what you have to do in node or just anything else you would have a second parameter that would be a callback and then this function has to know way too much it basically knows has to know to call the callback if you ever need to nest more than one callback it's going to be really really painful but the beauty of this is I can say do this then do this and then I can even say when that's done then do something else and change as far as I want and each function really only still has to know how to do one thing really well which lets me abstract this stuff so I don't really have like a demo associated with this but one of the really interesting things that we figured out at content is that if we took all these things that interact with the server and then we wrap them in a service an angular service um and registered it with angular brooder we could actually use that anywhere in our site now um and we only ever have to create that information once so we could learn how to create a user how to update a user how to delete a user to be a user how to email a user and we do that all on a service and the controller doesn't have to care anymore it just calls the service method to handle it just like you wouldn't a back end out you could also do it a front-end app to basically allow you to create things very very quickly so ya throw questions whenever you want I'll show a couple other things so one way we could improve this is by adding some animations out-of-the-box angular's a little janky like it's going to jump every time I do something which isn't much fun so this little year of new article is really good talks about how to basically have angular use CSS animations it's basically streamline how it loads to the browser so at content we use that so like in our delivery engine where you're choosing media companies to deliver to we use something very very similar to what I just wrote we can basically say show me media companies in Richmond and it's going to go the server and it's going to find out and then when it gets back it's gonna return the results and basically that animation drives all of it that way as I type it's not like jumping back and forth and doing all kinds of crazy stuff creates a really streamlined really smooth user interface um London gonna animate search when it's done it's gonna unanimity so that kind of streamlines everything um does anyone have questions about angular booter and like what it does that I kind of like get into that at all yeah sure yeah no okay so it's really really simple it's let's actually jump into the code it's it's crazy simple basically what it is it's an object um or actually it's a function that returns an object and basically it gives you a place to hold all the different things that angular can use to boot so you can register config objects controllers directives dependencies filter services um but what happens normally is you have to manage all these things um but basically all you have to do is create an instance of angular booter at the top of your scaffold um so does everyone use like a scaffold in their laravel sites that has like their main outer wrapper of their site they swap out subviews register angular booter your scaffold and boot it at the bottom of your scaffold and then anywhere in your site you can do anything with angular what you want and you don't have to do anything it's just going to boot automatically with all the dependencies it needs nothing it doesn't need and that way because like in a lot of single page apps what happens is you'll basically boot every dependency your site uses on any given page and what this allows you to do is prove only dependencies that you're using on the given page that you're on um and they can talk to each other but they don't have to know that each other exists so they loaded at compile time and then they use each other if they happen um so basically what it's going to do is it's going to create an angular module if you're familiar with angular this is going to look relational here it's going to call it what we called the new instance and it's going to accept dependencies and this dependency z' variable is just in a ranked so basically you could add anything to this array that you want you can add scope to it at HTTP to it you can add restangular to it anything that you could register with angular you just add to this array and it's going to get booted at boot time at the bottom of your page um let's see do the same thing with services we're going to loop over these services and we're going to boot them with angular ah let's see we're going to boot all of our directives all of our controllers and then we're finally going to boot our config filters and then we're done um so yeah so I mean that's how angular voters

Channel: Brandon Boswell

Views: 32,582

Keywords: PHP (Programming Language), JavaScript (Programming Language), User Experience Design (Industry)

Id: QBdudSQ1aLg

Length: 32min 20sec (1940 seconds)

Published: Thu May 15 2014