Angular App Setup With Material

00:00:00.000 | Okay so in the last video we put together our API using Python and that

00:00:10.000 | includes our full Q&A stack where we can begin asking questions and getting

00:00:17.760 | answers. So now what we're going to do is start working on the front end which is

00:00:24.000 | going to be in Angular. Now if you haven't used Angular before that's fine

00:00:30.800 | I'm really definitely not an expert so we can learn together and if you haven't

00:00:37.880 | installed Angular before or will use it or I assume if you don't use it you

00:00:43.560 | probably don't have it installed then I'm going to link right at the top of

00:00:48.560 | this video description to a article or like a guide I'll find one or if I can't

00:00:53.760 | find a good one I'll just write one describing exactly what you need to do

00:00:58.560 | in order to get to this point that you can see on the screen now which is the

00:01:05.600 | node.js command prompt and on Windows you can also run this from command from

00:01:13.880 | the command line or from your bash instance if you've installed everything

00:01:19.440 | properly and I think it's pretty much the same it's probably a lot easier on

00:01:24.320 | Linux or Mac. So now that we're here I'm going to switch across into the

00:01:31.220 | directory that I want to create the front end application so I'm going to be

00:01:35.760 | using two different directories one for the back end one for the front end and

00:01:39.520 | we're going to navigate into the directory that we want to put our front

00:01:46.200 | end directory. So it will be documents projects for me and then here I'm going

00:01:57.080 | to create a new directory called Aurelius front end. Now I'm not going to

00:02:02.320 | do that the usual way with make dir, instead what we're going to do is

00:02:08.160 | initialize our application which will also initialize our directory using the

00:02:13.360 | Angular CLI. Now anything Angular CLI begins with NG which is just Angular. NG

00:02:22.060 | is sort of short for Angular. And what I want to do is create a new application

00:02:30.280 | I'm going to call it Aurelius front end

00:02:37.200 | and then we're gonna get a load of questions here I'm going to say yes to

00:02:43.880 | all of them and then when it asks what style sheet format would like to use

00:02:48.600 | we're going to be using material, Angular material here and if we want to later on

00:02:57.480 | modify the color theme with Angular material we really want to be using SCSS

00:03:04.840 | so we'll just start straight away with that and as well SCSS we can just write

00:03:10.120 | normal CSS and it will work as we as it normally would so there's really nothing

00:03:15.880 | to lose. Okay and that's just going to print loads of stuff to the screen and

00:03:26.760 | hopefully tell us everything is good. Okay so that's all ready so what I'm

00:03:35.400 | going to do now is head over to VS Code and open this directory. Okay so now

00:03:42.920 | we're in VS Code, opened the new Aurelius front-end directory and first

00:03:51.640 | thing we want to do is open our terminal and all I want to do is ng serve to make

00:04:00.960 | sure that everything is set up correctly so this will initialize an instance of

00:04:07.760 | our app which we can then open up in our browser. It might take a little bit of

00:04:18.440 | time the first first go it should be pretty quick. Okay it's cool now we go to

00:04:32.760 | our browser localhost 4200 and we should get this yep so this is like the initial

00:04:42.140 | screen that you get with any Angular app so that just means that well it's worked

00:04:47.880 | so that's that's good and what we're gonna do is we're gonna take this down

00:04:53.320 | here to start initializing different parts of our app later on we're not

00:04:59.560 | actually going to do that right now because the first thing I want to do is

00:05:05.480 | actually just get it set up and get Angular Material set up because Angular

00:05:11.080 | Material is going to be essentially our design of the entire app which is really

00:05:17.440 | easy to use but it can be really annoying if you don't set up first thing.

00:05:23.600 | So I'm gonna stop that and I'm going to add Angular Material to our application

00:05:32.800 | to do that we do ng add Angular Material and this will install Angular Material

00:05:47.560 | in our app and we we don't really have to do anything the only thing we

00:05:52.760 | actually have to do here so we have to say which theme we'd like to use I'm

00:05:57.360 | just gonna go indigo pink so these are the default colors that you can use and

00:06:02.800 | I think we're probably gonna change these later on anyway but let's see for

00:06:07.040 | now at least we're gonna stick with indigo pink here we say yes yes and let

00:06:15.800 | install that's installed now so if we head over to src app and app module TS

00:06:28.720 | we should be able to see everything in here

00:06:33.920 | so there are a couple of things that we installed just now like extra things and

00:06:43.360 | that was the browser animations and that's what you see here okay now when

00:06:56.680 | we're using Angular Material we tend to add another module so Angular has all

00:07:03.680 | these different modules and this is like the almost like a control panel for

00:07:09.720 | where we import things so we import different packages into this script and

00:07:16.800 | then that allows us to use it across all of our other web page files and what we

00:07:24.560 | can do is create two of these scripts so that we have two versions of it one of

00:07:31.320 | them is just going to be used for our material Angular Material imports which

00:07:37.320 | is anything to do with how our app looks and essentially works when we're

00:07:43.440 | clicking around the reason we do that is because it can just get really messy if

00:07:48.400 | you have everything in one so to do that we all we do is add material module TS

00:07:59.440 | and because this is like a duplicate of this package all I'll do is take that

00:08:06.440 | code and just modify it a little bit so in here we basically want to get rid of

00:08:16.280 | all of these imports except for an ng-module and we can also get rid of

00:08:23.200 | declarations so we just have imports and we also want to add an exports array as

00:08:29.480 | well so this is like whenever we import a certain module from material Angular

00:08:40.240 | Material so things like buttons menus all these sort of things we're going to

00:08:45.920 | import it top and I'm going to show you how in just a moment and then we're

00:08:50.280 | going to add it to the imports array here and also the exports array and that

00:08:54.840 | will allow us to use it in the rest of our app now the only thing we need to change here is

00:09:00.120 | modify this to be material module and let's go ahead and import our first

00:09:07.160 | component which is going to be mat button module and we're importing that

00:09:15.560 | from @angular material so this is the package that we installed before and

00:09:23.440 | kite is finding the the right directory there so it's material button okay we'll

00:09:32.640 | copy this and we remove these because we're not importing these in this file

00:09:37.840 | just add it to mat button module and also the exports okay so now we can use

00:09:46.840 | this module in the rest of our code and this is a material button so it's like a

00:09:51.520 | fancy looking button so now let's exit that and go over to our app module TS so

00:10:00.720 | this is like the mothership of all of our code everything goes through this

00:10:06.840 | including that other module even though it's like a duplicate so to include that

00:10:11.560 | we do what we've done here so you see we have this browser animations module

00:10:15.880 | we're gonna do is that same thing we have it there we also have it in this

00:10:19.160 | imports array so to import that module that we just made so if I have a look

00:10:29.840 | here we see that it's called material module so let's copy that send it over

00:10:36.880 | here because you see over here we're exporting it to the rest of the code so

00:10:40.880 | that means it can be read by this app module TS so import it and we do from

00:10:48.000 | and this will probably figure it out maybe maybe not material material module

00:10:54.680 | there okay so that is now imported that into this script and what we want to do

00:11:02.160 | is include it in the import array there now it's accessible by the rest of our

00:11:07.680 | code so that's I know it's quite a lot but that's material basically self and

00:11:17.640 | just so we can see that it's actually working let's just add that material

00:11:22.600 | button into the very front page of this app so the very front page of this app

00:11:30.800 | is app component HTML so you saw before we had that kind of fancy initial page

00:11:39.800 | or it gave us a few hints on what we should do next and that is everything

00:11:46.480 | that you see in here so we're going to just select all and delete this and all

00:11:53.040 | I want to add in here is a button and it's a material button so Mac burn like

00:12:00.320 | this and we're gonna put search okay now if we go back into our browser let's

00:12:10.520 | make sure it's I don't think it's running I think we have to restart yeah

00:12:13.840 | so ng serve again spin up the server if we head over so this should go in a

00:12:23.840 | moment and we'll just get a button in the top left okay so now we have our

00:12:31.920 | button and you see we get this kind of nice little we go over it gets

00:12:37.040 | highlighted and when we click it we have that nice ripple effect so that's our

00:12:41.640 | material button and I think that's it for this first video on the front end so

00:12:50.680 | we've initialized our front end and also included material or angler material in

00:12:57.920 | there as well now from now on it's I think we will probably just build how

00:13:08.320 | this front page looks a little bit to make it look kind of nice and then we

00:13:13.880 | won't go crazy by the way we'll just make it look bearable and then we'll add

00:13:19.680 | in the functionality so that we can search on here rather than through the

00:13:25.400 | API so it should be pretty cool I think so that's it for this video and I'll see

00:13:31.760 | you in the next one

Angular App Setup With Material - Stoic Q&A #5

Chapters