1
00:00:00,120 --> 00:00:06,870
In this lecture, we're going to create our first module, the Seelye has created a module for us called

2
00:00:06,870 --> 00:00:09,300
AMP Module Acts.

3
00:00:09,630 --> 00:00:13,830
This module is being imported into the main ports file.

4
00:00:16,370 --> 00:00:20,120
We are passing on this module to the bootstrap module function.

5
00:00:20,450 --> 00:00:27,020
The word bootstrap means to initialize a system, in our case, we are initializing our app with this

6
00:00:27,020 --> 00:00:27,620
module.

7
00:00:27,890 --> 00:00:31,670
Let's go back to the app module acts file.

8
00:00:32,700 --> 00:00:38,190
At the moment, the file is empty, the bootstrap module function is expecting a module.

9
00:00:38,340 --> 00:00:39,390
Let's create one.

10
00:00:39,570 --> 00:00:41,820
A module is written as a class.

11
00:00:42,090 --> 00:00:49,110
Since this module is being imported into another file, we will export a class called out module.

12
00:00:51,620 --> 00:00:54,920
Be sure the letters A and M are capitalized.

13
00:00:55,220 --> 00:01:02,270
The main doctor's file is expecting this name after exporting the class, we need to tell Angular this

14
00:01:02,270 --> 00:01:03,560
class is a module.

15
00:01:03,890 --> 00:01:07,760
As far as Angular is concerned, we're shipping a plain class.

16
00:01:08,300 --> 00:01:11,660
Classes are heavily used in angular for different features.

17
00:01:11,930 --> 00:01:16,010
Angular needs help to identify the type of class we're creating.

18
00:01:16,550 --> 00:01:21,800
We can use a decorator, decorators or another heavily used feature in Angular.

19
00:01:22,100 --> 00:01:24,470
If you're not sure how decorators work.

20
00:01:24,650 --> 00:01:29,930
Be sure to check out the TypeScript section of this course for understanding the basics.

21
00:01:30,260 --> 00:01:32,870
Angular defines dozens of decorators.

22
00:01:33,110 --> 00:01:38,570
It has a decorator for annotating a class as a module at the top of the file.

23
00:01:38,780 --> 00:01:45,530
We will import a decorator called N.G. module from the at angular core package.

24
00:01:48,090 --> 00:01:52,950
The energy module decorator is a function for adding metadata to a class.

25
00:01:53,290 --> 00:01:58,440
It'll add the necessary information for Angular to understand we're creating a module.

26
00:01:58,770 --> 00:02:02,250
Let's apply this decorator to the app module class.

27
00:02:04,890 --> 00:02:09,810
The decorator must be called as a function, which is why we include the parentheses.

28
00:02:10,139 --> 00:02:13,350
We can pass in some values to configure the module.

29
00:02:13,620 --> 00:02:15,060
We'll get to that in a moment.

30
00:02:15,300 --> 00:02:18,180
For now, let's check out the app in the browser.

31
00:02:20,900 --> 00:02:25,820
The page will be blank, which indicates the app is working, or so it seems.

32
00:02:26,150 --> 00:02:28,910
Let's open the council and the developer tools.

33
00:02:29,600 --> 00:02:33,770
You can open the developer tools by pressing F12 on your keyboard.

34
00:02:34,070 --> 00:02:39,530
Alternatively, you can right click anywhere on the page and select the Inspect option.

35
00:02:42,140 --> 00:02:48,980
The developer tools are a suite of tools for debugging Web applications under the console panel will

36
00:02:48,980 --> 00:02:52,100
be presented with errors or messages from our app.

37
00:02:52,430 --> 00:02:53,840
We're receiving an error.

38
00:02:54,110 --> 00:02:58,250
It's telling us we need to include a module called browser module.

39
00:02:58,790 --> 00:03:01,490
Angular is primarily used in the browser.

40
00:03:01,700 --> 00:03:04,010
However, that's not our only option.

41
00:03:04,340 --> 00:03:06,860
We can run angular on mobile devices.

42
00:03:07,100 --> 00:03:11,450
Alternatively, we can build standalone desktop apps with angular.

43
00:03:11,810 --> 00:03:15,140
It's entirely optional to run angular in the browser.

44
00:03:15,500 --> 00:03:21,980
By default, Angular doesn't assume the environment our application is running in if we need to run

45
00:03:21,980 --> 00:03:23,450
angular in the browser.

46
00:03:23,660 --> 00:03:26,990
We need to import a module called browser module.

47
00:03:27,380 --> 00:03:31,520
This module includes services for helping us work with the browser.

48
00:03:31,880 --> 00:03:33,800
Let's switch back to the editor.

49
00:03:36,510 --> 00:03:43,260
At the top of the app module file, we will import an object called Browser, a module from the Angular

50
00:03:43,260 --> 00:03:45,720
Flash platform browser package.

51
00:03:48,210 --> 00:03:49,710
We are importing a module.

52
00:03:49,980 --> 00:03:51,100
You heard that right.

53
00:03:51,390 --> 00:03:54,750
Modules are not necessarily isolated from one another.

54
00:03:54,900 --> 00:03:58,350
They're a way to group files at the same time.

55
00:03:58,560 --> 00:04:01,980
There will be times where will need code from other modules.

56
00:04:02,580 --> 00:04:07,980
It's entirely possible to import and angular a module into another angular module.

57
00:04:08,430 --> 00:04:10,770
Before we do, let me show you something.

58
00:04:11,190 --> 00:04:17,519
If you're using Visual Studio, you can hold down control or command and click on the browser module

59
00:04:17,519 --> 00:04:18,209
object.

60
00:04:18,600 --> 00:04:22,260
The editor will open the file for us if we scroll down.

61
00:04:22,260 --> 00:04:26,100
This file will come across dozens of import statements.

62
00:04:26,610 --> 00:04:33,960
If angular module system didn't exist, we'd be importing a dozen features to get browser support instead

63
00:04:33,960 --> 00:04:34,710
of doing that.

64
00:04:34,830 --> 00:04:37,500
We get everything wrapped up in a single file.

65
00:04:37,680 --> 00:04:38,910
Pretty cool, right?

66
00:04:39,180 --> 00:04:44,190
Angular inbuilt module system improves Java Scripts module system.

67
00:04:44,520 --> 00:04:49,050
There are other cool features that come with modules which will discuss later.

68
00:04:49,650 --> 00:04:54,760
The next step is to register the browser module back in the app module.

69
00:04:54,780 --> 00:04:59,070
We're going to post in an object to the engine modules decorator.

70
00:05:01,540 --> 00:05:05,620
We can configure the module by adding an option called imports.

71
00:05:05,890 --> 00:05:07,870
Its value will be an array.

72
00:05:10,480 --> 00:05:13,840
Inside this array, we can pass in a module.

73
00:05:14,080 --> 00:05:16,360
Let's pass in the browser module.

74
00:05:18,870 --> 00:05:22,540
Without doing anything else, angular will take care of the rest.

75
00:05:22,830 --> 00:05:27,450
Whatever is exported by this module will be imported into our module.

76
00:05:27,840 --> 00:05:32,940
Features exported by the browser module will be exposed to the app module.

77
00:05:33,240 --> 00:05:35,520
Let's refresh the page in the browser.

78
00:05:38,170 --> 00:05:42,650
The heirs have gone away, but new ones have arisen in the console.

79
00:05:42,670 --> 00:05:49,120
The heirs says the following the module was bootstrapped, but it does not declare bootstrap components,

80
00:05:49,120 --> 00:05:51,910
nor a method pleased to find one of these.

81
00:05:52,420 --> 00:05:56,530
We bootstrapped a module, but we haven't bootstrapped a component.

82
00:05:56,830 --> 00:05:59,440
Components are a core feature in Angular.

83
00:05:59,680 --> 00:06:03,880
In the next lecture, we will discuss the concept of components.