Original subtitles

Now that we've got a vague idea of what we're trying to build.

Let's take a look at a couple of notes that are going to highlight some of the big challenges that we're

going to run into inside this up.

Overall I think that there are three big challenges that we're going to run into.

First off we need to show different pages of content to the user.

So as we just saw inside the mockup we're going to have this navigation bar at the very top as a user

starts to click.

Some of these different links we want to show some different content on the screen.

To implement this we're going to use a feature inside of angular called the routing or navigation system.

We use this routing system or navigation system to show users different pages of content.

We're going to make sure that we show different content to the user.

Anytime that the URL inside the address bar right here changes inside of our application the next big

problem we're going to run to is that there are a lot of different components so we need to create.

We just spent a lot of time on that card's Application reading just one reusable component.

We're going to have to create many different reusable components in this scenario on each different

page.

There's essentially two different components.

We're going to make the worry each these are going to go by pretty quickly because they're all gonna

be pretty darn similar in nature when it really comes down to it.

But at the end of day that definitely means that there's going to be a lot of different files floating

around our application.

We need to think of some way to better organize all of our code to organize our code in all these different

components.

We're going to end up making separate modules the modules are a angular feature that we use the grouped

together sets of components that kind of share a common purpose.

One thing I want to mention right away is that the word modules inside of angular is very different

than what semantic UI calls a module.

Back on the documentation page over here remember there's this module section on semantic UI and we're

going to implement the modal feature inside there and also something else called the accordion widget

as well.

What semantic UI calls a module is very very different in nature than an angular module few are very

different concepts.

I'll make sure that's very clear as soon as we start to discuss modules inside of angular in the last

big challenge we're going to run into is that we need to make all these components somehow reusable

in nature.

Of course if we wanted to build out each of these widgets like say for example the segment widget here's

the documentation for segment.

If I wanted to make something that looks like this right here I could just copy that each team L and

I would have a segment but it would not be truly reusable in nature.

So we need to think of some way to make all these different components are going to make somehow reusable

though as we start to build out each of these different widgets.

You and I are going to spend a pretty good amount of time to figure out some strategy to make each of

them reusable in nature and at the very end of this project.

I think you're going to find that you could actually take the entire set of components we're going to

make and we use them on future projects as well which would be really handy for your own personal applications.

You eventually try to put together OK so that's the three big challenges that we're going to tackle

inside this application routing modules and some more stuff on components.

Now we understand these challenges.

The last thing we're going to do is generate a new angular project.

Now before you just pause a video right now and say Hey I didn't know how to generate a project the

command that we're going to use to generate this project is gonna be a little bit different.

The civically because we're going to add in routing to our project.

Let's go over to the terminal.

I'm going to show you the new command that we're going to use generate our project I'm back in my terminal

I'm inside of a workspace directory and inside of here I'm going to run energy new and then the name

of our application which I going to call comps short for components.

Going to build a lot of components and then after that I'm going to put on dash dash routing that means

generate a new application and we want to include routing inside of it.

Now if you forget to ever add on that dash dash routing that is toll you okay all that routing flag

really does is automatically answer yes to this question right here because we do want to add in routing

for this app by the way either add on the dash dash routing or just run the original command and answer

yes to that first question.

Either one is totally fine in this case I'll use the routing flag and as soon as I use that you'll notice

that now it skips that versus the option it doesn't ask me if I want to add in routing I just go straight

to the question we're asked if I want to use CSX or whatever else we're still going to use planes the

SS will hit Enter here and our project is then going to be generated OK.

So let's take a quick pause right here.

When back back next video we're going to start generating a lot of different things to build out our

application.