It's time for the most exciting part of the course, we haven't had the chance to explore every feature
in Angular.
However, we've covered most of the fundamentals.
If we're going to continue further, we should work on a realistic project by working on a real project.
We all get a chance to learn the best practices for structuring a project.
So what are we going to build?
We will develop a project called Clip's a platform for uploading and sharing gaming highlights.
Features include authentication routing, video processing, state management and so much more.
One of the most interesting features is running a web assembly file to process video files.
With FFmpeg, we will be playing with cutting edge features, which will surely impress recruiters on
my screen.
I'm showing the static design of the app we will be developing.
It doesn't look like much, but believe me, it's going to take a lot of work to convert this template
to a functioning app.
Once we're finished with our project, we will be deploying it throughout the development lifecycle
of this project.
You will be surprised by how helpful Angular can be.
First, we need to create a new project.
Open the command line in your editor.
We'll be working in a completely new directory.
We aren't going to be installing our project with the basics app.
We worked on previously inside the command line.
Run the following command.
NZ new clips.
The Clia will ask us if we'd like to add routing for this project.
We will select Yes.
Routing is an optional feature larger apps typically have routing.
We will discuss how routing works in this course.
The next option will ask us to select Access Preprocessor.
We're not going to be using a preprocessor.
However, feel free to choose or preprocessor if you are familiar with any of them from this list.
After selecting our options, the Clia will be again creating and installing the project.
This installation may take a while.
After the installation is complete, let's move in to the new project.
There aren't significant changes to the default project.
The most noticeable difference is a new file called app routing module acts inside the source slash
app directory.
We will be exploring this file in an upcoming lecture, Angular has provided us with some roots for
the default project.
We can safely ignore it for the time being.
Other than that, we're good to go.
Now the question is where do we begin?
What's the first step we should take?
We're developing an app.
It can be a daunting task to get started.
For my experience, I like to start by importing the static design.
We already have the template in hand.
We should start adding it to our project and the resource section of this lecture.
I provide a zip file with the HTML and CSS for our app.
It's completely static.
I haven't done anything to this template to prepare it for angular.
We are going to make it functional from top to bottom.
Download this file before moving on after downloading the zip file.
Create a new directory in our project called Templates.
This is not a normal folder to have in a project.
It's not going to stick around once we've converted the template.
It can be safely removed.
We don't have to worry about angular or doing anything with this folder.
The purpose of this folder is to temporarily store our template files so that we can reference them
drag and drop the template files from the zip file to this new folder.
After doing so, we can start to transfer the templates.
We will begin with the home page, open the index, not HTML file, in the template directory.
Inside this file, I've added dozens of comments.
These comments will help you navigate the sections of the project.
I will be referring to them whenever we need to work on a particular section.
I'm going to minimize some of the sections in the body tag.
The home page has a total of four sections.
We have the header intro main and authentication sections.
Let's make a copy of that.
Next, open the app component.
Dot h html file.
We will replace the contents of this file with the code we've copied.
You may be thinking, why are we adding this code to the index HTML file in the source directory?
We want to make this content dynamic.
Therefore, we need to start template in a component.
Otherwise, we won't be able to apply pipes, directives or anything else.
We need to make a template dynamic after pasting in the contents.
Let's turn on the server with the Nji Serve Command.
Next, let's view the app in the browser.
The app is completely broken.
It looks nothing like the static design.
That's to be expected since we didn't load the CIUSSS for this template.
The template uses a framework called Tailwind, which requires a special installation process in the
next lecture.
We will dive into tailwind.