1 00:00:00,240 --> 00:00:06,720 It's time for the most exciting part of the course, we haven't had the chance to explore every feature 2 00:00:06,720 --> 00:00:07,620 in Angular. 3 00:00:07,860 --> 00:00:10,930 However, we've covered most of the fundamentals. 4 00:00:11,190 --> 00:00:17,730 If we're going to continue further, we should work on a realistic project by working on a real project. 5 00:00:17,910 --> 00:00:22,440 We all get a chance to learn the best practices for structuring a project. 6 00:00:22,920 --> 00:00:24,930 So what are we going to build? 7 00:00:25,230 --> 00:00:31,540 We will develop a project called Clip's a platform for uploading and sharing gaming highlights. 8 00:00:31,830 --> 00:00:38,490 Features include authentication routing, video processing, state management and so much more. 9 00:00:38,850 --> 00:00:44,670 One of the most interesting features is running a web assembly file to process video files. 10 00:00:44,670 --> 00:00:52,200 With FFmpeg, we will be playing with cutting edge features, which will surely impress recruiters on 11 00:00:52,200 --> 00:00:52,980 my screen. 12 00:00:53,190 --> 00:00:56,730 I'm showing the static design of the app we will be developing. 13 00:00:57,060 --> 00:01:02,850 It doesn't look like much, but believe me, it's going to take a lot of work to convert this template 14 00:01:02,880 --> 00:01:04,140 to a functioning app. 15 00:01:04,500 --> 00:01:10,170 Once we're finished with our project, we will be deploying it throughout the development lifecycle 16 00:01:10,170 --> 00:01:11,190 of this project. 17 00:01:11,550 --> 00:01:14,820 You will be surprised by how helpful Angular can be. 18 00:01:15,420 --> 00:01:18,180 First, we need to create a new project. 19 00:01:18,450 --> 00:01:20,670 Open the command line in your editor. 20 00:01:23,250 --> 00:01:26,160 We'll be working in a completely new directory. 21 00:01:26,400 --> 00:01:30,610 We aren't going to be installing our project with the basics app. 22 00:01:30,630 --> 00:01:34,170 We worked on previously inside the command line. 23 00:01:34,200 --> 00:01:35,830 Run the following command. 24 00:01:36,160 --> 00:01:38,310 NZ new clips. 25 00:01:40,840 --> 00:01:45,340 The Clia will ask us if we'd like to add routing for this project. 26 00:01:45,460 --> 00:01:46,810 We will select Yes. 27 00:01:47,140 --> 00:01:51,580 Routing is an optional feature larger apps typically have routing. 28 00:01:51,850 --> 00:01:54,820 We will discuss how routing works in this course. 29 00:01:55,450 --> 00:02:00,040 The next option will ask us to select Access Preprocessor. 30 00:02:00,340 --> 00:02:02,920 We're not going to be using a preprocessor. 31 00:02:03,190 --> 00:02:09,190 However, feel free to choose or preprocessor if you are familiar with any of them from this list. 32 00:02:09,580 --> 00:02:15,280 After selecting our options, the Clia will be again creating and installing the project. 33 00:02:15,640 --> 00:02:17,710 This installation may take a while. 34 00:02:23,310 --> 00:02:27,660 After the installation is complete, let's move in to the new project. 35 00:02:30,400 --> 00:02:33,790 There aren't significant changes to the default project. 36 00:02:34,120 --> 00:02:42,060 The most noticeable difference is a new file called app routing module acts inside the source slash 37 00:02:42,070 --> 00:02:43,120 app directory. 38 00:02:45,710 --> 00:02:51,950 We will be exploring this file in an upcoming lecture, Angular has provided us with some roots for 39 00:02:51,950 --> 00:02:53,210 the default project. 40 00:02:53,570 --> 00:02:56,120 We can safely ignore it for the time being. 41 00:02:56,450 --> 00:02:58,400 Other than that, we're good to go. 42 00:02:58,970 --> 00:03:01,430 Now the question is where do we begin? 43 00:03:01,700 --> 00:03:03,650 What's the first step we should take? 44 00:03:03,680 --> 00:03:04,970 We're developing an app. 45 00:03:05,270 --> 00:03:07,820 It can be a daunting task to get started. 46 00:03:08,270 --> 00:03:12,470 For my experience, I like to start by importing the static design. 47 00:03:12,830 --> 00:03:14,960 We already have the template in hand. 48 00:03:15,170 --> 00:03:20,690 We should start adding it to our project and the resource section of this lecture. 49 00:03:20,960 --> 00:03:25,250 I provide a zip file with the HTML and CSS for our app. 50 00:03:25,610 --> 00:03:26,990 It's completely static. 51 00:03:27,290 --> 00:03:30,920 I haven't done anything to this template to prepare it for angular. 52 00:03:31,250 --> 00:03:34,190 We are going to make it functional from top to bottom. 53 00:03:34,490 --> 00:03:39,530 Download this file before moving on after downloading the zip file. 54 00:03:39,560 --> 00:03:43,250 Create a new directory in our project called Templates. 55 00:03:45,840 --> 00:03:48,750 This is not a normal folder to have in a project. 56 00:03:49,050 --> 00:03:53,130 It's not going to stick around once we've converted the template. 57 00:03:53,310 --> 00:03:54,900 It can be safely removed. 58 00:03:55,170 --> 00:03:58,860 We don't have to worry about angular or doing anything with this folder. 59 00:03:59,190 --> 00:04:05,340 The purpose of this folder is to temporarily store our template files so that we can reference them 60 00:04:05,790 --> 00:04:10,080 drag and drop the template files from the zip file to this new folder. 61 00:04:12,720 --> 00:04:16,320 After doing so, we can start to transfer the templates. 62 00:04:16,680 --> 00:04:23,490 We will begin with the home page, open the index, not HTML file, in the template directory. 63 00:04:26,030 --> 00:04:29,300 Inside this file, I've added dozens of comments. 64 00:04:29,570 --> 00:04:33,380 These comments will help you navigate the sections of the project. 65 00:04:33,740 --> 00:04:38,210 I will be referring to them whenever we need to work on a particular section. 66 00:04:38,600 --> 00:04:41,750 I'm going to minimize some of the sections in the body tag. 67 00:04:44,220 --> 00:04:47,070 The home page has a total of four sections. 68 00:04:47,310 --> 00:04:51,630 We have the header intro main and authentication sections. 69 00:04:51,930 --> 00:04:53,400 Let's make a copy of that. 70 00:04:55,990 --> 00:04:58,630 Next, open the app component. 71 00:04:58,660 --> 00:05:00,250 Dot h html file. 72 00:05:02,710 --> 00:05:06,340 We will replace the contents of this file with the code we've copied. 73 00:05:08,740 --> 00:05:14,770 You may be thinking, why are we adding this code to the index HTML file in the source directory? 74 00:05:15,190 --> 00:05:17,530 We want to make this content dynamic. 75 00:05:17,740 --> 00:05:21,100 Therefore, we need to start template in a component. 76 00:05:21,400 --> 00:05:26,230 Otherwise, we won't be able to apply pipes, directives or anything else. 77 00:05:26,230 --> 00:05:30,680 We need to make a template dynamic after pasting in the contents. 78 00:05:30,760 --> 00:05:34,090 Let's turn on the server with the Nji Serve Command. 79 00:05:36,600 --> 00:05:39,210 Next, let's view the app in the browser. 80 00:05:44,220 --> 00:05:45,900 The app is completely broken. 81 00:05:46,050 --> 00:05:48,300 It looks nothing like the static design. 82 00:05:48,660 --> 00:05:52,740 That's to be expected since we didn't load the CIUSSS for this template. 83 00:05:53,070 --> 00:05:59,280 The template uses a framework called Tailwind, which requires a special installation process in the 84 00:05:59,280 --> 00:06:00,160 next lecture. 85 00:06:00,180 --> 00:06:02,130 We will dive into tailwind.