AngularJS + Drupal 8 REST API

everyone this is Matt from studio Reagan in this video I'm going to talk about how I managed to create a an angularjs front-end on the back of Drupal 8 REST API to make a little Ajax driven task app which I'm going to demonstrate before we get into the video so this is a task and we can add the task it appears up here and then when we click on it we just get the output of that in this right column there you can just click through them like this and of course we've got the obligatory filter as well so new by okay so that's how it works the first thing that did was install Drupal now I to install Drupal into a subdirectory I first tried to installing it on the actual root and then moving it but that caused all kinds of problems so I recommend if you are going to follow this tutorial you put it into a subdirectory the reason for that is that we just want Drupal as its data source we just want to get the data out of Drupal expose it via an API then let angularjs do the rest and Drupal 7 does have a REST API plug-in or module rather I haven't used it I really use this as an excuse to have a go with Drupal 8 which has some web services already available to it in its core so if you're going to if you install Drupal and I'm going to extend which is actually just a list of modules if you familiar with Drupal 7 scroll right down to the bottom and we have web services so these are the ones that we need so we just I mean I assume that we need them all so I just enabled all of them and then go into structure and what I did was create content type called tasks it's just a basic standard content type we didn't actually use the date field in the end so I mean you can just have a content type with the title and the body field and then we can see the data here in Drupal that is reflected on the front end so this is a task and my new tasks just here now to get these out of Drupal what we need to do is create a view typically in Drupal you create a view to display your content which is exactly what's on here except these are rest exports rather than just standard views so to give you an example of that add new view forget about the name we've got the you can create a page or you can create a block now that's fairly standard for Drupal but in Drupal 8 we've got this rest export settings it's gonna go back and show you what I've done so inside tasks which is the two views that I've created for this we can see that the view is so exactly the same as any other view but it's a rest export so I haven't actually named these but this is gonna be a task list and this one's going to be each individual task so all we've got here is the title and the node ID and you can see that this is what's being outputted obviously you want the title to display on the page and we want the node ID which is just the idea of that piece of content so that we can link to it and these are available in slash tasks so if I go to Drupal slash tasks you can see that you get this JSON feed here now this is great because it just enables us to to use this data anywhere anywhere on the web as long as you have access to this domain and if I go to slide 61 you can see that it just produces this the specific tasks based on that ID in terms of security you should be logged in to create content but what I've had to do for this example is going to my roles and inside anonymous user I've had to edit the permissions to enable anonymous users that's non logged in guest users to be able to create content for the task otherwise I would have to be logged in to be able to create content here and obviously I was not really one for the purpose of a demo and so I've had to enable all of these and also I think administer content as well and potentially create and edit URL aliases I'm not sure about that one I couldn't check on test it but yeah I do allow you so to recap we install Drupal in a subdirectory we enable our rest services web services we then set up a content type called tasks we then create a view using a REST export so that we expose the data to an API and we then change the permissions for the anonymous user so that anonymous users can post to the task content type right so that's Drupal so we just need the front-end now so if we go into here have a look so if actually effectively comprises of four files I'm using Twitter bootstrap two for the front-end design just because I'm a bit lazy the whole thing is wrapped inside a controller called task list and we can split up into a list of tasks the form to add a new task and the form to filter tasks so it's probably worth just going through this in that in that direction actually so up j/s is the actual application javascript file that uses controllers and services controllers look after parts of a document and services can be used by controllers it's a way of modularizing certain bits of code so for example if I had if I wanted to get the tasks are of the system from multiple different places within the application I would set up a service which is what I've done here so we'll probably start with this one so we set up a service called get tasks and then we're looking at this link here which as I showed you earlier is the JSON feed of tasks and then it should that be successful which it obviously is we are sending that data back into our controller so if we look at a task list here which is task list controller this whole chunk is the task list controller now in angularjs you can inject a scope which enables which basically talks to the Dom so in this case scope tasks is sorry tasks and what we're doing is we're using so using the tasks get tasks service and then we're getting the data out of that service and we're just sending that back to the view which is just here and this is this is just I mean if you familiar with with PHP you would do a for each loop to then loop through the tasks and now put them on the front end and that's exactly what this is doing so we're saying for each task in tasks do this so we're outputting the task node ID and the task title and that corresponds to title and an ID it's a couple of things here I'm pre fixing everything with data because you can get away with just using ng but this enables if you put prefix it with data then the HTML document validates better against the BBC standards a lot of people aren't too bothered about that but I think it just adds an extra layer of cleanliness to the front-end and I'm also using bind HTML which which is required by this sanitize plugin for angular and what that effectively does or what I'm using it for in this case is it any um persons or weird characters get cleaned up as they get out put it onto the screen so I'm presentable show as Amazon's that will show us this and not that which is the encoded character probably a reality of the type actually because that's the type of task that I had previously I had meetings and events and things like that we're not using Maxum forget about her right so we're using a service to get our tasks and then we're pulling that service into the controller and then passing it to the view via scope object and outputting them here quite simple to view each task we have used routing or routing if you're American and this is another plugin that angularjs uses called ng route you can see we are pulling in just here and this is like the syntax here I'm not a big fan of to be honest at these didn't look very nice coming from a PHP framework background I don't know I think it could be simplified a little bit but hey home however is reasonably simple to understand so what it's saying is when this URL is hit tasks slash and then any ID that's the task ID in this case show this template URL and use this controller so control a single task let's go into our controllers and if you scroll down to the bottom this controller is available here again we're passing in the scope we're also passing in HTTP dependency and route params and all that saying is if we go to this URL slash tasks slash the ID that is passed to it in this case the task ID which we saw up here just get the data in exactly the same way as this service is doing here the only difference between these two is well this isn't a service it's just a controller personal preference you could put it into a service if you wanted in fact I could probably modified this service to allow a parameter to be passed to it but I haven't bothered for the purpose of this so yeah all it's saying is it's gonna go to this URL and then is gonna take that ID there's pass to it and return just the task so not tasks and if we have a look at single tasks PHP you can see that's just output here there's your controller sorry there's the controller again we're binding it title field date I'm not sure we actually bothered with that one and then the body again I'm binding it HTML binding it so that encodes any characters so nothing comes out weirdly um one other thing on the URLs the routing routing by default we would put hashes in the URL so it might look something like that but we don't but we don't want to do that we actually want URLs to be like real URLs and be--and and the browser to behave as expected so forwards and backwards functions act as expected I don't really know a great deal about this but this makes it work I'm not sure we probably need to put in a polyfill or something for older browsers because it's html5 but I'm not gonna worry about it too much and neither should you okay so that's view intest and we use a single single task controller to show this right view here in terms of adding the tasks we are using this form now ng submit is basically saying when this form gets submitted via this function so that function is a new task so let's have a look at controllers and this is probably the largest part of it so so new task equals this function what we're doing is within the first set of a blank object of package and then I'm gonna pass some values to it now these are just coming from the view so it's go cup title scope body dust title and well description in this case but Drupal expects it as body because that corresponds with body here and title is implicit on Drupal 7 we used to see in the title field in there but it doesn't appear that's the case anymore and then we're passing it this links value now I'm not entirely sure what this is I think this may be a new edition with Drupal 8 but what is effectively saying is that the type of node the type of content that we're creating is tasks if you're not familiar with Drupal when you install it out the box you get article and page content type so you can add an article it's like a blog post and you can add a page task is obviously one that I've created for the purpose of this video and obviously I passed it in there and then what we want to do is perform a post request using this URL now the Drupal REST API this is its endpoint for creating content entity slash node I don't know why I mean there's probably some logic behind it but it doesn't it's not semantically very valuable it'd be nice if it was entity slash node slash add or something how I realized was wishful thinking we're sending a post request and the data that we're sending to is the package that were defined above the biggest stumbling point for me was the headers bit here I wasn't sure what was implicit what wasn't no you do need to send it CSRF token which you can get when you've enabled the rest api you can get this in drupal by going to here and this is basically generated for you so that is used not for authentication but I think to stop cross-site forgeries it's not something that I know that a great deal amount this headers area for me was a little bit of a like set a stumbling block I don't need the authorization bit because I set my content type permission so that anonymous users can create content if I wanted users to be logged in then I'd need to do something a bit more with this I don't know what yet though that's what I hope to find out a bit more about down the line and then so that's going to post it to the site and then on success we're just going to clear these two inputs because obviously the page doesn't refresh so there's no reason for them to clear so if I just comment those out refresh this and then say another task description you'll see add it but the content doesn't disappear because there's no page reload so just bring them back in and then say the task to another description - oh I need to refresh the page so another fast read there we go so adds it and then cleared the input what I also needed to do was again korva get tasks method and the reason for this was because we want this section to update now a lot of tutorials will tell you to use push so I mean you might do something like scope tasks don't push and then you know put the input take the input from the title and then push it into this array here but the problem with doing that is that it doesn't account for URLs so you can look in the bottom-left task 6463 task 62 if you just take something from the input and then add it here it has no idea what URL to use because it's just it's just taking these values so if we recall the get tasks method it updates this area here with URLs and and everything straight from the database and that's that with that really I'll quickly show you the filtering functionality now this is one of our favorite features of angularjs that I've recently discovered after using it I really need to write any JavaScript at all we have a search input and we're using a model called task filter and if you see I'm highlighting that there that gets highlighted up here so this is the list of tasks and this is the search input so if we bind that model to here you can see it you can pass in this little parameter called filter which is native to angularjs what it's looking for is task filter and essentially all it does is filter the content that it finds here by the content that's added that's typed into this input so as I say another three most interesting know why it's producing was to yeah broadly works the only thing I haven't done with this tutorial is any animation mainly because I couldn't be bothered because the animation stuff in angular is quite nice in what it can do but I've never found it to be particularly nice to work with sometimes things that happen to expect a them it's just a bit of a pain for little gain although it's something that I will explore a little bit further in the future but that's that about wraps it up I think I hope this was helpful I'm gonna put in the description a link to I'm gonna write a little bit of a blog post about this but hopefully I'm just going to use the video cuz that's easier for me I'm lazy and it's all I'm github as well so if you want to pull this and work with it do whatever you want with it then that'll be great I hope you found this useful Drupal 8 looks like it's shaping up to be really really nice the user interface is good so responsive which is what the community really needs and bringing the API into core stands it in good stead as a CMS for the future I think it will absolutely be nipping at WordPress these heels if WordPress doesn't get an API into core as well because with these front-end frameworks like angular j/s I think that's the way that the way that web development seems to be or a direction that it's going to create these nice quick loading front ends so we're gonna be doing more of in the future see you later

Channel: Matt Saunders

Views: 15,917

Rating: 4.9292035 out of 5

Keywords: angularjs, drupal 8, api, rest, ajax, spa, drupal, javascript

Id: 3WoUG3Q75Co

Length: 23min 22sec (1402 seconds)

Published: Wed Jul 29 2015