1
00:00:01,340 --> 00:00:03,980
All right, now that we have default

2
00:00:03,980 --> 00:00:05,930
exports working and our application is

3
00:00:05,930 --> 00:00:08,770
back up and running, let's look at named

4
00:00:08,770 --> 00:00:10,690
imports, which means let's look at some of

5
00:00:10,690 --> 00:00:12,310
these other things that we're exporting

6
00:00:12,310 --> 00:00:14,980
for our modules and see how to get a hold

7
00:00:14,980 --> 00:00:19,720
of those as we pull them in. All right,

8
00:00:19,720 --> 00:00:22,300
while we prepare to put template back

9
00:00:22,300 --> 00:00:23,400
together, let's go over to our

10
00:00:23,400 --> 00:00:27,455
template.js. Let's actually not export

11
00:00:27,455 --> 00:00:29,720
that as default because I've got two

12
00:00:29,720 --> 00:00:31,840
things. I've got sessionTemplate and

13
00:00:31,840 --> 00:00:34,660
errorMessage, and I want to import maybe

14
00:00:34,660 --> 00:00:41,170
both of those things into my app.js. So

15
00:00:41,170 --> 00:00:43,740
when we do that, instead of saying import

16
00:00:43,740 --> 00:00:47,050
sessionTemplate, like import default, now

17
00:00:47,050 --> 00:00:51,320
we're going to import by name. And

18
00:00:51,320 --> 00:00:53,290
basically what that means is I've got to

19
00:00:53,290 --> 00:00:56,990
come over here in the same way we export,

20
00:00:56,990 --> 00:00:59,650
I just have to import it with the curly

21
00:00:59,650 --> 00:01:01,360
braces on either side. And then I could

22
00:01:01,360 --> 00:01:05,480
just say import sessionTemplate and import

23
00:01:05,480 --> 00:01:11,720
errorMessage from template. And now these

24
00:01:11,720 --> 00:01:14,530
have to be the same. Remember, getSessions

25
00:01:14,530 --> 00:01:17,200
didn't have to be the same name as what

26
00:01:17,200 --> 00:01:18,650
was coming out of sessionRepository

27
00:01:18,650 --> 00:01:21,440
because it's just exporting the default.

28
00:01:21,440 --> 00:01:23,630
But in this case, sessionTemplate and

29
00:01:23,630 --> 00:01:28,140
errorMessage have to be the same name as

30
00:01:28,140 --> 00:01:31,680
what's coming in. And so I may not want

31
00:01:31,680 --> 00:01:33,180
them to be the same name, and so I have

32
00:01:33,180 --> 00:01:35,440
the option to come in here and just say,

33
00:01:35,440 --> 00:01:41,350
you know, as template, I can totally do

34
00:01:41,350 --> 00:01:45,900
that, and then just change sessionTemplate

35
00:01:45,900 --> 00:01:48,080
down there to be template, that's totally

36
00:01:48,080 --> 00:01:51,400
viable and that totally works. Or I could

37
00:01:51,400 --> 00:01:53,530
just leave it like this, however I want to

38
00:01:53,530 --> 00:01:57,120
do it. And I'll save, and let's go back to

39
00:01:57,120 --> 00:01:59,650
our website, we'll refresh, and notice

40
00:01:59,650 --> 00:02:01,760
everything still works. So this is how you

41
00:02:01,760 --> 00:02:03,540
do named imports. You just import

42
00:02:03,540 --> 00:02:06,230
sessionTemplate and errorMessage. Now I'm

43
00:02:06,230 --> 00:02:08,830
importing everything from template, and it

44
00:02:08,830 --> 00:02:11,370
seems kind of silly if I have to to just

45
00:02:11,370 --> 00:02:13,730
kind of list everything out, so I don't

46
00:02:13,730 --> 00:02:17,720
actually have to do that. I can say import

47
00:02:17,720 --> 00:02:27,980
* as template from template.js, and what

48
00:02:27,980 --> 00:02:29,560
that's going to do is take everything

49
00:02:29,560 --> 00:02:32,520
that's exported from template.js and drop

50
00:02:32,520 --> 00:02:34,590
it into a namespace or an object called

51
00:02:34,590 --> 00:02:41,060
template. And then I can take that with a

52
00:02:41,060 --> 00:02:42,360
dot and say, hey,

53
00:02:42,360 --> 00:02:45,480
template.sessionTemplate, and now that's

54
00:02:45,480 --> 00:02:47,550
going to work. If I come back over to my

55
00:02:47,550 --> 00:02:52,210
website and refresh, you'll see everything

56
00:02:52,210 --> 00:02:56,250
still works. Excellent. So that's named

57
00:02:56,250 --> 00:03:00,220
imports. I can import star, I can import

58
00:03:00,220 --> 00:03:04,200
the individual things, but remember here I

59
00:03:04,200 --> 00:03:07,110
was re-exporting in sessionRepository, I

60
00:03:07,110 --> 00:03:10,310
was re-exporting sessionTemplate because I

61
00:03:10,310 --> 00:03:13,710
don't want to have to do both things. So

62
00:03:13,710 --> 00:03:15,860
if I save that after I got rid of the

63
00:03:15,860 --> 00:03:18,590
comment and I come back over here, I can

64
00:03:18,590 --> 00:03:22,780
actually just get rid of that and just

65
00:03:22,780 --> 00:03:26,010
say, hey, I'm importing getSessions and

66
00:03:26,010 --> 00:03:34,890
then I'm importing also sessionTemplate.

67
00:03:34,890 --> 00:03:40,930
And the rules for this type of import are

68
00:03:40,930 --> 00:03:42,610
the same. So basically what I'm doing here

69
00:03:42,610 --> 00:03:44,870
is I'm saying import getSessions, so

70
00:03:44,870 --> 00:03:47,370
important the default, and then in

71
00:03:47,370 --> 00:03:49,520
addition to the default, give me all the

72
00:03:49,520 --> 00:03:53,350
named stuff. So, sessionRepository has

73
00:03:53,350 --> 00:03:55,810
coming out of it sessionURL and

74
00:03:55,810 --> 00:03:58,660
sessionTemplate in addition to the default

75
00:03:58,660 --> 00:04:01,290
of getSessions. So here I've got import

76
00:04:01,290 --> 00:04:02,770
getSessions, the default, and then

77
00:04:02,770 --> 00:04:10,120
sessionTemplate and sessionURL coming back

78
00:04:10,120 --> 00:04:13,400
out. Now I can do the same thing I was

79
00:04:13,400 --> 00:04:18,775
doing before, * as sessionRepository,

80
00:04:18,775 --> 00:04:24,450
let's say

81
00:04:24,450 --> 00:04:28,050
sessionRepository.sessionTemplate, and now

82
00:04:28,050 --> 00:04:30,440
I've got my default, getSessions, and then

83
00:04:30,440 --> 00:04:33,060
everything else coming from

84
00:04:33,060 --> 00:04:37,665
sessionRepository. So, that's named

85
00:04:37,665 --> 00:04:39,570
imports, that's default imports, that's

86
00:04:39,570 --> 00:04:42,020
hybrid imports where you're importing kind

87
00:04:42,020 --> 00:04:43,840
of your default and your named and

88
00:04:43,840 --> 00:04:45,820
everything all together, and now what we

89
00:04:45,820 --> 00:04:51,470
have is a module called sessionRepository

90
00:04:51,470 --> 00:04:54,710
that deals with all of our session stuff.

91
00:04:54,710 --> 00:04:58,090
It provides the getSessions method, it

92
00:04:58,090 --> 00:04:59,580
provides the template that we're going to

93
00:04:59,580 --> 00:05:02,260
render for, it does all the work, and it's

94
00:05:02,260 --> 00:05:05,940
bundled and separated away from our

95
00:05:05,940 --> 00:05:09,492
index.html code and even our app.js code.

96
00:05:09,492 --> 00:05:11,280
App.js can't get to anything that isn't

97
00:05:11,280 --> 00:05:15,440
exposed to it from our sessionRepository.

98
00:05:15,440 --> 00:05:18,050
So one more time, let's pop over to our

99
00:05:18,050 --> 00:05:24,450
app, we'll refresh this, and notice now in

100
00:05:24,450 --> 00:05:27,540
our network, template.js is coming out of

101
00:05:27,540 --> 00:05:31,270
sessionRepository instead of app.js and

102
00:05:31,270 --> 00:05:33,770
sessionRepository is coming out of app.js,

103
00:05:33,770 --> 00:05:34,900
so see how those imports have moved

104
00:05:34,900 --> 00:05:37,120
around. And when we refresh, everything

105
00:05:37,120 --> 00:05:39,360
works, but now instead of having

106
00:05:39,360 --> 00:05:42,290
everything baked into our index.html where

107
00:05:42,290 --> 00:05:44,050
we have all this gross code sitting in

108
00:05:44,050 --> 00:05:46,980
here, now everything's nice and split up

109
00:05:46,980 --> 00:05:51,000
and easier to understand and reason about what's going on.

