48. Planning the App

0:02

S… Speaker 1 (48. Planning the App)

The first step in creating an Angular application,

0:05

S… Speaker 1 (48. Planning the App)

of course,

0:06

S… Speaker 1 (48. Planning the App)

is to lay out the structure of this app and especially plan

0:11

S… Speaker 1 (48. Planning the App)

which components you're probably going to need.

0:13

S… Speaker 1 (48. Planning the App)

Now,

0:14

S… Speaker 1 (48. Planning the App)

it's normal that whilst building the app,

0:16

S… Speaker 1 (48. Planning the App)

you decide to add another component which you didn't plan to add at

0:20

S… Speaker 1 (48. Planning the App)

the beginning, or maybe you decide that you can merge two components you thought

0:24

S… Speaker 1 (48. Planning the App)

you would have to split.

0:26

S… Speaker 1 (48. Planning the App)

But generally this is still a good approach and this should also show

0:30

S… Speaker 1 (48. Planning the App)

you how I approach this and how you may decide what should

0:34

S… Speaker 1 (48. Planning the App)

go into its own component and what can be merged into another one.

0:38

S… Speaker 1 (48. Planning the App)

So on this page I try to lay out the general structure of our app and

0:43

S… Speaker 1 (48. Planning the App)

at the bottom you can find kind of a legend.

0:45

S… Speaker 1 (48. Planning the App)

So let's start with the features of this app.

0:48

S… Speaker 1 (48. Planning the App)

Well, we're going to have a shopping list and a recipe book section,

0:51

S… Speaker 1 (48. Planning the App)

as I said,

0:51

S… Speaker 1 (48. Planning the App)

managing either our single ingredients we need to buy or in the recipe

0:56

S… Speaker 1 (48. Planning the App)

book, our whole recipes.

0:57

S… Speaker 1 (48. Planning the App)

Which components will we need for this?

1:00

S… Speaker 2 (48. Planning the App)

Obviously,

1:02

S… Speaker 1 (48. Planning the App)

a root component holding our overall application,

1:05

S… Speaker 1 (48. Planning the App)

the app component.

1:06

S… Speaker 1 (48. Planning the App)

Every Angular app has this.

1:09

S… Speaker 1 (48. Planning the App)

Then, since we have two sections,

1:10

S… Speaker 1 (48. Planning the App)

it probably makes sense to have some kind of header component where

1:15

S… Speaker 1 (48. Planning the App)

we can navigate between these two sections.

1:17

S… Speaker 2 (48. Planning the App)

Of course,

1:17

S… Speaker 1 (48. Planning the App)

you could also hard code the header simply into the app component,

1:21

S… Speaker 1 (48. Planning the App)

but since it will contain its own business logic,

1:24

S… Speaker 1 (48. Planning the App)

in the end,

1:24

S… Speaker 1 (48. Planning the App)

it will trigger a routing action later,

1:26

S… Speaker 1 (48. Planning the App)

and we will also add a dropdown there in the end,

1:29

S… Speaker 1 (48. Planning the App)

which allows us to store our recipes on the server and fetch them from there.

1:34

S… Speaker 1 (48. Planning the App)

So since we will have that logic attached to the header,

1:37

S… Speaker 1 (48. Planning the App)

outsourcing it into its own component makes sense so that we don't have to put all the

1:41

S… Speaker 1 (48. Planning the App)

logic into our root component,

1:43

S… Speaker 1 (48. Planning the App)

which really mainly should only be responsible for holding

1:47

S… Speaker 1 (48. Planning the App)

our overall app.

1:49

S… Speaker 1 (48. Planning the App)

So that is the header.

1:50

S… Speaker 1 (48. Planning the App)

Now let's dive into the individual features.

1:53

S… Speaker 1 (48. Planning the App)

Let's start with the shopping list.

1:55

S… Speaker 1 (48. Planning the App)

Here I guess it makes sense to have the overall shopping list component.

1:58

S… Speaker 1 (48. Planning the App)

Remember the purple box is only the feature,

2:01

S… Speaker 1 (48. Planning the App)

so we need a component holding our shopping list.

2:04

S… Speaker 1 (48. Planning the App)

And maybe in this shopping list component,

2:07

S… Speaker 1 (48. Planning the App)

We also want to have a shopping list edit part,

2:09

S… Speaker 1 (48. Planning the App)

which allows us to add new items,

2:11

S… Speaker 1 (48. Planning the App)

so an input field and a button,

2:13

S… Speaker 1 (48. Planning the App)

because that again has its own logic.

2:16

S… Speaker 1 (48. Planning the App)

We will have to decide if we're editing an existing item or adding a new

2:20

S… Speaker 1 (48. Planning the App)

one, we need to submit this,

2:22

S… Speaker 1 (48. Planning the App)

so it makes sense to create its own component for this.

2:25

S… Speaker 1 (48. Planning the App)

So that we have our overall list component,

2:27

S… Speaker 1 (48. Planning the App)

mainly holding the data of the list.

2:29

S… Speaker 1 (48. Planning the App)

and the added component being responsible for managing this data kind of,

2:33

S… Speaker 1 (48. Planning the App)

though the added component will be nested inside the list component.

2:37

S… Speaker 1 (48. Planning the App)

I guess that's it for the shopping list.

2:39

S… Speaker 1 (48. Planning the App)

Let's have a look at the recipe book.

2:41

S… Speaker 2 (48. Planning the App)

Here,

2:42

S… Speaker 1 (48. Planning the App)

it certainly makes sense to have,

2:44

S… Speaker 1 (48. Planning the App)

again, just like with the shopping list,

2:46

S… Speaker 1 (48. Planning the App)

a recipe list component,

2:47

S… Speaker 1 (48. Planning the App)

which shows us a list of all our recipes.

2:50

S… Speaker 2 (48. Planning the App)

Here,

2:51

S… Speaker 1 (48. Planning the App)

we might later also put each individual recipe into its own

2:55

S… Speaker 1 (48. Planning the App)

item, though,

2:56

S… Speaker 1 (48. Planning the App)

since it holds a little bit more information than just one line

3:00

S… Speaker 1 (48. Planning the App)

of HTML code.

3:03

S… Speaker 1 (48. Planning the App)

A recipe detail area would be great too.

3:04

S… Speaker 1 (48. Planning the App)

So an area where once we select a recipe,

3:08

S… Speaker 1 (48. Planning the App)

we can see information about that.

3:11

S… Speaker 1 (48. Planning the App)

Later in the course,

3:12

S… Speaker 1 (48. Planning the App)

we will also add another component here because we will then somehow need

3:16

S… Speaker 1 (48. Planning the App)

a component which allows us to edit existing recipes or add new ones.

3:19

S… Speaker 1 (48. Planning the App)

But since this is really advanced and we would not be able to fill it with much

3:24

S… Speaker 1 (48. Planning the App)

life right now,

3:24

S… Speaker 1 (48. Planning the App)

I will omit it for now and focus on the displaying part.

3:28

S… Speaker 1 (48. Planning the App)

So a list with items and then the detail section,

3:31

S… Speaker 1 (48. Planning the App)

which displays the details for the currently selected item.

3:34

S… Speaker 1 (48. Planning the App)

I guess this looks like a good plan.

3:36

S… Speaker 1 (48. Planning the App)

Each of these components should hold a significant...

3:40

S… Speaker 1 (48. Planning the App)

amount of business logic,

3:42

S… Speaker 1 (48. Planning the App)

and I guess with the component sketch out here,

3:45

S… Speaker 1 (48. Planning the App)

we're really having each component focus on one

3:49

S… Speaker 1 (48. Planning the App)

main topic,

3:50

S… Speaker 1 (48. Planning the App)

displaying a list,

3:51

S… Speaker 1 (48. Planning the App)

displaying information about a single item,

3:54

S… Speaker 1 (48. Planning the App)

displaying detail information about a selected item,

3:57

S… Speaker 1 (48. Planning the App)

and so on.

3:58

S… Speaker 1 (48. Planning the App)

So this is generally how I approach this.

4:00

S… Speaker 1 (48. Planning the App)

Of course,

4:01

S… Speaker 1 (48. Planning the App)

feel free to split this up even more.

4:03

S… Speaker 1 (48. Planning the App)

or if you want,

4:04

S… Speaker 1 (48. Planning the App)

merge them together,

4:05

S… Speaker 1 (48. Planning the App)

for example,

4:06

S… Speaker 1 (48. Planning the App)

recipe list and a single item.

4:08

S… Speaker 1 (48. Planning the App)

But this will become more clear once we actually implement these components.

4:12

S… Speaker 1 (48. Planning the App)

Now, one last thing we should think about,

4:14

S… Speaker 1 (48. Planning the App)

which models will we use in this app?

4:17

S… Speaker 1 (48. Planning the App)

And with model,

4:18

S… Speaker 1 (48. Planning the App)

I simply mean which data.

4:20

S… Speaker 1 (48. Planning the App)

So we certainly will need some representation for

4:24

S… Speaker 1 (48. Planning the App)

our ingredient.

4:25

S… Speaker 1 (48. Planning the App)

We will use ingredients a lot in the recipe book too.

4:28

S… Speaker 1 (48. Planning the App)

Each recipe there has a couple of ingredients.

4:31

S… Speaker 1 (48. Planning the App)

So we should define how an ingredient looks like.

4:34

S… Speaker 1 (48. Planning the App)

That is something which your application probably also needs.

4:39

S… Speaker 1 (48. Planning the App)

be clear about the data you're going to use and put it into its own class

4:43

S… Speaker 1 (48. Planning the App)

so that you have your own type you can use later on and that you have

4:47

S… Speaker 1 (48. Planning the App)

a clear interface or definition of what your data looks

4:51

S… Speaker 1 (48. Planning the App)

like so that you can easily have your components talk with each other,

4:55

S… Speaker 1 (48. Planning the App)

something we'll dive in later in this course,

4:57

S… Speaker 1 (48. Planning the App)

so that there is no issue regarding the data you're exchanging.

5:01

S… Speaker 1 (48. Planning the App)

So besides the ingredients,

5:03

S… Speaker 1 (48. Planning the App)

which probably is a very simple model,

5:05

S… Speaker 1 (48. Planning the App)

only controlling the name and amount maybe,

5:08

S… Speaker 1 (48. Planning the App)

we also need a model for the recipe,

5:11

S… Speaker 1 (48. Planning the App)

which contains things like the title,

5:13

S… Speaker 1 (48. Planning the App)

the description,

5:14

S… Speaker 1 (48. Planning the App)

the ingredients and so on.

5:17

S… Speaker 1 (48. Planning the App)

And I think with this,

5:18

S… Speaker 1 (48. Planning the App)

we have a solid plan for now.

5:20

S… Speaker 1 (48. Planning the App)

Let's get started.

5:22

S… Speaker 1 (48. Planning the App)

Let's implement all these components,

5:24

S… Speaker 1 (48. Planning the App)

fill it with some dummy data for now,

5:27

S… Speaker 1 (48. Planning the App)

and take the first step in building our course project.

48. Planning the App

Resume

Konbyen tan pou m' fè transkript la?