1
00:00:00,340 --> 00:00:05,110
Now let's take a look at using the CLI
to generate a service for our app.

2
00:00:05,110 --> 00:00:09,337
If you still have the ng serve
command running in the terminal,

3
00:00:09,337 --> 00:00:11,104
press Ctrl + C to stop it.

4
00:00:11,104 --> 00:00:13,415
Just like we did when
generating a component,

5
00:00:13,415 --> 00:00:16,020
we'll use the ng generate command.

6
00:00:16,020 --> 00:00:20,100
This time specifying we
want to generate a service.

7
00:00:20,100 --> 00:00:25,738
And we need to add the for our servers,
how about test-content, let's also

8
00:00:25,738 --> 00:00:31,307
add the dry run option in other to preview
the changes that the CLI will make.

9
00:00:34,711 --> 00:00:40,877
Notice that the CLI created two files,
but didn't update the app.module.ts file.

10
00:00:40,877 --> 00:00:43,678
By default, when generating the service,

11
00:00:43,678 --> 00:00:49,215
the CLI won't provide the service in
Angular dependency injection system.

12
00:00:49,215 --> 00:00:51,710
That's something that
you need to take care of

13
00:00:51,710 --> 00:00:54,845
before you can inject
the service into a component.

14
00:00:54,845 --> 00:00:59,474
Lucky the seal lie provides an option
to specify which app module to provide

15
00:00:59,474 --> 00:01:00,511
the service in.

16
00:01:03,283 --> 00:01:07,479
--module=app.

17
00:01:10,278 --> 00:01:14,152
Now we can see that the CLI
will update our app module.

18
00:01:14,152 --> 00:01:17,870
Let's make the changes for real by
removing the --dry --run option and

19
00:01:17,870 --> 00:01:19,296
running the command again.

20
00:01:25,605 --> 00:01:26,695
Here's our service.

21
00:01:30,073 --> 00:01:33,860
And here in our app module,
is the import statement for our service.

22
00:01:37,383 --> 00:01:42,183
And here's where the CLI added our service
to the ng module provider's array.

23
00:01:43,944 --> 00:01:48,653
In order to test our service, let's add
a method to the test content service class

24
00:01:48,653 --> 00:01:50,850
that returns a string literal value.

25
00:01:53,706 --> 00:01:57,225
GetContent, then return,

26
00:01:57,225 --> 00:02:01,483
how about hello from our service!

27
00:02:05,868 --> 00:02:09,669
Now let's update the my-test
component to make use of our service.

28
00:02:18,626 --> 00:02:22,199
Let's start with importing
the TestContentService class.

29
00:02:32,708 --> 00:02:37,330
And then inject our service into
the MyTestComponent class constructor.

30
00:02:47,868 --> 00:02:50,745
Now let's add a property for
the service content.

31
00:02:53,075 --> 00:02:57,130
How about testContent of type string?

32
00:02:58,320 --> 00:03:02,970
Then in the ngOnInit method,
let's set the test content property

33
00:03:02,970 --> 00:03:07,714
the return value from
the testContentService gitContent method.

34
00:03:15,358 --> 00:03:17,471
Then in the component template,

35
00:03:22,995 --> 00:03:27,844
Let's buy the test content property
using interpolation in order to render

36
00:03:27,844 --> 00:03:29,291
the value to the view.

37
00:03:34,209 --> 00:03:38,485
Now, we're ready to run and test our app
again by running the ng serve command.

38
00:03:45,360 --> 00:03:50,347
Remember, you can include the -o option
to have the CLI open our app in our

39
00:03:50,347 --> 00:03:51,645
default browser.

40
00:03:57,513 --> 00:04:01,420
And here's the content for our service.

41
00:04:01,420 --> 00:04:05,343
The placement is a little odd, so lets
double check the markup in our template.

42
00:04:09,177 --> 00:04:12,513
We didn't surround it in
a paragraph let's try that.

43
00:04:23,265 --> 00:04:24,232
That looks better.

44
00:04:26,374 --> 00:04:30,262
Now that you've seen how easy it is
to generate components and services,

45
00:04:30,262 --> 00:04:34,592
go ahead and take some time to experiment
with adding more components and services

46
00:04:34,592 --> 00:04:39,460
to our test app, or you can try using
one of the other available schematics.

47
00:04:39,460 --> 00:04:43,924
If you find yourself using the same ng
generate options every time that you

48
00:04:43,924 --> 00:04:48,604
generate an item, you can save yourself
some time by customizing the default

49
00:04:48,604 --> 00:04:53,290
values for specific schematics via
the Angular CLI's configuration file.

50
00:04:58,490 --> 00:05:01,246
For example,
we can set the default values for

51
00:05:01,246 --> 00:05:05,993
the component schematic's inline style and
inline template options to true.

52
00:05:25,806 --> 00:05:30,083
Doing this will keep the CLI from
generating separate files for

53
00:05:30,083 --> 00:05:32,993
component CSS styles and HTML templates.

54
00:05:32,993 --> 00:05:36,822
Instead referring to use inline styles and
templates.

55
00:05:39,054 --> 00:05:45,200
Let's stop the ng serve command process,
And see this in action.

56
00:05:45,200 --> 00:05:49,150
We can test our configuration
changes by running the ng generate

57
00:05:49,150 --> 00:05:53,320
component command I'll include
the --dry --run option to keep

58
00:05:53,320 --> 00:05:56,778
the CLI from actually
generating the component files.

59
00:06:03,128 --> 00:06:06,780
And we can see that the CLI
only generated two files,

60
00:06:06,780 --> 00:06:11,429
one for the component class, and
another for the component spec.

61
00:06:13,828 --> 00:06:17,958
It's also possible to customize the
schematics that are included with the CLI,

62
00:06:17,958 --> 00:06:20,580
for more information,
see the teacher's notes.