50. Setting up the Application

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

Esta transcripción expira hoy. Actualizar para el almacenamiento permanente →

Índice de conferencias

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.

Esta transcripción fue generada por AI (reconocimiento automático del habla). Puede contener errores — verificar contra el audio original para uso crítico. Política de IA

❤️ ¿Te encanta STT.ai? ¡Cuéntale a tus amigos!

Resumen

Haga clic en Resumen para generar un resumen de IA de esta transcripción.

Pregúntele a AI acerca de esta transcripción

Pregunte cualquier cosa acerca de esta transcripción: la IA encontrará secciones relevantes y responderá.

Transcribir otro