7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 67Length: 8.9 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

1.6 CLI Options

The CLI supports a wide range of options that can be configured, so in this lesson we'll take a quick look at these.

1.Introduction
6 lessons, 42:00

1.1
Introduction
00:48

1.2
Get Started With Angular-CLI
11:09

1.3
Developing With Angular-CLI
13:17

1.4
TypeScript vs. JavaScript
06:54

1.5
Angular Modules From the CLI
04:31

1.6
CLI Options
05:21

2.Get Started With Angular
7 lessons, 42:38

2.1
Bootstrapping the Application
04:30

2.2
The Application Module
04:15

2.3
The Application Component
08:06

2.4
Component Styling
03:06

2.5
Global Styling
05:11

2.6
Creating a Component With the CLI
09:34

2.7
Creating a Service With the CLI
07:56

3.Core Concepts
7 lessons, 55:20

3.1
Component Trees
06:20

3.2
Dependency Injection
06:52

3.3
Content Projection
05:38

3.4
Component and Directive Lifecycle Methods
06:31

3.5
Component-Only Lifecycle Methods
05:28

3.6
Decorators
07:36

3.7
Models
16:55

4.Template Deep Dive
11 lessons, 1:10:56

4.1
Basic Data Binding With Interpolation
05:35

4.2
Property Bindings
07:07

4.3
Attribute Bindings
03:29

4.4
Event Bindings
08:16

4.5
Class and Style Bindings
05:44

4.6
The `NgClass` and `NgStyle` Directives
05:04

4.7
The `*ngIf` Directive
04:41

4.8
The `*ngFor` Directive
09:29

4.9
Inputs
05:33

4.10
Using Pipes in a Template
07:31

4.11
Using Pipes in a Class
08:27

5.Forms
10 lessons, 1:45:41

5.1
Handling User Input With Template Reference Variables
07:06

5.2
Template-Driven Forms
11:10

5.3
Template-Driven Forms: Validation and Submission
14:00

5.4
Reactive Forms
11:26

5.5
Using a `FormBuilder`
08:01

5.6
Reactive Validation With Built-in Validators
14:53

5.7
Creating Custom Validators for Template-Driven Forms
12:18

5.8
Creating Custom Validators for Reactive Forms
08:26

5.9
Observing Form State Changes
12:40

5.10
Working With the `@HostListener` Decorator
05:41

6.Routing
9 lessons, 1:15:10

6.1
Defining and Configuring Routes
07:53

6.2
Rendering Components With Router Outlets
10:14

6.3
Using Router Links for Navigation
05:25

6.4
Navigating Routes Using the Router
06:24

6.5
Determining the Active Route Using an Activated Route
07:16

6.6
Working With Route Parameters
10:42

6.7
Using Route Guards
07:36

6.8
Observing Router Events
10:55

6.9
Adding Child Routes
08:45

7.Using the HTTP Client
5 lessons, 56:24

7.1
Sending an HTTP Request
10:52

7.2
Handling an HTTP Response
11:22

7.3
Setting Request Headers
12:33

7.4
Intercepting Requests
09:04

7.5
Finishing the Example Application
12:33

8.Testing
10 lessons, 1:23:27

8.1
Service Unit Test Preparation
10:45

8.2
Unit Testing Services
13:24

8.3
Component Unit Test Preparation
12:35

8.4
Unit Testing Components
07:27

8.5
Unit Testing Component Templates
06:58

8.6
Unit Testing Pipes
04:41

8.7
Unit Testing Directives
04:56

8.8
Unit Testing Validators
04:48

8.9
Unit Testing Observables
11:37

8.10
Unit Testing HTTP Interceptors
06:16

9.Building for Production
1 lesson, 03:40

9.1
Building for Production
03:40

10.Conclusion
1 lesson, 01:32

10.1
Conclusion
01:32


1.6 CLI Options

Hello folks. In this lesson, we're just gonna take a quick look at some of the different options we have when running commands in the Angular CLI. Back when we initially created the example application, we did use one of these options, the hyphen hyphen style option, which we set to SCSS in order to enable SASS compilation. As well as the style option, we have a whole range of other options that we can make use of. So when scaffolding out an application, the CLI does quite a lot of things for us, such as initializing git in the project directory and adding an initial commit. If we don't want the CLI to do this, we can use either the --skip-git, or the --skip-commit commands, and we would use these like this. And this would tell the CLI not to bother initializing git or creating an initial commit. So you can see in the background in the IDE here, the example application component is separated out into different files. We've got an HTML file which contains the template for the component. We've got the SCSS file, which will contain any styling specific to the component. And we've also got the TypeScript file for the component itself which contains the class that backs the component. So those are all created individually for us by the CLI. Generally, it's useful to have the HTML template and the styling in their own separate files, but we can also choose to have this style and template in line, within the TypeScript file itself instead. If we do want to do that, we can set either the inline-style or the inline-template options to true. And we would do that like this. And then when the test app was scaffolded out, the example app component would just contain a single file, the TypeScript file, and that would contain any styling and the template inline with the file itself. So we specify that the application is gonna be called test-app. And when the CLI scaffolds out the application for us, the folder that it creates the application within will also have this same name, test-app. But we might want to call the app one thing, but put it in a folder called something else. So if we did want to do that, we could use the directory option. So this time the option takes an argument and we specify that using the equal sign after the option, and we just specify the path to the differently named folder that we want the application to be created in. Routing is a very common requirement in bigger, more complex applications, but it isn't used as much in smaller applications, so it isn't enabled by default. We can enable it though, using the routing option, which we set to true if we want to enable routing. In this case when the CLI scaffolded out the application for us, as well as creating an app.module.ts file it would also create a routing.module.ts file which contained all of the client side routing. We will be looking at routing later on in the course. So these are just some of the different options that we can use. If you'd like to see a list of all of the different options that you can use, you can run ng new --help, and that will list all of the different options with a description of how they should be used. So these are all of the different options that we can use when using the new command. There are a number of other commands that we'll be using throughout the course such as the generate command, which is used to generate things like components or services. So if we wanted to see what options we could use with those commands, again, we use the --help. When we use help with the generate command, it tells us the different things that we can generate, and we should also be able to list the different options for each of those different things. So let's say we were generating a component. And again, the output just lists all of the different options that we can use and gives a brief description of those. And it tells us if there's an alias, and that can just mean that we have to type less. So using the help option is a great way to learn how to use the CLI and to get familiar with the many different options. So in this lesson, we looked at some of the different configuration options that we can make use of when scaffolding out a new application to enable or disable different features. We also saw that we can find out exactly which options we can use with any of the different commands using the --help option. Thanks for watching.

Back to the top