Build Web Apps with Angular 2 The Demo Application

Transcript from the "The Demo Application" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Lukas: A bit of housekeeping. So, the demo application that we're gonna start out with is just a simple web application with basic features. We'll be building out a new widgets feature in this. And feel free to use the existing code that's in the sample application as a reference point and again please explore, don't be afraid to try new things.

[00:00:28] Is that if something totally breaks you just you know, undo the local changes and no, we keep doing it. But I really want to encourage everybody to have fun. You know try something new, try different things like, what happens if I try this? Well let's find out and try it in the code.

[00:00:44] And so, this is what this looks like. It's just a basic web page with three kinds of a bunch at the top. Each one of those represents a feature and then we're gonna be hooking it in a widgets feature right next to that. So, I'll just show you what this looks like real quick and then I will tell you how to download it.

[00:01:02] So you can see here, home, about, experiments. And then in the experiments 1, we have Azure, a sub-component and a few extra things happening. But for starters we'll kind of work out of just use the home components as a reference, but really a simple web app, that I found this really helpful for people to just kind of ramp up.

[00:01:26] And so you can download this here, if you go to this bit.ly link. And so because this is a demo application, that you're going to do your challenges on, that now everybody gets to put on their spacesuit, and kind of go exploring in this uncharted territory. But this was built off of the Angular class starter which is an excellent, excellent project seed that Scott Patrick Stapleton and myself have worked on.

[00:01:55] By that, I mean 98% Patrick, 1 % Scott and myself, I think I've fixed some spelling errors in the readme but they have done a really good job of kind of putting a really full featured Angular 2, our project seed out there.
>> Lukas: So is everybody able to find and download this web app?

[00:02:21]
>> Lukas: Also if you go to Github.com/onehungrymind everything is there as well. For all of the, for actually all of the days in the workshop. Now, we will be probably changing some things. You know so day 2, we'll probably tweak some things tonight. So, if you download it now, you may need to download it tomorrow.

[00:02:42] The reactive stuff we may make some additional changes. So, just make sure on the day of the workshop you down the latest for that, but that's at gethub.com/100 mind. So we sent out the survey, which I think we have like a hundred people actually submitted that. Thank you for doing that.

[00:03:03] There is, there was a broad spectrum of skill sets and requests, so we have individuals from I don't even really know Angular but I think it's really going to be this rad thing to kind of moreso in the middle. I'm pretty familiar with Angular 1. I don't know Angular 2.

[00:03:20] I'd love to know more about it and kinda see what it's about. And then on the other end you had a few people that really had very specific technical questions. And we're going to do our best to get to all of them. With that said, one of the biggest requests that came in is that we'd really like to see working examples of things.

[00:03:39] And I know that Ward Bell is doing a valiant effort in the documentation but even myself is like how does this thing even work? And then you start scouring the internet for plunks. So what I have done is if you go to onehungrymind.com/fem-examples you can see a ton of Plunks here that we've generated to use as one for demonstration purposes.

[00:04:14] But even if we do not get to all of them please feel free to go through and check these out. And
>> Lukas: And let me see here. We just pick one.
>> [SOUND]
>> Lukas: And so myself and another developer have spent a significant amount of time actually working through these and this would just be poetic justice if the plunker just crashed right now.

[00:04:48] The first workshop I did it's like, we're gonna do it on Plunker and I'm gonna have no dependencies on anything else and Plunker went down and so I basically had to freestyle for most of the day. But you can see here we have a readme that we're pulling in.

[00:05:04] We actually had some pretty good commentary about that. And you can see the code here, so we're bringing back the blink tag of sorts and then from here you can see this actually rendering. And it may have already went but this is the idea. So you actually have kind of what it's doing, the code in it, and the code actually rendering down here in the bottom, and you can also jump in and see the code and play around with it.

[00:05:35] So this alone I think is going to be a really good resource. We'll be adding day two tomorrow and day three on Friday. So, when it's all said and done, who knows there might be a hundred useful plunks that you guys can use for kind of a cookbook reference style resource.

[00:06:01]
>> Lukas: One of the repository to download. Scott threw this together last night at three in the morning. I don't believe he sleeps. In fact, I think he is a vampire. There were some questions about, is this workshop going to be in TypeScript JavaScript. I think, some of the questions was actually normal JavaScript, plain JavaScript, and the answer is we are going to do this in TypeScript because I believe you get the most mileage out of Angular 2 with TypeScript.

[00:06:34] But we are going to, Scott is going to have some commentary on how you actually do Angular 2 with es 6 and es 5. And so he has created this repository right here for us to reference in the second module. Again this is at GitHub.com/onehungrymind.