1 00:00:04,070 --> 00:00:07,050 Okay, okay, I hear you saying. 2 00:00:07,050 --> 00:00:08,280 Let's get on with it, 3 00:00:08,280 --> 00:00:09,835 show me some code. 4 00:00:09,835 --> 00:00:13,440 Indeed, we'll get started with creating 5 00:00:13,440 --> 00:00:17,770 our Angular application in this very first exercise. 6 00:00:17,770 --> 00:00:21,145 We will use the Angular command line interface, 7 00:00:21,145 --> 00:00:28,020 the Angular CLI for scaffolding out our Angular application in this exercise. 8 00:00:28,020 --> 00:00:31,690 Then, as we go through the rest of the exercises in this course, 9 00:00:31,690 --> 00:00:36,180 we will build our Angular application step by step. 10 00:00:36,180 --> 00:00:44,195 The Angular CLI is a very convenient way of creating an Angular application. 11 00:00:44,195 --> 00:00:48,620 The Angular application created by the Angular CLI follows the style 12 00:00:48,620 --> 00:00:53,290 guides suggested by the Angular framework developers. 13 00:00:53,290 --> 00:00:56,405 We can use the Angular CLI to scaffold out 14 00:00:56,405 --> 00:01:00,980 many parts of our Angular application including the components, 15 00:01:00,980 --> 00:01:04,275 the services of our Angular application. 16 00:01:04,275 --> 00:01:08,480 The Angular CLI also comes with its own built-in server, 17 00:01:08,480 --> 00:01:14,405 which we can use to serve up the Angular application as we are building it up, 18 00:01:14,405 --> 00:01:17,930 and then view our Angular application in 19 00:01:17,930 --> 00:01:22,870 the browser as a live preview of our application. 20 00:01:22,870 --> 00:01:24,805 As when we make changes, 21 00:01:24,805 --> 00:01:28,940 the changes will be reflected immediately to the browser. 22 00:01:28,940 --> 00:01:33,650 That's the reason why I chose to use the Angular CLI as 23 00:01:33,650 --> 00:01:39,365 the approach for building out our Angular application in this course. 24 00:01:39,365 --> 00:01:43,100 To get started, go to a convenient location on 25 00:01:43,100 --> 00:01:46,490 your computer and create a folder named Angular. 26 00:01:46,490 --> 00:01:52,065 So, I'm going to start out moving to my documents Coursera folder. 27 00:01:52,065 --> 00:01:58,260 That's where I store all my files for my Coursera course, 28 00:01:58,260 --> 00:02:03,230 and then I will create a folder 29 00:02:03,230 --> 00:02:08,955 named Angular and then a move into the Angular folder. 30 00:02:08,955 --> 00:02:15,505 Now, we're going to create our Angular application within this folder. 31 00:02:15,505 --> 00:02:21,080 The first step that we do in this exercise is to install the Angular CLI. 32 00:02:21,080 --> 00:02:22,525 So, at the prompt, 33 00:02:22,525 --> 00:02:32,700 type npm install -g @angular/cli@ 6.2.1. 34 00:02:32,700 --> 00:02:35,430 Now, whenever I install an NPM module, 35 00:02:35,430 --> 00:02:39,725 I will also specify the exact version of the NPM module that I'm installing. 36 00:02:39,725 --> 00:02:41,720 I would strongly urge you to install 37 00:02:41,720 --> 00:02:44,930 the exact same version of NPM module so that you can go through 38 00:02:44,930 --> 00:02:50,680 the rest of the exercises without having any problem with the exercises. 39 00:02:50,680 --> 00:02:55,700 So, in this case, I'm installing the 6.2.1 version of the Angular CLI. 40 00:02:55,700 --> 00:02:58,310 Now, if you are doing this on a Mac or Linux, 41 00:02:58,310 --> 00:03:02,565 don't forget the sudo in front of the npm install. 42 00:03:02,565 --> 00:03:05,095 The installation will take some time. 43 00:03:05,095 --> 00:03:08,095 So, once it is completed installing, 44 00:03:08,095 --> 00:03:13,655 then the Angular CLI will be available on your command line. 45 00:03:13,655 --> 00:03:15,750 Once the installation is complete, 46 00:03:15,750 --> 00:03:18,885 you can check and see that the Angular CLI is installed. 47 00:03:18,885 --> 00:03:20,295 Once that is installed, 48 00:03:20,295 --> 00:03:25,190 you may need to restart your terminal in order 49 00:03:25,190 --> 00:03:30,835 for the Angular CLI tools to be available at the prompt. 50 00:03:30,835 --> 00:03:35,390 The Angular CLI is available by typing ng at 51 00:03:35,390 --> 00:03:39,910 the prompt followed by a set of additional instructions. 52 00:03:39,910 --> 00:03:46,105 So, the first command that we will try out is ng help, 53 00:03:46,105 --> 00:03:49,820 and this will list a set of all the other commands 54 00:03:49,820 --> 00:03:53,855 that the Angular CLI allows us to execute. 55 00:03:53,855 --> 00:03:56,720 Ng as you see will be the prefix for 56 00:03:56,720 --> 00:04:02,040 all the Angular CLI commands that you will use in this course. 57 00:04:02,840 --> 00:04:09,685 This will list out a set of all the options that the Angular CLI provides for us. 58 00:04:09,685 --> 00:04:15,895 We will learn a lot of these commands as we go through the rest of this course. 59 00:04:15,895 --> 00:04:18,930 To create a new Angular application, 60 00:04:18,930 --> 00:04:21,545 I'm going to create that application in 61 00:04:21,545 --> 00:04:25,660 the Angular folder in a subfolder named conFusion. 62 00:04:25,660 --> 00:04:29,210 If you have taken the previous course on Bootstrap four, 63 00:04:29,210 --> 00:04:33,500 you'd understand why I name this application as conFusion. 64 00:04:33,500 --> 00:04:35,000 So, at the prompt, 65 00:04:35,000 --> 00:04:40,905 type ng new conFusion, 66 00:04:40,905 --> 00:04:45,945 and then I would use sass as 67 00:04:45,945 --> 00:04:53,080 the CSS styling framework for my Angular application. 68 00:04:53,080 --> 00:04:58,015 So, I specify minus minus style equal to SCSS, 69 00:04:58,015 --> 00:05:01,610 and hit the Return and it'll take some time for 70 00:05:01,610 --> 00:05:05,750 the Angular application to get created in the current folder. 71 00:05:05,750 --> 00:05:08,330 Once your application gets installed, 72 00:05:08,330 --> 00:05:10,850 let's use the built-in server from 73 00:05:10,850 --> 00:05:16,100 the Angular CLI to compile our Angular application and start serving it. 74 00:05:16,100 --> 00:05:18,650 Move to the conFusion folder, 75 00:05:18,650 --> 00:05:22,495 and at the prompt, type ng serve, 76 00:05:22,495 --> 00:05:27,470 and wait for the Angular Live Development server to get 77 00:05:27,470 --> 00:05:33,115 started and build our Angular application and start serving the application. 78 00:05:33,115 --> 00:05:35,175 Once it is completed, 79 00:05:35,175 --> 00:05:39,920 then you will notice that this application will be available by typing 80 00:05:39,920 --> 00:05:50,425 a http://localhost:4200 into the address bar of our browser. 81 00:05:50,425 --> 00:05:53,975 You can leave the development server running continuously. 82 00:05:53,975 --> 00:05:57,020 As you make changes to your Angular application, 83 00:05:57,020 --> 00:06:01,520 the server will automatically recompile the changes and then 84 00:06:01,520 --> 00:06:06,320 start serving up the updated Angular application within your browser. 85 00:06:06,320 --> 00:06:13,370 So, this would be a very good way of watching live the changes that you make 86 00:06:13,370 --> 00:06:16,760 within your Angular application being immediately reflected 87 00:06:16,760 --> 00:06:21,265 into the browser where you view your Angular application. 88 00:06:21,265 --> 00:06:28,610 If you go to the browser and access the Angular application at localhost:4200, 89 00:06:28,610 --> 00:06:31,135 you see that the application starts working, 90 00:06:31,135 --> 00:06:36,835 and it'll serve up this set of words into our browser. 91 00:06:36,835 --> 00:06:42,140 So, this is a very simple application that bare-bones Angular application to 92 00:06:42,140 --> 00:06:47,490 get you started with developing your Angular application. 93 00:06:47,490 --> 00:06:52,460 We're going to build on top of this scaffolded application by Angular CLI, 94 00:06:52,460 --> 00:06:57,420 by implementing various features as part of this course. 95 00:06:57,420 --> 00:07:01,710 If you're planning to use Git for your Angular application for versioning, 96 00:07:01,710 --> 00:07:03,680 then at this point, 97 00:07:03,680 --> 00:07:06,980 it may be a good idea to initialize your Git repository. 98 00:07:06,980 --> 00:07:12,620 The Angular CLI automatically does the initialization of your Git repository, 99 00:07:12,620 --> 00:07:18,765 and thus the first commit with the message initial commit to the Git repository. 100 00:07:18,765 --> 00:07:23,610 Let's check the status of our Git repository. 101 00:07:23,610 --> 00:07:28,310 Lets check out by typing git log 102 00:07:28,310 --> 00:07:29,600 one line and you will see that 103 00:07:29,600 --> 00:07:33,020 the initial setup has been committed to our Git repository. 104 00:07:33,020 --> 00:07:36,920 Now, we can start working on our Angular application that we 105 00:07:36,920 --> 00:07:41,020 have scaffolded out into this folder here. 106 00:07:41,020 --> 00:07:46,800 Should you choose to synchronize your Git repository with an online repository, 107 00:07:46,800 --> 00:07:52,160 then please make sure that your online repository is a private repository. 108 00:07:52,160 --> 00:07:56,835 Bitbucket allows you to create free private repositories. 109 00:07:56,835 --> 00:08:01,580 So, go ahead and set up your Git repository on Bitbucket. 110 00:08:01,580 --> 00:08:04,350 With this, we complete our exercise. 111 00:08:04,350 --> 00:08:06,395 In this first exercise, 112 00:08:06,395 --> 00:08:08,635 we have installed the Angular CLI. 113 00:08:08,635 --> 00:08:14,060 Then, we have scaffolded out our Angular application on which we're going to 114 00:08:14,060 --> 00:08:22,150 work to develop further as part of the rest of the exercises in this course.