1 00:00:00,540 --> 00:00:02,660 Let's start with browsing to the directory or 2 00:00:02,660 --> 00:00:06,680 folder where we want the CLI to generate our app into. 3 00:00:06,680 --> 00:00:09,260 I'm gonna browse to my Desktop directory, but 4 00:00:09,260 --> 00:00:11,350 you can use whatever directory you'd like. 5 00:00:13,350 --> 00:00:18,480 To generate a new app, we'll use the ng new command, followed by the name for 6 00:00:18,480 --> 00:00:19,930 our application. 7 00:00:19,930 --> 00:00:24,210 How about my dash first dash app. 8 00:00:25,240 --> 00:00:28,080 And press enter to execute the command. 9 00:00:28,080 --> 00:00:31,970 The CLI creates a new directory named my first app. 10 00:00:31,970 --> 00:00:35,310 Within that directory, it generates our app's source files and 11 00:00:35,310 --> 00:00:40,660 directories based upon our app name and the official angular style guide. 12 00:00:40,660 --> 00:00:45,360 Then it installs all of our apps NPM dependencies. 13 00:00:45,360 --> 00:00:49,660 In addition to creating a root project directory, generating our app source files 14 00:00:49,660 --> 00:00:53,690 and directories, and installing its NPM dependencies, 15 00:00:53,690 --> 00:01:00,300 the CLI configures Karma for unit testing and Protractor for end-to-end testing. 16 00:01:00,300 --> 00:01:04,360 It also sets up environment files for both the development and 17 00:01:04,360 --> 00:01:06,220 production environments. 18 00:01:06,220 --> 00:01:09,520 We'll take a closer look at our environments in just a bit. 19 00:01:09,520 --> 00:01:14,027 And finally, it initializes git and makes an initial commit. 20 00:01:14,027 --> 00:01:17,614 All right, now that we've generated our new app, let's run it so 21 00:01:17,614 --> 00:01:20,030 we can preview it in a browser. 22 00:01:20,030 --> 00:01:22,854 First, we need to browse into our project's directory. 23 00:01:25,397 --> 00:01:28,660 Then we use the ng serve command to run our app. 24 00:01:30,050 --> 00:01:34,830 The CLI loads its configuration from the .angular-cli.json file, 25 00:01:34,830 --> 00:01:37,270 which we'll take a look at in just a second. 26 00:01:37,270 --> 00:01:41,340 It then runs webpack to build and bundle all of our app's JavaScript and 27 00:01:41,340 --> 00:01:45,570 CSS code and finally runs the webpack-dev-server. 28 00:01:45,570 --> 00:01:49,555 To preview the app, open a browser and browse to the URL 29 00:01:49,555 --> 00:01:55,169 http://localhost:4200. 30 00:01:57,140 --> 00:01:58,950 And here's our app. 31 00:01:58,950 --> 00:02:03,140 It's not much to look at and it's just a single page with no routing. 32 00:02:03,140 --> 00:02:07,280 But it's a full fledged angular application that took us 33 00:02:07,280 --> 00:02:12,600 a fraction of the time to create than if we had built it out manually ourselves. 34 00:02:12,600 --> 00:02:17,540 Notice that the ng serve command doesn't exit and return you to the command prompt. 35 00:02:17,540 --> 00:02:22,370 The file system is being watched so that any changes to files in our app 36 00:02:22,370 --> 00:02:26,330 will cause it to be recompiled and reloaded in the browser. 37 00:02:26,330 --> 00:02:30,140 When you're ready to stop the process, you can press control C. 38 00:02:30,140 --> 00:02:31,980 But we won't do that right now. 39 00:02:31,980 --> 00:02:36,490 Let's open another terminal window by pressing command T on MacOS or 40 00:02:36,490 --> 00:02:40,420 on Windows you can open another instance of the command prompt. 41 00:02:40,420 --> 00:02:46,750 Then we can open our project in Visual Studio Code, by typing code space dot. 42 00:02:50,150 --> 00:02:53,210 Visual Studio Code is a free open source, 43 00:02:53,210 --> 00:02:56,570 cross platform code editor developed by Microsoft. 44 00:02:56,570 --> 00:02:59,330 It has great support for working with typescript. 45 00:02:59,330 --> 00:03:02,370 So it's a natural fit for doing angular development. 46 00:03:03,410 --> 00:03:07,874 In the root of our project, there are a number of configuration files. 47 00:03:07,874 --> 00:03:14,195 .angular-cli.json, which is the angular CLI configuration file. 48 00:03:14,195 --> 00:03:19,559 Editorconfig, which is a universal configuration file for text editors. 49 00:03:19,559 --> 00:03:25,672 Karma.conf.js, which is the karma config for unit testing. 50 00:03:25,672 --> 00:03:32,773 Package-lock.json and package.json, which is our configuration for mpm. 51 00:03:32,773 --> 00:03:38,208 Protractor.conf.js, which is the the protractor configuration for 52 00:03:38,208 --> 00:03:39,727 end to end testing. 53 00:03:39,727 --> 00:03:43,985 Tsconfg.json, which is our type script configuration and 54 00:03:43,985 --> 00:03:48,750 tslint.json which is our configuration for typescript linting. 55 00:03:50,700 --> 00:03:55,360 The e2e folder contains a simple protractor end to end test. 56 00:03:56,700 --> 00:04:01,422 The src or source folder contains the source code and assets for our app. 57 00:04:04,214 --> 00:04:09,173 Index.html, this is the html page for our app. 58 00:04:09,173 --> 00:04:14,719 main.ts, this is the typescript file that bootstraps our app module. 59 00:04:14,719 --> 00:04:20,990 Polyfills.ts includes polyfills needed by angular and is loaded before the app. 60 00:04:20,990 --> 00:04:25,580 You can add your own extra polyfills to this file as needed. 61 00:04:25,580 --> 00:04:31,683 Styles.css, here we can add any global styles to the style sheet. 62 00:04:31,683 --> 00:04:37,894 Test.ts, this is a typescript file that supports the unit testing with Karma. 63 00:04:37,894 --> 00:04:39,990 Tsconfig.app.jason and 64 00:04:39,990 --> 00:04:45,643 tsconfig.spec.json contain additional typescript configuration. 65 00:04:45,643 --> 00:04:51,300 Typings.d.ts allows you to define additional typescript typings. 66 00:04:51,300 --> 00:04:56,850 The code that's included in this file enables support for system js. 67 00:04:56,850 --> 00:04:59,300 We don't need this code as we're using Webpack, but 68 00:04:59,300 --> 00:05:02,520 there is no harm in leaving it here as it is. 69 00:05:02,520 --> 00:05:06,100 The app folder contains our app code. 70 00:05:06,100 --> 00:05:11,740 App.component.ts is the class for our apps only component. 71 00:05:11,740 --> 00:05:15,240 And app.module.ts is our app's app module. 72 00:05:16,370 --> 00:05:21,170 The assets folder is where we can include any static assets for our app. 73 00:05:21,170 --> 00:05:25,800 Anything that we put into the assets folder will be copied over as is 74 00:05:25,800 --> 00:05:26,670 when we do a build. 75 00:05:28,350 --> 00:05:32,930 The environments folder contains a file for each of our defined environments. 76 00:05:34,740 --> 00:05:39,810 We can define values here that need to vary between development and production. 77 00:05:39,810 --> 00:05:42,710 Then you can import and reference those values in code. 78 00:05:46,044 --> 00:05:50,519 In the main.ts file we can see how the production environment variable is being 79 00:05:50,519 --> 00:05:53,992 used to know when to call the angular enableProdMode method, 80 00:05:53,992 --> 00:05:56,690 which disables Angular's development mode. 81 00:05:59,370 --> 00:06:02,510 Remember that we left the ng serve command running. 82 00:06:02,510 --> 00:06:04,100 Let's test live reloading. 83 00:06:04,100 --> 00:06:05,630 I'm making a change to our app. 84 00:06:08,750 --> 00:06:11,514 Let's go into the app.component.ts file. 85 00:06:13,754 --> 00:06:16,380 And change the app components title property. 86 00:06:19,950 --> 00:06:28,250 How about we change it to My First CLI App and save. 87 00:06:28,250 --> 00:06:32,753 And if we switch back to the browser we'll see that our new title is now being 88 00:06:32,753 --> 00:06:37,546 displayed, demonstrating that the ng serve command noticed our file change, 89 00:06:37,546 --> 00:06:40,790 recompiled our app, and reloaded it in the browser. 90 00:06:44,448 --> 00:06:48,760 So how does our project differ from non-CLI projects? 91 00:06:48,760 --> 00:06:51,450 For starters, you might have noticed that there isn't 92 00:06:51,450 --> 00:06:56,210 a webpack.config.js configuration file in the root of our project. 93 00:06:58,260 --> 00:07:03,199 Configuring and running Webpack is fully handled by the CLI. 94 00:07:03,199 --> 00:07:06,590 For the majority of apps, this approach works great. 95 00:07:06,590 --> 00:07:11,130 But if you ever need to manually configure web pack, there is an escape patch. 96 00:07:11,130 --> 00:07:14,081 You can eject your project from the CLI. 97 00:07:14,081 --> 00:07:16,900 We'll talk about more of this process later in this workshop.