 How's DrupalCon so far? Oh, come on. You can do better than that. How's DrupalCon so far? All right. So I heard there was a brief mention of me this morning. How many of you are here just because of that? OK. Well, welcome. This is D-Couple Drupal in Angular 2. And once again, if you're standing up in the back, there's a few seats sprinkled around here in the front if you'd like to come and slide in. So just to get a sense of the room here, I just want to ask a couple of questions. How many people have heard of decoupled, or headless, or API-first Drupal? OK. Pretty much everybody. How many people have worked with Angular 1 in the past? OK. Good amount of people. How about Angular 2? OK. Some people. All right. So not everybody. That's good. And how many people have worked with JSON API before in Drupal 8? All right. Great show of hands. OK. So this session is going to be relatively introductory. I'm just going to sort of issue a fair warning here that we are going to talk about setting up Drupal as a back end, and how to get that going, how to get a decoupled Drupal repository set up. And it's going to use basically the most recent version, 8.3, along with JSON API. The second half of this presentation is going to cover more about Angular 2. And for those of you who have already done, how many people have already done the Tour of Heroes tutorial on Angular 2? Oh, OK. Great. So a lot of this presentation is actually quite strongly based on that tutorial, mainly because I really like how it introduces a lot of concepts. But a lot of it will be amended to kind of reflect what we're doing here. And then at the end, we're going to talk about just some kind of overarching big picture kinds of things. So are you all ready? Come on. Woo! All right. Cool. All right. It's like the after lunch kind of like lull here. All right. So just to introduce myself, my name is Preston So. I've been a web developer since 01. I've been in Drupal since 07. And I've been working quite a bit in the Office of CTO at Acquia as the development manager of Acquia Labs, which is our innovation and experimental projects arm. So I do a lot of speaking. You've probably heard me give a lot of talks about decoupled Drupal in the past, and it's a real pleasure to be here. So oh, by the way, if you want to contact me or look at my Drupal.org profile, there's some information about me up there. So here's what I'm going to cover. I want to talk about what Angular actually is, some of the history of Angular very briefly. What are the differences between TypeScript? How many people have written TypeScript before? Okay. Awesome. That's good. Okay. How many people have written ES6 before? The new version of JavaScript. Okay. Some more hands. So what I'm going to do is I'm going to go through, and what I really want to do today is do something very similar to the last time I gave a talk like this, which is to do a bit of a live coding session. I'm hoping that the Internet bears with us. If not, I do have a version of the application already ready to go and live and all good to go, just in case the Internet kind of goes ka-plump on us. So I want to introduce the key concepts of Angular. I want to talk about connecting Angular to Drupal as well. And then I also want to talk about some of the implications of Angular 2 and what's involved. An Angular ecosystem in general. So what exactly is Angular? Well, for those of you who don't know, the history of Angular is actually very interesting. Angular actually started out as a very interesting project in that it was started by Mishko Hevery as a prototyping framework. It wasn't actually ever intended to be a fully-fledged application framework. And so for those of you who've worked with Angular 1 or AngularJS as the Angular community likes to call it, you might have seen that a lot of the sorts of things that happen in Angular might not make as much sense to you as things do in Angular 2. Now, why would you want to choose Angular in this case? Well, there's a lot of differences that have come about between Angular 1 or AngularJS and Angular or Angular 2. I know it's very confusing, but bear with me. The nomenclature is kind of secondary here. And of course, just a few weeks ago at NG Conf and prior to that, Angular 4 was just released. So this presentation in terms of what we're actually building today is going to actually be Angular 4. So just to have some fair warning there. However, some of the stuff that I will be working on and talking about is going to be applicable to versions of Angular 2.x. Now, why would you want to choose Angular? Well, one of the reasons why people chose Angular back in the pre-Angular 2 days is that it was very flexible and it was very easy to get ramped up. It was a lot like jQuery in that you could really easily kind of use it in a very limited fashion on a website. However, Angular 2 really kind of changes this quite a bit. One of the things you might have noticed if you've looked at the documentation or looked at some of the Angular 2 marketing is that Angular 2 now has its own CLI, a command line interface called Angular CLI for obvious reasons. And it's something that is very similar to the Ember ecosystem if you've worked with Ember CLI, for instance. So Angular is much more focused now on what they call the one framework idea where everything and every possible touch point of content, which means mobile apps and web apps and native apps on desktop, are all kind of clouched up into the same single ecosystem in that if you build an Angular app once, you should theoretically be able to compile it down to native desktop, native mobile, and web. All right. Now, what about TypeScript and ES6? Well, as some of you probably know, ES6 is the sort of new version of JavaScript that's come about in recent years, otherwise known as ES2015. And this version of JavaScript introduces some very important syntactic features and some very cool things that I'll talk about very briefly during this presentation. One of the things that you might know about ES6 is that it requires a compile step, it requires a build step. And this is one of the reasons why Angular CLI is so useful, because given that Angular uses TypeScript, which also includes some back ported features from ES6, it's actually quite useful to be able to just do the build in a single go. Now, what are some of the biggest features of TypeScript when you compare it to JavaScript or ES6? Well, the first is how many people have worked with, like, type coercion and disgusting dynamic typing in JavaScript in ES5 and previously, yes. So, as some of you probably know, there's such a thing as true and false values, you know, values that evaluate to true or false. There's also things like truthy or falsey values in JavaScript which evaluate to true or false depending on a variety of different situations. I'm not going to go into type coercion right now, but suffice to say that TypeScript is actually using dynamic typing. Now, it was invented by Microsoft, so it probably gives you an idea of why they decided to go with static typing. So, one of the things that you'll notice very quickly about TypeScript is that it's kind of like JavaScript, but it's a little bit complicated, but I'll do a little bit about some of the things that we're talking about as we go through. And the biggest kind of feature of TypeScript that is... Well, one of the most important aspects of TypeScript is the fact that it's great for IDEs. So, I prefer to use the Atom code editor, which I'll be using today, and Atom actually has a really great package called Atom TypeScript. If you want to go ahead and download it, I'll put up the command right now in just a second. And this package does things like code highlighting, autocomplete, linting as well, if you install all the dependencies, and it's really useful. And oftentimes people will say, well, I can just write JavaScript and know how it works, and all this needs to just console log everything. Well, sometimes we don't really have the luxury to do that. So, what are some of the key concepts of Angular? How many people have worked with Ember or React before? Okay, quite a few of you. So, Angular is made up of components, and this is something that's very different from Ember and React. No, just kidding. It's very similar to Ember and React in that Angular is able to provide all of its markup in nestable components, and these components are also repeatable. Angular is also made of services. Now, services, if you've ever worked with things like Ember models, are quite similar to Ember models in that they provide data. They're meant to be a single source of data that can be used across multiple components at your volition. There's also Angular routes, which is very familiar to people who have worked with routing in React and Angular, which is, of course, the paths and the places that you can go in your application that map onto different sets of components. Alrighty, so one of the things that's a little bit interesting about this session today is I actually don't want to use the core REST API. I'm going to go ahead and use what has become the contributed kind of de facto standard for REST APIs in Drupal, which is JSON API, which I saw Mateo in the audience, who is the maintainer. And what I'm going to do right now is I'm just going to go ahead and start setting up a Drupal site. So one of the things that you'll want to do is, you know, you definitely want to create a Drupal site that will work for this. And so one of the things I'm going to do is I'm going to go ahead and just create a directory where I'm going to have my Drupal site. I'm going to go ahead and get into that. Now, the thing that I'm going to do right now is clone the Git repo, and I'm hoping that the Internet holds up here. If not, then we'll just see what happens. And I'm going to go ahead and check out the 8.3 branch because it has a lot of really good stuff, including, of course, one of the new features that came about in the recent minor releases of Drupal called opt-in core support or cross-origin resource sharing. So as you probably know, one of the biggest problems that we deal with when we're doing, you know, cross-site things, normally things like having to do requests across different domains is that there's an issue of cross-origin resource sharing, which is that you can't actually perform requests against another domain unless you have the proper permissions. Now, it's very clear that this is not working, so I'm going to go ahead and go to my projects here. Let's see. Luckily, I've already got a ready-to-go cloned repo here. Now, for those of you who are new to this, I'm using Acquia Dev Desktop to actually set this up. Okay, where is it? Uh-oh. All right, I don't actually have it here. All right, that's fine. I'm going to go ahead and try cloning it again. But in the meantime, what you might want to do is to... Okay, there we go. Now it's going. All right. So any questions so far about Angular, the history of Angular, TypeScript, ES6, about me, about my hair, about... I don't know. Anyways, so one of the things that I'll do right now also while this is going is to actually show you, very briefly here, if you're using Atom, one of the really nice things about Atom is that you can actually go into something like projects. And for example, I'm going to just really quickly go into my existing Drupal site for this. And if you just go ahead and do Atom. Which is a really nice feature of the Atom code editor. You can just jump right in and you have all of your directories available on the right. The entire directory structure that you might need. Now one of the things that you might find useful is what I mentioned earlier, which is the Atom package for TypeScript, which is really useful for auto-complete and things of that nature. So what I'm going to do is show you very quickly right now what that command looks like, which is apm install Atom TypeScript. Now it is a little bit buggy. That's one thing I will warn you. And so if you find that you're getting some linting errors that don't make any sense to you, what I recommend is just closing out of the file and reopening the file, and that usually resolves things. So, all righty. Well, I think that this is going to take a little bit too long for me to get this going, but we're in luck because I actually already have a site set up with this going. So, for those of you who have used a local Drupal Dev server, it's really useful. What I recommend you do is to go ahead and download Devel module, which is really useful for these purposes, and I'm just going to very quickly go through what some of those commands look like. So you want to do drush downloadDevel and enableDevel. And one of the things that's really useful about this is that once you actually have Devel and you enable Devel generate also, is that you can actually generate content. And this is a really easy way to get started. So if you have drush installed and you're ready to go, you can go ahead and do GenC20. And what GenC stands for is generate content, which will generate a random set of nodes of multiple content types that are available out of the box in Drupal, namely article and basic page, and give you what you need. If you want to generate some users, it's just GenU20. Those are some really, really nice things. Now, the other thing that you'll want to do to get set up is to download JSON API and also enable JSON API. Now, the really nice thing about JSON API is that once you enable it, there's actually very little configuration. And that's one of the things that's really nice about how this has worked. So I'm getting a little bit worried about the Internet here. So what I'm going to do is I'm going to go ahead and start the process and short-circuit this process a little bit. I'm going to go ahead and give you the first steps to set up Angular. So one of the things that you'll want to do is to npm install. And I like to set the G flag for global unless you have certain reasons that you don't want to make this installed globally. And you want to go ahead and do at Angular slash CLI, and this will go ahead and install the CLI. Now, what the CLI enables you to do is to do things like set up your boilerplate directory structure, get things going very quickly. And it's actually a really good idea because one of the things that you can do very quickly here is just say ng new, which is very similar to the Ember CLI command, Ember new, and say, okay, ng new Baltimore Angular. Now, what this is going to do is it's going to go ahead and create all of the things that I need for my first Angular application. And the reason I'm doing this now is because I'm really worried about the internet, and this does take a little bit of time. Okay, so let's go back to JSON API. Now, one of the things that's really important to think about here is that after I've enabled JSON API, what you'll find is that if I actually go to my browser and I go ahead and navigate to slash JSON API, slash node, slash article with the query parameter string, underscore format equals API underscore JSON, what you'll find is I've actually got my nice JSON formatted output from this resource. The resource is nodes of type article, and as you can see, all of my generated nodes are here and ready to go. Now, the really nice thing about this is that you can do this with pretty much any of the major content types, of course, and any content types you set up. So this is the view for basic pages, and I've just performed a GET request against all of these things. Now, one of the things that you'll notice about this path up here, I know it's kind of hard to see, but it's node slash page. It's bundle slash type. So you want to be very careful in that node is a bundle, and page and article are both types. When you think about user, user has no bundle, so you actually repeat and you do user slash user, JSON API trivia for you. Okay, now the other thing that we're going to really want to do with this is to actually make sure that we set up cores. So cross-origin resource sharing is a big issue. Now, one of the things that I've used in the past to great success is Sally Young's cores module, but that has now been deprecated in favor of opt-in core support that is available in Drupal 8. Now, the way you set that up is you go ahead and go to sites, you go to default, and you want to go ahead and copy this default.services.yaml file to a new services.yaml file. Now, what happens is when I open up this yaml file, what you'll notice is I've got a whole lot of key value or a lot of configurations here that I can set and a lot of settings that I can set. And down at the bottom here, you'll notice this new section, and you haven't installed 8.3 or 8.2 yet. Now you'll notice that there's cores.config. All you've got to do is enable the true, and what I've done, which I really don't recommend you do for security reasons, is I've allowed all headers, all methods, all origins, which means that you can be coming from somewhere across the planet and requesting against this domain and be able to access the content. Not something I recommend, so you'll want to give this some thought once you've done this. But for local purposes, of stuff it's really easy. All right, how's it going here? Wow, that was awesome. How did that work? Okay, so now we've got Baltimore Angular. I don't know how the internet, it's weird, it's good and bad. Okay, so now that we've set up cores.config, oh, also, one very crucial thing is after you've gone ahead and done cores.config, just in case, as we know, the big old mantra in Drupal is always clear the cache or rebuild the cache. Do a cache rebuild, as we know in Drupal 8. Alrighty, so now we're ready to go. How many people have made it this far? Awesome, okay. So, here we go. So we're going to go ahead and start writing Angular stuff. Ooh, so exciting. All right, so one of the things that I want to do is to just show off just a couple of things that you can do with the Angular CLI right now, right off the bat. Now, obviously, what you want to do is once you've gotten all of your things going, you definitely want to try and make sure that the server is working. So the command here is ng serve hyphen hyphen open, which will open a tab in my browser, and you'll get a nice little hello world message. Oh, first it has to compile. App works. We're done. We're done. All right, bye. No, I'm just kidding. Okay, so the next thing that we're going to want to do is to go ahead and say, okay, well, that's awesome. Let me go ahead and just navigate back out to that project. I'm going to go ahead and open this up in Atom so you can see. So, all right, let's see. Shazambos. Okay, so in the source directory, SRC, we're going to go ahead and be working primarily in the app directory. Now, one of the things that you'll notice once you initialize your first Angular application is, what's really nice is that it creates a Git repo for you right off the bat, which is really nice. And one thing you'll notice is that we've got these interesting files. Now, this file that I just clicked on is app.component.ts, and the extension, of course, for TypeScript is ts. Now, you're probably wondering what on Earth is all of this weird stuff here. I don't even know. I'm used to stuff like, you know, immediately invoked function expressions and stuff. Well, just to be very clear here, and I don't want to get too much into TypeScript, you can look up this stuff when we're done here and it's out of scope of this, which is an example of a decorator function. And we also have, of course, exports and imports, which are the ways that ES6 modules function. So, okay, let's get started here. That's all kind of secondary. We don't need to know all of that for right now because what we're going to start off with right off the bat is to just say, all right, let's change the title because I just want to make sure that I know what's going on here. So I'm going to say Baltimore Angular. Go ahead and save this. And of course, what's nice is that if I go back to Drupal, it compiles and does everything live. And so live development is a really key feature of a lot of JavaScript frameworks these days and it's very useful. Okay, now, one of the things that I also want to do next is to go ahead and start to fill in the initial application because there's some stuff that we want to be able to see. Now, what we're going to build today is a very simple content browser and it's going to be dealing with articles. So just, you know, nodes of type article. And, you know, we're going to try to get through a lot of the topics of Angular at the same time that I try to build this application. Only one of those things are very likely to happen, so we'll see how far we get. So one of the things that you'll want to do is to go ahead, just to start off right off the bat, is to declare some information about what we're actually doing. The first is I want to make sure that Angular is aware of the fact that I'm going to be working with a type known as article. Now, what I do is I'm going to create a class here which is export class article. Now, one of the things I'm going to do right now is because I'm not really sure about what the data looks like and I don't really want to rely on data to begin with because I still have to connect the dots between Drupal and Angular, I'm just going to declare some dummy types here. Now, this is one of the things that you'll notice about TypeScript is that it's, of course, very strict on making sure that you have definitions of these types. And, of course, what I'm going to do now is when I actually export this component, I want to make sure that one of the things that I'm going to export alongside it is an article with some of this information filled in. So I'm going to have title, just call it article number one for now, and, of course, laurum ipsum, laurusit, amet, pissing, okay, so on and so forth. Anyways, so I'm going to go ahead and save this and, oh, fail to compile. Okay, and, of course, it's because we have an issue here where they expected a comma. Let's see here. No, no, no, not quite. Hang on. There we go. Yep, got it. Thank you very much. My eyes are bothering me. And as you can see, it's still not working. So, one thing I'm going to do is go into here and say, oh, unexpected value app component app module. Now, one of the things that you'll notice is that Angular requires a lot of awareness of everything. And one of the things that needs, like, god-like awareness over everything is the Angular app module. And that's kind of like the king that governs every single thing and makes sure that everything is aware of everything. And so what I'm going to do for now is I'm going to just pause this and not do any previews right now. And I'm going to go ahead and do a couple of different things here. The first thing I'm going to do is to set up a root template, which is going to be our .html right here. And I'm just going to go ahead and just do this. Oh, no. Types are so bad. And just put some very rudimentary template information in here. And this is going to be, like, just very simple. Now, you're probably wondering what on Earth is this that I'm doing right now. So what this is doing is actually this ngmodel attribute thingy thingy with the square brackets and the parenthesis and all that stuff, that is actually setting up what's called two-way data binding. How many people know what two-way data binding is? Okay, so that's good. And so what's going to happen is that when I actually modify this right inside this .html here, I'm actually going to make sure that it's bound to the data that's showing up above it. Now, I know that's very unclear right now, but I'll show you what that looks like in a second. Now, the other thing that I'm going to do right now is to go ahead and make sure that we have everything here. Okay, everything's good to go. Da-da-da-da-da-da-da-da. Okay, let's see how things look now. Still not working. Okay. So I'm going to go and check in here and see what's going on here. Okay, appcomponent.ts. All right, well, let's just keep moving on for a second. So, um, now, the other thing that I'm going to do right now is set up some dummy content, some dummy data, because I'm not ready quite yet to connect Drupal to Angular. So what I'm going to do is I'm going to go and create, um, let's see here. Okay, so I've got that. I'm going to go ahead and create some data that can be used here. So what you want to do is now that I've got my class definition here of article, I'm going to go ahead and also set up a constant. Now, for those of you who don't know, in ES6 there's a new keyword, the constant keyword, which allows you to set up a constant, which is basically immutable. And I'm going to go ahead and set up a constant known as articles of type article, right? So this is saying, I'm going to have, this is going to be an array of articles, right? And I'm going to go ahead and just put in stuff like, um, title, article one, uh, body, article number one, body, and so on and so forth. And this will continue on for quite some time. I'm just going to do this very quickly here and just set up maybe three or five. Uh, okay. Now, what's going to happen next here is that I will go ahead and make sure that this is all good to go. Now, um, one of the other things that you'll notice is that there's a lot of errors showing up here. One of the big reasons is because, actually, this is quite buggy. So I'm going to actually reopen this. And as you can see, the errors have vanished. So if you do, oh, well, never mind. They're still there. Okay. So, uh, nope, nope, that's not true. Oh, that's not right here. Thank you very much. This is why you don't do live coding sessions. All right. Next thing I'm going to do is down here, I'm going to add my articles as well, which is going to be this constant with all these dummy articles in there. Okay. Now, the next thing that's going to happen is we've got this interesting two-way data binding going on here. But actually what I want to do is I want to provide a list of these articles right away, right off the bat. So I'm going to go ahead and just add in a couple of things here. Uh, caps lock is on. My articles. I need to skip ahead a little bit. But, I'm going to just show off right here. One of these attributes. Let article of articles. Now, what this is going to do is this is going to go ahead and loop through and iterate over all of the articles that I've declared within my, um, within that constant definition and is going to actually display each one as a list item. Now, some of you might have seen this kind of similar syntax before when you're working with Angular 1 in that, you know, you have these... Oh, excuse me. In that you have ways of looping and doing all sorts of nice things with Angular. So next thing that we're going to do is I'm just going to check and I'm going to probably need to debug this right now. Please add a pipe. Oh, I think I know what's going on. It's compiling successfully. Any questions right now Okay. Good. No questions yet. Um... I'm not sure why this isn't working right now but I'm just going to move on because I'd rather show you the code and I'll show you the unfinished product once we're done, don't worry. But the next thing that I want to do is to go ahead and issue and provide a click event handler. Now, what this is going to do is that when I click on an article on the list of articles that I'm going to have on the table down below in that nice little form that I've just built such that when I click on an article here this down here, this form is going to change to reflect that article. So what I'm going to do next is I'm going to go ahead and add an on-select event to this. So what I'll do is I'll go back to my template here and go ahead and make sure that I provide an event handler here which is going to be on-select. Now what this is going to do is that this right here, this on-select method is going to need to be added to the app component. But right now, what's going to happen is that this on-select invocation here is going to call a method that we haven't quite yet declared yet in this component script file, TypeScript file. So what I'm going to need to do now is of course to provide that information to TypeScript. And so what you'll notice is that of course we've got I think I know what's going on here. This is actually supposed to be down here. And I think that might have actually solved the problem. Woo! Okay, it solved the problem. Alright. Oh, thank goodness. Alright, lucky, lucky break. Okay, alright, so now the next thing that I really need to do here is to make sure that I have underneath here an on-select method. But there's a couple of things that are missing, right? What's happening is that right now this article array has members of TypeArticle, which is the dummy variable that I've just provided. Now eventually what's going to happen is that this list of articles is going to come from a web service, namely Drupal. But for now I'm just going to display some mock content here. Now, in the exported component here, we're going to need to actually put in some information about this kind of stuff that we're about to do. Namely, we're going to need a couple of different things. The first is a property called selected article. And we're going to want to make sure, oops, that it has the type of article. Now as you can see, one of the really kind of like annoying and really disgusting things about TypeScript, which is one of the reasons why I don't like it, is that you can really mess up with equal signs and semicolons and colons and all this stuff because you're defining type at the same time that you're defining values. And that can be really annoying sometimes. So that's part of the reason why some of those mistakes happened earlier because honestly, if you look at it, I don't know, it just looks, semicolons look like equal signs to me. I don't know. But anyways, what we're going to do here is we're going to go ahead and declare. And one of the nice things also is that when you actually create a method, you can also define the type that you expect in that method as the argument right off the bat. So in ES6, what you can do is you can get, you know, you can have default values, right? That's one of the nice things that you can do in ES6. Well, of course, in TypeScript also, you can have default types as well. Now, the next thing I'm going to do here is go ahead and say, okay, when you have this selected article, it's going to become article, right? And this article is going to come from this argument way over here, right there. So just to be very clear here, what's happening here is that I'm going through my articles. When I click on an article, an argument of article is going to be passed back. And of course, go through here, undergo type checking, and then become assigned to this selected article. Still with me? Cool. All right. So the next thing I'm going to do is I'm going to bind this new selected article property instead of binding to article. And so what I'm going to do here is I'm going to go back here and say, okay, well, you know what? I'm going to change this to be selected article. I'm going to change this to be also selected article. And what's going to happen here is that okay, okay. Oh yeah, one thing I forgot to do is also add an ID field as well, because I want to do that. Now you can imagine what this is going to look like when you actually go through this. Now, some of you are probably going, whoa, whoa, whoa, whoa, wait, wait, wait, wait. But what about like the attributes object in JSON API and all that? I'll get there, I'll get there. But the next thing that I'm going to do is actually go ahead and do the following. When there's no article selected, I want the form not to show, right? So what I want to do is when you go to the page for the first time, right? So for example, if I go here, this form right here. But I don't want it to show up beforehand. So what I'm going to do is I'm going to go ahead and create an if statement. Now once again, just like what I did with this control structure-ish thing up here is the exact same thing, is surround it with a div. And I know, I'm glad Morton's not in the room because he'd probably be really mad at me for using all these divs. But I'm going to say if selected article, right, so if a selected article is here, then show this information here, right? Okay. Now in the future, we're going to want to style this and do a lot of CSS, but I don't really have time for that. So what I'm going to do just to make sure that in the future, my front-end developer doesn't come and really get mad at me and threaten to take away my beer, I'm going to go ahead and put in here, okay, I'm going to put in a class for you and when you style it, you're going to be okay. And of course, the most important thing here is to show that when this article is equivalent to selected article, that's when you provide this class. Okay. Everyone's still with me? And as you can see, that was too fast. Let me show this again, okay? Shazambos, right? Now, also what's really cool is if I click on article number three this is how two-way data binding works. If I go... It actually updates everywhere, right? And that's one of the nice things about two-way data binding. There's some disadvantages and advantages of two-way data binding which I'll go over. I don't have time to go over, but if you want to come and talk to me afterwards, you can go over that. Okay, so next thing I'm going to do is to go ahead and split up this app into several different files. Now, this is all well and good, but the problem is that once you want to actually do a lot more work with this stuff and add more components and do a lot of really crazy stuff, and for example, add pages to this content browser that we're building, we're going to need to split this up into components. So, what I'm going to do is I'm going to take all of this stuff right here, this selected article stuff here, and split it off into a separate component called article detail. I'm going to go ahead and create a new file called, and this is how, by the way, nomenclature works for components in Angular 2, is that you have to do the name of the component, and then .component.ts. So, I've created a file called article detail.component.ts. Now, one of the things that you'll notice is that the file name here is article detail.component.ts, right? But gosh, you know, okay, see, sometimes it's nice, sometimes it's not. Anyways, so, but actually, how it's going to be known in the Angular escape is article detail.component. As you saw, if we go back here, you see that it's app.component, same exact story. It's going to be article detail.component. So, just in case capitalization is a little bit confusing here. Alrighty, so what's the next thing I'm going to do is I'm going to go ahead and do the following. First of all, I'm going to do the same thing. Make people aware that this is going to be the same exact kind of component as what happens in the rest of Angular world, which is to import this from Angular slash core. Awesome. Next, I'm going to go ahead and invoke decorator and say, okay, the selector is article detail. This is how it's going to be known in the actual as an element, right? I've worked with custom elements before and web components or with Ember before in terms of Ember components. This selector is going to be how this is going to be known. Okay, so the next thing that I want to do is to make sure to go ahead and export this out as article detail.component. Okay. Our component has been built, but we're missing now the template. So, as you saw, there's actually a couple of templates in Angular. The first is you can declare within your component decorator here, you can actually say, I want to have a template URL. What I'm going to do instead is I'm going to use a really nifty feature available now in ES6, which is multi-line strings. You surround multi-line strings by using backticks. What I'm going to do is I'm going to say, okay, well, I've got my selector here and I also want to add a template. Awesome. And I'm going to go ahead and put in a template here. So I'm going to say, let's go ahead and just take this mess here and just stick it in here. Go ahead and save that. Perfect. Now, the really interesting thing here is that it still says selected article, but the thing is I want this component to be pretty generic. I don't necessarily want it to be very tied to this idea of having to have a selected article. So what I'm going to go ahead and do is actually I'm going to take this and generalize it a little bit such that this is known instead as just a plain old article, because in the end I might want to make this a page or something else or, you know, so on and so forth. So I've done that. And the next thing that I'm going to do is to go ahead and add the article property to this exported component here, such that it'll make everything else in Angular aware of what's going on. So I'm going to add this to there. And what's going to happen here is that I have a cannot find name necessarily, because what's going on here is that I actually don't have any way of knowing what an article is from this point, right? There is no awareness. I haven't defined a class of article in this file here. So what I need to do is I need to actually split out this thing. And by the way, what I'm going to do right now is go ahead and do this. So that selected was article detail. Article detail. Article detail. Very nice. Okay. Now, the thing I'm going to need to do is to go ahead and go back here and split out this definition so that it can be used by a whole variety of different people. So I'm just going to go ahead and cut this out, save this, and put it into another file which is going to house this and save this. Oops, no, I don't want to do that. Actually, yes, I do want to do that. I want to go ahead and save it as article.ts because it contains a nice definition here. Whoops, this is going to my old version of this that I already have working. So I'm going to go here, here, there we go. Save that. Now, you're probably noticing right now, uh-oh, well, there's no article type existing here. So of course, for those of you who have worked with ES6 this is doing this. And what we're doing here is we're actually adding and importing this module which is the article type definition to this. And then of course, what I'm going to do after this is do the same thing over here in my component because both of these have to be aware of what's going on. Perfect, all right. Now, the next thing I'm going to do is to go ahead and make sure that the root component is going to have to indicate to this article detail component which article to display. And the way that's going to work is that I want to make sure somehow to tie that idea of a selected article back to the article that I'm using in my component template. And so the way I'm going to actually do that is to provide that information by using essentially what's called a property binding expression. So how this works is I'm going to add an attribute here and as you saw, I just added in this custom element that I've just created. But I want to add in an attribute, I'm going to pass in a property. This is very familiar to those of you who have worked with React or with Ember which is I'm going to pass in this property and say, well, this is actually going to be equivalent to selected article. So just to be very clear here what's going on here is that I'm going here, the selected article that's available here is now going to pass through here just to de-opfiscate things a little bit. Very nice. Now, the square brackets here are very crucial because they actually mean that the article property that's contained within here is a target of the property binding expression that we saw back here. So this target is so in our detail component we're going to actually have to include something else. And I'm going to explain very shortly why that is. Over here in my component template I'm going to go ahead and make sure to include also the input symbol from AngularCore. Now, what's going to be able to happen here is that to bind this input to the target what I'm going to have to do is to actually, once I actually do the export here use another decorator and now those two things are bound together. Now, in Angular one thing to keep in mind is that you have one component per module. You can't declare multiple components in a single module. And as I said earlier, appmodule.ts, and let me just make sure that things are still working here. No, they're not. Well, fun stuff. Ah, this is the reason why because I haven't declared it in my module yet. So one of the things that I talked about earlier was this God-like thing known as the app module. So the thing that you have to be aware of is when you're actually doing this you have to make it aware of every single component that's in your application which means you have to add all of these things here. Article detail.component Okay. And then we've done that. Good to go. And actually this is interesting because you can actually set up the bootstrap to comment from another component, which is really nice. Now, what's going to happen here is now this should be resolved. Yes, it is. Because what we've done here is we've made the article detail.component have awareness across the make the app aware of the article detail.component 100% now, which means that we're not going to have bugs appear saying what the heck is this article detail thing? I have no idea what it is. Okay, so the next thing that I want to do now is to also make sure to go ahead and move on to services. So this was components. It was a very quick and dirty introduction. Now what's a service? Well, as you saw one of the things that's a big problem here is that we're declaring our dummy data directly inside our root app component. This is the overarching app component here. And that's okay, but I actually want to provide it through a service. So components shouldn't be declaring their own data, right? Especially if that data needs to be used across multiple places. You can declare data in a component as we've done here, but if you want to make sure that that's accessible to other components as well, you want to use a service in Angular. So we want to make sure that we have an article service that provides articles to components. So what I'm going to do is I'm going to create a new file here called article.service.ts. And what this service is going to do is actually going to provide um I'm just going to put in some of this template stuff here. And one of the things that it's going to provide is this data out to everyone who needs it. Eventually, right, we're going to want to declare um we're going to eventually want to use a method called getArticles to get all the articles that we want. So I'm going to just leave that empty for right now. But I want to go ahead and cut out this dummy data into a separate file, right? And if you've seen other tutorials where you're using dummy data, you've probably noticed that they all are exported to different files. So what I'm going to do is I'm going to just cut this all out save that. Also create a new file. Oops, yeah. Called um just dummy articles for now. Paste that in there. And of course what I want to make sure that it's aware of is first this is going to be the export of the module. And of course also I'm going to make sure that I make it aware of the type that is coming from my article.ts file. Great. Now the other thing that I want to do is to include this articles um list in the exported app component here right? Because now it's not aware because right now I have no idea where this is. And so what I'm going to do is actually go ahead and declare this as a type this there we go and now cannot find name articles. Oh yes so the other thing that I really want to make sure to do is to also provide those these dummy variables out to my article service. So what I'm going to do in my service is to import article here import also the dummy variable here from you guessed it dummy variable dummy articles and that should be coming through just fine. Okay. Then what I'm going to do is over here I'm going to say it's going to have me pass something type article and it's going to have to return articles. Now we can use this article service anywhere that we want to in our application as long as we import it into our components. So we want to start off by doing that with here. So I want to say okay let's go ahead and do article service from article.service Good to go and let's see here. Now the other thing that I really want to make sure to have here is a is to use dependency injection to add a private article service property. Now the reason I'm doing this is because we don't we want to make sure that when you need an article at any given point and you need to get data at any given point that that dependency isn't always present. You want to inject it. So what's going to happen is that I'm going to add this and note it as an injection destination with a constructor. Now I know this is really really like heady stuff right now but just bear with me here. What I'm going to do here is I'm going to just say okay give me a constructor function here and it's going to be of type article service. It's going to just be an empty constructor for now. Now the other thing that and that's the reason why that's not being found. Now the thing that I'm going to do also is to say that we need to provide this to our module because once again our module is not aware of any of this stuff. So under providers here providers is synonymous in this case just to be very easy going here is actually synonymous with this idea of article service. So when I actually provide this I will give my sorry one second here I will make sure that our our yes article service, oh yes I need to make sure also that our module has article service as well. So that's going to happen right here. Okay I am running out of time so what I'm going to do is I'm going to skip ahead a little bit just to show you what's going on because I do want to get to a couple of other things before I finish. The thing that I'm going to do is go ahead and just open up the application that I've been working with here and just show you what this looks like let me just exit out of this here. Now start so what I'm going to do is go to this application that I've already built here and uh oh that's the one issue with TypeScript is you always have to compile and you always have to wait a little bit but it's nice because it does it every single time. Okay so now you've noticed here this is our finished product so what I'm going to do is because this was a little bit too much content I'm going to go ahead and make sure that I give this to you as both slides all of this coding that I've done so far and also provide you with a code base at the very end of this but I want to go through a couple of different things to show you what's going on here so it's very clear but just to show you what's going on here as you can see I've got a nice little browser of all of my different articles that have been going on here and these are their node IDs that I generated when I actually did this generation of content. Now I'm going to go ahead and open this up in my uh Adam editor because I want to show you what's going on so what's happening here is that I have my let me just close out of some of these things here what's going on here is I've got my root component which is my articles component and what's happening is that I'm using basically in here I've got a method which is get articles what this get articles is doing is it's subscribing to what's called an observable variable and an observable is basically a variable that you can subscribe to and it's kind of like the next logical evolution from promises for a lot of people it's still very controversial but one of the things that happens is I've added in this method which is ng on init so whenever it initializes whenever Angular initializes I will get all of my articles right off the bat then when I select an article it will go ahead and give me what I need so the other thing I want to show you very briefly here is some of the templates here we've got our templates all filled in there's a slight difference which is this right here now I don't necessarily I did a kind of a bad thing here which is that I didn't really think very clearly enough about how the data was going to look in JSON API before I connected it to Drupal and so I made a mistake which is that I really shouldn't necessarily be relying on dot attributes here unless I'm planning to have also relationships and other things that are contained within the sort of first level of that object of that resource object to be used here in this template as well but just to show you what's going on what's happening here is I've got my article.service.ts and if I had gone through all of this I would have gotten to this point as you can see here I'm actually providing a URL here which is exactly as you would expect the route to Drupal now this is not very extensible because it's just limiting it to the node slash article object and so this is not actually very extensible but it does actually do it very well because what you can see is that it's doing all of the handling of all of the observable stuff extracting out the data, giving us what we need and when I actually go to my components here we've seen that before and when I go to look at what's going on later on you can see that in my templates I'm actually going ahead and digging deeply into those actual attributes and digging into those objects so that's how we're actually building this right now and I just want to finish here because I only have four minutes and if you have any questions please do come and talk to me afterwards about this one of the things I do want to do as I finish off here is to just talk about a couple of different things which is that Angular is obviously very rich there's a lot going on there were a lot of terms that are probably very unfamiliar to you still and one of the things that I do believe is that this is actually a very interesting approach to client side and server side things in general because one of the nice things about Angular is that you can actually execute it server side or client side using Node.js and that is of course the definition of what isomorphic or universal JavaScript is which is this idea of sharing rendering code across client and server some of you may know me from the community as being somebody who has historically advocated for a change and an evolution in the way that we think about Drupal and one of the things that Drupal 8 is really good at as you just saw and as you've seen in many other presentations this week is that Drupal is really eminently great at providing data at being a content repository at being a content service one thing that it has also historically been really good at is providing a nice editorial experience and a very nice UX for all of these things now one of the big questions that I think we're going to have to answer is a lot of people are moving towards this kind of paradigm there was a blog post recently that argued that we've reached peak Drupal that we're now over this kind of peak and I know some of you disagree with that personally because I think the best days of Drupal are still ahead there's a very important set of things that are going on in Drupal that need to occur and need to be accelerated one of them, for instance, is the current effort to convert all of our JavaScript in Drupal core over to ES6 and to use an ES6 build process the reason why is because a lot of people are now building client-side interfaces and client-side applications solely using JavaScript and many people actually don't even really think about HTML and CSS or TWIG for instance when they think about client-side interface or application so I've seen and heard a lot of people talking about well, you know, I really want to provide a really interesting editorial interface for Drupal and I really want to provide an interesting new approach in the same way that Calypso WordPress used React to provide this new Calypso user interface and one of the things that's really interesting is of course about a year ago I proposed that we adopt a framework and I still believe that and the reason why is because we need to figure out the future of Drupal's front-end in a way that makes sense for Drupal's future overall and I want to be very clear here even if we adopt a framework whether it's Angular, Ember, React, View whatever even if we were to adopt a JavaScript framework we can still be the same Drupal that we've always been indistinguishable to the user in the same way that to a content editor WordPress Calypso is indistinguishable to them from a WordPress PHP-based interface when I say Angular plus Drupal equals Drupal I'm saying that any front-end that you decide to put in front of Drupal can be something that works with the whole brand of Drupal I made the same argument in Dublin when I said that Ember plus Drupal could also be Drupal and I still believe that today one of the things that's really tough right now is that the JavaScript landscape is becoming very fragmented and it has always been very fragmented but one thing that I do believe and one thing that I do believe very strongly is that without a significant evolution in the way that we think about Drupal in this context the better off will be in the future if you've really thought about these ideas and you want to discuss them more I have a core conversation tomorrow called Decoupled from the inside out that's being held with Sally Young of Lullabot as well as Matt Grill of Aquia I'd love to see you all there to discuss some of these issues further and in the meantime, thank you very much