48. Planning the App
Jul 14, 2026 04:25
· 5:34
· English
· Whisper Turbo
· 2 Kaikōrero
Ka ngaro tēnei tāruatanga i tēnei rā.
Whakahauhau mo te rokiroki tūturu →
E whakaatu ana anake
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.
I hangaia tēnei tuhipoka e AI (whakaahua kōrero aunoa). Tērā pea kei roto ngā hapa - tirohia ki te oro taketake mō te whakamahinga tino hira. Ka taea te whakataki i te kaupapahere AI
Ko te whakarāpopoto
Ka pāhotia te Summarize hei waihanga i tētahi whakarāpopoto AI o tēnei tāruatanga.
E whakarāpopoto ana...
E pātai ana ki te AI Mo tēnei whakahuatuhi
E pātai ana ki tētahi mea mo tēnei tāruatanga - ka kitea e te AI ngā wāhanga whai tikanga me te whakautu.