All language subtitles for 1. App Overview7

In this video we're going to kick off our next big application.

Let's take a look at a couple of mockups and understand exactly what we're going to build.

We're gonna first begin by taking a look at a Web site called semantic dash UI dot com semantic UI is

a very popular CSX library very similar to say bootstrap or Beaumont are going to navigate to that site

inside of a new tab.

And once I'm here I'm going to find the MENU button on the top left hand side as I start to scroll through

here.

You're going to see a lot of documentation on a lot of different widgets that we can create using semantic

UI.

Going to scroll down all the way to the very bottom and find a section called modules in inside of here.

I'll find a subsection called modal but these are some directions on how to create a modal window if

you're not sure what a modal window is.

Just find the run code button right here and click on it.

This is a modal window.

The one thing I want you to understand about semantic UI is that it is both a CSX library and a javascript

library.

The two aspects of this project come to give together to give us semantic UI.

In general the problem with using semantic UI on an angular project is that we don't like to use outside

javascript.

This javascript that is implemented by semantic UI is all written with plain J query and vanilla javascript.

We don't really like to use J query on angular projects at all.

Ideally we would drop off all that semantic J.S. stuff.

However if we're only left with semantics SS then we only get the styling that is included with all

these different widgets that we would only get these assess that would styled this model window in some

appropriate fashion but we would lose access to all the code like this statement you see right here

that would actually open the modal window.

The problem with using semantic UI instead of an angular project in general is that we get all the styling

but none of the interactivity the inside of our next project We're gonna fix that up we're going to

go through some of these different sections of semantic UI we're going to pick out a couple of different

widgets inside of here and we're going to re implement them using angular that we're going to essentially

just take all the styling from semantic UI and we're going to re implement the interaction ourselves.

But this is really going to be a big project about understanding how to create many different types

of very different components.

Let me show you a real mockup of what we're going to build.

All right here's the first page we're going to be building several different pages of components every

one these components are going to create are going to be very reusable in nature.

We're going to rely upon semantic UI to give us a bunch of styling.

But like I said we're going to re implement some interactions for each of these and also make sure that

each of these different widgets or components we create are very reusable in nature along the very top

side of our mockup right here.

You'll notice that there is a nav bar with a couple of different links.

The first page that we're going to work on is the elements section on this elements page.

We're going to put together a couple of the different components that are listed inside the elements

section of semantic UI.

So in particular we're going to re implement this segment widget right here.

We're also going to re implement the placeholder widget and as we implement these again we're gonna

have a big focus on reuse ability will then allow a user to navigate around to some different pages

inside of application.

They can also navigate to a collections page and on this collections page we're going to re implement

table and tabs which again are two widgets that we can implement using semantic UI because the collections

section and inside there you'll see there is table right here and technically under menu is the tabs

widget that we're going to implement as well.

But here's the menu section if I scroll down a little bit I'll find.

Here it is right here.

This is like a vertical tab subtle thing that we're going to implement as well.

Then on the next page which we'll call the views page we're going to implement these statistics widget

an item list.

And again those are coming from semantic UI.

We can find them underneath this view section right here.

And then finally on the last one which we will call modules is going to be the modal widget that we

just saw moments ago and something else called the accordion widget.

Again the entire point of this application is to understand how to create reusable widgets.

We're going to take a bunch of starting from semantic UI.

We're gonna add in a lot of interactivity using angular code and we're gonna build all these different

things inside of separate reusable components.

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

Let's take a quick pause right here.

Come back next video and start to discuss some big challenges that we're going to run into as we build

out this application.