1 00:00:03,420 --> 00:00:09,220 Now that we have a good understanding of JavaScript frameworks, 2 00:00:09,220 --> 00:00:12,145 let's talk specifically about Angular, 3 00:00:12,145 --> 00:00:14,475 a brief history of Angular, 4 00:00:14,475 --> 00:00:16,140 where it came from, 5 00:00:16,140 --> 00:00:20,800 and some salient features of Angular before we go 6 00:00:20,800 --> 00:00:26,560 on to start our first hands-on exercise with Angular. 7 00:00:26,560 --> 00:00:29,950 Talking a little bit about the history of Angular, 8 00:00:29,950 --> 00:00:35,110 Angular evolved from its earlier incarnation as AngularJS. 9 00:00:35,110 --> 00:00:42,590 AngularS was designed primarily by Misko Hevery and was introduced around 2012, 10 00:00:42,590 --> 00:00:47,855 and quickly became a very popular data application framework. 11 00:00:47,855 --> 00:00:52,765 Angular that we are talking about in this course 12 00:00:52,765 --> 00:00:58,725 was a complete re-implementation of the Angular framework. 13 00:00:58,725 --> 00:01:05,980 So, Angular as you see now is a totally new animal with its own new characteristics, 14 00:01:05,980 --> 00:01:14,220 but does owe some of its concepts and features to the earlier version of Angular. 15 00:01:14,220 --> 00:01:18,919 So, you would see some common terminology between both AngularJS and Angular, 16 00:01:18,919 --> 00:01:23,110 and some of the common approaches to solving the problem between both of them. 17 00:01:23,110 --> 00:01:28,070 But the Angular syntax is significantly different from 18 00:01:28,070 --> 00:01:33,770 the AngularJS syntax if you were familiar with AngularJS. 19 00:01:33,770 --> 00:01:37,640 So, this requires you to completely retrain yourself 20 00:01:37,640 --> 00:01:43,015 into the Angular way of solving problems. 21 00:01:43,015 --> 00:01:50,720 Angular is a component-based approach for implementing web applications. 22 00:01:50,720 --> 00:01:56,315 So, component has become the front and center of Angular now. 23 00:01:56,315 --> 00:01:59,830 Although, the component-based approach has been back-ported to 24 00:01:59,830 --> 00:02:04,060 AngularJS also from AngularJS version 1.5. 25 00:02:04,060 --> 00:02:08,540 So, if you have been component-based approach with AngularJS, 26 00:02:08,540 --> 00:02:14,460 you will be in a somewhat familiar territory if you come into Angular. 27 00:02:14,460 --> 00:02:19,280 Angular has been designed from the beginning 28 00:02:19,280 --> 00:02:24,325 with mobile support so you can easily address mobile platforms, 29 00:02:24,325 --> 00:02:29,840 and also provides server-side rendering to speed up 30 00:02:29,840 --> 00:02:37,400 the rendering of your web application on the browsers. 31 00:02:37,400 --> 00:02:43,065 Also, Angular provides powerful templating engine and powerful templating support. 32 00:02:43,065 --> 00:02:48,260 We will see some of these in more detail as we go along in this course. 33 00:02:48,260 --> 00:02:50,765 To summarize, what exactly is Angular? 34 00:02:50,765 --> 00:02:56,250 Angular is a structural framework for designing dynamic web applications. 35 00:02:56,250 --> 00:03:00,405 The HTML based approach that we have seen, 36 00:03:00,405 --> 00:03:06,010 for example, with Bootstrap results in primarily static documents, of course, 37 00:03:06,010 --> 00:03:07,720 with jQuery and AJAX, 38 00:03:07,720 --> 00:03:15,430 you can do a little bit of dynamic behavior in your websites using Bootstrap earlier, 39 00:03:15,430 --> 00:03:17,870 but Angular fills in the gap to support 40 00:03:17,870 --> 00:03:23,595 fully dynamic applications, data-driven dynamic applications. 41 00:03:23,595 --> 00:03:26,110 This uses a declarative approach. 42 00:03:26,110 --> 00:03:31,000 We have talked about the declarative programming approach in the previous lecture, 43 00:03:31,000 --> 00:03:37,205 so that's what Angular adopts as its way of solving the problems. 44 00:03:37,205 --> 00:03:39,180 When you come into the Angular world, 45 00:03:39,180 --> 00:03:43,025 you'll pretty soon bombarded with a lot of Angular vocabulary. 46 00:03:43,025 --> 00:03:46,520 You'll hear people talking about One-way and Two-way data binding, 47 00:03:46,520 --> 00:03:52,460 and then components obviously and then you hear people talking about directives, 48 00:03:52,460 --> 00:03:59,005 then routing, templates, and modules, service, 49 00:03:59,005 --> 00:04:03,724 then you'll hear people talk about provider and testing, 50 00:04:03,724 --> 00:04:09,055 and many more, and pretty soon you'll be overwhelmed with the terminology. 51 00:04:09,055 --> 00:04:13,855 In this course, we will take a gentle approach towards this terminology. 52 00:04:13,855 --> 00:04:17,690 We won't bother ourselves too much with the terminology but 53 00:04:17,690 --> 00:04:23,135 instead understand how we actually make use of Angular. 54 00:04:23,135 --> 00:04:27,125 With a reasonable understanding of 55 00:04:27,125 --> 00:04:31,785 this terminology but how we make use of Angular to solve problems? 56 00:04:31,785 --> 00:04:37,685 These terms are wonderful to sprinkle in your conversation in cocktail parties. 57 00:04:37,685 --> 00:04:40,730 If you can even try this pickup lines, "Baby, 58 00:04:40,730 --> 00:04:42,960 would you like to see my components, 59 00:04:42,960 --> 00:04:46,750 or you bring the data and I'll be the provider." 60 00:04:46,750 --> 00:04:50,035 Now, depending on how well you can carry it off, 61 00:04:50,035 --> 00:04:53,310 you may be a big hit or you'll be hit. 62 00:04:53,310 --> 00:04:57,520 Sometimes, when you search up Angular on the web, 63 00:04:57,520 --> 00:05:00,850 you will see it being referred to as Angular Two, 64 00:05:00,850 --> 00:05:04,465 and you'll be wondering, is it Angular Two or is it Angular? 65 00:05:04,465 --> 00:05:07,115 Well, to make it more clear, 66 00:05:07,115 --> 00:05:10,790 in a recent blog post on Angular site, 67 00:05:10,790 --> 00:05:14,570 they made a clear distinction between why they are going to be calling 68 00:05:14,570 --> 00:05:19,940 this new framework as just Angular rather than Angular Two, 69 00:05:19,940 --> 00:05:22,055 or Angular Three, or Angular Four. 70 00:05:22,055 --> 00:05:25,140 Angular has erupted the semantic versioning 71 00:05:25,140 --> 00:05:30,710 for marking the various versions of Angular as the release. 72 00:05:30,710 --> 00:05:34,920 Semantic versioning which uses the syntax as major version, 73 00:05:34,920 --> 00:05:36,685 minor version, and patch. 74 00:05:36,685 --> 00:05:40,450 Patch meaning that these are primarily bug fixes, 75 00:05:40,450 --> 00:05:42,985 minor version meaning small enhancements, 76 00:05:42,985 --> 00:05:46,720 and a major version maybe introducing breaking changes. 77 00:05:46,720 --> 00:05:50,940 So, right now, we are at Angular Six version, 78 00:05:50,940 --> 00:05:59,530 and Angular Seven version coming in September or October 2018, 79 00:05:59,530 --> 00:06:01,670 and every six months thereafter, 80 00:06:01,670 --> 00:06:03,980 you will be seeing a major version being released. 81 00:06:03,980 --> 00:06:05,875 Now, from your perspective, 82 00:06:05,875 --> 00:06:07,535 once you get started, 83 00:06:07,535 --> 00:06:10,820 Angular developers have promised to maintain 84 00:06:10,820 --> 00:06:16,355 backward compatibility with the application of earlier syntax 85 00:06:16,355 --> 00:06:20,825 and a well-defined upgrade path 86 00:06:20,825 --> 00:06:25,545 for those who want to move on to the newer versions of Angular. 87 00:06:25,545 --> 00:06:28,300 So, don't be too concerned about it, 88 00:06:28,300 --> 00:06:33,335 what you're going to learn will keep you in good start for a long time to come. 89 00:06:33,335 --> 00:06:36,940 It's not going to be like from AngularJS to Angular, 90 00:06:36,940 --> 00:06:45,865 that kind of breaking change will not be seen in the future versions of Angular. 91 00:06:45,865 --> 00:06:51,890 Time to move on to our first terms on Angular exercise where we will install 92 00:06:51,890 --> 00:06:59,250 the angular-cli and then create our first Angular application using angular-cli.