Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,540 --> 00:00:03,720
Now that we've got a vague idea of what we're trying to build.
2
00:00:03,730 --> 00:00:07,050
Let's take a look at a couple of notes that are going to highlight some of the big challenges that we're
3
00:00:07,050 --> 00:00:08,480
going to run into inside this up.
4
00:00:09,340 --> 00:00:13,660
Overall I think that there are three big challenges that we're going to run into.
5
00:00:13,660 --> 00:00:17,600
First off we need to show different pages of content to the user.
6
00:00:17,680 --> 00:00:22,840
So as we just saw inside the mockup we're going to have this navigation bar at the very top as a user
7
00:00:22,840 --> 00:00:23,550
starts to click.
8
00:00:23,560 --> 00:00:27,440
Some of these different links we want to show some different content on the screen.
9
00:00:28,410 --> 00:00:34,560
To implement this we're going to use a feature inside of angular called the routing or navigation system.
10
00:00:34,620 --> 00:00:39,960
We use this routing system or navigation system to show users different pages of content.
11
00:00:40,110 --> 00:00:42,310
We're going to make sure that we show different content to the user.
12
00:00:42,300 --> 00:00:49,020
Anytime that the URL inside the address bar right here changes inside of our application the next big
13
00:00:49,020 --> 00:00:53,760
problem we're going to run to is that there are a lot of different components so we need to create.
14
00:00:53,850 --> 00:00:59,610
We just spent a lot of time on that card's Application reading just one reusable component.
15
00:00:59,610 --> 00:01:03,960
We're going to have to create many different reusable components in this scenario on each different
16
00:01:03,960 --> 00:01:04,410
page.
17
00:01:04,410 --> 00:01:06,240
There's essentially two different components.
18
00:01:06,240 --> 00:01:10,670
We're going to make the worry each these are going to go by pretty quickly because they're all gonna
19
00:01:10,690 --> 00:01:13,460
be pretty darn similar in nature when it really comes down to it.
20
00:01:13,560 --> 00:01:17,880
But at the end of day that definitely means that there's going to be a lot of different files floating
21
00:01:17,940 --> 00:01:20,330
around our application.
22
00:01:20,400 --> 00:01:25,740
We need to think of some way to better organize all of our code to organize our code in all these different
23
00:01:25,740 --> 00:01:26,410
components.
24
00:01:26,430 --> 00:01:32,190
We're going to end up making separate modules the modules are a angular feature that we use the grouped
25
00:01:32,190 --> 00:01:36,420
together sets of components that kind of share a common purpose.
26
00:01:36,420 --> 00:01:41,550
One thing I want to mention right away is that the word modules inside of angular is very different
27
00:01:41,610 --> 00:01:44,990
than what semantic UI calls a module.
28
00:01:45,000 --> 00:01:50,460
Back on the documentation page over here remember there's this module section on semantic UI and we're
29
00:01:50,460 --> 00:01:54,960
going to implement the modal feature inside there and also something else called the accordion widget
30
00:01:55,020 --> 00:01:56,130
as well.
31
00:01:56,280 --> 00:02:02,850
What semantic UI calls a module is very very different in nature than an angular module few are very
32
00:02:02,850 --> 00:02:04,230
different concepts.
33
00:02:04,230 --> 00:02:09,570
I'll make sure that's very clear as soon as we start to discuss modules inside of angular in the last
34
00:02:09,570 --> 00:02:13,740
big challenge we're going to run into is that we need to make all these components somehow reusable
35
00:02:13,740 --> 00:02:14,770
in nature.
36
00:02:14,970 --> 00:02:20,400
Of course if we wanted to build out each of these widgets like say for example the segment widget here's
37
00:02:20,400 --> 00:02:22,110
the documentation for segment.
38
00:02:22,110 --> 00:02:26,820
If I wanted to make something that looks like this right here I could just copy that each team L and
39
00:02:26,820 --> 00:02:31,310
I would have a segment but it would not be truly reusable in nature.
40
00:02:31,380 --> 00:02:35,820
So we need to think of some way to make all these different components are going to make somehow reusable
41
00:02:37,360 --> 00:02:39,720
though as we start to build out each of these different widgets.
42
00:02:39,720 --> 00:02:44,490
You and I are going to spend a pretty good amount of time to figure out some strategy to make each of
43
00:02:44,490 --> 00:02:47,720
them reusable in nature and at the very end of this project.
44
00:02:47,760 --> 00:02:51,120
I think you're going to find that you could actually take the entire set of components we're going to
45
00:02:51,120 --> 00:02:57,140
make and we use them on future projects as well which would be really handy for your own personal applications.
46
00:02:57,220 --> 00:03:02,720
You eventually try to put together OK so that's the three big challenges that we're going to tackle
47
00:03:02,720 --> 00:03:08,400
inside this application routing modules and some more stuff on components.
48
00:03:08,570 --> 00:03:09,950
Now we understand these challenges.
49
00:03:09,980 --> 00:03:13,860
The last thing we're going to do is generate a new angular project.
50
00:03:13,860 --> 00:03:18,010
Now before you just pause a video right now and say Hey I didn't know how to generate a project the
51
00:03:18,020 --> 00:03:22,430
command that we're going to use to generate this project is gonna be a little bit different.
52
00:03:22,520 --> 00:03:26,690
The civically because we're going to add in routing to our project.
53
00:03:26,690 --> 00:03:27,970
Let's go over to the terminal.
54
00:03:27,980 --> 00:03:33,820
I'm going to show you the new command that we're going to use generate our project I'm back in my terminal
55
00:03:33,970 --> 00:03:40,720
I'm inside of a workspace directory and inside of here I'm going to run energy new and then the name
56
00:03:40,780 --> 00:03:44,610
of our application which I going to call comps short for components.
57
00:03:44,650 --> 00:03:51,250
Going to build a lot of components and then after that I'm going to put on dash dash routing that means
58
00:03:51,250 --> 00:03:55,480
generate a new application and we want to include routing inside of it.
59
00:03:55,510 --> 00:04:00,190
Now if you forget to ever add on that dash dash routing that is toll you okay all that routing flag
60
00:04:00,190 --> 00:04:05,290
really does is automatically answer yes to this question right here because we do want to add in routing
61
00:04:05,330 --> 00:04:11,560
for this app by the way either add on the dash dash routing or just run the original command and answer
62
00:04:11,560 --> 00:04:12,790
yes to that first question.
63
00:04:12,850 --> 00:04:18,910
Either one is totally fine in this case I'll use the routing flag and as soon as I use that you'll notice
64
00:04:18,910 --> 00:04:23,410
that now it skips that versus the option it doesn't ask me if I want to add in routing I just go straight
65
00:04:23,410 --> 00:04:29,220
to the question we're asked if I want to use CSX or whatever else we're still going to use planes the
66
00:04:29,240 --> 00:04:34,830
SS will hit Enter here and our project is then going to be generated OK.
67
00:04:34,860 --> 00:04:36,300
So let's take a quick pause right here.
68
00:04:36,340 --> 00:04:40,410
When back back next video we're going to start generating a lot of different things to build out our
69
00:04:40,410 --> 00:04:41,010
application.
7900
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.