1
00:00:00,320 --> 00:00:05,373
Let's generate another app, this time I'm
gonna generate an app into an existing

2
00:00:05,373 --> 00:00:09,787
GitHub repo named my-awesome-app
that I cloned to my system earlier.

3
00:00:15,193 --> 00:00:19,690
Here's the directory for my repo,
let's browse into the repo's directory.

4
00:00:21,438 --> 00:00:25,518
If we list the contents of
the directory using ls -a,

5
00:00:25,518 --> 00:00:32,360
we can see that it's empty except for the
.git directory and the .gitignore file.

6
00:00:32,360 --> 00:00:36,280
We want the CLI to generate
our app into this folder, so

7
00:00:36,280 --> 00:00:38,410
let's browse back up to the GitHub folder.

8
00:00:42,182 --> 00:00:45,719
Remember, to generate an app
we use the ng new command,

9
00:00:45,719 --> 00:00:49,770
followed by the name of the app
that we want to generate.

10
00:00:49,770 --> 00:00:56,960
So, my-awaesome-app, by default,
when you generate an app,

11
00:00:56,960 --> 00:01:01,112
the CLI initializes a git repo,
and makes an initial commit.

12
00:01:01,112 --> 00:01:03,980
Now that's convenient most of the time,

13
00:01:03,980 --> 00:01:08,390
we don't want to do that now,
as we already have a git repo configured.

14
00:01:08,390 --> 00:01:16,189
Luckily, we can skip that part of the
process by adding the --skip-git option.

15
00:01:16,189 --> 00:01:21,550
As we saw just a bit ago,
the CLI by default doesn't set up routing.

16
00:01:21,550 --> 00:01:25,450
If our app is going to need support for
routing, we can instruct the CLI to

17
00:01:25,450 --> 00:01:29,723
include a routing module by
including the --routing option.

18
00:01:31,032 --> 00:01:36,060
But this app won't have more than a single
route, so I'm going to remove that option.

19
00:01:38,500 --> 00:01:40,400
Press Enter to run the command.

20
00:01:48,364 --> 00:01:53,412
Now, let's browse into
the project's directory,

21
00:01:53,412 --> 00:02:00,944
and make our initial commit; git add .,
&& commit -m "Initial commit".

22
00:02:03,264 --> 00:02:08,016
Now let's see how we can use the CLI's
generate command to modify our app.

23
00:02:08,016 --> 00:02:14,520
If we type ng help generate we'll see
a list of the available schematics.

24
00:02:14,520 --> 00:02:18,546
Schematics are blueprints for
creating new items within our app.

25
00:02:18,546 --> 00:02:23,169
The CLI includes schematics for
creating classes, components,

26
00:02:23,169 --> 00:02:26,150
directives, pipes, services and more.

27
00:02:27,460 --> 00:02:32,460
To generate a component we
run the ng generate command

28
00:02:32,460 --> 00:02:37,210
followed by the name of the schematic
we want to use, in this case component.

29
00:02:38,960 --> 00:02:43,987
After the schematic name,
we need to provide the name for

30
00:02:43,987 --> 00:02:47,454
our component, let's use my-test.

31
00:02:47,454 --> 00:02:52,188
The name of the component can be formatted
multiple ways, including kabob case,

32
00:02:52,188 --> 00:02:53,360
like I have it here.

33
00:02:54,880 --> 00:03:02,266
Camel case, like myTest or
Pascal case like MyTest.

34
00:03:02,266 --> 00:03:06,275
The CLI will convert the provided
name to the appropriate format for

35
00:03:06,275 --> 00:03:08,170
the specific target.

36
00:03:08,170 --> 00:03:12,830
For instance, for the file name the CLI
will convert the provided name to Kabob

37
00:03:12,830 --> 00:03:17,490
case and for the component class
name it'll use Pascal case,

38
00:03:17,490 --> 00:03:19,280
let's press Enter to run our command.

39
00:03:20,904 --> 00:03:25,674
Here in the terminal we can see
that the CLI create four files and

40
00:03:25,674 --> 00:03:27,479
updated a single file.

41
00:03:27,479 --> 00:03:30,810
Let's review the changes to our
project in Visual Studio code.

42
00:03:40,142 --> 00:03:42,685
The CLI created a new directory for

43
00:03:42,685 --> 00:03:48,131
our component files named my-test
underneath the src/app directory.

44
00:03:51,242 --> 00:03:54,070
Within that director are four new files.

45
00:03:55,664 --> 00:04:01,341
My-test.component.css, which
are the css styles for our component,

46
00:04:01,341 --> 00:04:07,325
my-test.component.html, which is
the HTML template for our component.

47
00:04:07,325 --> 00:04:12,971
my-test.component.spec.ts, which is
the spec file for our component,

48
00:04:12,971 --> 00:04:18,884
and finally, my-test.component.ts,
which is the class for our component.

49
00:04:18,884 --> 00:04:23,190
Before a component can be used,
it must be declared within an app module.

50
00:04:26,063 --> 00:04:32,100
The CLI saved us a bit of time and
updated our app module for us.

51
00:04:33,782 --> 00:04:36,551
It added the appropriate
import statement and

52
00:04:36,551 --> 00:04:40,030
added the component to
the NgModule declarations array.

53
00:04:41,844 --> 00:04:45,325
Having a directory generated for
our component files is helpful and

54
00:04:45,325 --> 00:04:46,760
often what we want.

55
00:04:46,760 --> 00:04:50,540
But what if you wanted the component
files generated directly within the app

56
00:04:50,540 --> 00:04:54,680
directory, or
another directory altogether?

57
00:04:54,680 --> 00:05:00,330
The ng generate command supports adding
relative paths before the component name.

58
00:05:00,330 --> 00:05:04,964
Suppose we wanted to generate an add user
component within a directory named users.

59
00:05:07,646 --> 00:05:14,423
We could do it like this $ ng
generate component users/add-user.

60
00:05:14,423 --> 00:05:18,875
To test this command
without making any changes,

61
00:05:18,875 --> 00:05:22,375
we can add the --dry --run option.

62
00:05:25,956 --> 00:05:30,254
Using the --dry --run option allows us
to preview the results of the command.

63
00:05:30,254 --> 00:05:35,670
Notice that a component was generated
within the directory named add-user.

64
00:05:35,670 --> 00:05:37,310
That's within the user's directory.

65
00:05:39,651 --> 00:05:43,542
While that might be what we were
expecting, what if we wanted the component

66
00:05:43,542 --> 00:05:47,570
files to be generated directly
within the user's directory?

67
00:05:47,570 --> 00:05:50,866
To do that we could add the --flat option.

68
00:05:58,071 --> 00:06:00,970
And that gave us the result
we were looking for.

69
00:06:08,714 --> 00:06:11,446
We just saw that when
generating a component,

70
00:06:11,446 --> 00:06:15,700
the CLI will register the new
component with the app module.

71
00:06:15,700 --> 00:06:18,970
But you'll still need to determine
how your component will be used

72
00:06:18,970 --> 00:06:20,410
from within your app.

73
00:06:20,410 --> 00:06:23,330
Let's start with making a simple
change to our component's template.

74
00:06:27,782 --> 00:06:36,118
Let's replace this text with,
Hello from our test component.

75
00:06:36,118 --> 00:06:39,657
Now let's add our component
to the template for

76
00:06:39,657 --> 00:06:42,856
our top level component app.component.

77
00:06:45,306 --> 00:06:48,823
Well, before we can do that,
we need to know what the selector is for

78
00:06:48,823 --> 00:06:49,700
our component.

79
00:06:53,722 --> 00:06:58,908
We can see here that the CLI
set the @Component decorator

80
00:06:58,908 --> 00:07:03,370
selector property to
a value of app-my-test.

81
00:07:03,370 --> 00:07:06,380
By default,
the CLI will generate a selector

82
00:07:06,380 --> 00:07:10,810
using your provided component name,
prefixed by the text app.

83
00:07:10,810 --> 00:07:16,465
The prefix that the CLI uses is
configurable via the Angular CLI JSON

84
00:07:16,465 --> 00:07:21,400
file, or by using the ng
generate commands prefix option.

85
00:07:21,400 --> 00:07:24,190
For more information see
the teacher's notes.

86
00:07:24,190 --> 00:07:27,804
Now that we know our components selector,
let's update the app.components template.

87
00:07:29,438 --> 00:07:33,560
Let's add our component right bellow this
heading so it's easy to see on the page.

88
00:07:42,824 --> 00:07:48,325
And let's run our app using the ng serve
command, this time including the -o

89
00:07:48,325 --> 00:07:53,500
option which will cause the CLI to
open our app into our default browser.

90
00:07:59,476 --> 00:08:02,279
And here's the output from our component.

91
00:08:04,580 --> 00:08:08,939
Components are just one type of
item that the CLI can generate.

92
00:08:08,939 --> 00:08:12,609
In our next video, let's see how we
can generate a service for our app.