Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Using the Angular CLI!
You have completed Using the Angular CLI!
Preview
Let's use the CLI to generate a new component.
Available Schematics
The following schematics are available for use with the ng generate command:
- Class
- Component
- Directive
- Enum
- Guard
- Interface
- Module
- Pipe
- Service
Customizing the Component's Selector Prefix
There are two ways that you can customize the selector prefix when generating a component. You can use the ng generate command's --prefix option like this:
ng generate component [component-name-to-use] --prefix [selector-prefix-to-use]
Or you can configure the selector prefix to use via the .angular-cli.json configuration file's apps[].prefix property.
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "test-app"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "[selector-prefix-to-use]",
"styles": [
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Let's generate another app, this time I'm
gonna generate an app into an existing
0:00
GitHub repo named my-awesome-app
that I cloned to my system earlier.
0:05
Here's the directory for my repo,
let's browse into the repo's directory.
0:15
If we list the contents of
the directory using ls -a,
0:21
we can see that it's empty except for the
.git directory and the .gitignore file.
0:25
We want the CLI to generate
our app into this folder, so
0:32
let's browse back up to the GitHub folder.
0:36
Remember, to generate an app
we use the ng new command,
0:42
followed by the name of the app
that we want to generate.
0:45
So, my-awaesome-app, by default,
when you generate an app,
0:49
the CLI initializes a git repo,
and makes an initial commit.
0:56
Now that's convenient most of the time,
1:01
we don't want to do that now,
as we already have a git repo configured.
1:03
Luckily, we can skip that part of the
process by adding the --skip-git option.
1:08
As we saw just a bit ago,
the CLI by default doesn't set up routing.
1:16
If our app is going to need support for
routing, we can instruct the CLI to
1:21
include a routing module by
including the --routing option.
1:25
But this app won't have more than a single
route, so I'm going to remove that option.
1:31
Press Enter to run the command.
1:38
Now, let's browse into
the project's directory,
1:48
and make our initial commit; git add .,
&& commit -m "Initial commit".
1:53
Now let's see how we can use the CLI's
generate command to modify our app.
2:03
If we type ng help generate we'll see
a list of the available schematics.
2:08
Schematics are blueprints for
creating new items within our app.
2:14
The CLI includes schematics for
creating classes, components,
2:18
directives, pipes, services and more.
2:23
To generate a component we
run the ng generate command
2:27
followed by the name of the schematic
we want to use, in this case component.
2:32
After the schematic name,
we need to provide the name for
2:38
our component, let's use my-test.
2:43
The name of the component can be formatted
multiple ways, including kabob case,
2:47
like I have it here.
2:52
Camel case, like myTest or
Pascal case like MyTest.
2:54
The CLI will convert the provided
name to the appropriate format for
3:02
the specific target.
3:06
For instance, for the file name the CLI
will convert the provided name to Kabob
3:08
case and for the component class
name it'll use Pascal case,
3:12
let's press Enter to run our command.
3:17
Here in the terminal we can see
that the CLI create four files and
3:20
updated a single file.
3:25
Let's review the changes to our
project in Visual Studio code.
3:27
The CLI created a new directory for
3:40
our component files named my-test
underneath the src/app directory.
3:42
Within that director are four new files.
3:51
My-test.component.css, which
are the css styles for our component,
3:55
my-test.component.html, which is
the HTML template for our component.
4:01
my-test.component.spec.ts, which is
the spec file for our component,
4:07
and finally, my-test.component.ts,
which is the class for our component.
4:12
Before a component can be used,
it must be declared within an app module.
4:18
The CLI saved us a bit of time and
updated our app module for us.
4:26
It added the appropriate
import statement and
4:33
added the component to
the NgModule declarations array.
4:36
Having a directory generated for
our component files is helpful and
4:41
often what we want.
4:45
But what if you wanted the component
files generated directly within the app
4:46
directory, or
another directory altogether?
4:50
The ng generate command supports adding
relative paths before the component name.
4:54
Suppose we wanted to generate an add user
component within a directory named users.
5:00
We could do it like this $ ng
generate component users/add-user.
5:07
To test this command
without making any changes,
5:14
we can add the --dry --run option.
5:18
Using the --dry --run option allows us
to preview the results of the command.
5:25
Notice that a component was generated
within the directory named add-user.
5:30
That's within the user's directory.
5:35
While that might be what we were
expecting, what if we wanted the component
5:39
files to be generated directly
within the user's directory?
5:43
To do that we could add the --flat option.
5:47
And that gave us the result
we were looking for.
5:58
We just saw that when
generating a component,
6:08
the CLI will register the new
component with the app module.
6:11
But you'll still need to determine
how your component will be used
6:15
from within your app.
6:18
Let's start with making a simple
change to our component's template.
6:20
Let's replace this text with,
Hello from our test component.
6:27
Now let's add our component
to the template for
6:36
our top level component app.component.
6:39
Well, before we can do that,
we need to know what the selector is for
6:45
our component.
6:48
We can see here that the CLI
set the @Component decorator
6:53
selector property to
a value of app-my-test.
6:58
By default,
the CLI will generate a selector
7:03
using your provided component name,
prefixed by the text app.
7:06
The prefix that the CLI uses is
configurable via the Angular CLI JSON
7:10
file, or by using the ng
generate commands prefix option.
7:16
For more information see
the teacher's notes.
7:21
Now that we know our components selector,
let's update the app.components template.
7:24
Let's add our component right bellow this
heading so it's easy to see on the page.
7:29
And let's run our app using the ng serve
command, this time including the -o
7:42
option which will cause the CLI to
open our app into our default browser.
7:48
And here's the output from our component.
7:59
Components are just one type of
item that the CLI can generate.
8:04
In our next video, let's see how we
can generate a service for our app.
8:08
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up