Wrap-Up and Next Steps3:38 with James Churchill
To wrap-up this workshop, let's take a quick look at how the CLI supports testing and how to eject your project from the CLI if you need to manually configure webpack.
The CLI also helps us with writing higher quality code 0:00 by making it easy to run any of our projects unit tests or end to end tests. 0:04 When we created our app, and also when we added a component and 0:09 service, the CLI added spec files to our project. 0:13 Here's the spec file for our app component. 0:17 And for our MyTestComponent, and for our TestContentService. 0:22 These spec files are just simple stubs or shells, we still need to update these 0:28 files with sensible unit tests that'll test our apps functionality. 0:32 The CLI makes it easy to run these unit tests, 0:37 to do that we can use the ng test command. 0:40 Our tests will be ran after a build is executed via Karma, and 0:44 it will automatically watch our files for changes and rerun our tests. 0:48 If Karma does not open a tab in your browser you can grab the URL here in 0:53 the terminal and manually browse to it 0:57 Here we can see that we have 5 specs, and 0 failures. 1:06 While unit tests give us a way to test isolated parts of our app, 1:13 end to end tests give us a way to test our app holistically. 1:17 Because end to end tests are concerned about testing the functionality of our 1:22 app, instead of isolated parts of our app like components or 1:25 services, they're defined in the e2e folder. 1:28 Instead of being defined next to the item that they're testing like unit tests are. 1:33 When we created our app, using CLI, it generated a simple end to end test, 1:37 here in the e2e folder, in the root of our project. 1:43 We can use the CLI to run this end to end test using the ng e2e command. 1:47 End to end tests are ran via protractor, for more information on how to test 1:55 Angular apps using unit tests and end to end tests see the teacher's notes. 1:59 As mentioned earlier in this workshop, the Angular CLI uses webpack under the covers. 2:06 The CLI hides the webpack configuration to shield you from its complexity. 2:11 If you ever need to customize the configuration of webpack, 2:16 you can eject your app from the CLI using the ng eject command. 2:20 And now, we have a webpack.config.js file in the root of our project that we 2:30 can tweak to our hearts content. 2:35 Ejecting an app from the CLI is a one way trip, so plan accordingly. 2:37 Make sure that all of your current changes have been committed or stashed, so 2:42 you can easily undo the changes made by ejecting your app. 2:47 Using Angular for a simple web page like ours, well, that doesn't make any sense, 2:52 Angular is for building apps. 2:57 If you have an idea for an app I'd encourage you to practice using the CLI 3:00 by starting to build out your own app. 3:04 If you don't have an idea for an app, you could always walk through the Tour 3:06 of Heroes tutorial on the official Angular Docs website. 3:09 This tutorial uses the CLI to build out a simple but functional app. 3:14 To learn more about the Angular CLI be sure to visit the CLIs GitHub repo wiki. 3:19 It includes documentation and a great set of stories or 3:25 recipes that you can use to learn how to do more with the CLI. 3:29 Enjoy using the Angler CLI, and happy coding. 3:34
You need to sign up for Treehouse in order to download course files.Sign up