50. Setting up the Application

Jul 14, 2026 04:25 · 4:31 · English · Whisper Turbo · 2 Reproduktory

Tento přepis dnes vyprší. Upgrade pro trvalé skladování →

Index přednášek

0:02

S… Speaker 1 (50. Setting up the Application)

I'm in a brand new project created with the CLI and

0:06

S… Speaker 1 (50. Setting up the Application)

the only thing I did thus far is I cleaned up the app component,

0:10

S… Speaker 1 (50. Setting up the Application)

removed this property we had there and cleaned up the app component

0:14

S… Speaker 1 (50. Setting up the Application)

HTML file.

0:15

S… Speaker 1 (50. Setting up the Application)

All the rest is still the same.

0:17

S… Speaker 1 (50. Setting up the Application)

I didn't change anything else.

0:19

S… Speaker 1 (50. Setting up the Application)

So the first thing I want to do,

0:22

S… Speaker 1 (50. Setting up the Application)

and you can of course recreate this project by simply running ng -new,

0:25

S… Speaker 1 (50. Setting up the Application)

any project name you like,

0:27

S… Speaker 1 (50. Setting up the Application)

and then cleaning it up like I did.

0:28

S… Speaker 1 (50. Setting up the Application)

The first thing I want to do is

0:31

S… Speaker 1 (50. Setting up the Application)

I want to add the bootstrap CSS framework so that we have some CSS

0:35

S… Speaker 1 (50. Setting up the Application)

classes we can work with to give this some nice styling because in this app

0:39

S… Speaker 1 (50. Setting up the Application)

I really want to focus on Angular and not on the styling.

0:42

S… Speaker 1 (50. Setting up the Application)

So of course we can add bootstrap with npm

0:46

S… Speaker 1 (50. Setting up the Application)

inside this project folder.

0:48

S… Speaker 1 (50. Setting up the Application)

In the terminal I type npm install then dash dash save

0:53

S… Speaker 1 (50. Setting up the Application)

as it will be a production dependency.

0:55

S… Speaker 1 (50. Setting up the Application)

Bootstrap and this will automatically install the latest version of Bootstrap

0:59

S… Speaker 1 (50. Setting up the Application)

in this project.

1:01

S… Speaker 1 (50. Setting up the Application)

Now, once this finished,

1:03

S… Speaker 1 (50. Setting up the Application)

we got Bootstrap installed.

1:04

S… Speaker 2 (50. Setting up the Application)

Now,

1:05

S… Speaker 1 (50. Setting up the Application)

we also need to inform the CLI that Bootstrap should be included in our final

1:10

S… Speaker 1 (50. Setting up the Application)

bundle it creates for us.

1:11

S… Speaker 2 (50. Setting up the Application)

Because, of course,

1:12

S… Speaker 1 (50. Setting up the Application)

the CLI bundles all our script files and style files.

1:15

S… Speaker 1 (50. Setting up the Application)

And by default,

1:16

S… Speaker 1 (50. Setting up the Application)

it would not include Bootstrap.

1:18

S… Speaker 2 (50. Setting up the Application)

So,

1:19

S… Speaker 2 (50. Setting up the Application)

to inform the CLI,

1:20

S… Speaker 1 (50. Setting up the Application)

we should go to the .angular CLI JSON file.

1:23

S… Speaker 1 (50. Setting up the Application)

And here in styles,

1:25

S… Speaker 1 (50. Setting up the Application)

in this styles array,

1:26

S… Speaker 1 (50. Setting up the Application)

we can add any...

1:28

S… Speaker 1 (50. Setting up the Application)

global style sheets we want to add to our whole project.

1:32

S… Speaker 1 (50. Setting up the Application)

Now it already has the styles .css file,

1:35

S… Speaker 1 (50. Setting up the Application)

which is a file where you can define styles for the whole project.

1:39

S… Speaker 1 (50. Setting up the Application)

Here I will simply add the path to our bootstrap styles.

1:43

S… Speaker 1 (50. Setting up the Application)

Now we can have a look where that's stored.

1:46

S… Speaker 1 (50. Setting up the Application)

In the node modules folder,

1:47

S… Speaker 1 (50. Setting up the Application)

which manages all our dependencies,

1:49

S… Speaker 1 (50. Setting up the Application)

if we have a look at the bootstrap folder there,

1:53

S… Speaker 1 (50. Setting up the Application)

the dist folder sounds about right for distribution.

1:57

S… Speaker 1 (50. Setting up the Application)

There we have a CSS folder and here the bootstrap .css

2:02

S… Speaker 1 (50. Setting up the Application)

file is probably what we need.

2:04

S… Speaker 1 (50. Setting up the Application)

So we can quickly import this here.

2:08

S… Speaker 1 (50. Setting up the Application)

by adding a path to that.

2:10

S… Speaker 1 (50. Setting up the Application)

And now the important thing is we need to go up one level first because you don't

2:14

S… Speaker 1 (50. Setting up the Application)

have to see this path relative from the CLI JSON file here,

2:18

S… Speaker 1 (50. Setting up the Application)

so this config file we're in,

2:19

S… Speaker 1 (50. Setting up the Application)

but you have to see it relative from your index .html file.

2:23

S… Speaker 1 (50. Setting up the Application)

And that is in the source folder,

2:24

S… Speaker 1 (50. Setting up the Application)

so it's nested one folder deep into your app,

2:28

S… Speaker 1 (50. Setting up the Application)

you could say.

2:28

S… Speaker 1 (50. Setting up the Application)

So here we target node modules.

2:32

S… Speaker 1 (50. Setting up the Application)

And then we can target the bootstrap folder.

2:35

S… Speaker 1 (50. Setting up the Application)

And now again,

2:36

S… Speaker 1 (50. Setting up the Application)

just to make this really clear where this is coming from,

2:39

S… Speaker 1 (50. Setting up the Application)

in the bootstrap folder,

2:41

S… Speaker 1 (50. Setting up the Application)

we can target distcss.

2:44

S… Speaker 1 (50. Setting up the Application)

So let's do this,

2:45

S… Speaker 1 (50. Setting up the Application)

distcss,

2:47

S… Speaker 1 (50. Setting up the Application)

and here,

2:48

S… Speaker 1 (50. Setting up the Application)

bootstrap .css,

2:50

S… Speaker 1 (50. Setting up the Application)

just like that.

2:53

S… Speaker 2 (50. Setting up the Application)

To be precise,

2:54

S… Speaker 1 (50. Setting up the Application)

it would even be better to target the minified version,

2:56

S… Speaker 1 (50. Setting up the Application)

which is a file also lying in that folder.

2:59

S… Speaker 1 (50. Setting up the Application)

So let's add .min between Bootstrap and .css.

3:03

S… Speaker 1 (50. Setting up the Application)

So this will already give us the minified code,

3:06

S… Speaker 2 (50. Setting up the Application)

which is,

3:06

S… Speaker 2 (50. Setting up the Application)

of course, smaller.

3:07

S… Speaker 1 (50. Setting up the Application)

Now with that,

3:09

S… Speaker 2 (50. Setting up the Application)

this should be added.

3:10

S… Speaker 1 (50. Setting up the Application)

And now we can run ng -serve to get our

3:14

S… Speaker 1 (50. Setting up the Application)

CLI to build this project for the first time and serve it

3:18

S… Speaker 1 (50. Setting up the Application)

at localhost 4200 as we did before in this course.

3:22

S… Speaker 1 (50. Setting up the Application)

And that is our running application.

3:24

S… Speaker 2 (50. Setting up the Application)

Now,

3:25

S… Speaker 1 (50. Setting up the Application)

we don't see very much here,

3:26

S… Speaker 1 (50. Setting up the Application)

of course, because our app component HTML file is completely empty.

3:30

S… Speaker 1 (50. Setting up the Application)

We can quickly check if bootstrap styles were added successfully

3:34

S… Speaker 1 (50. Setting up the Application)

by adding a div with the class container.

3:37

S… Speaker 1 (50. Setting up the Application)

And the shortcut I'm using here is a plugin called emet,

3:40

S… Speaker 1 (50. Setting up the Application)

which allows me to just type dot class name and hit tab to autocomplete

3:44

S… Speaker 1 (50. Setting up the Application)

it. It's available for many IDEs,

3:46

S… Speaker 1 (50. Setting up the Application)

so simply Google for it plus your IDE or editor,

3:49

S… Speaker 1 (50. Setting up the Application)

and chances are you will find it.

3:51

S… Speaker 1 (50. Setting up the Application)

And then in there,

3:52

S… Speaker 1 (50. Setting up the Application)

I want to nest a row.

3:53

S… Speaker 1 (50. Setting up the Application)

And now let's say simply to get started,

3:56

S… Speaker 1 (50. Setting up the Application)

a column for medium -sized devices,

3:58

S… Speaker 1 (50. Setting up the Application)

which spans the full width for now.

4:01

S… Speaker 1 (50. Setting up the Application)

And I simply want to output in the H2 tab,

4:04

S… Speaker 1 (50. Setting up the Application)

I'm working.

4:06

S… Speaker 1 (50. Setting up the Application)

So with this,

4:07

S… Speaker 2 (50. Setting up the Application)

if we save that,

4:07

S… Speaker 1 (50. Setting up the Application)

it should recompile.

4:08

S… Speaker 1 (50. Setting up the Application)

And now we're seeing I'm working.

4:09

S… Speaker 1 (50. Setting up the Application)

This looks like Bootstrap is working too.

4:11

S… Speaker 1 (50. Setting up the Application)

We can see this on the font size.

4:14

S… Speaker 1 (50. Setting up the Application)

And also if we inspect this here in the styles,

4:17

S… Speaker 1 (50. Setting up the Application)

all these styles here and there.

4:19

S… Speaker 1 (50. Setting up the Application)

are coming from Bootstrap.

4:21

S… Speaker 2 (50. Setting up the Application)

So this is working.

4:22

S… Speaker 1 (50. Setting up the Application)

And with that,

4:24

S… Speaker 1 (50. Setting up the Application)

we got our application set up.

4:26

S… Speaker 1 (50. Setting up the Application)

Now let's get started creating all the components we require.

Tento přepis byl vytvořen AI (automatické rozpoznávání řeči). Může obsahovat chyby?? ověřit proti původnímu zvuku pro kritické použití. Politika AI

❤️ Máte rádi STT.ai? Řekněte to přátelům!

Shrnutí

Klikněte na Summarise pro generování AI shrnutí tohoto přepisu.

Zeptejte se UI na tento transcript

Zeptejte se na cokoliv o tomto přepisu, najdete příslušné sekce a odpověď.

Přepsat další