1 00:00:07,000 --> 00:00:08,260 Welcome back. 2 00:00:08,290 --> 00:00:13,500 In this video, let's learn some of the syntax of Aegis. 3 00:00:13,780 --> 00:00:22,180 If you click on documentation and you scroll down, you can see these are the tags or the syntax you 4 00:00:22,180 --> 00:00:23,090 may need. 5 00:00:23,110 --> 00:00:28,480 And I'm going to show you at least four of these ones because they are commonly used. 6 00:00:28,540 --> 00:00:33,310 So back to a Visual Studio code and inside the views folder. 7 00:00:33,340 --> 00:00:38,470 Let's open the index edges and this is where we left. 8 00:00:38,560 --> 00:00:42,310 Let's have a road map of what we are going to do. 9 00:00:42,340 --> 00:00:46,510 The first one is we will learn how to inject. 10 00:00:47,360 --> 00:00:48,170 Data. 11 00:00:48,500 --> 00:00:51,620 And after that, let me copy it. 12 00:00:51,620 --> 00:00:56,270 And down here, the next task is how to write. 13 00:00:57,410 --> 00:01:00,320 JavaScript code inside edges. 14 00:01:00,380 --> 00:01:07,730 And the next task is how we can do what is called looping, looping through a data. 15 00:01:08,030 --> 00:01:13,850 And lastly, we will learn how to make conditions inside edges. 16 00:01:14,000 --> 00:01:21,980 So let's start with the first one, how we can inject data meaning a value, and we can do so by using 17 00:01:21,980 --> 00:01:28,640 the angle bracket, percentage sine, percentage sine and then angle bracket. 18 00:01:28,910 --> 00:01:36,590 And here we bring in equal to and inside we can add any JavaScript value. 19 00:01:36,590 --> 00:01:40,880 For the meantime, let's make use of 29. 20 00:01:40,880 --> 00:01:52,520 If I save eight and I refresh, you can see that I see 20, and inside this I can add 20 plus ten if 21 00:01:52,520 --> 00:01:53,510 I save it. 22 00:01:53,510 --> 00:01:55,130 Let's see the result. 23 00:01:55,160 --> 00:01:57,320 You see, I get 30. 24 00:01:57,800 --> 00:02:02,780 So you can see that it is able to evaluate this expression. 25 00:02:02,780 --> 00:02:12,590 So if I remove the edge tag here and remove this one as that and I refresh it, it's going to display 26 00:02:12,590 --> 00:02:15,500 it as you see, 20 plus one. 27 00:02:15,710 --> 00:02:18,290 So that's the beauty of edges. 28 00:02:18,290 --> 00:02:20,960 So let me bring it back as that. 29 00:02:20,960 --> 00:02:29,480 So to be able to add a value or a result, we need to bring your percentage sign equal to and then your 30 00:02:29,480 --> 00:02:30,980 value inside. 31 00:02:31,280 --> 00:02:34,280 You can see that we don't have syntax highlighting. 32 00:02:34,280 --> 00:02:37,970 So let's go ahead and install extension edges. 33 00:02:38,090 --> 00:02:45,350 So search for that and click on the edges, language support and then I have already installed. 34 00:02:45,350 --> 00:02:48,380 So I'll go ahead and enable that extension. 35 00:02:48,530 --> 00:02:53,270 Now with that, one can see that I have syntax highlighting that. 36 00:02:53,270 --> 00:03:01,550 So this is how we can inject what data and we can inject this one inside any HTML tag. 37 00:03:01,580 --> 00:03:04,190 So let's say that I want this one to be bigger. 38 00:03:04,280 --> 00:03:11,600 I can provide each one and next is I'll copy this one or let me cut it and place it inside my tag and 39 00:03:11,600 --> 00:03:12,560 let me save it. 40 00:03:12,590 --> 00:03:24,680 Now refresh it and I see 13 and I can also add a simple text, let's say the results is and then colon 41 00:03:24,920 --> 00:03:29,900 and then let's see, refresh it and indeed the result is 30. 42 00:03:30,170 --> 00:03:37,190 So as we move on, we are going to fetch a data from back end and then display it as that. 43 00:03:37,220 --> 00:03:39,500 This is a first syntax. 44 00:03:39,500 --> 00:03:46,960 So let me write down here the syntax goes like this and then equal to and then the value as that is 45 00:03:46,960 --> 00:03:52,550 the syntax for adding data or value inside the eggs template. 46 00:03:52,700 --> 00:03:56,180 And what about writing JavaScript inside? 47 00:03:56,180 --> 00:03:58,670 And pretty simple as you may think. 48 00:03:58,730 --> 00:04:04,790 So here we bring in the anchor bracket and then the percentage sign we see that with extension, it 49 00:04:04,790 --> 00:04:06,920 knows that I have to close it. 50 00:04:07,190 --> 00:04:13,310 And with this one, what goes inside there is I can write any JavaScript syntax here. 51 00:04:13,550 --> 00:04:16,790 So here let's go ahead and console.log. 52 00:04:17,060 --> 00:04:19,670 A simple text like. 53 00:04:20,600 --> 00:04:23,780 That and let's say that from. 54 00:04:24,560 --> 00:04:26,150 E g s. 55 00:04:26,150 --> 00:04:32,870 So if I save this one and I open the terminal of my server. 56 00:04:33,410 --> 00:04:36,890 So let's open the terminal and. 57 00:04:37,610 --> 00:04:38,900 Here we go. 58 00:04:39,050 --> 00:04:44,770 And let me refresh the page and you can see that I get an error. 59 00:04:44,780 --> 00:04:48,410 Could not find a matching closing tag for this. 60 00:04:48,410 --> 00:04:49,460 So let's have a look. 61 00:04:49,820 --> 00:04:51,680 What is it saying here? 62 00:04:51,830 --> 00:04:54,050 Let's check the code. 63 00:04:54,080 --> 00:04:54,610 Okay. 64 00:04:54,620 --> 00:04:55,300 Sorry. 65 00:04:55,550 --> 00:04:56,870 Because of this one. 66 00:04:56,870 --> 00:04:58,850 So let me remove that. 67 00:04:58,890 --> 00:04:59,260 Okay. 68 00:04:59,270 --> 00:05:06,560 Save it and let me restart the server, clear the console and let me restart my server. 69 00:05:06,590 --> 00:05:15,800 Now, let me refresh the page and check the terminal and from edges so I can write any syntax that is 70 00:05:15,800 --> 00:05:17,880 JavaScript inside this. 71 00:05:17,960 --> 00:05:23,690 So that is one thing we need to bear in mind how we can write JavaScript inside. 72 00:05:24,470 --> 00:05:26,660 So let me have some room here. 73 00:05:26,720 --> 00:05:30,530 And next step is how can we look through a data? 74 00:05:30,650 --> 00:05:33,080 So here we go. 75 00:05:33,320 --> 00:05:39,590 First is you are going to combine these two syntax to be able to look through a data. 76 00:05:39,740 --> 00:05:47,780 So for the mean, you don't have any data yet, but let's try to have a sample array of data and we 77 00:05:47,780 --> 00:05:51,560 are going to use for each to loop through that particular data. 78 00:05:51,710 --> 00:05:58,070 So let's give it a heading here and let's say loop looping as that. 79 00:05:58,070 --> 00:06:03,230 And let's give this one a heading of H two and says, Right. 80 00:06:04,220 --> 00:06:07,430 JavaScript and eggs. 81 00:06:07,790 --> 00:06:14,880 And then the next one here is going to be ah2 or so, h two. 82 00:06:14,900 --> 00:06:16,880 Let's say inject. 83 00:06:17,580 --> 00:06:20,070 Dynamic or inject data. 84 00:06:20,460 --> 00:06:21,090 All right. 85 00:06:21,360 --> 00:06:25,500 So in future, you be able to know what this once means. 86 00:06:25,500 --> 00:06:28,230 So let's work with the looping through. 87 00:06:28,530 --> 00:06:31,200 So how can you look through a data? 88 00:06:31,230 --> 00:06:37,860 Like I said, you are going to make use of the how we inject data and how we write JavaScript inside 89 00:06:37,860 --> 00:06:38,210 it. 90 00:06:38,220 --> 00:06:39,960 So here we go. 91 00:06:39,990 --> 00:06:46,110 We bring in the angle bracket and for this one we are going to write what JavaScript? 92 00:06:46,320 --> 00:06:51,210 So here, let's make this off array. 93 00:06:51,210 --> 00:06:54,240 So let's provide some names of programming languages. 94 00:06:54,240 --> 00:07:03,300 Let's say CSS even though CSS is not, but let's add it JavaScript and let's provide Python. 95 00:07:05,820 --> 00:07:09,420 And let's provide Java. 96 00:07:10,050 --> 00:07:10,520 All right. 97 00:07:10,530 --> 00:07:19,260 This is a valid syntax when it comes to edges, because we have the opening angle and closing like angle 98 00:07:19,260 --> 00:07:19,890 here. 99 00:07:19,920 --> 00:07:25,460 So with this one, I can use for each on the array as that. 100 00:07:25,470 --> 00:07:27,140 So here we go. 101 00:07:27,150 --> 00:07:30,350 And for each we pass in a callback function. 102 00:07:30,360 --> 00:07:37,620 Let me use a real function here and I have access to the individual item inside the callback. 103 00:07:37,650 --> 00:07:43,560 So now if I save it and I refresh the page, you can see that there is no error. 104 00:07:43,590 --> 00:07:47,180 If I check my console too, there is no error. 105 00:07:47,190 --> 00:07:50,610 If I check my terminal two here, there is no error. 106 00:07:50,640 --> 00:07:55,230 So it means that we have retained a valid syntax. 107 00:07:55,230 --> 00:07:59,340 But how can we display it now inside the callback here? 108 00:07:59,370 --> 00:08:03,480 When I hit enter it will see that with this one. 109 00:08:03,510 --> 00:08:08,180 If I make use of any HTML tag inside here, let me show you one thing. 110 00:08:08,190 --> 00:08:18,540 So inside here, let's say we want to display p tag which let's say I am here, I want to show you something 111 00:08:18,540 --> 00:08:19,820 which is really important. 112 00:08:19,830 --> 00:08:26,400 So when I save this one and I refresh the page, you can see that I get beautiful error. 113 00:08:26,430 --> 00:08:32,039 What I mean, we have what is called syntax error and unexpected token. 114 00:08:32,039 --> 00:08:33,929 That is my angle bracket. 115 00:08:33,929 --> 00:08:36,240 So what is going on over here? 116 00:08:36,840 --> 00:08:45,180 They take note here is that always make sure that at the beginning and the ending of your JavaScript, 117 00:08:45,180 --> 00:08:50,490 you need to close it with the dollar sign and then the angle bracket. 118 00:08:50,640 --> 00:09:00,930 So this one is a valid yes, but if I remove this one, it's not because is it injecting or adding value 119 00:09:00,930 --> 00:09:04,170 or we are trying to write JavaScript inside edges. 120 00:09:04,350 --> 00:09:11,940 That's why we need to bring the percentage sign and then the angle bracket for this one. 121 00:09:11,940 --> 00:09:14,460 Let's leave it for now and let's work on this one. 122 00:09:14,460 --> 00:09:17,820 So with this one being place, let's try to save it. 123 00:09:17,820 --> 00:09:20,190 And now let's refresh the page. 124 00:09:20,190 --> 00:09:23,870 So I see syntax, syntax error. 125 00:09:23,880 --> 00:09:30,600 So it means that this is what you guess because I have the closing here by the beginning there is no 126 00:09:30,600 --> 00:09:38,070 edges, so I need to bring the angular bracket and then my percentage sign with this one when I save 127 00:09:38,070 --> 00:09:38,460 it. 128 00:09:38,490 --> 00:09:43,830 Now again, let's try to refresh it and I have the items. 129 00:09:43,830 --> 00:09:49,260 I have one, two, three, four, because I have four items in my array. 130 00:09:49,380 --> 00:09:56,070 So now instead of just displaying this one, I can go ahead and then display the items and how are you 131 00:09:56,070 --> 00:09:56,880 going to do it? 132 00:09:57,060 --> 00:10:05,550 We are going to make use of the edges syntax opening and go my percentage sign and then equal to and 133 00:10:05,550 --> 00:10:13,110 the name of the item which is item here inside my callback and then my percentage sign and my angular 134 00:10:13,110 --> 00:10:13,680 bracket. 135 00:10:13,710 --> 00:10:20,280 Now I save it and now let's refresh it and I have the values down here. 136 00:10:20,670 --> 00:10:27,360 So in the next video we are going to send a data from the back end and receive it here. 137 00:10:27,360 --> 00:10:32,460 But for the meantime, let's play around with it, how we can display those data. 138 00:10:32,490 --> 00:10:39,150 Now we are done with how we can loop through what about making conditions because we are going to make 139 00:10:39,150 --> 00:10:40,470 this one a lot. 140 00:10:40,500 --> 00:10:43,440 So here we go, conditions. 141 00:10:44,830 --> 00:10:45,870 All right. 142 00:10:45,880 --> 00:10:49,270 So how can we make conditions here for the meantime? 143 00:10:49,270 --> 00:10:50,990 Let's just try to mimic it. 144 00:10:51,010 --> 00:10:51,430 All right. 145 00:10:51,430 --> 00:10:57,610 So here we are going to make use of if statement is going to be the same thing task for this one. 146 00:10:57,730 --> 00:11:03,850 So here to make use of if statements or to write JavaScript differently, we need the opinion and then 147 00:11:03,850 --> 00:11:07,360 the closing angle bracket as that's perfect. 148 00:11:07,360 --> 00:11:10,840 So inside here I can write any JavaScript syntax. 149 00:11:10,840 --> 00:11:13,090 So let's say that if. 150 00:11:13,830 --> 00:11:17,800 Ten is less than 20. 151 00:11:17,820 --> 00:11:20,430 Then we won't display some message. 152 00:11:20,430 --> 00:11:25,470 So here I'll bring my carry braces when I hit Enter. 153 00:11:25,500 --> 00:11:32,570 Now, you may be thinking that, well, we need to close it here or bring the closing edge stack. 154 00:11:32,580 --> 00:11:33,450 And you are right. 155 00:11:33,450 --> 00:11:37,080 So I'll bring in my percentage side and my angle bracket. 156 00:11:37,230 --> 00:11:38,660 What about this place? 157 00:11:38,670 --> 00:11:39,240 The same. 158 00:11:39,240 --> 00:11:43,300 Also our bring mine percentage sign. 159 00:11:43,320 --> 00:11:47,210 Sorry, bring my angle and then my percentage sign. 160 00:11:47,220 --> 00:11:47,900 Perfect. 161 00:11:47,910 --> 00:11:51,930 So now whatever I write here is valid e.g. syntax. 162 00:11:51,930 --> 00:11:57,390 So here let me put a taste inside p tag and say is that as simple as that? 163 00:11:57,390 --> 00:12:04,140 When I save this one now when I refresh it, indeed I have the result being printed. 164 00:12:04,140 --> 00:12:07,110 Yes it is because ten is less than 20. 165 00:12:07,230 --> 00:12:11,340 So what about if I make use of 30 is less than 20? 166 00:12:11,430 --> 00:12:15,360 Let's save it and let's check and see that there is no result. 167 00:12:15,360 --> 00:12:17,880 So we need to also check for else statements. 168 00:12:17,880 --> 00:12:19,080 So how can we do it? 169 00:12:19,080 --> 00:12:22,020 Always remember a start from here. 170 00:12:22,050 --> 00:12:26,010 The basis is here and this is my if statement. 171 00:12:26,010 --> 00:12:32,940 So here I can write errors here because I'm still inside eggs, right? 172 00:12:32,940 --> 00:12:35,040 So I can write errors. 173 00:12:36,570 --> 00:12:39,360 And next is my carry braces. 174 00:12:39,360 --> 00:12:46,050 So I hit enter and we're thinking, well, we need to bring the eggs syntax also here. 175 00:12:46,050 --> 00:12:53,520 So here I'll bring my percentage sign and my Anglo bracket likewise displays. 176 00:12:53,520 --> 00:12:58,230 I also bring my angle bracket and then percent sign. 177 00:12:58,230 --> 00:13:01,800 So here I'll copy this text and let's say is that. 178 00:13:02,690 --> 00:13:05,120 No, it is not. 179 00:13:05,990 --> 00:13:07,730 All right, so save it. 180 00:13:07,730 --> 00:13:09,680 And now I'm back to the template. 181 00:13:09,830 --> 00:13:12,300 Refresh it, and indeed I see. 182 00:13:12,320 --> 00:13:13,790 No, it is not. 183 00:13:13,970 --> 00:13:21,590 So this is what we are going to make use of a lot because we are going to receive those data from back 184 00:13:21,590 --> 00:13:25,730 end and then display it inside the template, the next video. 185 00:13:25,760 --> 00:13:32,060 Let's go ahead and then render or create more pages and render them as necessary.