[MUSIC PLAYING] MARK THOMPSON: All right. So what is Angular? So Angular is a web framework
for building what we like to call scalable web apps. And when I say scalable,
what I'm talking about is an application that grows
with you in a few ways. Here's one way. It scales as your needs scale. So Angular has a lot of features
that, as your application goes from, let's say, 5
users to 500,000 users, the infrastructure
provided by Angular is really designed
to build toward that. So it's a really great
framework to grow with you as your project grows. And then we say it's scalable,
because as with people who work on teams,
what you'll find is because of the best
practices found in Angular-- things like TypeScript and
some of the other engineering practices that come built-in-- you'll find that other engineers
can join teams very quickly and be a part of Angular and
be a part of your Angular team because of some of
those best practices. So we like to think
that this thing scales. OK, now let's talk
about what we're going to be building today. So this is the application that
we're going to be building. And this is called
FairHouse, and it's just a mock application
where the idea is that someone who's in need
of temporary or transitional housing can find a place to
live through our application. So we're going to build,
again, the basic part of this application. And feel free to extend
it and make it open source and just continue to build
out features after this because you'll have the
code to be able to do that. So and I want to put
this out in the front. What you want to do here is
focus on the functionality first and then we'll make it
look like this toward the end. But I don't want to
focus on the CSS that makes it look like this. While we're building it,
you're going to be thinking, this man said, it's just
going to be a beautiful app. This is not looking beautiful. If you feel that
way in the middle, that's OK, because it's
not going to look beautiful until the end. And then we'll add the
styling at the end. So how do you build an
Angular application? Well, an Angular application
is built with this idea, the fundamental
thing is a component. And the component is
the basic building block for an application. Here's how I want you to
picture this in your mind. Think of a single component. A single component-- think
of it as a LEGO brick. And a LEGO brick
by itself is really just a danger zone for you to
step on and hurt your foot. Anybody who has kids, you know
the pain of stepping on a LEGO. So by itself, it's
not very useful. But when you put lots and
lots and lots of LEGO bricks together, you can build
some incredible things. And that's how I want you
to think about your Angular applications. We're going to take smaller
components, put them together, and we're going to build
really incredible, scalable applications. Let me stop right there. What questions can I
answer at this point? I'm going to check the chat. OK, sounds good. We'll keep going. So what are components
made out of in Angular? I'm so glad that you asked. First, we use TypeScript. TypeScript is the
programming language that is what we call a
superset of JavaScript. So it includes
all of JavaScript, and then Microsoft themselves
have added some more advanced features, like types. And we won't spend a ton of
time talking about types today, but types really allow you
to have more confidence when you're programming. And that's something that,
as you folks have programmed with JavaScript, you've
seen that sometimes you can pass in a string
to a function that's expecting a number
and you don't find out until you're running the
application and everything blows up. And then you're trying to
figure out what's happening. So TypeScript is
a part of Angular. And we think that it helps you
to build better applications up front. Next, we use CSS as
a part of components. And CSS help you to
style your components. In Angular apps, you
can use CSS or you can use Sass, which is a
preprocessor for CSS that gives you some extra magic. But I'm going to
use CSS in this one. But hey, if you are comfortable
with Sass and you're like, hey, I want to use that,
you can use that today. Gio, I totally agree. And Daniel-- so let me
take a break for a second. I thought TypeScript was
a JavaScript compiler. Yes. OK, so TypeScript is a compiler. But that compiler-- the output
is going to be JavaScript. So it takes in TypeScript and
gives the output as JavaScript. Good question. And then we had HTML as the
fundamental building blocks. Now if you look at something
like other frameworks, like React, they use
JSX, which is like HTML. But with Angular, we
just go with basic HTML. And so everything in the HTML
set-- all your HTML skills are applicable right now. You don't have to learn
anything different with your HTML, which I think
is an advantage for developers. All right, friends, so
that's the basis of what we're going to get started. So now we're just going
to start building. So I'm going to
go to a terminal. Let me just make this nice
and big so everyone can see. Let me clear this up. I'm going to try to zoom
in as much as I can. So I'm going to go into-- I have a folder for today. Let me put this back at the top. Can I just get a
thumbs up or a comment that you could see this? And if you can't
see it, let me know. If the font size is too
small here, let me just-- I want to make it
really big here. OK. Can I get a thumbs up
that people can see this? If you got the camera
on, give me a thumbs up. If anything I show is too
small, leave it in the comments, and then I will totally come
back and answer that question. Mark-- does Angular
support CSS out of the box? Yes, it totally does. And we're going to
see that right now. Great question. It totally does. Support Sass right
out of the box, so you don't have to
add anything extra to make that happen. Great, great question. All right, friends, so now
we've explained this part. So if you have your
Angular CLI installed, here's how you can confirm. If you typed ng in a
command line and hit Enter, it'll tell you a bunch
of available commands. But this is great. This is great. That means if that
doesn't work, if you get like command not found
or something else, that means you missed something. It means you missed something. So now let's build
our application. So here's what we're
going to type-- ng new fairhouse --routing. I want to break this down. So ng is our tool
that you installed that will allow you to create
Angular apps that interact with Angular applications. The new means let's
build a new application. fairhouse is the name
of our application. And then this parameter
I'm passing in, --routing, that's telling the
Angular app, include routing. And when I say routing,
I mean the ability to navigate to different
pages within our application. That's what that
routing's going to do-- let us go to different
pages in our application. Hit Enter. It's going to take a minute
for some of you folks because it's going
to download stuff. But right here, the first
question it's asking is, Which stylesheet format
would you like to use? So going back to
Sergei's question, so you can choose CSS, SCSS,
or some other preprocessor. I'm going to go with CSS,
but if you want to use SCSS, you can do that. You can do that. So hit Enter on CSS. And now it's creating
our application. OK, I got to remember
to stay in camera. Wait a minute. I'm going to take the elevator. [IMITATES MACHINE CLANGING] Just came back. All right, friends. [LAUGHS] What does ng stand for? That's a great, great question. So ng was not our idea,
meaning the Angular team. What happened was when we first
created Angular.js a long time ago, the community started-- they just started using it. And they're like, yes,
we think this is great. And we're just going
to say ng to represent Angular applications. And then there you go. That's what happened. And the community
started saying it, and then since then, it's
been a part of our story. OK, so when everything
is done successfully-- let me do something here. OK, so if we do an ls, you
should have this fairhouse. This assets was mine. I put that there already. But you should have a
fairhouse application. And yes, that's right. It came from the second and
third letter of Angular. So yes, that's totally right. So if we go back, it's
really like A-N-G. And so people just
started-- they're like, hey, we like this as a prefix. But it doesn't mean
anything specific, though. I have Angular 12 locally. And when I created
the app, I was asked about choosing
[INAUDIBLE] and so it looks like a new feature. Yeah. So Sergie, if you're on Angular
12, that's a previous version. Yeah. We are on Angular 13,
so you should be able to-- you should be able
to work on Angular 12, but I'm using Angular v13. Yeah. OK, can I explain why we
have the routing flag? Yes, Merk. So all I did there is I passed
in-- so the --routing flag-- here, let me go
back to that part. These are great questions. And all questions are
fair here because this is a beginner
workshop for Angular, so all questions are valid. If you're a more advanced
user and you just want to hang out with us for
a little while, that's fine. But I'm going to answer
questions like this, so be prepared for that. So why did I put
in the --routing? I was you could see
what I was pointing to. Here we go, --routing. Why did I add that? What that allowed me
to do was tell Angular that, when you create
the new application, I want routing enabled. I want routing enabled. Good question. Let me check the Q&A, as well. OK. Hugo, I will save that
question for the end. Since that's a more advanced
question about RxJS, I will save that for the end. Or you can find me on Twitter
and we can talk about it. Is there any command for-- routing, like add after
the name of the web app? Yeah, so here's a great
thing to check out. So the question is, are
there any other commands that we can use? Yes, there are lots
of other commands that you can use,
other than --routing. The Angular
documentation for the CLI would be a great place
to start with that. So with that being
said, let's actually run our Angular application. So let's see here. Now I'm going to
open my project. So I'm in Visual Studio Code. I'm going to go to
my cds folder and I'm going to click on fairhouse. Then I'm going to click Open
to open Visual Studio Code. So open your application
in your editor. Open your application
in your editor. I'll give you a
second to do that. And if I'm going too
fast, let me know. Let me know. Let me know. We got time. We have time to
be together today, so it's going to be great. OK, so who asked
me that question? I think it was Adarsh
who wanted to know? Or wait, who asked-- yeah, it was Adarsh. OK. Yes, you can do that. Yeah. So yeah, you folks at home who
don't have to have a specific setup to make sure that you
don't have a lot of windows flickering, you can do code . in
the same folder and that'll get you going. But I had to keep
my setup so that way we can keep this party clean. Awesome. So now that I have-- my Visual Studio Code will look
a little different than yours. Mine is in high
contrast version, meaning I'm keeping
it like this in case we have any viewers who
need high contrast mode. And I want to make sure
this is accessible to as many people who can watch this. So if mine looks different
than yours, that's why. And so when your
Visual Studio Code opened, open up your terminal
and then do this-- ng serve. Is that viewable? Is that too tiny? Let me know if it gets
too small there, OK? Let me know. OK, great. Thank you, VCindy. I appreciate that. Adarsh, that sounds like
a system configuration because we have a git-- so git
is installed-- not installed. A git project is
initialized by default when you create a new project. So if you look at the CLI
for ng new that I just sent, you can create it without
having git initialized and then that should
fix that problem. So I think that's a git issue-- I think. I think that's a git issue. OK, so do ng serve. Here's what ng serve
is going to do for us. You can say yes or no to this. This is just so we can know
how people are using it, but you choose whatever
feels comfortable for you when it asks you if you want
to let the Angular team know. And you can always turn it
on and off for analytics. It's up to you. Choose whatever. It doesn't change the way
your application performs. So this is going to start a
development server right out of the box. So remember when I was
saying that Angular is a scalable framework? This is what I mean by that. We're giving you
lots of information. So when you see this
output from ng serve, a few things are happening. One, we're building and
compiling your application. And then we're telling
you what your bundle sizes are for the app. Now this is a
development bundle size. When you go to
production, you're going to see a different
size because we'll not have to include all the
development-type stuff. When this runs
successfully for you, go to localhost:4200 and that's
where your application's going to be. So let's do that. Let me go to localhost:4200. Let's go. Look at that-- right
out of the box, working Angular application. OK, friends, well,
that's been it. Thank you for coming
to our workshop. You've built your
first Angular app. And now we can-- just kidding. I know there's
more to the story. Laurie, good question. Yeah, these bundle sizes
are only for development. When you do a build for
production and deployment for production, we will do tree
shaking, like all the stuff that you need. We optimize this quite a bit. This is just for development. But good question. Great, great question here. OK, awesome. This is just a
default application. We can go in-- and we're
going to leave this running. So you leave your
development server running. So let's go in and
actually make some changes. So I'm back in my project. You can see my project
here with all the files that were created
by default. These are configuration files,
your package for your MPM, et cetera. I'm going into src/app. And then I'm going to go
into app.component.html. So I'm in
app.component.html, just to give you folks some idea. And you know what else I'm
going to start doing, too, when I type a command, I'm also
going to paste it in the chat, just in case people need it. There you go. All right, cool. And then we had ng serve. Awesome. Let's keep this thing going. So I'm going to close this
side one so we can see. So we have a lot
of default styles. If you scroll all the way
to the bottom of this, there's only one thing
I want you to keep. Only one thing I want
you to keep is line 501. Everything else-- you
see where it says, content above is
just a placeholder and can be replaced? Get to the end of this
file and then delete everything above 501. And here's what should
happen after you're done. As you delete all
of that stuff, it should just say router outlet. I'm going to explain
that in a second. But before I explain the rest of
that, I want to type something that everybody
needs to know about. I can't get my emojis
working anymore. OK, cool. So now we got a Hello, World. We save it. And this is what should
happen on your application. You see, because this
thing has live reload-- or it's not really-- it's a reload, not like a-- yeah. It's just going to
refresh the page. I don't want to
misdescribe it to you. But what it will do
is, when you make a change in your
application, it'll refresh your application
for you in your web browser if you have them side by side. So it's a simple live server. Yep, that's a great
way to explain it. Thank you. All right, friends. Now we're ready to get
this party started. We have all the
parts that we need. We have our application
running so far. Yes, ng serve for
the live server. Yep, that's correct. Let's start stubbing
out our application. So what I am going to type-- so I'm going to
do like a section, and I'm going to
give you this code. Actually, here. I'm just going to give
it to you now, but just try not to go ahead
of me because I'm going to explain some stuff. But I want to put
the code for the file that I'm working in right now-- I'm going to put it
out there for you, but just try not to go
too far ahead of me, OK? So here's what we're
working on right now. This is the part that
we're working on. Do not type all of this. But we're going to break
it down and just add the parts that we need. So we're going to
have our section here. And the section, I'm just going
to-- oh, that's the wrong one. I lied. See? That's why I said, don't
go too far ahead of me, because I don't want to
give you the wrong thing. One second, friends. I am looking for my other
example of the code. Give me one second, friends. I'm just pulling up my-- all the stuff that I
have prepared for you. Give me one second here. I'm still here, friends. I'm just looking for the
part that I prepared for you so you can have what you need. It'll be fine without it. It just will make your life a
little bit easier if we had it. OK. One second here. OK. So here's what we
wanted to do first. Just getting started
out here, we're going to get rid of
our section here. That's right. Get rid of our section. And we're going to do
a header because we're going to create that banner. So if we remember,
in our application-- back to our application,
just so you can see-- we're going to create this
FairHouse banner at the top. So we're going to do
that part right now. So to create that, I'm
going to do a header. I'm going to an h1. Inside that h1,
I'm going to type the title of the application. And then we'll add
the image later. I don't want to
add the image now because it's just
not that important, but we will add
that back in later. So you should delete
from app.components.html. OK, there we go. Cool. So we're all in
app.component.html. So all you should
have right now, if everything is working
the way you want it to, is your FairHouse text. If you saved that, it
should say FairHouse. Next, we're going to
wrap line 5 in a main. This is the main section. Now I want explain to you
what we're doing here. The structure that
we're using is that the header is going
to be on all of our pages. So this is going to go
into app.component.html, which is our parent component
for our entire application. app.component.html-- that's our parent component
for the entire application. So I'm just kind of showing
you the big container app. This is like the big
container component. And that one is where you're
going to put all of your things that are going to show
up on every single page. And what I'm saying now is that
on line 4, we have a main tag, and then we say here's
our router-outlet. The router-outlet says,
here's the destination. Every time we go to
a different page-- every time we go to
a different page, here's where I want that
content to be placed. All right, friends? If you have more
questions about that-- so similar to a div
that contains the root. Yes, similar. Yes. Yes, except for when
I use main, it's just a more semantic
HTML tag versus it being just a random div. Main helps screen
readers and people who use assistive technology. So we want to keep
all of our friends able to use our applications. OK, great. So now we have that working. So here's the next thing
that we need to do. We need a component-- so if we go back to
our application-- in fact, do I have a
laser pointer, maybe? Laser pointer. OK, good. So we've created this part. This header-- this
part is created. And this is the header. But this next part,
this is like-- what would you call this? In the chat, what
would you call this? If you were designing
a web app and you're trying to figure out, well,
what is this part here where it's like the main
text, the landing page, what would you call this area? If you were organizing
it into a component, what would you call this area? I see body in there. I can see search container. That's actually not a bad idea. I would say, if this is a page,
would you potentially call it the home page? Would that feel OK? Because this is a place
where they're going to land, like the home page? So this is like our
home page that we're making right here that I'm
outlining with my magic pointer here. Right, or hero section. So you have some options here. So now here's what
we're going to do. We need to create
that component. We need to create
that component. And let me show you
how we can do that. I'm going to open a
second tab in my terminal. Open up a second tab in my
terminal, so I have two. So I have the one with
our server running and then I have
this one running, where I can just
type in commands. We're going to use ng
generate component-- we'll say home. So I'm going to let you
folks be able to see that. So that's the command
I want you to type. And let me break this
down, what we're doing. So ng is the Angular CLI. generate means create
something for me. This is like literally
code generation. So create something for me. Then we have component-- one of our components, one of
our tiny little LEGO bricks that we're going to add
into our bigger production. And then the name
of the component. So type that in. I'm going to put
this in the chat, as well, in case people
need some more time. OK, cool. So we got home. Now it's told us
where it's created it and what has been created. We got all the components-- all the parts of our component-- CSS, HTML, and TypeScript file. And then the spec.ts,
this is a test. So we also give you a
test out of the box, which is really helpful. There is a short form, but
since it's beginner-friendly, I want to make sure people
know what we're doing. So the short form
is ngc ngc home. But that doesn't
mean anything if you don't know what
you're doing, so I want to make sure that's there. So here's what we're
going to do next, friends. We want it to show up. Every time you come
to the home page, you open our application,
that's what we want to show up. So let's go in our application
and make some changes. So we're going to
update our route. So I'm going to go back
into my application. And what you'll see
is app-routing.module. That's the file I
want you to open. And friends at home, who are
a little bit more experienced and who have some experience
in some of this stuff, if you have cool
shortcuts that you want to leave in the chat
for the other workshop participants, that
would be great. I'm super happy to have you
folks participate, as well. So let's go into
our routing module. Here's where we get
to create our routes. Now I know in other
frameworks, there's a different style where
you create it in JSX and all that kind of stuff. But here we do it in our
app-routing.module.ts. We just created
a home component, but we need to tell
Angular that when the main page loads, that's
the component we want to see. So here's what we do. We create an object literal-- oh, just the empty object, two
curly braces, open and close. The first part is path. With Angular and VS Code,
we have some really nice integration. It's giving you
the information you need to know about what
you're trying to enter. So yes, we want path. This is going to be
our default path, meaning whenever someone
goes to localhost:4200, we want them to see this path. So we do empty string. And then from here,
we'll say component. Well, which component
do we want to go to? Someone in chat, tell
me, which component do we want to go to when
you get to the home path? Type it in chat for me. I like that energy. Ulana, I like that energy. Blessing, I like that energy. Let's go. KB, I like that energy. That's what I'm talking about. You know, I have
something for you all. You see this? I've been saving this. Let me get it out of my pocket. You see this? High five from me to you. You're doing great. So we'll type HomeComponent. Because I'm in
Visual Studio Code, it's going to autocomplete
this if I hit Enter. And now that's done. We have our route created. And not only do we
have our route created, we have our component. Now this will paste very poorly,
but I will paste it anyway. Well, that's not that bad. That's actually usable. Do you see that? That's actually usable. Not horrible. Make sure you copy the
right parts, though, if you have to copy that. If you look at our application
on the left-hand side of my screen, we got home works! So that means
everything's linked up. So our route is done. What questions do
you have, friends? Can I help someone
with a problem? Anyone stuck? Oh, so Carlos says,
this is good practice. Yes, I can. I do both things. So I'll answer this
question while I go back to the home page. And then I'll also-- I'm in the app.component. OK, hold on. Let me do this. HTML page-- this is
what I had in there. OK, let me answer three
questions at a time. So first, VCindy, I
just pasted my content into the chat from this page
just in case you needed it. Carlos asks, is it a
good practice where you name pages as components? Yes, that is how we
do it, because there isn't a different type of
thing that you do for pages. So your component
will be your page. Yep. Yep. And so you could have
called this landing. You could have
called it main page. That's going to be
based on your team that you're working
on for your project if you say something
like main versus home. I just like home
because it's very clear when you start to hear it. Very cool. Little confused with
the upper and lowercase. Sue, OK, let me
answer some questions. Can you be more specific? Is it with the upper and
lowercase with the name of the component, Sue? Is that what the question is? Because if that's it,
this is what's called-- this is camel case. But this was created for you. So by default, the
convention is for components, we do capital for
the first letter of each word in components. And then when you're doing
variables, for example, then you would do your
camel case the other way. Daniel-- cannot
find home component. So here's what I want you to do. Look in your files. So when you go to here,
I want you to make sure that you have this
folder structure, where you have
src/app/home, and then inside there, it should do it. And also make sure that
you've imported home from the right location. Make sure your
import is correct. OK, let's see. Let's see. I guess home-- Doug
wondered-- it's just part of the new app template. Yes. So that name,
home.component.html, that was created for you based on
the configuration of the default project. You can change that
name, but that's our convention, where
we say the name, then the type of thing it is,
like a component, and then the file extension. Sergei, I wish. I'm going to talk to
the team and say, please put in code support. How to decide when
we need a component and when we can do stuff in
the current place itself? OK, Ashley, when do
you need a component versus when do you need to just
do things in the same place? Well, that's going to be
dependent on your application. So why I want to do a
component is because I looked at our application-- so let's go back
to our application. The FairHouse logo? I want this to show up
on every single page. So that'll be in the
main app.component. But then I said, hey, I want
this section to actually change, this middle part. I want this to change over time. It should be something else, so
that part could be a component. OK, Sue, I'm so
glad you figured it. Sounds good. You need to import. Good. That sounds good. How was it imported? I see line 3. Oh, good question,
TheLivingEarthling. How was that imported? So on line 3, when I
started typing component, you see how it gives me
a code tip right here? It knew that's what I meant
and then it added it for me. That's why I didn't
have to type it. Thank you for calling that out. VS Code added the
import automatically because it could determine
what I was trying to type. OK, great. And all these questions
are great questions because you're new to Angular. You're new to Angular,
so this all is fine. I love this. I love these questions. Excellent. Now let's start making
our home component look closer to what we have here. So we need some text. We'll add the image at the end. We'll need some text at least. Then we need to search by city. And we need this button. So let's start adding those
parts to our application. So to do that, I'm going to
go to home.component.html. So go into that file,
home.component.html. home.component.html--
so that's where we are. OK. Oh, VCindy, I'm so sorry. I didn't see that. Is that still working for you? Oh, you stopped ng serve. Yeah, so you got to restart it. Good question. Thank you for helping, friends. That is so phenomenal. You know, I have
something for you. Bow, bow. That's for all of you
for helping each other. You see that? So I hit you with
some clean dabs. You know, dad dabs. What? Let's get back to-- [LAUGHS] people is just going
to start leaving the chat. They're like, you know what? I didn't sign up for this. I'm getting out of here. [LAUGHS] So in our home
component, so here is what we're going to do next. So here's where our section
is going to come in. So we're going to do
a section and then I'm going to do a div here. And this structure will make
sense when we go to style. And then I want to put the
text, Transitional housing can be hard. We're here to help. I'm going to keep that
all on the screen. So you can get that working. And I'll put this
in the chat for you. So don't worry. I'm not going to leave
you hanging, I promise. I will not leave you hanging. And so this is in
home.component.html. I won't leave you hanging,
friends, I promise. I'll put this in the chat
once we get a little bit more of the text typed in there. So now that we have
that part working-- we needed these and it
works to be interactive. I hope that's a good thing. I hope everybody feels
like this is interactive and you're having a good time. OK, why did I add section? Oh, that's just
because semantic HTML, meaning it should
mean something. Section and div are
the same in terms of being block-level elements,
but section has more meaning than a div. Section has more
meaning than a div. And so someone with a
screen reader, for example, they can navigate
our page better. And then the screen reader
can interpret the page better. And without going
on a soapbox, there are over 2 billion
disabled users out there, so not everybody
uses the web like we do. If you are not
disabled, you have a very different experience
to somebody who is disabled. So when we build stuff, we try
to keep the entire community in mind, OK? So off the soapbox. So now we have that going. The next thing we need, if
we look at our application-- let's go back to the app. So we have our text. That's working. This is great. Now we need to have the
input and the button, so let's add those things. Our sections do need headings. Let's go. Sections do need headings. Let's go. That is so correct, Sue. That is so correct. So that's the mistake
that I made here, is that I didn't add
the heading here. The transitional text could
technically be the heading, but that's going to
change my styles. So when we add the
styles at the end, I will go back and fix this. So please hold me to that. Thank you so much
for calling that out. Yes, Laurie, same thing. Thank you for calling that out. I made that mistake
when I designed this, that I didn't include
the heading there. Thank you so much. We'll fix that after we add the
styles, but not after we ship. Before we ship, but
after we add style. So now that we have
our text there, let's add the rest of this. So we got to get our
inputs and our buttons. OK, so now I'm going
to add another div here and then we're going
to add a few things. We're going to do
a label and we're going to fill in that label,
and we're going to do an input, and we're going to do a button. So I'm going to let you folks
start typing those things so you can know
what's coming next. Our label is for we're
going to say city. So this is going to be the
label text for that city. And we'll do Search by city. And city doesn't
have to be capital. We can do lowercase here. Which means that we'll
say the type for here-- this is a text type, and
then we'll do id="city". And then for our
button, we'll do Search. Now I don't want to spend
too much time teaching the HTML here, but I
want to make sure that we get at least this working. So this is what you should
see on your screen so far. I'll give you what I got. That way, you can
catch up with me because I'm going to speed up
just a tiny bit so we can make sure we finish
within our time frame because I do want to make sure
we get the rest of this out. Brent, you should get the
Angular Language Service. Could somebody put the link
in the chat for the Angular Language Service? Because it's going to give
you all the great support for templates here. Perfect. That's really going
to help, Brent. That's really going to help. So now if we type a city--
let's say we do Chicago-- and we do Search,
nothing happens. But what do we want
to happen here? How do you turn it on? When you go there
and you click Enable, it should be on for you. It should be on for you. So if you look at the
Angular Language Service, when you go into the
page, this will either say Enable or Disable and
so you get to choose that. There you go. So let's get back to-- yeah. Oh, you definitely have to
reload once you turn it on. So just reload your project. So in order to make
this do something, what I want to happen is that
whenever I type in this form field, I want it to be stored
in a variable someplace so I can use it
for my data search. Every time I type
in here, I want it to be stored
in a variable so I can use it for my data search. Here is how we do
that in Angular. In Angular, what
you will need to do is include something
called ngModel. Remember, ng is the prefix
that we use in Angular. And then we say model-- it's like the data source
that we're going to use. So we use this funny
syntax called banana in a box, so the square
brackets on the outside and then parentheses
on the inside. And it has to be in that
order-- square, parentheses. And then what we'll do
here is we'll say ngModel. But you're going to
notice something. It's not happy. And I'm going to tell you why. And we're going to set this
equal to blank for now. OK, it's not happy. We have to make a change here. See, my whole thing is broken. It's not happy and we're
going to make a change. I'm going to put this in
the chat for you folks. So that's what my
input looks the. The reason it's not
happy is because we have to tell Angular-- so
to try to keep those bundle sizes or the
application size small, we don't always import
and include everything out of the box for you because you
may not be using form data. So if you decided to use
forms, which we have, we have to tell Angular, OK,
include support for forms. So let's do that. The way to do that is
we're going to go-- in our application, there's
something called app.module.ts. Can you see that, app.module.ts? Go into this file. Go into that file real quick. You'll be having a
good time in there. So this is a part of
the Angular structure. And I don't want to
go too deep into this because there's a lot to talk
about with app.module.ts. But here's the most
important part. app.module.ts is
telling Angular-- it's providing all the
dependencies that we need. So like we have our routing. It's providing
those dependencies. When we created our app
component and our home component, it's saying,
hey, make these available. So the thing we have to worry
about right now, though-- go up to line 7. Here's what I want
you to import. I want you to import-- meaning like, bring it in
the libraries for this thing. I want you to
import FormsModule. import FormsModule
from '@angular/forms';. I'm going to give you this
right now just to keep everybody on track with us. I'm going to give it to you. Yes, Luana, you can
add routing later. But the reason I didn't
want to add it later is because I didn't want to
confuse you at the beginning. I wanted to give you
a smooth introduction. So when I did the
--routing in the beginning, it just did automatically
the manual steps that we're doing now. So yes, you can
always add it later. And so now things
are more comfortable. This isn't as foreign. But imagine starting out
having to add routing. You'd be like, mm,
I'm quitting this. I'm out of here. So now that we have
our import, save it, and then our
application comes back. I know what you may be thinking. You may say, oh Mark, I
don't know what happened. Let's see. Let me put this in here. That's my NgModule. Just in case you
need, it's there. A --forms? Oh, I don't know offhand. But I want to write
that down because that's a really good idea. SueAustin, that's
a really good idea. I don't know if we have that,
but I'm going to write it down and I want to
probably implement it. Yeah, I will probably
propose that. Be like, hey, let's
add this by the fall. That's such a great idea. OK, and I will give
you credit, Sue, so tag me on Twitter to
remind me, so that way, I can give you a
shout-out when we do this if they don't reject
my idea or your idea. If they don't reject my
proposal for the idea. Yeah, Dennis, why do some
end with .component, .module? Yeah, it's because the
.component means that it is a component. .module
means that it's a module. Modules have a very
special role in Angular, where you don't really
work with them as often, but they just manage
your dependencies for your application. And then you have some other
stuff going on with components. Components are the
building blocks. So that's why some end
with different types. That's really good, though. OK, so now that we
have that going, I'm going to jump back to
our home.component.html and we're going to fix this
now, because it's saying, well, you got to put something here. All right,
SueDonaldson, peace out. Hope you had a good time. And the other friends-- for coming, thank you so
much for coming so far. I appreciate you. So what we're going to do
here, we're going to do city-- now city doesn't exist yet. So in the NgModule-- let me put that
in the chat here. Keep this all going. OK, very cool. So city doesn't exist yet and
So it's giving us an error. You see? So it's saying,
property city does not exist on HomeComponent. So where do you think we should
go to create the city property? Where should we go? Type that in the chat for me. Where should we go to
create the city property, based on the error
that's on my screen? Yeah, to our home component. Yes, to the home component. Nice job, friends. We got to go to
the home component. If you're using the
Language Service installed, you see this little link at
the top, Go to component? Right at the top of your
file, click on that, and you're right
in your component. If it's not there,
you don't have the Language Service installed. Not the end of the world,
but it is definitely helpful if you have it installed, OK? So what we're going to do here
is we're just going to make-- I'm going to go under the
constructor(), right here. So I'm on line 12. I'm going to type city and
set it equal to empty string. So now this is going to
be your first experience with the components. So that's going
to be really cool. Oh, I got to save this. Make sure you save your files
or else it'll stay broken. So this is your first
experience with the logic. I'm going to give you a quick
rundown of what we see here. At the top, this is called
a-- let me close this up so you can see just
one part at a time. This is called a decorator. And so this just
gives us information about this TypeScript class. It says, oh, it's a component. So now we know,
this is a component. And then it tells us
what the name of-- how to reference the component. It also tells us what the
URL to the template is. So this is what it's
going to be called and this is where
the styles live. Then inside the body
of the component-- and this was all
created for us-- we have a lifecycle method,
which I'll talk about later. We will use that. And then on line 12,
we're going to add city. Laurie, why the banana box and
not just an ngModel attribute? Because we want to do what's
called two-way binding. That's a good question. So why isn't it just
ngModel attribute? Friends, if you type
city on line 12, set it equal to empty string. We're going to
keep it going here. Yeah, so I want data
to go back and forth, and I'm going to show you why
that's important right now. I'm going to show you
why that's important. So the banana in the box
means two-way binding, meaning that I could send
data in and get data out. And how that becomes
helpful is, on line 8, I want to really put city
in these two curly braces. So if you've seen
React before, you have the same type
of thing, where it's called interpolation. So now a property from
our TypeScript class can go in here. An expression, meaning you
can do some expressions, call functions-- be careful
with calling functions. But you can call functions
and do other things in these double curlies. But here's what
it's going to do. Oh, I didn't save. I've got to save. But now if I type Hi Laurie,
you see now what I'm typing in, Angular knows about it. You see that? And without the banana
in the box expression, I couldn't do it this way. So it's binding both together. Very good question. So now we have what we need. OK, friends. This is great. Don't leave this in here. That was just temporary. That's like a console.log()
where I use it like that. OK, so we got our form done. Now we need to add our
search functionality. When I type a city-- let's say Chicago again-- and I hit Search,
I want something to happen when I click. So we have to use
an onclick handler. So for the button here,
I'm going to type click, but I want to wrap this
in parentheses again. So this says that
it's the event. So just wrap it in parentheses. And I'm going to set
it equal to something. What do we set it equal to? Well, we're going to
set it equal to what we want to happen. What do we want to happen
whenever we go to this page? I mean, so whenever
we click this button? What we want to happen
is searchHousing. We want it to say searchHousing. This doesn't exist yet,
but I'm just giving you an idea of what's coming next. So here's this line. I'm going to put this in
the chat for you, friends. Very, very good. Very, very good. I still have the same
area, even though I changed the TypeScript-- OK. I will paste my
code in a second. Oh Ardash, I will paste
my code in one second. So is there a
property in Angular that performs this function? No, we're going to
implement it ourselves. So that's what
we're going to put. So let's go back
into our component because we're going to
create this function. Make sure you put the
parentheses around click here. Now after ngOnInit()--
that looks correct. OK, so I want to start on
this searchHousing() function. So we're going to have to
add a little bit of code here to make this work. So I'll save it. The error goes away. We're going to add a
little bit of code. I'm going to give you
folks some of this code. We need a few things here. First thing we need to add-- so you have your
function kind of stubbed out, like a template
for your function. First thing I want you to
add-- let's add something called searchResults, because
they're going to do a search and we want the results
to show up here. Here's the second thing
I want you to add. I'm going to ask you
to call it housingList. And we're going to set that
equal to an empty array right now. But we need to add
something else. So right now, these are just
arrays in our application, so they're just a list of data. But this is actually not
necessarily the best practice. And I'll tell you why it's
not the best practice, because it doesn't tell us
anything about the data that's in this array. In TypeScript, that's
the whole value in types. They tell you information
about the data. So we need to create something. We're going to create
what's called an interface. And if you are a
Java programmer, it's the same thing, but
TypeScript uses it a little bit different. So here's what
we're going to do. I'm going to give you a command. Go back to your command line. Don't stop your server, though. Just open up a
new terminal here. And here's what we're
going to type in-- ng g for generate i for interface
and we're going to say location. We're going to say location,
because think about the data that we want to be searching. We want to search
housing locations. We want to search
housing locations. So to get there, I want
to be able to give it some information, some data. I want to be able to give
it something, some shape. Now I put it in the chat just
in case you needed to know. So you're going to
run that command. And the next thing I'm going
to do, inside my app here, I'm going to go to location.ts. OK, so we got location.ts. So here's our
interface Location. If we're thinking about
these as being houses, there are some things that-- or housing, at least,
a housing location-- there's some information we
probably need it to have. So what's some of the
information you could probably think of that you want here? Type it in the chat for me. What's some of the information
you think could be helpful? OK, let me see what you
friends are saying in the chat. Yeah, OK. Good. Good. Josh, I like that. Danielle, I see-- yes. So these are all
really great things. Yes, exactly, because
this is all about somebody who's looking for
transitional housing. So I'm going to put in
some of the basic ones that I want it to have. And then if you want to
add more later, you can. Available units-- exactly. So if you were to
expand this application, you want to add a
lot of these things. These are all great, great,
great pieces of data. But you see how helpful that is? Oh here, I'm going to put the
whole interface that I just typed in. But you see how
helpful it is now when you're thinking about
it versus regular JavaScript? You have no way to enforce that
a location should have a name or description of a city. How many objects
have you received that didn't have the
data that it was promised and you got undefined? You went for a property
and it didn't exist and your application crashed. Well, TypeScript is going
to help you with that. So that's what should
go in your interface. Save that and hop back
over to home.component.ts. OK, very cool. So here's what we're
going to change. We're going to make a
small change to our code and I'm going to send you this. So I'm going to send you this. So we're going to say the
type for this is Location, and it's going to try
to import it for me. So I've got to be careful, make
sure it's the right location. See, these are not right. It should be my Location,
the one that I created and the one that you created. So the first two are not. It should be the one that's
yours in your application. And you could tell
by the import. So it'd be from-- I'll send you this whole
file in one second. But if that doesn't
work properly, we'll be able to
fix it with you. Oh, that's not never because-- just relax, TypeScript. Relax. OK, so let's see here. Why are you complaining? Never is missing the following-- ah, no, it's not. Oh OK. That's why, because it's
a type of Location array. I save that. So I'm not going to walk you
through all the logic of how we build out our search. I'm going to copy
and paste it for you. But you're going to
be great, though. How far can you get in Angular
if you don't know TypeScript? Great question. You can go really far, because
when I first learned Angular, I didn't know TypeScript at all. I started learning it and
then I started studying it, because I was like, whoa. TypeScript is actually
quite impressive. And then I got really
involved in it. So we're just about done with
the hard part here, which is to get our application-- are these Location
taking empty arrays? They're empty right
now, but we're going to add all the pieces. OK so in this last
section, now we're going to fill in all the gaps
to make all the stuff work. So we're going to be
right where you want it. So now we have-- so we're going to throw some
data in the search results. And I'm going to give
some data right now. I'm going to paste some data
for you that you can paste in. I got you. I got you. I got you. I'm going to give
you generic data now. So in my housingList, I'm
going to go inside there. I'm going to paste
in the generic data-- Location One, Location Two. Of course, you can get
more creative here. I'm going to give you everything
right now so you can have it because I want you to be able to
keep up with me here because we got to speed up
just a little bit. We're having a little
bit too much fun and there's still more to learn. OK so here, I'm going to paste
this so people can catch up. So that should be
your housingList. So let me answer some questions. Yeah, that import--
thank you for pasting those correct imports. Nice job, friends. Thank you so much. So the locations.ts is
acting as an object template. Yes, kind of. Suneil, that's a
very astute point. Is the interface acting
like an object template? Yes. The language that we use, we
say it's the shape of the data. So in TypeScript, the
Location has its properties that we decided were
going to be true. Then if I put an object
literal like this, as long as it matches the
properties that are required, it has the same shape, which is
why I said for my Java friends, that interface is not the same
as you experience with Java. It's similar, but not the same. Similar, but not the same. There, it's a different
type of contract. OK, friends, now that we
have our housingList setup, we need to implement our search. So I'm going to just
give you that text right now for the search. I'm going to just
give it to you, just for the sake of keeping-- because we're running
a little long on time because I'm having too much fun. I'm just going to give you this. So what we're going
to look at is that-- and I'll walk you through it. I'm going to paste
it in here for now. Let's see here. OK. So the interface is
recognized on the component? Yes, because we
imported it, Carlos. That's why. Because when we imported
it, we made it available. Good question. Good question. So I just pasted the function. OK, wait. Let's see. It was, because that's what
I said-- for Location, that was a mistake on my
side because there was more than one Location object. Let me give you the whole
searchHousing() function. Sorry. Let me give you
this whole thing. OK, so let's walk through this. Oh, let me add this
on another line, just so it's all
on the same screen. Not ideal, but I got to
keep this code nice and big so everybody can see. I think we can kind of see this. Maybe not, actually. This is a long line. That's probably harder to
read, but let me tell you what's happening. Whenever this function is
called-- it's going to get called whenever we click Search. So I don't want to
search for an empty city. So if this.city city is
empty, like an empty string-- if it's not an empty string,
we're going to run this code. And we're going to use
the keyword "this" here for our TypeScript. We're going to use
the keyword "this." I know "this" is a whole thing. I have an actual video
explaining the "this" keyword for another time. If you folks are ever
interested, just search my name and look for This Is Ridiculous
and you'll find it on YouTube. this.searchResults-- so these
are the search results that were displayed to the user. We'll say
this.housingList, which is what we have our mock data. We're going to filter it down. We're going to
filter it-- come on. Tips, don't hurt. We're going to filter
it if the location.city, the lowercase version matches
this.city, lowercase version. The reason that we
use lowercase is because people could
type mixed case letters and we don't want
people to miss out. Is this autobinded in Angular or
rather class functions binded? It's the class functions. That's why, Laurie. It's because it's
part of a class. Yeah, good question Laurie in
the building with the advanced JavaScript knowledge. I see you. Yeah, it's because
it's a class function. Good question. So when you want to
reference your properties, you got to use this when
you're rocking out in Angular. OK, and then I think I
just have a extra line that doesn't do anything. So 46 isn't necessary,
but you'd be OK. OK, friends, so now we have our
search function implemented. And if we type search for
Chicago and hit Search, nothing's happening. I wonder why that is. Because we didn't
display anything. So let's update our code to
be able to display the search results. So now to do that, I'm going
to give you this whole section so we don't spend time
on the HTML right now. Because we don't really
have a lot of time for that, I'm going to just
give you this section. And this is just the
plight of teaching. You want to explain
every single thing. I'm just going to give
you this and we'll walk through it, because
it's also going to include-- I'm going to walk through
this, but I'm still going to paste it so you can have it. So let's walk through
what I just gave you. So right down here on line
15, I added another section-- missing a header,
totally acknowledge. These are my search-results. I set the ul. And so this is the
thing you really-- I want you to key in on here. ngFor it's what's
called a directive. A directive in
Angular allows you to augment the behavior of
an element or a component. So I want to repeat this li. So the li, I want to repeat
it for as many locations that we get back from
the search results. So this is like a
for loop in HTML. This is a for loop in HTML,
but the Angular version of doing that. So I say let location--
that looks like JavaScript. It is not JavaScript. This is template language. So I say declare the
location variable, so let location of
the searchResults. So for each location
of our searchResults, I want to output a p tag and
I'll get to this link later. But first, I just
want to make sure that I get the p tag out there. And what I really want
to show you is this. I'm using string
interpolation here. And we got location.name
and we got location.city. So remember I showed
you before how to show your properties
in your template with the double curlies. That's what that's doing for me. That's what that's doing for me. Now this should work if I
type Chicago for the city, because that's where
the three locations are. Search. There we go. Now we have our
repeating elements. Now we have our
repeating elements. OK, Brent, looks good. Give you folks a second to catch
up and paste that in there. I'm going to paste you
everything in a second. You might have a
typo, so make sure-- here. I'm going to paste everything up
to this point for this template so you can have it
all just in case, and you can compare to what
I have to what you have. So the next thing that
we want to do is-- well, so let's say
I do my search. And I'm like, oh I
love these results. This is so exciting. I love these results. And I'm like, but I
want to actually see some details about one. Oh perfect. Josh, oh it's truncated. It doesn't like that I did that? I will fix that right now. I will fix that. I think that you can get that-- I will fix that
for you right now. Give me one second. Somebody already fixed it. Perfect. Perfect, perfect, perfect. It was just in
case you needed it. So now we had to do a
little bit more coding and then we're going to
be home free, friends. So we have all this code. Thank you for
pasting that for me. Whoever pasted that,
thank you for that. That's really, really helpful. Laurie. As Dj Calla would
say, you the best. We need a details
component, friends. That's what we need now,
because I want to go to a place where I can see the details
from the application. Yes, Claudio, I will do that. I will do that. You said you need all of what? home.component.ts. Yes, I have that for you. Hopefully it'll take-- it's
still truncating my stuff. Hold on. Hold on. I have an idea. I prepared for this. I actually had this in mind
that this could happen. Let me just get my
home.component.html, home.component.ts So that should work. OK. I think this works, maybe. Try that. So now let's get our
last component made, because we got to
do two more things and then we're going
to be in the mix here. So first, we're going
to run this command. And I want to explain
it as I type it. I'm going to type it to you
and then explain it to you. I'm going to type
that in the chat. You're going to
run this command. So what this is doing-- ng g for generate,
but this time, we want to make a module
for our new component. And we're going to make a
component called details, but we also want to make a
route at the same time, name the route details, and
where do we want to put it? In our main app module. So this is a little
bit of a funky line because it's a lot here. But the gist of this
line is that we're making a new component
and we're going to make a route at the same time. This is going to make a
new component and a route at the same time, which is
super helpful because we're going to save a lot
of time on this one. So now if you run this-- OK. It doesn't work if
you run that one. Oh, let me see what I did wrong. [LAUGHS] Oh man, that's funny. That is funny. My command doesn't work. Let me debug this
command with you. Yeah, no, I typed the
wrong thing, I guess. Let me check my syntax. So I have that. Oh wait. You know what happened? This is the problem. But OK, friends, I got you. I got you. That is literally because
I should have saved this. I had this command
saved for you and it's supposed to be two dashes. Yeah. Google Docs took
my two-dash command and made it into a single
dash and messed me up. Wow, Google. Way to not have my back in
the middle of my workshop. Unbelievable. I'm just kidding. It's all good. OK, why are you complaining? What the heck. All right, now this
is strange behavior. Let me just type it by hand
because I know that it works. But ng g m-- it didn't mind the details. It didn't mind the route. It didn't like module? Maybe there's some special
character or something that gets stuck in there? Let me see something. OK, that was super
weird, because I didn't change anything. I just retyped it. But that's OK. Doesn't really matter. So now we have our
component working. OK, so if anyone is still
having trouble, let me know. But this should be fixed now. It should be working. There we go. That should be working for us. So now if we search by city, we
do Chicago, do a search here, I click on this-- oh whoa. Did I misspell details? Let me refresh for a
second, just in case my routes are not working. Hm. Well, let's debug it. Let's see if there is a problem. Oh, there's some errors. OK. Let me just debug my
errors, because I definitely typed something wrong. So I'm in the console. I'm just going to debug this
to see what's happening. So when I click, I get an error. Oh, our route. OK, so our route won't work. We got to update our route. So let's hop over to
app.routing.module.ts. And as you can see right here--
let me make this much bigger-- we have a special type of route
called a lazy loaded route. And we just got
to add one thing. So on line 10, here's what
your path should look like in app-routing.module.ts here. There you go. That's what that
should look like. OK, great. So now if I type
Chicago, location details works, which is great. OK, Laurie, thank you so much. Thanks for hanging out. Yeah. Enjoy your next workshop. I know, folks, if you have
another workshop, don't worry. I will post all of
this stuff on GitHub. I'll give you all the
links to everything. So just in case
you want the links, let me just drop all the links
for the resources right now. I'll drop all the links for the
resources for this workshop. So this is going to be with
the completed workshop, all the links to the
files and everything to get to the final version
that we saw in the application in the beginning. So with three minutes left,
let's just work toward that, and then you folks could
jump into the next one. I know people are
going to next one, but let me just work
toward the completion here. Now we go into our
details component and I'm going to give you
the details component. So here's what you do. So I'm going to go
into my app, details. We're going to put the
HTML in there first. That's going to give
you some errors, but we're going to fix that. We're definitely going
to fix that error, OK? So here is this. Thank you so much. Thank you so much. I'm so glad you had a good time. Thank you for coming. Oh Ashley-- I wish I could
say your name better. I'm so sorry. But thank you for
coming, as well. So let's fix this last
part with the details. And at least you'll have a
functional details component, which would be really helpful. So I'm going to give you
your details component. Oh, that's going to
get truncated, I bet. Yeah, it sure is. But the details component is in
that link I sent you already. So you have that
details component. So I sent you the link
with that code in there, where it says the example code. So you're still going to
get one more error here. And so here's how I'm
going to fix that error. I just got to create a
service, because at the end, what we were going to
do is refactor our code to make the data abstracted
into a service versus having it hardcoded in that one file. So I'm going to do
ng g s for service-- I think I called this
one location service. Let me get the right command
so we don't lose time here. Yeah, and just do location. Now that I do that,
that fixes that part. Yeah, it's in the GitHub, Brett. Oh, friends, we're
right out of time here. Oh, man, I was
having too much fun and we ran out of time again. All right, so here's
what's going to happen, just my friends with
you for the last second. This is going to get
converted into a longer video on the Angular
YouTube channel, as well. So I'm going to walk
through this step by step again on the
Angular YouTube channel. So definitely
check us out there. I sent you the links. And it's going to be for
Chrome Developer Summit, so you get it there. I'm also going to convert it
to a longer, detailed video on Angular channel. The code was linked in the chat. Let me paste that
again for you, friends. OK. I know you have to roll out. I'm going to paste
the code again. And I hope that you've
enjoyed this time together. I have had a blast. You all are phenomenal. And look for the
finished project. If you follow me
on Twitter-- you can find me
@marktechson on Twitter. I'll put my Twitter handle up so
you can find me if you need me. All right. That's how you can find me. Thank you so much for your time. [MUSIC PLAYING]
