title
Learn Angular - Full Tutorial Course

description
Learn about Angular 6 (and above) in this complete course. You will learn how to create small/medium/large applications with Angular 6 in this web development tutorial. After completing the course, you should try to build something with Angular 6 to further solidify your learning. Here's a project which covers all the aspects covered in the video to push you to learn even more: http://bit.ly/angular6-project For more great tutorials from the creator of this course, check out https://codedamn.com. You can view the original Angular 6 playlist here: https://www.youtube.com/playlist?list=PLYxzS__5yYQlqCmHqDyW3yo5V79C7eaTe ⭐️ Course Contents ⭐️ ⌨️ (0:00:00) 1: Introduction ⌨️ (0:01:24) 2: Setting up project using Angular CLI ⌨️ (0:06:24) 3: Angular Architecture ⌨️ (0:15:55) 4: Decorators ⌨️ (0:32:44) 5: Lifecycle Hooks ⌨️ (0:41:07) 6: Components ⌨️ (0:46:36) 7: Interpolation and Expressions ⌨️ (0:52:30) 8: One way data binding ⌨️ (1:00:59) 9: Two way data binding ⌨️ (1:11:20) 10: Looping with *ngFor ⌨️ (1:19:50) 11: Services ⌨️ (1:21:52) 12: HTTP Requests ⌨️ (1:40:43) 13: Configure Proxy for API calls ⌨️ (1:46:39) 14: Routing ⌨️ (1:55:54) 15: Login App - Part 1 ⌨️ (2:04:21) 16: Login App Part 2 ⌨️ (2:14:58) 17: Routing Protection (Login App Part 3) ⌨️ (2:28:46) 18: Setting up backend (Login App Part 4) ⌨️ (2:41:12) 19: Persistent Login Session (Login App Part 5) ⌨️ (2:56:45) 20: Adding Logout feature and UI (Login App Part 6) ⌨️ (3:05:05) 21: MongoDB + Angular + Node Registration ⌨️ (3:16:32) 22: NodeJS Setup (Registration Part 2) ⌨️ (3:22:43) 23: MongoDB Setup (Registration Part 3) ⌨️ (3:41:36) 24: Linking MongoDB with Angular (Registration Part 4) ⌨️ (3:50:02) 25: Sessions ⌨️ (4:13:04) 26: Editing and storing data in MongoDB through Angular ⌨️ (4:20:16) 27: Pipes ⌨️ (4:32:14) 28: Custom Pipes ⌨️ (4:39:23) 29: Directives ⌨️ (4:53:28) 30: Custom Directives ⌨️ (5:01:06) 31: Redux - Introduction ⌨️ (5:06:55) 32: Redux - Getting Started ⌨️ (5:19:43) 33: Creating a Reducer ⌨️ (5:26:52) 34: Registering a reducer ⌨️ (5:32:11) 35: Getting Data from Redux Store ⌨️ (5:37:06) Project

detail
{'title': 'Learn Angular - Full Tutorial Course', 'heatmap': [{'end': 1218.762, 'start': 804.17, 'weight': 0.794}, {'end': 3246.235, 'start': 3038.186, 'weight': 0.715}, {'end': 4868.011, 'start': 4660.487, 'weight': 0.773}, {'end': 6085.279, 'start': 5876.116, 'weight': 0.802}], 'summary': 'The tutorial course covers setting up angular 6, javascript decorators, components, content projection, angular fundamentals like data binding and services, http requests, routing, backend implementation, user authentication, node.js integration, user data storage, custom pipes, directives, and redux integration, with practical examples and emphasis on angular 5 onwards and rxjs usage.', 'chapters': [{'end': 758.141, 'segs': [{'end': 57.584, 'src': 'embed', 'start': 27.189, 'weight': 0, 'content': [{'end': 30.813, 'text': "because that's what this series is all about now.", 'start': 27.189, 'duration': 3.624}, {'end': 38.024, 'text': 'angular has done a very major change while shifting from angular js to angular 2.', 'start': 30.813, 'duration': 7.211}, {'end': 48.938, 'text': 'but from angular 2 to 4 or 5 there has been some quite changes, but not really those many that you have to learn everything from scratch.', 'start': 38.024, 'duration': 10.914}, {'end': 57.584, 'text': "but if you haven't worked anywhere before with angular 2 or 4 or 5, don't worry,", 'start': 48.938, 'duration': 8.646}], 'summary': 'Angular series covers major changes from angularjs to angular 5.', 'duration': 30.395, 'max_score': 27.189, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ27189.jpg'}, {'end': 138.979, 'src': 'embed', 'start': 82.542, 'weight': 1, 'content': [{'end': 98.871, 'text': "that's pretty much it and in this tutorial what we're gonna do is we're gonna set up angular cli and our angular project so that we can actually start working with angular 6 and create some awesome applications with it.", 'start': 82.542, 'duration': 16.329}, {'end': 112.437, 'text': 'okay. with that being said, what i want from you is to have something known as node and npm installed on your machine, and if it is not installed,', 'start': 98.871, 'duration': 13.566}, {'end': 121.144, 'text': 'then what I want is let me just make the text here a little bit bigger.', 'start': 112.437, 'duration': 8.707}, {'end': 133.153, 'text': 'what I want is you to follow the link in the description which shows you exactly how you need to set up node and npm on your machine,', 'start': 121.144, 'duration': 12.009}, {'end': 138.979, 'text': "whether it's linux, mac or windows, and once that is done, what you can do is run npm.", 'start': 133.153, 'duration': 5.826}], 'summary': 'Setting up angular cli and project for working with angular 6, requiring node and npm installation.', 'duration': 56.437, 'max_score': 82.542, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ82542.jpg'}, {'end': 195.666, 'src': 'embed', 'start': 163.515, 'weight': 2, 'content': [{'end': 165.555, 'text': 'now, how do you how to do that?', 'start': 163.515, 'duration': 2.04}, {'end': 175.994, 'text': 'go ahead and write npm init y, rather, you can just skip that as well, if you want to anyways, because we are going to install it globally.', 'start': 165.555, 'duration': 10.439}, {'end': 186.7, 'text': 'so what I want you to do is npm, install G and then, at the rate, angular slash CLI at the rate latest.', 'start': 175.994, 'duration': 10.706}, {'end': 191.043, 'text': 'once you do that, hit, enter and install angular CLI for you.', 'start': 186.7, 'duration': 4.343}, {'end': 195.666, 'text': "I have already done that, so I'm not gonna repeat this step.", 'start': 191.043, 'duration': 4.623}], 'summary': "Install angular cli globally using 'npm install -g @angular/cli@latest'.", 'duration': 32.151, 'max_score': 163.515, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ163515.jpg'}, {'end': 253.551, 'src': 'embed', 'start': 216.748, 'weight': 3, 'content': [{'end': 224.91, 'text': "now, I'm using a beta version of angular CLI, but you would see a stable release, just the version number here.", 'start': 216.748, 'duration': 8.162}, {'end': 228.551, 'text': 'So Okay, just a sec.', 'start': 225.73, 'duration': 2.821}, {'end': 231.192, 'text': 'So you just see a version number here.', 'start': 229.251, 'duration': 1.941}, {'end': 233.473, 'text': 'That should not matter Okay.', 'start': 231.552, 'duration': 1.921}, {'end': 243.957, 'text': "So, once that's done, What I want you to do is write ng and then new and the name of your project.", 'start': 233.993, 'duration': 9.964}, {'end': 246.681, 'text': 'in our case it would be intro right.', 'start': 243.957, 'duration': 2.724}, {'end': 253.551, 'text': "so let's say i write intro to angular as a project.", 'start': 246.681, 'duration': 6.87}], 'summary': "Using beta version of angular cli to create a new project named 'intro to angular'.", 'duration': 36.803, 'max_score': 216.748, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ216748.jpg'}, {'end': 433.954, 'src': 'embed', 'start': 348.1, 'weight': 5, 'content': [{'end': 357.006, 'text': 'once you do that, what it would do is it would start all the web servers webpack compression, local server.', 'start': 348.1, 'duration': 8.906}, {'end': 365.893, 'text': "you can see that it's bundling the modules and it also gave me a url which i can open on my system to access my angular app.", 'start': 357.006, 'duration': 8.887}, {'end': 373.525, 'text': 'Let us just process the information and you can see that webpack compiled successfully.', 'start': 366.72, 'duration': 6.805}, {'end': 383.671, 'text': 'I can go ahead and paste my URL here and you can see that inside this intro we get welcome to our app and an angular logo.', 'start': 373.545, 'duration': 10.126}, {'end': 402.241, 'text': "so in this tutorial what we're gonna do is take a look at the overview of what we have done about the file structure and a little bit concepts related to little things we're gonna see in those files.", 'start': 386.693, 'duration': 15.548}, {'end': 405.723, 'text': "we're gonna cover some of the things like file structure.", 'start': 402.241, 'duration': 3.482}, {'end': 415.808, 'text': 'then how angular actually um enters into your application, actually enters into your source code, how browser sees angular.', 'start': 405.723, 'duration': 10.085}, {'end': 419.109, 'text': "Then we'll see how Angular is bootstrapping.", 'start': 416.468, 'duration': 2.641}, {'end': 426.071, 'text': "Then we'll come to modules, something known as modules, which is the core foundation of Angular.", 'start': 420.449, 'duration': 5.622}, {'end': 427.692, 'text': 'Then decorators.', 'start': 426.712, 'duration': 0.98}, {'end': 433.954, 'text': "Now, mind you that we're not going to go a lot deep into these things right now because it may overwhelm you.", 'start': 427.872, 'duration': 6.082}], 'summary': 'Webpack successfully bundling modules for angular app, covering file structure, modules, and decorators.', 'duration': 85.854, 'max_score': 348.1, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ348100.jpg'}, {'end': 708.759, 'src': 'embed', 'start': 679.636, 'weight': 8, 'content': [{'end': 684.598, 'text': "now, bootstrapping pretty much just means you're kick-starting it, you're initializing it.", 'start': 679.636, 'duration': 4.962}, {'end': 694.505, 'text': 'so if the environment of production is true, which is the environment file and now this would run when your angular project is running in, say,', 'start': 684.598, 'duration': 9.907}, {'end': 700.872, 'text': "production mode, because then angular needs to perform certain optimizations because it's running in production.", 'start': 694.505, 'duration': 6.367}, {'end': 704.295, 'text': 'now performance matters, not code clarity right.', 'start': 700.872, 'duration': 3.423}, {'end': 708.759, 'text': "so if that's true, then we just do some performance boost.", 'start': 704.295, 'duration': 4.464}], 'summary': 'Bootstrapping initializes production mode for performance optimization.', 'duration': 29.123, 'max_score': 679.636, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ679636.jpg'}], 'start': 1.388, 'title': 'Angular 6 setup and app overview', 'summary': 'Covers setting up angular 6, including prerequisites, installing angular cli, creating a project, and verifying versions. it also provides an overview of bundling modules with webpack, angular file structure, modules, decorators, and bootstrapping, emphasizing the importance of javascript, html, and css knowledge for seamless transition from previous versions.', 'chapters': [{'end': 348.1, 'start': 1.388, 'title': 'Angular 6 web series', 'summary': 'Covers setting up angular 6 by discussing prerequisites, installing angular cli, creating a project, and verifying the angular and cli versions, emphasizing the importance of knowledge in javascript, html, and css, and highlighting the seamless transition from previous angular versions.', 'duration': 346.712, 'highlights': ['The series covers everything from Angular 2, 4, 5, and Angular 6, emphasizing that learning from scratch is unnecessary due to minimal changes between versions.', 'Emphasizing the importance of knowledge in JavaScript, HTML, and CSS for working with Angular 6.', 'Guidance on setting up Node and npm on the machine, with a reference link provided for installation instructions for Linux, Mac, or Windows.', 'Instructions for installing Angular CLI globally using npm, and verifying the Angular CLI version and node version.', "Demonstration of creating a new Angular project using 'ng new' command and verifying the Angular CLI and Angular versions in the project directory."]}, {'end': 758.141, 'start': 348.1, 'title': 'Angular app overview', 'summary': 'Covers the process of bundling modules with webpack, angular file structure, and the concepts of modules, decorators, and bootstrapping, providing an introduction to understanding angular fundamentals and best practices.', 'duration': 410.041, 'highlights': ['The chapter covers the process of bundling modules with Webpack', 'Introduction to Angular file structure and related concepts', 'Explanation of Angular modules and their significance', 'Insight into the bootstrapping process of Angular', 'Overview of decorators in Angular']}], 'duration': 756.753, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ1388.jpg', 'highlights': ['The series covers everything from Angular 2, 4, 5, and Angular 6, minimizing the need to learn from scratch.', 'Guidance on setting up Node and npm on the machine, with reference link for installation instructions.', 'Instructions for installing Angular CLI globally using npm and verifying the Angular CLI version.', "Demonstration of creating a new Angular project using 'ng new' command and verifying the Angular CLI and Angular versions.", 'Emphasizing the importance of knowledge in JavaScript, HTML, and CSS for working with Angular 6.', 'The chapter covers the process of bundling modules with Webpack.', 'Introduction to Angular file structure and related concepts.', 'Explanation of Angular modules and their significance.', 'Insight into the bootstrapping process of Angular.', 'Overview of decorators in Angular.']}, {'end': 2293.035, 'segs': [{'end': 841.999, 'src': 'embed', 'start': 811.215, 'weight': 0, 'content': [{'end': 814.877, 'text': "so what you're gonna do is you're gonna separate that into a component.", 'start': 811.215, 'duration': 3.662}, {'end': 818.844, 'text': 'now that component is reusable.', 'start': 815.822, 'duration': 3.022}, {'end': 823.007, 'text': 'so basically, the use of components is to make code reusable.', 'start': 818.844, 'duration': 4.163}, {'end': 828.31, 'text': 'so if you have a piece of code which is, um, you can repeat a view.', 'start': 823.007, 'duration': 5.303}, {'end': 834.454, 'text': 'a view which you can repeat a lot of places can be used as a component.', 'start': 828.31, 'duration': 6.144}, {'end': 841.999, 'text': "so right now we're just making use of this app component as the main component, and all the components goes into this declaration.", 'start': 834.454, 'duration': 7.545}], 'summary': 'Using components to make code reusable in the app.', 'duration': 30.784, 'max_score': 811.215, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ811215.jpg'}, {'end': 884.471, 'src': 'embed', 'start': 854.026, 'weight': 1, 'content': [{'end': 861.811, 'text': 'so this is the main thing and we have all our components, but we bootstrap our application From this app component.', 'start': 854.026, 'duration': 7.785}, {'end': 865.975, 'text': 'So if you understand the flow main.ts is the main file.', 'start': 862.512, 'duration': 3.463}, {'end': 872.18, 'text': 'We bootstrap our module, module bootstraps the component component,', 'start': 866.676, 'duration': 5.504}, {'end': 884.471, 'text': 'runs this HTML file through this template URL here and includes these styles listed here and acts on the selector,', 'start': 872.18, 'duration': 12.291}], 'summary': 'Bootstrap application from app component, main.ts is main file.', 'duration': 30.445, 'max_score': 854.026, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ854026.jpg'}, {'end': 954.82, 'src': 'embed', 'start': 930.207, 'weight': 2, 'content': [{'end': 940.813, 'text': 'which provides some additional information but does not change the raw information of that particular class or function or whatever you decorated with.', 'start': 930.207, 'duration': 10.606}, {'end': 948.597, 'text': 'right. so you can see right here component decorator, this com, this decorator is decorating this class right here.', 'start': 940.813, 'duration': 7.784}, {'end': 950.938, 'text': "it's not changing the class, it's decorating it.", 'start': 948.597, 'duration': 2.341}, {'end': 952.859, 'text': "we're gonna come to that later.", 'start': 950.938, 'duration': 1.921}, {'end': 954.82, 'text': "don't worry if you don't get it right now.", 'start': 952.859, 'duration': 1.961}], 'summary': 'Explanation of component decorator in class decoration.', 'duration': 24.613, 'max_score': 930.207, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ930207.jpg'}, {'end': 1068.213, 'src': 'embed', 'start': 1040.673, 'weight': 3, 'content': [{'end': 1044.574, 'text': "let's create a function which is just a log function.", 'start': 1040.673, 'duration': 3.901}, {'end': 1052.656, 'text': "now what a decorator receives is a target, which is the target function or class on which you're actually working, name,", 'start': 1044.574, 'duration': 8.082}, {'end': 1055.537, 'text': 'the name of that function or class and the descriptor.', 'start': 1052.656, 'duration': 2.881}, {'end': 1068.213, 'text': "okay. so uh, let's just first of all log all of these, so we can take a look at what all of these are right and how to make use of this decorator.", 'start': 1057.307, 'duration': 10.906}], 'summary': 'Create a function to log target, name, and descriptor using a decorator.', 'duration': 27.54, 'max_score': 1040.673, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ1040673.jpg'}, {'end': 1168.54, 'src': 'embed', 'start': 1132.252, 'weight': 11, 'content': [{'end': 1138.915, 'text': 'and And if you modify the descriptor dot value and return the descriptor from this decorator,', 'start': 1132.252, 'duration': 6.663}, {'end': 1144.097, 'text': 'what happens is that that becomes the function which is being called.', 'start': 1138.915, 'duration': 5.182}, {'end': 1152.881, 'text': 'So in most cases, what you want is store the original function in a variable.', 'start': 1144.677, 'duration': 8.204}, {'end': 1168.54, 'text': 'right, do some manipulations with descriptor dot value function, which is the function which will be finally executed, and then return the descriptor.', 'start': 1154.83, 'duration': 13.71}], 'summary': 'Modifying the descriptor dot value and returning the descriptor from the decorator results in the original function being called, requiring storing the original function in a variable and performing manipulations before returning the descriptor.', 'duration': 36.288, 'max_score': 1132.252, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ1132252.jpg'}, {'end': 1225.049, 'src': 'heatmap', 'start': 804.17, 'weight': 10, 'content': [{'end': 811.215, 'text': 'right, you need a header on every activity or every page of your mobile right.', 'start': 804.17, 'duration': 7.045}, {'end': 814.877, 'text': "so what you're gonna do is you're gonna separate that into a component.", 'start': 811.215, 'duration': 3.662}, {'end': 818.844, 'text': 'now that component is reusable.', 'start': 815.822, 'duration': 3.022}, {'end': 823.007, 'text': 'so basically, the use of components is to make code reusable.', 'start': 818.844, 'duration': 4.163}, {'end': 828.31, 'text': 'so if you have a piece of code which is, um, you can repeat a view.', 'start': 823.007, 'duration': 5.303}, {'end': 834.454, 'text': 'a view which you can repeat a lot of places can be used as a component.', 'start': 828.31, 'duration': 6.144}, {'end': 841.999, 'text': "so right now we're just making use of this app component as the main component, and all the components goes into this declaration.", 'start': 834.454, 'duration': 7.545}, {'end': 847.522, 'text': "so we're gonna talk about this decorator in very deep um later on the series.", 'start': 841.999, 'duration': 5.523}, {'end': 854.026, 'text': 'but right now, just remember, this ng module is the thing angular depends on.', 'start': 847.522, 'duration': 6.504}, {'end': 861.811, 'text': 'so this is the main thing and we have all our components, but we bootstrap our application From this app component.', 'start': 854.026, 'duration': 7.785}, {'end': 865.975, 'text': 'So if you understand the flow main.ts is the main file.', 'start': 862.512, 'duration': 3.463}, {'end': 872.18, 'text': 'We bootstrap our module, module bootstraps the component component,', 'start': 866.676, 'duration': 5.504}, {'end': 884.471, 'text': 'runs this HTML file through this template URL here and includes these styles listed here and acts on the selector,', 'start': 872.18, 'duration': 12.291}, {'end': 890.005, 'text': 'which is app root and which is exactly what we have in our index.html file here.', 'start': 884.471, 'duration': 5.534}, {'end': 894.107, 'text': 'right, so everything, i hope everything, makes sense till now.', 'start': 890.005, 'duration': 4.102}, {'end': 898.41, 'text': 'and the next thing what we have is that we have covered bootstrapping here.', 'start': 894.107, 'duration': 4.303}, {'end': 899.951, 'text': 'we have covered modules here.', 'start': 898.41, 'duration': 1.541}, {'end': 901.832, 'text': 'we have covered decorators.', 'start': 899.951, 'duration': 1.881}, {'end': 904.314, 'text': 'not really, but decorators.', 'start': 901.832, 'duration': 2.482}, {'end': 917.681, 'text': 'what they are is actually they just provide a deep note information to um, the class or um, that is kind of a very vague definition.', 'start': 904.314, 'duration': 13.367}, {'end': 923.604, 'text': "we're gonna come to um, what decorators exactly are in es7 later on.", 'start': 917.681, 'duration': 5.923}, {'end': 930.207, 'text': 'but for now you can just assume decorators to be something which decorate your class,', 'start': 923.604, 'duration': 6.603}, {'end': 940.813, 'text': 'which provides some additional information but does not change the raw information of that particular class or function or whatever you decorated with.', 'start': 930.207, 'duration': 10.606}, {'end': 948.597, 'text': 'right. so you can see right here component decorator, this com, this decorator is decorating this class right here.', 'start': 940.813, 'duration': 7.784}, {'end': 950.938, 'text': "it's not changing the class, it's decorating it.", 'start': 948.597, 'duration': 2.341}, {'end': 952.859, 'text': "we're gonna come to that later.", 'start': 950.938, 'duration': 1.921}, {'end': 954.82, 'text': "don't worry if you don't get it right now.", 'start': 952.859, 'duration': 1.961}, {'end': 963.283, 'text': "this tutorial, what we're going to cover, is about decorators.", 'start': 959.421, 'duration': 3.862}, {'end': 965.583, 'text': 'and what exactly is a decorator?', 'start': 963.283, 'duration': 2.3}, {'end': 969.225, 'text': 'how a decorator is pretty much just a function,', 'start': 965.583, 'duration': 3.642}, {'end': 980.909, 'text': 'wrapping another function or a class and then doing some sort of manipulations with it and returning the original function, but after decorating it,', 'start': 969.225, 'duration': 11.684}, {'end': 993.339, 'text': "okay. so, um, next thing we're gonna take a look at is how decorators make your code easy to read and maintain, which is obvious thing.", 'start': 980.909, 'duration': 12.43}, {'end': 995.34, 'text': "that's why it's called a decorator, right.", 'start': 993.339, 'duration': 2.001}, {'end': 1004.508, 'text': 'so here we have our app.component.ts, and you can see that component right here is a decorator provided by angular.', 'start': 995.34, 'duration': 9.168}, {'end': 1013.215, 'text': "so we're not gonna mess with this component decorator, but we're gonna create our own decorator.", 'start': 1004.508, 'duration': 8.707}, {'end': 1018.531, 'text': 'now, For decorators to work, you need to set up in your JavaScript projects.', 'start': 1013.215, 'duration': 5.316}, {'end': 1021.913, 'text': 'you need to set up Babel separately.', 'start': 1018.531, 'duration': 3.382}, {'end': 1029.096, 'text': "But since we're making use of Angular, Angular already contains all the configuration for that inbuilt baked.", 'start': 1022.073, 'duration': 7.023}, {'end': 1035.74, 'text': 'So we do not need to worry about that decorators will be supported in our component files.', 'start': 1029.477, 'duration': 6.263}, {'end': 1040.673, 'text': "so let's create a very small decorator.", 'start': 1036.852, 'duration': 3.821}, {'end': 1044.574, 'text': "let's create a function which is just a log function.", 'start': 1040.673, 'duration': 3.901}, {'end': 1052.656, 'text': "now what a decorator receives is a target, which is the target function or class on which you're actually working, name,", 'start': 1044.574, 'duration': 8.082}, {'end': 1055.537, 'text': 'the name of that function or class and the descriptor.', 'start': 1052.656, 'duration': 2.881}, {'end': 1068.213, 'text': "okay. so uh, let's just first of all log all of these, so we can take a look at what all of these are right and how to make use of this decorator.", 'start': 1057.307, 'duration': 10.906}, {'end': 1077.038, 'text': "well, just go ahead and write at the rate log, just like this component is written, and in the next line we'll write our function.", 'start': 1068.213, 'duration': 8.825}, {'end': 1082.081, 'text': "so let's just say this is a simple method.", 'start': 1077.038, 'duration': 5.043}, {'end': 1085.023, 'text': 'we just console logs.', 'start': 1082.081, 'duration': 2.942}, {'end': 1089.606, 'text': 'uh, hey there, simple as that, right.', 'start': 1085.023, 'duration': 4.583}, {'end': 1103.701, 'text': 'and now, if we take a look in the browser, you can see that we get this as the target name, this as the name and this as the function.', 'start': 1089.606, 'duration': 14.095}, {'end': 1108.006, 'text': 'okay, so with that being done, what we can do?', 'start': 1103.701, 'duration': 4.305}, {'end': 1113.624, 'text': 'that now we can start manipulating this log method.', 'start': 1108.802, 'duration': 4.822}, {'end': 1120.627, 'text': 'so the simplest way to do that is to actually override the function which is being called.', 'start': 1113.624, 'duration': 7.003}, {'end': 1132.252, 'text': 'you can see that the descriptor if we take a look the at the subject, the descriptor dot value, is actually the original function.', 'start': 1120.627, 'duration': 11.625}, {'end': 1138.915, 'text': 'and And if you modify the descriptor dot value and return the descriptor from this decorator,', 'start': 1132.252, 'duration': 6.663}, {'end': 1144.097, 'text': 'what happens is that that becomes the function which is being called.', 'start': 1138.915, 'duration': 5.182}, {'end': 1152.881, 'text': 'So in most cases, what you want is store the original function in a variable.', 'start': 1144.677, 'duration': 8.204}, {'end': 1168.54, 'text': 'right, do some manipulations with descriptor dot value function, which is the function which will be finally executed, and then return the descriptor.', 'start': 1154.83, 'duration': 13.71}, {'end': 1170.941, 'text': 'this would be our flow right.', 'start': 1168.54, 'duration': 2.401}, {'end': 1172.142, 'text': "so what we're going to do?", 'start': 1170.941, 'duration': 1.201}, {'end': 1177.166, 'text': "first of all, let's say this is our original function, which is descriptor dot value.", 'start': 1172.142, 'duration': 5.024}, {'end': 1180.406, 'text': 'So this original contains our original function.', 'start': 1178.042, 'duration': 2.364}, {'end': 1184.171, 'text': 'And what I want to do is do some manipulations with descriptor.value.', 'start': 1180.947, 'duration': 3.224}, {'end': 1187.296, 'text': "So I'm going to create this as a new function.", 'start': 1185.032, 'duration': 2.264}, {'end': 1188.437, 'text': "And what I'm going to say.", 'start': 1187.576, 'duration': 0.861}, {'end': 1201.509, 'text': 'this function function f, u, n, c, t, i, o n was hacked, something like this, and ignore the typos.', 'start': 1188.437, 'duration': 13.072}, {'end': 1210.856, 'text': 'and what we have in here is that now this function is overridden, overwritten with this console log statement,', 'start': 1201.509, 'duration': 9.347}, {'end': 1215.119, 'text': 'and what we can do is just return this descriptor now.', 'start': 1210.856, 'duration': 4.263}, {'end': 1218.762, 'text': 'So what happens now when we call this method??', 'start': 1216.48, 'duration': 2.282}, {'end': 1225.049, 'text': "Well, let's see, If I call this dot a simple method here inside my constructor.", 'start': 1219.223, 'duration': 5.826}], 'summary': 'Use components for code reusability, ng module is main, decorators provide additional info.', 'duration': 36.612, 'max_score': 804.17, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ804170.jpg'}, {'end': 1336.463, 'src': 'embed', 'start': 1285.021, 'weight': 5, 'content': [{'end': 1290.263, 'text': 'well, um, if we move back to our powerpoint, actually.', 'start': 1285.021, 'duration': 5.242}, {'end': 1292.044, 'text': 'so we saw that.', 'start': 1290.263, 'duration': 1.781}, {'end': 1293.625, 'text': 'what exactly is a decorator?', 'start': 1292.044, 'duration': 1.581}, {'end': 1303.629, 'text': 'it just helps you to wrap some code, a function or a class inside another function which does some useful stuff and returns the original one.', 'start': 1293.625, 'duration': 10.004}, {'end': 1305.19, 'text': "we're going to take a look at an example soon.", 'start': 1303.629, 'duration': 1.561}, {'end': 1310.852, 'text': 'Now, how it just wraps the code and makes code easier to read and maintain.', 'start': 1306.089, 'duration': 4.763}, {'end': 1317.937, 'text': 'You can see that if you create a particular log function here, which logs all the arguments and the result of this function,', 'start': 1310.872, 'duration': 7.065}, {'end': 1321.759, 'text': 'then you can pretty much just use this decorator anywhere.', 'start': 1317.937, 'duration': 3.822}, {'end': 1323.56, 'text': "So let's just quickly create this function.", 'start': 1321.819, 'duration': 1.741}, {'end': 1325.422, 'text': 'Sounds like a good idea.', 'start': 1324.481, 'duration': 0.941}, {'end': 1334.502, 'text': 'So if I do something like descriptor.value is a function with arguments passed.', 'start': 1325.782, 'duration': 8.72}, {'end': 1336.463, 'text': "i don't know what arguments were passed.", 'start': 1334.502, 'duration': 1.961}], 'summary': 'A decorator helps wrap code, making it easier to read and maintain. it can be used to create a log function for logging arguments and results.', 'duration': 51.442, 'max_score': 1285.021, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ1285021.jpg'}, {'end': 1976.857, 'src': 'embed', 'start': 1951.367, 'weight': 9, 'content': [{'end': 1956.729, 'text': 'you do not have to explicitly write everything every time in every component.', 'start': 1951.367, 'duration': 5.362}, {'end': 1965.13, 'text': 'so that is essentially how decorators who work with JavaScript mainly and with angular as well.', 'start': 1956.729, 'duration': 8.401}, {'end': 1976.857, 'text': "in our case and in this tutorial we're gonna take a look at how to actually work with lifecycle hooks and not really work with but just a brief overview.", 'start': 1965.13, 'duration': 11.727}], 'summary': 'Javascript decorators simplify code in angular by working with lifecycle hooks.', 'duration': 25.49, 'max_score': 1951.367, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ1951367.jpg'}, {'end': 2063.15, 'src': 'embed', 'start': 2029.533, 'weight': 6, 'content': [{'end': 2036.161, 'text': 'now you might use them and you might use them sometimes, right, not every time.', 'start': 2029.533, 'duration': 6.628}, {'end': 2040.663, 'text': 'so um, starting from the top, what we have is changes.', 'start': 2036.161, 'duration': 4.502}, {'end': 2045.385, 'text': "now this on changes is invoked every time there's a change.", 'start': 2040.663, 'duration': 4.722}, {'end': 2049.827, 'text': "let's say, you have some kind of input property in your component.", 'start': 2045.385, 'duration': 4.442}, {'end': 2052.648, 'text': 'so if you change that, this on changes will be fired.', 'start': 2049.827, 'duration': 2.821}, {'end': 2063.15, 'text': "so you can't handle those kind of changes there on a net would be fired whenever your component is initialized right.", 'start': 2052.648, 'duration': 10.502}], 'summary': "The 'on changes' is invoked on every change in the input property of the component, and also when the component is initialized.", 'duration': 33.617, 'max_score': 2029.533, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ2029533.jpg'}, {'end': 2131.6, 'src': 'embed', 'start': 2073.52, 'weight': 4, 'content': [{'end': 2081.507, 'text': "so this is an ideal place for, let's say, if you're retrieving some data with some rest api for a component, for a given component,", 'start': 2073.52, 'duration': 7.987}, {'end': 2087.913, 'text': 'then oninit is the place where you would want to perform an http request.', 'start': 2081.507, 'duration': 6.406}, {'end': 2094.628, 'text': 'okay, So the next event, the next lifecycle hook we have, is the do check one.', 'start': 2087.913, 'duration': 6.715}, {'end': 2096.768, 'text': 'And the do check.', 'start': 2095.609, 'duration': 1.159}, {'end': 2106.998, 'text': 'one is actually fired by Angular when actually Angular thinks that there is a change right?', 'start': 2096.768, 'duration': 10.23}, {'end': 2117.186, 'text': 'So what we have with Angular is that Angular itself has some sort of detector which actually detects the changes.', 'start': 2107.038, 'duration': 10.148}, {'end': 2118.635, 'text': 'behind the scenes.', 'start': 2117.955, 'duration': 0.68}, {'end': 2121.016, 'text': "right, because that's how the things work.", 'start': 2118.635, 'duration': 2.381}, {'end': 2126.578, 'text': 'so do check would be fired by angular if angular suspects something has changed.', 'start': 2121.016, 'duration': 5.562}, {'end': 2131.6, 'text': 'so you can add your own custom implementations in this to check.', 'start': 2126.578, 'duration': 5.022}], 'summary': 'Angular lifecycle hooks: ngoninit for http request, docheck for change detection.', 'duration': 58.08, 'max_score': 2073.52, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ2073520.jpg'}], 'start': 758.141, 'title': 'Angular and javascript decorators', 'summary': 'Covers the structure of an angular application, including components, modules, and decorators. it also explains how to create and manipulate a log function using decorators in javascript and demonstrates the usage of decorators to wrap code, functions, or classes. additionally, it provides a quick overview of angular lifecycle hooks, including onchanges, oninit, and docheck.', 'chapters': [{'end': 1040.673, 'start': 758.141, 'title': 'Angular application structure', 'summary': 'Covers the structure of an angular application, including components, modules, decorators, and the use of decorators to make code easy to read and maintain.', 'duration': 282.532, 'highlights': ['Components are used to make code reusable by separating it into a component, which is reusable across different parts of the application.', 'The ng module is the main dependency for Angular, and it includes all the components and bootstraps the application from the app component.', 'Decorators provide additional information to a class or function without changing the raw information, making the code easy to read and maintain.']}, {'end': 1285.021, 'start': 1040.673, 'title': 'Understanding decorators in javascript', 'summary': 'Explains how to create and manipulate a log function using decorators in javascript, illustrating the process of overriding the original function and the use case of this approach.', 'duration': 244.348, 'highlights': ['The chapter explains the process of creating a log function using decorators and demonstrates how to manipulate the original function by overriding it with a new function, showcasing the use of descriptors and the flow of execution.', 'It details the steps to override the function being called by modifying the descriptor value and returning the modified descriptor, emphasizing the importance of storing the original function in a variable and conducting manipulations with the descriptor value function.', "The transcript provides a practical example by showing how the overridden function affects the output, highlighting the behavior of the overwritten function and its impact on the original function's execution."]}, {'end': 1951.367, 'start': 1285.021, 'title': 'Understanding decorators in javascript', 'summary': 'Demonstrates how decorators are used to wrap code, functions, or classes to make them easier to read and maintain, and details the process of creating and applying a decorator, with examples of member decorators and class decorators in javascript.', 'duration': 666.346, 'highlights': ['Decorators help wrap code, functions, or classes to make them easier to read and maintain.', 'Examples of creating and applying a decorator are provided, including logging all the arguments and the result of a function.', 'Member decorators and class decorators in JavaScript are explained and demonstrated with examples.']}, {'end': 2293.035, 'start': 1951.367, 'title': 'Angular lifecycle hooks', 'summary': 'Provides a quick overview of angular lifecycle hooks, including onchanges, oninit, and docheck, emphasizing their significance in handling component initialization, data retrieval, and custom change detection.', 'duration': 341.668, 'highlights': ['The onInit lifecycle hook is called only once per component, making it an ideal place for performing initial data retrieval with an HTTP request.', "The onChanges lifecycle hook is invoked every time there's a change in an input property of a component.", 'The doCheck lifecycle hook can be used to add custom change detection implementations, triggered when Angular detects a change.']}], 'duration': 1534.894, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ758141.jpg', 'highlights': ['Components are used to make code reusable by separating it into a component, which is reusable across different parts of the application.', 'The ng module is the main dependency for Angular, and it includes all the components and bootstraps the application from the app component.', 'Decorators provide additional information to a class or function without changing the raw information, making the code easy to read and maintain.', 'The chapter explains the process of creating a log function using decorators and demonstrates how to manipulate the original function by overriding it with a new function, showcasing the use of descriptors and the flow of execution.', 'The onInit lifecycle hook is called only once per component, making it an ideal place for performing initial data retrieval with an HTTP request.', 'Decorators help wrap code, functions, or classes to make them easier to read and maintain.', "The onChanges lifecycle hook is invoked every time there's a change in an input property of a component.", 'The doCheck lifecycle hook can be used to add custom change detection implementations, triggered when Angular detects a change.', 'Examples of creating and applying a decorator are provided, including logging all the arguments and the result of a function.', 'Member decorators and class decorators in JavaScript are explained and demonstrated with examples.', "The transcript provides a practical example by showing how the overridden function affects the output, highlighting the behavior of the overwritten function and its impact on the original function's execution.", 'It details the steps to override the function being called by modifying the descriptor value and returning the modified descriptor, emphasizing the importance of storing the original function in a variable and conducting manipulations with the descriptor value function.']}, {'end': 2967.05, 'segs': [{'end': 2320.356, 'src': 'embed', 'start': 2293.056, 'weight': 0, 'content': [{'end': 2302.482, 'text': 'I have to write a lot of code to make it specific to a particular option and it kind of pain in the butt to organize all that code.', 'start': 2293.056, 'duration': 9.426}, {'end': 2309.207, 'text': 'so what actually, coming to the point, what content projection pretty much is, is in one line,', 'start': 2302.482, 'duration': 6.725}, {'end': 2320.356, 'text': 'is that you can write my own component and then your children child components here and you can pretty much work with all of your child components just right here.', 'start': 2309.207, 'duration': 11.149}], 'summary': 'Content projection simplifies code organization by allowing custom components to work with child components.', 'duration': 27.3, 'max_score': 2293.056, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ2293056.jpg'}, {'end': 2376.978, 'src': 'embed', 'start': 2349.48, 'weight': 1, 'content': [{'end': 2353.522, 'text': 'so these four events are associated with this content property.', 'start': 2349.48, 'duration': 4.042}, {'end': 2363.246, 'text': 'so, in a nutshell, what we have in is that, for content projection, what we need we have is are these four life cycle hooks,', 'start': 2353.522, 'duration': 9.724}, {'end': 2366.267, 'text': "and after content in it would fire if there's a change.", 'start': 2363.246, 'duration': 3.021}, {'end': 2376.978, 'text': 'Okay, so what we have in here is that I have created this simple program which pretty much just adds a component and removes it.', 'start': 2367.512, 'duration': 9.466}], 'summary': 'Content projection program involves four life cycle hooks and component addition/removal.', 'duration': 27.498, 'max_score': 2349.48, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ2349480.jpg'}, {'end': 2504.704, 'src': 'embed', 'start': 2449.979, 'weight': 4, 'content': [{'end': 2463.411, 'text': 'ngOnInit is the place to call some methods you want to, because this is the point which would be called once in your code and it would be.', 'start': 2449.979, 'duration': 13.432}, {'end': 2468.416, 'text': 'by the time this method is called, your component would be ready to be rendered.', 'start': 2463.411, 'duration': 5.005}, {'end': 2478.626, 'text': "so in this video we're going to see first of all what is a component, how to create a component using command line,", 'start': 2472.302, 'duration': 6.324}, {'end': 2483.349, 'text': 'then how angular actually declares the component itself when you use command line,', 'start': 2478.626, 'duration': 4.723}, {'end': 2490.334, 'text': 'or how you have to manually declare it in your root component if you do it manually right,', 'start': 2483.349, 'duration': 6.985}, {'end': 2495.457, 'text': 'and some basic component usage with some string interpolation and all that stuff.', 'start': 2490.334, 'duration': 5.123}, {'end': 2504.704, 'text': 'so um okay, so here is our code right and a component, as i said in the starting tutorials,', 'start': 2495.457, 'duration': 9.247}], 'summary': 'Ngoninit is the place to call methods, and the video covers creating and using components in angular.', 'duration': 54.725, 'max_score': 2449.979, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ2449979.jpg'}, {'end': 2838.699, 'src': 'embed', 'start': 2811.847, 'weight': 5, 'content': [{'end': 2815.671, 'text': 'expressions used in interpolation and some profited expression syntax examples.', 'start': 2811.847, 'duration': 3.824}, {'end': 2816.632, 'text': "that's it.", 'start': 2815.671, 'duration': 0.961}, {'end': 2824.201, 'text': 'so, putting in very simple words, what interpolation basically is, is doing something like my variable.', 'start': 2816.632, 'duration': 7.569}, {'end': 2824.782, 'text': "that's it.", 'start': 2824.201, 'duration': 0.581}, {'end': 2826.504, 'text': "that's interpolation for you guys.", 'start': 2824.782, 'duration': 1.722}, {'end': 2834.133, 'text': "so in this example what we have is these two curly braces acts as the syntax for interpolation and you're interpolating.", 'start': 2826.504, 'duration': 7.629}, {'end': 2838.699, 'text': 'and this my variable, whatever, right, whatever you go right here is your expression.', 'start': 2834.133, 'duration': 4.566}], 'summary': 'Interpolation involves using curly braces to insert expressions into a variable.', 'duration': 26.852, 'max_score': 2811.847, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ2811847.jpg'}, {'end': 2933.049, 'src': 'embed', 'start': 2897.075, 'weight': 3, 'content': [{'end': 2901.418, 'text': 'bitwise, or of two numbers like 2 & 5.', 'start': 2897.075, 'duration': 4.343}, {'end': 2909.403, 'text': 'so what you would actually do is something like bitwise or 2 or 5.', 'start': 2901.418, 'duration': 7.985}, {'end': 2914.326, 'text': 'this performs the bitwise or between 2 or 5 and bitwise, or is pretty much just like you.', 'start': 2909.403, 'duration': 4.923}, {'end': 2933.049, 'text': "present everything in binary 1, 0, 4, 2 and yep, one, one, zero, if i'm not wrong, no one, zero, one or one, zero, one, yep, one, two, four plus one,", 'start': 2914.326, 'duration': 18.723}], 'summary': 'Perform bitwise or operation between 2 and 5 in binary, resulting in 7.', 'duration': 35.974, 'max_score': 2897.075, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ2897075.jpg'}], 'start': 2293.056, 'title': 'Angular components and content projection', 'summary': 'Covers content projection in angular, including its definition, associated lifecycle hooks, and practical demonstrations, as well as the usage of ngoninit method for initializing components and the concept of interpolation with examples of expressions and bitwise operations.', 'chapters': [{'end': 2449.979, 'start': 2293.056, 'title': 'Understanding content projection in angular', 'summary': 'Explains content projection in angular, including the definition, associated lifecycle hooks, and a practical demonstration of component addition and removal triggering lifecycle events.', 'duration': 156.923, 'highlights': ['Content projection allows writing a custom component and working with child components by using ng-content to reflect the child components passed in.', 'The four lifecycle hooks associated with content projection are afterContentInit, afterContentChecked, afterViewInit, and afterViewChecked.', 'A practical demonstration showcases the sequence of lifecycle methods triggered when adding and removing a component, including ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked, and ngOnDestroy.']}, {'end': 2967.05, 'start': 2449.979, 'title': 'Angular components and interpolation', 'summary': 'Covers the usage of ngoninit method in angular for initializing components, creating and using components with command line and manually, and the concept of interpolation with examples of expressions and bitwise operations.', 'duration': 517.071, 'highlights': ['The ngOnInit method is used to initialize components in Angular and is called once in the code.', 'Creating and using components in Angular with command line or manual declaration.', 'The concept of interpolation in Angular and its usage with examples of expressions.', 'Demonstration of bitwise operations within Angular interpolation.']}], 'duration': 673.994, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ2293056.jpg', 'highlights': ['Content projection allows working with child components using ng-content.', 'Practical demonstration showcases sequence of lifecycle methods triggered.', 'The four lifecycle hooks associated with content projection are afterContentInit, afterContentChecked, afterViewInit, and afterViewChecked.', 'Demonstration of bitwise operations within Angular interpolation.', 'The ngOnInit method is used to initialize components in Angular and is called once in the code.', 'The concept of interpolation in Angular and its usage with examples of expressions.', 'Creating and using components in Angular with command line or manual declaration.']}, {'end': 4704.229, 'segs': [{'end': 3028.966, 'src': 'embed', 'start': 2998.502, 'weight': 0, 'content': [{'end': 3001.584, 'text': 'so you need to do things like these in separate variables.', 'start': 2998.502, 'duration': 3.082}, {'end': 3010.39, 'text': 'Now, what we can do is actually call the functions call functions as well, but I would not recommend this, because Angular,', 'start': 3002.603, 'duration': 7.787}, {'end': 3014.954, 'text': 'whenever re-renders the template, would call that particular function again and again.', 'start': 3010.39, 'duration': 4.564}, {'end': 3017.156, 'text': 'So you can see that.', 'start': 3015.494, 'duration': 1.662}, {'end': 3022.361, 'text': "Let's just say this is my do some heavy task.", 'start': 3017.176, 'duration': 5.185}, {'end': 3028.966, 'text': 'I just console.log this called this.id.', 'start': 3024.803, 'duration': 4.163}], 'summary': 'Advising against calling functions in angular templates to avoid repeated calls during re-rendering.', 'duration': 30.464, 'max_score': 2998.502, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ2998502.jpg'}, {'end': 3246.235, 'src': 'heatmap', 'start': 3038.186, 'weight': 0.715, 'content': [{'end': 3048.07, 'text': 'and if i do like something like uh, do some task, heavy task instead, do some heavy task.', 'start': 3038.186, 'duration': 9.884}, {'end': 3049.571, 'text': 'there it is.', 'start': 3048.07, 'duration': 1.501}, {'end': 3055.083, 'text': 'and what i want to do is check my Console in here.', 'start': 3049.571, 'duration': 5.512}, {'end': 3059.967, 'text': 'but we have some errors to some heavy task, to some heavy task.', 'start': 3055.083, 'duration': 4.884}, {'end': 3060.968, 'text': 'Console dot log.', 'start': 3059.967, 'duration': 1.001}, {'end': 3069.675, 'text': 'call this dot I plus plus times and my I is in fact equal to zero, Column six.', 'start': 3060.968, 'duration': 8.707}, {'end': 3070.696, 'text': 'what the hell is this?', 'start': 3069.675, 'duration': 1.021}, {'end': 3080.884, 'text': "Okay, we are missing a curly brace here And let's just reload it one more time.", 'start': 3073.918, 'duration': 6.966}, {'end': 3086.92, 'text': 'So you can see that we get in console call zero times one times, two times, three times.', 'start': 3083.319, 'duration': 3.601}, {'end': 3094.623, 'text': "So Angular itself is calling it at least four times in this execution because it's rendering this HTML file four times.", 'start': 3086.94, 'duration': 7.683}, {'end': 3104.407, 'text': "And it would keep calling this function if I trigger change for, let's just say, any variable inside this component.", 'start': 3094.944, 'duration': 9.463}, {'end': 3107.168, 'text': 'So we can mimic something like this very easily.', 'start': 3104.587, 'duration': 2.581}, {'end': 3108.949, 'text': 'So we can say set interval.', 'start': 3107.448, 'duration': 1.501}, {'end': 3121.139, 'text': 'And I can just say this dot sum variable is math, dot random.', 'start': 3110.71, 'duration': 10.429}, {'end': 3129.231, 'text': 'this should be sufficient to trigger an angular change, angular change to be performed.', 'start': 3121.139, 'duration': 8.092}, {'end': 3139.24, 'text': 'so if you take a look in the browser can see that this function gets unnecessarily called every time we are making change to just this variable.', 'start': 3129.231, 'duration': 10.009}, {'end': 3159.95, 'text': "so that's why you should not use functions usually in your HTML interpolation syntax in angular and use just the property names going to take a look at what data binding is source to target data binding,", 'start': 3139.24, 'duration': 20.71}, {'end': 3167.614, 'text': 'target to source data binding and how to actually perform, or what actually is two-way data binding and how to use that.', 'start': 3159.95, 'duration': 7.664}, {'end': 3178.26, 'text': 'so first of all, if we take a look in the code, what we need is that sometimes we need to pass data from our um component files to our view files,', 'start': 3167.614, 'duration': 10.646}, {'end': 3180.321, 'text': 'that is, our html files, right.', 'start': 3178.26, 'duration': 2.061}, {'end': 3186.765, 'text': "so in that case, what you can do is, for example, let's just say we learned about interpolation, right.", 'start': 3180.321, 'duration': 6.444}, {'end': 3189.526, 'text': "so let's just take a look here.", 'start': 3186.765, 'duration': 2.761}, {'end': 3200.172, 'text': "um, if i say like my variable here and um inside here, i'd say like my variable is app.", 'start': 3189.526, 'duration': 10.646}, {'end': 3203.934, 'text': 'right now, if you take a look at in the browser, you can see that we get app.', 'start': 3200.172, 'duration': 3.762}, {'end': 3204.615, 'text': 'now, how about?', 'start': 3203.934, 'duration': 0.681}, {'end': 3213.29, 'text': 'if I want to get, put this value, set this value to an HTML attribute.', 'start': 3205.14, 'duration': 8.15}, {'end': 3221.746, 'text': 'so what I can do is I can say something like input type text.', 'start': 3213.29, 'duration': 8.456}, {'end': 3225.067, 'text': 'then value is something like this.', 'start': 3221.746, 'duration': 3.321}, {'end': 3238.012, 'text': 'you might think something like this would be good, whereas what we want is the property of this, now property, if i can explain you here a little.', 'start': 3225.067, 'duration': 12.945}, {'end': 3246.235, 'text': 'okay. so if you take a look here, you can see that i have selected this input type and if i write here value, you can see that i get app.', 'start': 3238.012, 'duration': 8.223}], 'summary': 'The transcript discusses angular, showing issues with function calls in html interpolation and explaining data binding concepts.', 'duration': 208.049, 'max_score': 3038.186, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ3038186.jpg'}, {'end': 3186.765, 'src': 'embed', 'start': 3159.95, 'weight': 1, 'content': [{'end': 3167.614, 'text': 'target to source data binding and how to actually perform, or what actually is two-way data binding and how to use that.', 'start': 3159.95, 'duration': 7.664}, {'end': 3178.26, 'text': 'so first of all, if we take a look in the code, what we need is that sometimes we need to pass data from our um component files to our view files,', 'start': 3167.614, 'duration': 10.646}, {'end': 3180.321, 'text': 'that is, our html files, right.', 'start': 3178.26, 'duration': 2.061}, {'end': 3186.765, 'text': "so in that case, what you can do is, for example, let's just say we learned about interpolation, right.", 'start': 3180.321, 'duration': 6.444}], 'summary': 'Exploring target to source data binding, including two-way data binding and its use in passing data from component files to view files.', 'duration': 26.815, 'max_score': 3159.95, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ3159950.jpg'}, {'end': 3502.267, 'src': 'embed', 'start': 3470.196, 'weight': 3, 'content': [{'end': 3477.72, 'text': 'because if you see, then whenever you have even a disabled attribute on your input text field,', 'start': 3470.196, 'duration': 7.524}, {'end': 3484.882, 'text': 'it does not matter with which boolean value it contains it will automatically disable the input field.', 'start': 3477.72, 'duration': 7.162}, {'end': 3501.106, 'text': 'however, if you use property binding here instead of interpolation, what you would see is that now you can see, sometimes it is enabled,', 'start': 3484.882, 'duration': 16.224}, {'end': 3502.267, 'text': 'sometimes it is disabled.', 'start': 3501.106, 'duration': 1.161}], 'summary': 'Disabled attribute on input field with property binding can alternate between enabled and disabled states.', 'duration': 32.071, 'max_score': 3470.196, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ3470196.jpg'}, {'end': 4296.029, 'src': 'embed', 'start': 4263.742, 'weight': 4, 'content': [{'end': 4274.166, 'text': 'So ngModel is a directive which is inbuilt for you, which acts as a two-way data binding directive.', 'start': 4263.742, 'duration': 10.424}, {'end': 4280.329, 'text': 'Now, we can create our own two-way data binding directives as well.', 'start': 4275.067, 'duration': 5.262}, {'end': 4283.37, 'text': "As I said, we'll come to that later on in the series.", 'start': 4280.629, 'duration': 2.741}, {'end': 4296.029, 'text': "we're going to cover basically ng4, and this would be a really quick tutorial, because there's not a lot to do in ng4 again on its own.", 'start': 4287.062, 'duration': 8.967}], 'summary': "Ngmodel is an inbuilt two-way data binding directive. later, we'll cover creating custom two-way binding directives and ng4 in a quick tutorial.", 'duration': 32.287, 'max_score': 4263.742, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ4263742.jpg'}, {'end': 4438.019, 'src': 'embed', 'start': 4400.95, 'weight': 2, 'content': [{'end': 4406.975, 'text': 'Now, what I want is that I want to display these records nicely on my view.', 'start': 4400.95, 'duration': 6.025}, {'end': 4417.331, 'text': "so what we need to do here is that we'll just create a table here which just consists of some trs and tds.", 'start': 4410.498, 'duration': 6.833}, {'end': 4423.342, 'text': "so let's just say my td is name and the second one is is online.", 'start': 4417.331, 'duration': 6.011}, {'end': 4431.515, 'text': "let's just say here I say ng for thing here.", 'start': 4426.192, 'duration': 5.323}, {'end': 4433.797, 'text': 'so how would I use ng for here?', 'start': 4431.515, 'duration': 2.282}, {'end': 4438.019, 'text': "well, let's just say you want to repeat some element.", 'start': 4433.797, 'duration': 4.222}], 'summary': 'Creating a table to display records with ngfor.', 'duration': 37.069, 'max_score': 4400.95, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ4400950.jpg'}], 'start': 2967.69, 'title': 'Angular fundamentals', 'summary': 'Covers angular template best practices, data binding basics, two-way data binding, and usage of ngfor directive for efficient data display.', 'chapters': [{'end': 3070.696, 'start': 2967.69, 'title': 'Angular template and functions', 'summary': 'Discusses using bitwise or in angular templates, advising against calling functions directly in templates due to potential re-rendering issues, and the importance of using separate variables for complex tasks.', 'duration': 103.006, 'highlights': ['Calling functions directly in Angular templates may lead to re-rendering issues, as the template would call the function again and again upon re-rendering.', 'Using separate variables for complex tasks in Angular templates is recommended to avoid potential errors and template parse issues.', 'Using bitwise or in Angular templates can result in successful operations, as demonstrated by obtaining the result of seven in the provided example.']}, {'end': 3526.82, 'start': 3073.918, 'title': 'Angular data binding basics', 'summary': 'Discusses the impact of using functions in html interpolation syntax in angular, the concept of data binding (source to target, target to source, and two-way), and the difference between property binding and interpolation, with practical examples and explanations.', 'duration': 452.902, 'highlights': ['Angular calls a function at least four times during execution when rendering an HTML file, leading to unnecessary function calls with variable changes.', 'Demonstrates the process of passing data from components to view files using interpolation and binding data to HTML attributes using property binding.', 'Clarifies the difference between property binding and interpolation, emphasizing how property binding allows for dynamic updates based on conditions.']}, {'end': 4343.858, 'start': 3526.82, 'title': 'Two-way data binding in angular', 'summary': 'Discusses the concept of two-way data binding in angular, explaining how to link view-side interactions to javascript and vice versa, including examples of binding data and creating custom directives to achieve two-way data binding.', 'duration': 817.038, 'highlights': ['The chapter discusses the concept of two-way data binding in Angular', 'Explaining how to link view-side interactions to JavaScript and vice versa', 'Examples of binding data and creating custom directives to achieve two-way data binding']}, {'end': 4704.229, 'start': 4343.858, 'title': 'Angular ngfor directive', 'summary': 'Explains how to use the ngfor directive in angular to display data in a table, utilizing ngfor to iterate through a data array, access individual records, display index values, and apply conditional classes based on odd and even records.', 'duration': 360.371, 'highlights': ['Utilizing ngFor to iterate through a data array', 'Accessing individual records and displaying in a table', 'Displaying index values using ngFor', 'Applying conditional classes based on odd and even records']}], 'duration': 1736.539, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ2967690.jpg', 'highlights': ['Using separate variables for complex tasks in Angular templates is recommended to avoid potential errors and template parse issues.', 'Demonstrates the process of passing data from components to view files using interpolation and binding data to HTML attributes using property binding.', 'Accessing individual records and displaying in a table using ngFor.', 'Clarifies the difference between property binding and interpolation, emphasizing how property binding allows for dynamic updates based on conditions.', 'The chapter discusses the concept of two-way data binding in Angular.']}, {'end': 6015.018, 'segs': [{'end': 4733.435, 'src': 'embed', 'start': 4704.67, 'weight': 2, 'content': [{'end': 4714.692, 'text': 'So now we can just pretty much if we duplicate these records, you would be able to see that we have a nice little table in here.', 'start': 4704.67, 'duration': 10.022}, {'end': 4719.747, 'text': 'with the alternate colors right.', 'start': 4716.425, 'duration': 3.322}, {'end': 4723.95, 'text': 'so if you take a look, you can see we are done where to use.', 'start': 4719.747, 'duration': 4.203}, {'end': 4729.353, 'text': 'we have done the syntax part, we have done how to get index and how to get odd.', 'start': 4723.95, 'duration': 5.403}, {'end': 4733.435, 'text': 'even now we can also do this first element and last element thing.', 'start': 4729.353, 'duration': 4.082}], 'summary': 'Demonstration of duplicating records to create a table with alternate colors and covering various syntax and indexing techniques.', 'duration': 28.765, 'max_score': 4704.67, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ4704670.jpg'}, {'end': 5259.151, 'src': 'embed', 'start': 5227.885, 'weight': 0, 'content': [{'end': 5231.887, 'text': 'you just need to inject it into your component.', 'start': 5227.885, 'duration': 4.002}, {'end': 5239.901, 'text': 'now the other component updates some sort of property of the service right here with some method,', 'start': 5231.887, 'duration': 8.014}, {'end': 5244.812, 'text': 'and previous component would automatically reflect that, because they are.', 'start': 5239.901, 'duration': 4.911}, {'end': 5247.601, 'text': 'This is a singleton service.', 'start': 5246.219, 'duration': 1.382}, {'end': 5250.663, 'text': 'That means it only has one instance running at a time.', 'start': 5247.661, 'duration': 3.002}, {'end': 5259.151, 'text': "So we're going to take we're going to discuss about how this dependency injection DI works exactly really soon.", 'start': 5251.404, 'duration': 7.747}], 'summary': 'Dependency injection updates a singleton service, allowing components to reflect changes automatically.', 'duration': 31.266, 'max_score': 5227.885, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ5227885.jpg'}, {'end': 5667.781, 'src': 'embed', 'start': 5635.644, 'weight': 1, 'content': [{'end': 5642.029, 'text': 'then what we have is data, dot or file.json.', 'start': 5635.644, 'duration': 6.385}, {'end': 5652.094, 'text': 'right, and once we had this thing, what i want is actually subscribe to this thing.', 'start': 5643.911, 'duration': 8.183}, {'end': 5653.935, 'text': 'now, what does this mean?', 'start': 5652.094, 'duration': 1.841}, {'end': 5662.319, 'text': 'well, um, this is the subscription is a operator of rxjs, which is reactive javascript,', 'start': 5653.935, 'duration': 8.384}, {'end': 5667.781, 'text': "and what this is is that it's it's just a way to handle asynchronous tasks.", 'start': 5662.319, 'duration': 5.462}], 'summary': 'Subscribe to file.json using rxjs for handling asynchronous tasks.', 'duration': 32.137, 'max_score': 5635.644, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ5635644.jpg'}], 'start': 4704.67, 'title': 'Angular services and table styling', 'summary': 'Covers the concept of angular services, including creating and injecting services, and styling tables with alternate colors. it also discusses making json requests, handling asynchronous tasks using rxjs, and fixing issues with accessing json data.', 'chapters': [{'end': 4776.165, 'start': 4704.67, 'title': 'Table styling with alternate colors', 'summary': 'Discusses how to style a table with alternate colors and different classes for the first and last elements.', 'duration': 71.495, 'highlights': ['Explaining how to style a table with alternate colors and different classes for the first and last elements, using duplication of records and assigning classes to the first and last records.', 'Describing the completion of syntax, index retrieval, odd and even element retrieval, and the implementation of styling for first and last elements in a table.']}, {'end': 5417.153, 'start': 4776.165, 'title': 'Angular services and http client module', 'summary': 'Covers the concept of angular services, including the need for services, creating and injecting services in components, and the usage of http client module for making requests and accessing responses.', 'duration': 640.988, 'highlights': ['Angular services are singleton instances that store methods and can be injected into multiple components for sharing functionality.', 'HTTP client module in Angular is used for making HTTP requests and accessing responses.', 'Creation and injection of services in Angular involves using the command line to generate a service and then injecting it into components or modules.']}, {'end': 6015.018, 'start': 5418.074, 'title': 'Making json request & handling asynchronous tasks', 'summary': 'Discusses creating a json file, serving it on a server, making a json request, handling asynchronous tasks using rxjs, and fixing issues with accessing and displaying json data in a web application.', 'duration': 596.944, 'highlights': ['The chapter discusses creating a JSON file, serving it on a server, making a JSON request, handling asynchronous tasks using rxjs, and fixing issues with accessing and displaying JSON data in a web application.', 'The chapter explains handling asynchronous tasks using rxjs, which takes a different approach from traditional methods.', 'The chapter demonstrates fixing issues with accessing and displaying JSON data in a web application by changing the file extension, setting header values, and creating an interface for the expected response.']}], 'duration': 1310.348, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ4704670.jpg', 'highlights': ['Angular services are singleton instances that store methods and can be injected into multiple components for sharing functionality.', 'The chapter discusses creating a JSON file, serving it on a server, making a JSON request, handling asynchronous tasks using rxjs, and fixing issues with accessing and displaying JSON data in a web application.', 'Explaining how to style a table with alternate colors and different classes for the first and last elements, using duplication of records and assigning classes to the first and last records.']}, {'end': 7051.618, 'segs': [{'end': 6072.701, 'src': 'embed', 'start': 6015.018, 'weight': 0, 'content': [{'end': 6031.348, 'text': 'okay, so what we are missing here is that our records was an object initially, so it threw us an error, but now it should be fine, yeah.', 'start': 6015.018, 'duration': 16.33}, {'end': 6037.852, 'text': 'so that is pretty much how you perform an http request in angular, and trust me,', 'start': 6031.348, 'duration': 6.504}, {'end': 6045.216, 'text': "you're gonna do this all the time when you're creating an application, because, um, you cannot obviously offload everything to client-side at once.", 'start': 6037.852, 'duration': 7.364}, {'end': 6045.957, 'text': 'you need to do it.', 'start': 6045.216, 'duration': 0.741}, {'end': 6050.614, 'text': 'perform http requests again and again, alright.', 'start': 6045.957, 'duration': 4.657}, {'end': 6060.177, 'text': 'so if you followed my last tutorial, what we had was that we were fetching some data from one endpoint and displaying it on the screen.', 'start': 6050.614, 'duration': 9.563}, {'end': 6069.64, 'text': 'that data was JSON, but the problem was that at first one we had a problem that showed us some error related to course,', 'start': 6060.177, 'duration': 9.463}, {'end': 6072.701, 'text': 'which is cross origin resource sharing.', 'start': 6069.64, 'duration': 3.061}], 'summary': 'Performing http requests in angular is crucial for creating applications, as you constantly need to fetch data from endpoints and display it on the screen, dealing with issues like cross origin resource sharing.', 'duration': 57.683, 'max_score': 6015.018, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ6015018.jpg'}, {'end': 6149.284, 'src': 'embed', 'start': 6121.183, 'weight': 1, 'content': [{'end': 6128.285, 'text': 'At production, obviously Angular is just front end, so you can just merge your API server with Angular front end and you would be good to go.', 'start': 6121.183, 'duration': 7.102}, {'end': 6137.281, 'text': 'But for development, what we want is we need to proxy our requests from Angular server to our remote server right?', 'start': 6128.745, 'duration': 8.536}, {'end': 6139.362, 'text': 'So how do we do that?', 'start': 6137.582, 'duration': 1.78}, {'end': 6149.284, 'text': "Well, first of all, what I'm going to do is change this from localhost 1234 to something like API and then file.php,", 'start': 6140.442, 'duration': 8.842}], 'summary': 'For production, merge api server with angular front end. for development, proxy requests from angular server to remote server.', 'duration': 28.101, 'max_score': 6121.183, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ6121183.jpg'}, {'end': 6264.593, 'src': 'embed', 'start': 6236.076, 'weight': 3, 'content': [{'end': 6248.963, 'text': 'js. nope, should be proxy config.json, just like that and now would be a json object.', 'start': 6236.076, 'duration': 12.887}, {'end': 6253.466, 'text': "and let's just say i want my api endpoints to be proxified,", 'start': 6248.963, 'duration': 4.503}, {'end': 6264.593, 'text': "to say target is localhost 134 and there are a bunch of properties you can search them on internet like, for example, it's not secure,", 'start': 6253.466, 'duration': 11.127}], 'summary': 'Using proxy config.json for api endpoints to proxify, target localhost 134.', 'duration': 28.517, 'max_score': 6236.076, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ6236076.jpg'}, {'end': 6431.447, 'src': 'embed', 'start': 6408.375, 'weight': 2, 'content': [{'end': 6416.539, 'text': "so in this video we're gonna take a look at what routing is, why you would need routing really quick and implementing routing finally from scratch.", 'start': 6408.375, 'duration': 8.164}, {'end': 6418.08, 'text': 'so what is routing?', 'start': 6416.539, 'duration': 1.541}, {'end': 6422.102, 'text': 'displaying different content on different pages is routing.', 'start': 6418.08, 'duration': 4.022}, {'end': 6424.724, 'text': 'you can split up your content on different pages.', 'start': 6422.102, 'duration': 2.622}, {'end': 6431.447, 'text': 'for example, if you want to show some things for authenticated people and some things to unauthenticated people, you can do that with routing.', 'start': 6424.724, 'duration': 6.723}], 'summary': 'Routing allows displaying different content on different pages, catering to different user groups.', 'duration': 23.072, 'max_score': 6408.375, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ6408375.jpg'}, {'end': 6472.708, 'src': 'embed', 'start': 6441.96, 'weight': 7, 'content': [{'end': 6448.561, 'text': 'if you have ever read any blogs which has a lot of posts, then they show these numbers so that can be performed with routing.', 'start': 6441.96, 'duration': 6.601}, {'end': 6450.721, 'text': 'that is one example of routing.', 'start': 6448.561, 'duration': 2.16}, {'end': 6452.882, 'text': 'routing is everywhere on internet.', 'start': 6450.721, 'duration': 2.161}, {'end': 6457.763, 'text': "so um, let's just implement this router module really quick.", 'start': 6452.882, 'duration': 4.881}, {'end': 6460.639, 'text': 'so implement this.', 'start': 6457.763, 'duration': 2.876}, {'end': 6464.982, 'text': "what we have is that let's just create two components really quick.", 'start': 6460.639, 'duration': 4.343}, {'end': 6472.708, 'text': "so we would create two components here and let's just create a component nggc, a shortcut to create a component.", 'start': 6464.982, 'duration': 7.726}], 'summary': 'Routing is essential for internet functionality. implementing router module and creating two components quickly.', 'duration': 30.748, 'max_score': 6441.96, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ6441960.jpg'}, {'end': 6978.293, 'src': 'embed', 'start': 6953.608, 'weight': 8, 'content': [{'end': 6960.56, 'text': 'how you basically even create routing and get stuff from a local server in our case.', 'start': 6953.608, 'duration': 6.952}, {'end': 6966.781, 'text': "we're gonna take a look in this mini series.", 'start': 6964.218, 'duration': 2.563}, {'end': 6970.865, 'text': "we're gonna see how to create a login app which consists of app components.", 'start': 6966.781, 'duration': 4.084}, {'end': 6978.293, 'text': 'obviously we need them back-end validation, a little bit with php for the time being, but you can switch it to node or whatever you want.', 'start': 6970.865, 'duration': 7.428}], 'summary': 'Creating a login app with backend validation using php, switchable to node.', 'duration': 24.685, 'max_score': 6953.608, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ6953608.jpg'}, {'end': 7030.343, 'src': 'embed', 'start': 7003.256, 'weight': 5, 'content': [{'end': 7012.767, 'text': 'what you need to do first is you need to actually set up something known as a proxy, a proxy forwarding for your api calls to the back end.', 'start': 7003.256, 'duration': 9.511}, {'end': 7022.677, 'text': 'to do that, what you need to do is just go to your package.json file inside your scripts, modify this stat by writing ng, serve proxyconfig,', 'start': 7012.767, 'duration': 9.91}, {'end': 7030.343, 'text': 'proxyconfig.json, then create a proxyconfig.json file here and write this thing now.', 'start': 7022.677, 'duration': 7.666}], 'summary': 'Set up a proxy for api calls by modifying package.json and creating a proxyconfig.json file.', 'duration': 27.087, 'max_score': 7003.256, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ7003256.jpg'}], 'start': 6015.018, 'title': 'Angular http requests, proxy setup, and routing', 'summary': 'Covers performing http requests in angular, resolving cors issues, setting up a proxy for api requests, understanding routing in angular, creating and implementing routes, and upcoming tutorials on creating a login app with backend validation and route protection.', 'chapters': [{'end': 6209.155, 'start': 6015.018, 'title': 'Angular http requests', 'summary': 'Discusses performing http requests in angular, addressing cross-origin resource sharing (cors) issues, and proxying requests from the angular server to a remote server for development purposes.', 'duration': 194.137, 'highlights': ['The chapter explains the process of performing HTTP requests in Angular and emphasizes the frequency of this task during application development.', 'It discusses the issue of cross-origin resource sharing (CORS) and its impact on making API calls from the Angular server to remote servers.', 'The chapter details the process of proxying requests from the Angular server to a remote server for development purposes, ensuring a smooth integration of APIs.']}, {'end': 6408.375, 'start': 6209.435, 'title': 'Setting up proxy for api requests', 'summary': 'Discusses setting up a proxy using proxy config.json to redirect api requests to a local server, resulting in successful data retrieval and resolving 404 errors, facilitating smooth development and testing of api endpoints.', 'duration': 198.94, 'highlights': ['Creating a proxy config.json file with target as localhost 134 to proxy API endpoints, ensuring smooth development and testing of API endpoints.', 'Using proxy config to redirect API requests to a local server, resolving 404 errors and facilitating successful data retrieval, ensuring smooth development and testing of API endpoints.', 'Setting up proxy config.json to redirect API requests to a local server, facilitating smooth development and testing of API endpoints.']}, {'end': 7051.618, 'start': 6408.375, 'title': 'Understanding routing in angular', 'summary': 'Explains the concept of routing in angular, emphasizing its importance in displaying different content on different pages, creating and implementing routes, and the use of router module. it also covers the significance of route priority, the functioning of router outlet, and the interaction with components. the chapter concludes by outlining the upcoming tutorials on creating a login app with backend validation and route protection.', 'duration': 643.243, 'highlights': ['The chapter explains the concept of routing in Angular, emphasizing its importance in displaying different content on different pages, creating and implementing routes, and the use of router module.', 'It also covers the significance of route priority, the functioning of router outlet, and the interaction with components.', 'The chapter concludes by outlining the upcoming tutorials on creating a login app with backend validation and route protection.']}], 'duration': 1036.6, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ6015018.jpg', 'highlights': ['The chapter explains the process of performing HTTP requests in Angular and emphasizes the frequency of this task during application development.', 'The chapter details the process of proxying requests from the Angular server to a remote server for development purposes, ensuring a smooth integration of APIs.', 'The chapter explains the concept of routing in Angular, emphasizing its importance in displaying different content on different pages, creating and implementing routes, and the use of router module.', 'Creating a proxy config.json file with target as localhost 134 to proxy API endpoints, ensuring smooth development and testing of API endpoints.', 'Using proxy config to redirect API requests to a local server, resolving 404 errors and facilitating successful data retrieval, ensuring smooth development and testing of API endpoints.', 'Setting up proxy config.json to redirect API requests to a local server, facilitating smooth development and testing of API endpoints.', 'It discusses the issue of cross-origin resource sharing (CORS) and its impact on making API calls from the Angular server to remote servers.', 'It also covers the significance of route priority, the functioning of router outlet, and the interaction with components.', 'The chapter concludes by outlining the upcoming tutorials on creating a login app with backend validation and route protection.']}, {'end': 7975.422, 'segs': [{'end': 7146.943, 'src': 'embed', 'start': 7075.237, 'weight': 0, 'content': [{'end': 7082.922, 'text': "so i'm going to start off with um, let's just say we need to create login, our admin component.", 'start': 7075.237, 'duration': 7.685}, {'end': 7087.224, 'text': "so we're going to say ng generate component.", 'start': 7082.922, 'duration': 4.302}, {'end': 7097.351, 'text': "and let's just say this is login component, hit enter and ng generate component, admin component hit enter.", 'start': 7087.224, 'duration': 10.127}, {'end': 7098.992, 'text': 'all right.', 'start': 7097.351, 'duration': 1.641}, {'end': 7106.495, 'text': 'now what we can see is a login component is here and for the time being, our app component.', 'start': 7098.992, 'duration': 7.503}, {'end': 7118.56, 'text': 'what we can do is say a href or a router link as, or rather rather what we can do else.', 'start': 7106.495, 'duration': 12.065}, {'end': 7126.352, 'text': 'this is create ng generate component as home work, nice.', 'start': 7118.56, 'duration': 7.792}, {'end': 7136.037, 'text': "so what we have now is that what I can say is inside my app component, I'm going to say router outlet.", 'start': 7126.352, 'duration': 9.685}, {'end': 7142.521, 'text': 'this gives us access to routing in angular and inside my app module.', 'start': 7136.037, 'duration': 6.484}, {'end': 7146.943, 'text': 'if you see, we have these modules already added.', 'start': 7142.521, 'duration': 4.422}], 'summary': 'Creating login and admin components using ng generate component in angular.', 'duration': 71.706, 'max_score': 7075.237, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ7075237.jpg'}, {'end': 7210.89, 'src': 'embed', 'start': 7179.396, 'weight': 2, 'content': [{'end': 7183.685, 'text': "and for the time being we're just keeping the route unprotected.", 'start': 7179.396, 'duration': 4.289}, {'end': 7188.512, 'text': 'admin, the component would be um admin component.', 'start': 7183.685, 'duration': 4.827}, {'end': 7189.132, 'text': 'there we have it.', 'start': 7188.512, 'duration': 0.62}, {'end': 7198.2, 'text': "now we can just move this a little down so that it's, you know, just easy on us.", 'start': 7189.132, 'duration': 9.068}, {'end': 7200.482, 'text': 'and there we have it.', 'start': 7198.2, 'duration': 2.282}, {'end': 7205.226, 'text': 'right, we also need to create a service for the back end stuff.', 'start': 7200.482, 'duration': 4.744}, {'end': 7210.89, 'text': "so i'm going to say ng generate service and i'm going to write the service as auth.", 'start': 7205.226, 'duration': 5.664}], 'summary': 'Developing admin component and auth service for back end.', 'duration': 31.494, 'max_score': 7179.396, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ7179396.jpg'}, {'end': 7363.2, 'src': 'embed', 'start': 7258.453, 'weight': 3, 'content': [{'end': 7260.995, 'text': 'all right, we will do that later.', 'start': 7258.453, 'duration': 2.542}, {'end': 7267.899, 'text': 'for now, what we have is login shows, login component and inside our login component.', 'start': 7260.995, 'duration': 6.904}, {'end': 7271.261, 'text': 'we can create a quick little form.', 'start': 7267.899, 'duration': 3.362}, {'end': 7272.702, 'text': 'form should be nothing.', 'start': 7271.261, 'duration': 1.441}, {'end': 7289.849, 'text': "i'm going to say input type, text and this should be placeholder, username type, password, placeholder password and form.", 'start': 7272.702, 'duration': 17.147}, {'end': 7301.219, 'text': "so to handle form submission, what we're going to do is write summit and let's just say form or login user, something like this.", 'start': 7289.849, 'duration': 11.37}, {'end': 7307.297, 'text': 'we can just pass in the event object here and right here.', 'start': 7302.896, 'duration': 4.401}, {'end': 7317.72, 'text': 'what we can do is in our login component dot file, we can say login user event.', 'start': 7307.297, 'duration': 10.423}, {'end': 7327.282, 'text': 'we can just pretty much console log the event for now and there we have it all right.', 'start': 7317.72, 'duration': 9.562}, {'end': 7331.243, 'text': 'we just need to set up our routing here correctly.', 'start': 7327.282, 'duration': 3.961}, {'end': 7339.199, 'text': "i mean if we go to, oh, we already have, but we don't have any links right.", 'start': 7333.015, 'duration': 6.184}, {'end': 7342.501, 'text': "so i'm just gonna go to home component.", 'start': 7339.199, 'duration': 3.302}, {'end': 7358.856, 'text': "right here you should see homeworks, yep and i'm gonna say a router link, login login and just gonna say arrow link as admin.", 'start': 7342.501, 'duration': 16.355}, {'end': 7361.659, 'text': 'go to admin just for testing purpose.', 'start': 7358.856, 'duration': 2.803}, {'end': 7363.2, 'text': 'after we have finished with the app,', 'start': 7361.659, 'duration': 1.541}], 'summary': 'Creating a login form for handling user login submissions and setting up routing for the application.', 'duration': 104.747, 'max_score': 7258.453, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ7258453.jpg'}, {'end': 7494.649, 'src': 'embed', 'start': 7431.537, 'weight': 7, 'content': [{'end': 7439.279, 'text': 'you can see that we get our event console logged properly and there we are all right.', 'start': 7431.537, 'duration': 7.742}, {'end': 7452.622, 'text': 'so now we have prepared a form which looks like this we have prepared the admin page not really top secret.', 'start': 7439.279, 'duration': 13.343}, {'end': 7453.822, 'text': 'we have prepared the admin page.', 'start': 7452.622, 'duration': 1.2}, {'end': 7466.543, 'text': 'the basic structure for the form for the login page is working, but we are missing the authentication part and the admin,', 'start': 7456.129, 'duration': 10.414}, {'end': 7471.91, 'text': 'obviously the backend server part.', 'start': 7466.543, 'duration': 5.367}, {'end': 7483.956, 'text': "we're gonna cover some backend part and create some validation so that we can send the data across the server.", 'start': 7471.91, 'duration': 12.046}, {'end': 7487.521, 'text': 'so if you take a look at our site,', 'start': 7483.956, 'duration': 3.565}, {'end': 7494.649, 'text': 'what we have right now is that we can just go to this login page And we can just go to this admin page and everything is open right now.', 'start': 7487.521, 'duration': 7.128}], 'summary': 'Backend server and authentication for login form are pending.', 'duration': 63.112, 'max_score': 7431.537, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ7431537.jpg'}, {'end': 7744.881, 'src': 'embed', 'start': 7685.036, 'weight': 6, 'content': [{'end': 7691.18, 'text': 'HTTP is HTTP client module, just like that.', 'start': 7685.036, 'duration': 6.144}, {'end': 7699.045, 'text': "and now what I'm gonna say is return this dot HTTP dot post.", 'start': 7691.18, 'duration': 7.865}, {'end': 7704.888, 'text': 'now this would be our URL, which in our case is API slash.', 'start': 7699.045, 'duration': 5.843}, {'end': 7719.344, 'text': "what we have in here is auth dot PHP, and the data we want to send is username and password, and what we're seeing here is,", 'start': 7704.888, 'duration': 14.456}, {'end': 7722.348, 'text': 'or actually this should be just http client.', 'start': 7719.344, 'duration': 3.004}, {'end': 7727.036, 'text': 'right, we are okay.', 'start': 7722.348, 'duration': 4.688}, {'end': 7731.337, 'text': 'so now we are sending the username and password and we want to subscribe to this.', 'start': 7727.036, 'duration': 4.301}, {'end': 7734.278, 'text': 'now this is the rxjs implementation.', 'start': 7731.337, 'duration': 2.941}, {'end': 7736.418, 'text': "we're going to come to that later on the series.", 'start': 7734.278, 'duration': 2.14}, {'end': 7740.219, 'text': "but right now, let's see, let's assume that subscription.", 'start': 7736.418, 'duration': 3.801}, {'end': 7744.881, 'text': 'what this subscribe means is that you are subscribing to this async pipeline flow.', 'start': 7740.219, 'duration': 4.662}], 'summary': 'Using http client module to send username and password for subscription in async pipeline flow.', 'duration': 59.845, 'max_score': 7685.036, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ7685036.jpg'}, {'end': 7901.125, 'src': 'embed', 'start': 7849.838, 'weight': 12, 'content': [{'end': 7855.723, 'text': 'so that should not be a problem really.', 'start': 7849.838, 'duration': 5.885}, {'end': 7860.087, 'text': 'but we get 504 gateway timeout.', 'start': 7855.723, 'duration': 4.364}, {'end': 7875.346, 'text': "so if you see what's happening here, okay.", 'start': 7860.087, 'duration': 15.259}, {'end': 7886.715, 'text': 'so now, if we go to like api, we get error occurred while trying to proxy to.', 'start': 7875.346, 'duration': 11.369}, {'end': 7891.558, 'text': 'okay. so it looks like that we have some problem with our php server.', 'start': 7886.715, 'duration': 4.843}, {'end': 7893.36, 'text': "so let's just create that again.", 'start': 7891.558, 'duration': 1.802}, {'end': 7901.125, 'text': "so i'm gonna say phps localhost, or we can just go with that and one, two, three, four.", 'start': 7893.36, 'duration': 7.765}], 'summary': 'Experiencing 504 gateway timeout, issue with php server. need to create again.', 'duration': 51.287, 'max_score': 7849.838, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ7849838.jpg'}], 'start': 7051.618, 'title': 'Angular routing, form creation, and backend communication', 'summary': 'Covers creating login and admin components, setting up routing, handling form submission, backend server communication, and implementing an authentication service in angular, aiming to achieve successful user authentication and preventing default behavior on form submission.', 'chapters': [{'end': 7256.354, 'start': 7051.618, 'title': 'Angular routing and component creation', 'summary': 'Covers the creation of login and admin components using ng generate component, setting up routing in angular using router outlet, importing modules and providing array of routes in app module, and generating an auth service for backend operations.', 'duration': 204.736, 'highlights': ['Creation of login and admin components using ng generate component', 'Setting up routing in Angular using router outlet and providing array of routes in app module', 'Generating an auth service for backend operations using ng generate service']}, {'end': 7431.537, 'start': 7258.453, 'title': 'Creating login form and handling submission', 'summary': 'Discusses creating a login form with input fields for username and password, handling form submission, and setting up routing for login and admin pages, with a focus on preventing default behavior on form submission.', 'duration': 173.084, 'highlights': ['Creating a login form with input fields for username and password', 'Handling form submission', 'Setting up routing for login and admin pages']}, {'end': 7628.177, 'start': 7431.537, 'title': 'Backend form validation & server communication', 'summary': 'Covers the preparation of an admin page and login form, focusing on backend server communication and form validation, lacking authentication for admin access, and demonstrating the process of sending data to the server.', 'duration': 196.64, 'highlights': ['The chapter covers the preparation of an admin page and login form', 'Lacking authentication for admin access', 'Focusing on backend server communication and form validation', 'Demonstrating the process of sending data to the server']}, {'end': 7975.422, 'start': 7628.177, 'title': 'Angular auth service implementation', 'summary': 'Covers the implementation of an authentication service in angular, including injecting the http client module, making a post request to the server, and troubleshooting a 504 gateway timeout, aiming to achieve successful user authentication.', 'duration': 347.245, 'highlights': ['Injecting HTTP client module and making a post request', 'Troubleshooting 504 gateway timeout and server proxying issues', 'Explanation of subscribe method in rxjs implementation']}], 'duration': 923.804, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ7051618.jpg', 'highlights': ['Creation of login and admin components using ng generate component', 'Setting up routing in Angular using router outlet and providing array of routes in app module', 'Generating an auth service for backend operations using ng generate service', 'Creating a login form with input fields for username and password', 'Handling form submission', 'Setting up routing for login and admin pages', 'Injecting HTTP client module and making a post request', 'Focusing on backend server communication and form validation', 'Demonstrating the process of sending data to the server', 'Explanation of subscribe method in rxjs implementation', 'The chapter covers the preparation of an admin page and login form', 'Lacking authentication for admin access', 'Troubleshooting 504 gateway timeout and server proxying issues']}, {'end': 8908.583, 'segs': [{'end': 8114.812, 'src': 'embed', 'start': 8087.583, 'weight': 2, 'content': [{'end': 8093.889, 'text': 'so if i write this as admin1 and hit summit, you can see we get invalid credentials as the option.', 'start': 8087.583, 'duration': 6.306}, {'end': 8099.197, 'text': 'so that is how pretty much would work with login application in this tutorial.', 'start': 8093.889, 'duration': 5.308}, {'end': 8105.105, 'text': "now that in the next one we're going to cover about routing and making this form a little bit beautiful because it looks ugly.", 'start': 8099.197, 'duration': 5.908}, {'end': 8114.812, 'text': 'What we have for route protection is something known as route guards in Angular 6..', 'start': 8108.988, 'duration': 5.824}], 'summary': 'Demonstrates invalid credentials in login app, and plans to cover routing and route guards in angular 6 tutorial.', 'duration': 27.229, 'max_score': 8087.583, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ8087583.jpg'}, {'end': 8194.277, 'src': 'embed', 'start': 8165.775, 'weight': 0, 'content': [{'end': 8171.918, 'text': 'and if it does not, then the guard can pretty much beat the user up or redirect him anywhere.', 'start': 8165.775, 'duration': 6.143}, {'end': 8173.638, 'text': 'so yeah, all right.', 'start': 8171.918, 'duration': 1.72}, {'end': 8185.763, 'text': 'so what we have here is that there are four type of guards that you can use and that are can activate, can activate, child can deactivate and resolve.', 'start': 8173.638, 'duration': 12.125}, {'end': 8194.277, 'text': 'so what can activate do is that it would check whether the user eligible to actually see a route.', 'start': 8185.763, 'duration': 8.514}], 'summary': 'Four types of guards available: can activate, can deactivate, child can deactivate, and resolve.', 'duration': 28.502, 'max_score': 8165.775, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ8165775.jpg'}, {'end': 8413.264, 'src': 'embed', 'start': 8385.849, 'weight': 1, 'content': [{'end': 8391.472, 'text': "so i'm going to say ng, generate guard and auth.", 'start': 8385.849, 'duration': 5.623}, {'end': 8395.895, 'text': "so we're just writing auth, because auth, the guard thing, would automatically be appended to.", 'start': 8391.472, 'duration': 4.423}, {'end': 8402.342, 'text': 'that can see that we get two files created auth card.ts and our card spec.', 'start': 8395.895, 'duration': 6.447}, {'end': 8413.264, 'text': 'we are interested in this auth card.ts and i can see that we have pretty much a boilerplate kind of thing set up for us and you can see that we are returning.', 'start': 8402.342, 'duration': 10.922}], 'summary': 'Creating auth guard and getting two files generated: auth.guard.ts and auth.guard.spec', 'duration': 27.415, 'max_score': 8385.849, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ8385849.jpg'}, {'end': 8908.583, 'src': 'embed', 'start': 8880.911, 'weight': 3, 'content': [{'end': 8885.515, 'text': 'but if one route returns true, then other routes will be checked.', 'start': 8880.911, 'duration': 4.604}, {'end': 8887.837, 'text': "so it's kind of can activate this kind of condition,", 'start': 8885.515, 'duration': 2.322}, {'end': 8896.138, 'text': 'like auth card returns true and then some other other route guard returns true and then something, something, something like.', 'start': 8887.837, 'duration': 8.301}, {'end': 8898.199, 'text': 'so if one fails, one returns false.', 'start': 8896.138, 'duration': 2.061}, {'end': 8908.583, 'text': "in this chain, the expression further won't be evaluated, but otherwise every route guard would be fired right.", 'start': 8898.199, 'duration': 10.384}], 'summary': 'If one route returns true, other routes will be checked; otherwise, every route guard is fired.', 'duration': 27.672, 'max_score': 8880.911, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ8880911.jpg'}], 'start': 7975.422, 'title': 'Backend implementation and route protection', 'summary': 'Covers the implementation of php backend for user authentication and angular route guards, including four types of guards in angular 6, auth guard implementation, and the importance of server-side authentication.', 'chapters': [{'end': 8087.583, 'start': 7975.422, 'title': 'Php backend implementation and user authentication', 'summary': 'Explains the implementation of php backend to handle user authentication, including redirecting successful logins to admin page and displaying error messages for invalid credentials.', 'duration': 112.161, 'highlights': ['The backend implementation involves reading from the PHP input stream and depends on the specific implementation.', 'Successful login as admin redirects the user to an admin page.', 'Entering invalid credentials triggers an error message.']}, {'end': 8355.991, 'start': 8087.583, 'title': 'Angular route guards and protocols', 'summary': 'Explains the concept of route guards in angular 6, including the four types of guards - can activate, can activate child, can deactivate, and resolve, which verify user eligibility, protect child routes, keep routes active, and resolve data before loading routes.', 'duration': 268.408, 'highlights': ['Route guards in Angular 6 include four types - can activate, can activate child, can deactivate, and resolve, which verify user eligibility, protect child routes, keep routes active, and resolve data before loading routes.', 'Can activate guards check whether the user is eligible to access a route based on certain criteria, and if true, Angular proceeds to show the route to the user.', "Can activate child guards protect all child routes under a specified route, while can deactivate guards keep specific routes active and can return false to maintain the route's functionality.", 'Resolve guards are used to fetch data from an API server before the user accesses the route, and can load guards lazily check user eligibility before allowing access to a particular route.']}, {'end': 8713.991, 'start': 8355.991, 'title': 'Implementing auth guard in angular', 'summary': 'Explains the implementation of an auth guard in angular, demonstrating the generation of the guard using the ng generate command, importing the guard into the app module, and its usage to control access to routes, with examples of returning true and false from the guard and handling redirection upon successful authentication.', 'duration': 358, 'highlights': ['The chapter explains the generation of an auth guard using the ng generate command, demonstrating the creation of auth guard files auth.guard.ts and auth.guard.spec.', 'It shows the import of the generated auth guard into the app module and its usage to control route access by specifying canActivate with the auth guard for a particular route.', 'An example is provided where returning true from the auth guard allows access to a route, while returning false restricts access, demonstrated through accessing the /admin route.', 'The chapter also covers the implementation of a redirection upon successful authentication, with the creation of a get method in the auth service to manipulate and calculate the property value and the usage of the router to navigate to the admin URL upon successful login.']}, {'end': 8908.583, 'start': 8713.991, 'title': 'Protecting routes in angular', 'summary': 'Discusses setting up route protection in angular, including implementing a login functionality, setting up route guards, and the potential security risks associated with front-end protection, while emphasizing the need for server-side authentication.', 'duration': 194.592, 'highlights': ['Implementing login functionality and setting up route guards', 'Warning about the insecurity of front-end protection', 'Suggestion for server-side authentication using cookie-based authentication']}], 'duration': 933.161, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ7975422.jpg', 'highlights': ['Route guards in Angular 6 include four types - can activate, can activate child, can deactivate, and resolve, which verify user eligibility, protect child routes, keep routes active, and resolve data before loading routes.', 'The chapter explains the generation of an auth guard using the ng generate command, demonstrating the creation of auth guard files auth.guard.ts and auth.guard.spec.', 'Entering invalid credentials triggers an error message.', 'An example is provided where returning true from the auth guard allows access to a route, while returning false restricts access, demonstrated through accessing the /admin route.']}, {'end': 10324.949, 'segs': [{'end': 9038.907, 'src': 'embed', 'start': 8937.3, 'weight': 0, 'content': [{'end': 8940.92, 'text': "what we're going to essentially do is get the data from back end.", 'start': 8937.3, 'duration': 3.62}, {'end': 8949.188, 'text': "now, what we're doing right now is that we are just hard coding the data which would be visible to the user once the user authenticates.", 'start': 8940.92, 'duration': 8.268}, {'end': 8955.772, 'text': 'that is not of much use, because once you export your application to production,', 'start': 8949.188, 'duration': 6.584}, {'end': 8961.435, 'text': 'whatever data you have by your route protected or whatever you have implemented in angular itself.', 'start': 8955.772, 'duration': 5.663}, {'end': 8969.3, 'text': 'only that is useless, because angular runs on front end, so anyone can reverse, engineer and see what data you are hiding.', 'start': 8961.435, 'duration': 7.865}, {'end': 8978.74, 'text': 'so what you essentially need anyway is sessions and cookies and all that stuff, all that traditional stuff with your angular front end.', 'start': 8969.798, 'duration': 8.942}, {'end': 8983.181, 'text': "so let's just see how we can quickly implement that in a very simple application.", 'start': 8978.74, 'duration': 4.441}, {'end': 8991.403, 'text': 'let me just zoom in a little here and you can see that this code is from our previous tutorial.', 'start': 8983.181, 'duration': 8.222}, {'end': 8997.404, 'text': 'now what i want to do is, once the username and password matches the admin, what i want to.', 'start': 8991.403, 'duration': 6.001}, {'end': 9001.199, 'text': 'I just want to set a session variable here.', 'start': 8998.297, 'duration': 2.902}, {'end': 9010.685, 'text': "I'm gonna just say session user is admin So what it will do is that it would start a session for that particular person All right.", 'start': 9001.799, 'duration': 8.886}, {'end': 9013.467, 'text': 'Now we have set the user to admin.', 'start': 9011.206, 'duration': 2.261}, {'end': 9022.801, 'text': 'What I want to do next is create another file in here, which will be database, dot, PHP and right here.', 'start': 9013.467, 'duration': 9.334}, {'end': 9027.223, 'text': 'now, obviously your back-end would vary from language to language, but this is a very simple example.', 'start': 9022.801, 'duration': 4.422}, {'end': 9030.724, 'text': "with PHP I'm just gonna start my session again.", 'start': 9027.223, 'duration': 3.501}, {'end': 9038.907, 'text': "I'm gonna say user is session and user right.", 'start': 9030.724, 'duration': 8.183}], 'summary': 'Implementing sessions and cookies for secure user authentication and data protection in angular front end.', 'duration': 101.607, 'max_score': 8937.3, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ8937300.jpg'}, {'end': 9270.288, 'src': 'embed', 'start': 9233.378, 'weight': 6, 'content': [{'end': 9237.88, 'text': 'right. so this will contain all the methods associated with once the user is logged in.', 'start': 9233.378, 'duration': 4.502}, {'end': 9241.001, 'text': 'so how do you want to communicate with the backend and all that stuff?', 'start': 9237.88, 'duration': 3.121}, {'end': 9252.893, 'text': 'so here we have our user service in place and what i want to do is again inject my http client right here.', 'start': 9242.705, 'duration': 10.188}, {'end': 9254.455, 'text': 'now we can access this.', 'start': 9252.893, 'duration': 1.562}, {'end': 9270.288, 'text': "so i'm just going to say get some data here and i'm just going to return this dot, http dot, get, and this would be api database, dot, php, right,", 'start': 9254.455, 'duration': 15.833}], 'summary': 'Developing methods for user login and data retrieval using http client.', 'duration': 36.91, 'max_score': 9233.378, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ9233378.jpg'}, {'end': 9611.939, 'src': 'embed', 'start': 9577.041, 'weight': 7, 'content': [{'end': 9586.148, 'text': 'so you can see that pretty much this is the way to implement sessions with your angular application.', 'start': 9577.041, 'duration': 9.107}, {'end': 9589.451, 'text': 'and what we can do is one more thing.', 'start': 9586.148, 'duration': 3.303}, {'end': 9600.993, 'text': 'we can actually redirect the user to the home page if, return this dot auth dot is logged in right.', 'start': 9589.451, 'duration': 11.542}, {'end': 9611.939, 'text': 'so what we can do is just say if this dot auth dot is logged in is false, that means the user is not logged in.', 'start': 9600.993, 'duration': 10.946}], 'summary': 'Implement sessions in angular app, redirect to home page if user is not logged in.', 'duration': 34.898, 'max_score': 9577.041, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ9577041.jpg'}, {'end': 9710.444, 'src': 'embed', 'start': 9684.372, 'weight': 3, 'content': [{'end': 9692.996, 'text': 'okay, so the challenge is to keep the session alive, and we have to do that on the angular front end,', 'start': 9684.372, 'duration': 8.624}, {'end': 9696.457, 'text': 'because on the back end we are already sending and receiving cookies.', 'start': 9692.996, 'duration': 3.461}, {'end': 9701.92, 'text': 'perfectly fine, but the angular also needs to know that the user is actually logged in.', 'start': 9696.457, 'duration': 5.463}, {'end': 9705.441, 'text': 'so there are about two ways to go for this.', 'start': 9701.92, 'duration': 3.521}, {'end': 9710.444, 'text': 'the first one is that to keep the storage persistent, we can make use of local storage.', 'start': 9705.441, 'duration': 5.003}], 'summary': 'Challenge: keep session alive on angular front end using local storage.', 'duration': 26.072, 'max_score': 9684.372, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ9684372.jpg'}, {'end': 10046.518, 'src': 'embed', 'start': 10016.883, 'weight': 5, 'content': [{'end': 10023.185, 'text': 'because at the first run it has that local storage information, but from the second run it does not.', 'start': 10016.883, 'duration': 6.302}, {'end': 10029.767, 'text': "so it's just the auth card kicks in and redirects us to the login form.", 'start': 10023.185, 'duration': 6.582}, {'end': 10032.348, 'text': 'all right, this was our local storage approach.', 'start': 10029.767, 'duration': 2.581}, {'end': 10036.43, 'text': "now let's just take a look at the remote server access.", 'start': 10032.348, 'duration': 4.082}, {'end': 10042.655, 'text': "so what we're gonna do here is that we're gonna remotely access.", 'start': 10037.831, 'duration': 4.824}, {'end': 10046.518, 'text': "we're gonna send a request to the server every time.", 'start': 10042.655, 'duration': 3.863}], 'summary': 'Local storage failed, opting for remote server access instead.', 'duration': 29.635, 'max_score': 10016.883, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ10016883.jpg'}, {'end': 10324.949, 'src': 'embed', 'start': 10293.412, 'weight': 9, 'content': [{'end': 10297.032, 'text': "if you do not understand RxJS, it's completely different thing.", 'start': 10293.412, 'duration': 3.62}, {'end': 10301.893, 'text': 'just remember that this is kind of a thing to work with asynchronous stuff.', 'start': 10297.032, 'duration': 4.861}, {'end': 10305.954, 'text': "so we're gonna take a look at RxJS later on in this series.", 'start': 10301.893, 'duration': 4.061}, {'end': 10310.215, 'text': "but for now let's just stick to what we are doing.", 'start': 10305.954, 'duration': 4.261}, {'end': 10318.256, 'text': "so I'm just gonna import map from the operators, and that is from RxJS slash operators.", 'start': 10310.215, 'duration': 8.041}, {'end': 10324.949, 'text': 'from there we go.', 'start': 10322.208, 'duration': 2.741}], 'summary': 'Rxjs is important for working with asynchronous tasks. we will explore it later in the series.', 'duration': 31.537, 'max_score': 10293.412, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ10293412.jpg'}], 'start': 8908.583, 'title': 'Implementing angular authentication and session management', 'summary': 'Demonstrates implementing route protection and user authentication in an angular application with practical examples using php, setting up the admin component, handling sessions implementation, persistence, local and remote storage access, emphasizing angular 5 onwards and rxjs usage.', 'chapters': [{'end': 9195.73, 'start': 8908.583, 'title': 'Implementing route protection and user authentication', 'summary': 'Demonstrates how to implement route protection in an angular application, emphasizing the need for user authentication and session management to secure sensitive data, with a practical example using php to create a session and restrict access to specific data.', 'duration': 287.147, 'highlights': ['The importance of user authentication and session management in securing sensitive data in a production application is emphasized.', 'Demonstration of creating a session for the user once the username and password match the admin.', 'Practical example of using PHP to restrict access to specific data based on user authentication.']}, {'end': 9577.041, 'start': 9196.37, 'title': 'Angular admin component setup', 'summary': 'Covers setting up the admin component in angular, creating a user service with methods for backend communication, and implementing authentication and session handling, resulting in the ability to access and protect admin-specific data.', 'duration': 380.671, 'highlights': ['Setting up user service for backend communication', 'Implementing authentication and session handling', 'Accessing and protecting admin-specific data']}, {'end': 9852.174, 'start': 9577.041, 'title': 'Angular sessions implementation & persistence', 'summary': 'Discusses implementing sessions in an angular application, including redirecting users based on login status, and explores methods for persisting user login status, such as utilizing local storage and verifying login status with a server.', 'duration': 275.133, 'highlights': ['The chapter discusses implementing sessions in an Angular application and redirecting users based on login status.', 'Exploring methods for persisting user login status, such as utilizing local storage and verifying login status with a server.', 'Demonstrating the usage of local storage to persist user login status in the Angular application.']}, {'end': 10324.949, 'start': 9852.174, 'title': 'Angular authentication and local/remote storage access', 'summary': 'Discusses implementing authentication in angular, including handling local storage for persistent sessions and making remote server requests to verify user login status, with a focus on angular 5 onwards and rxjs usage.', 'duration': 472.775, 'highlights': ['Implementing local storage for persistent sessions', 'Remote server access for verifying user login status', 'Usage of RxJS for asynchronous operations']}], 'duration': 1416.366, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ8908583.jpg', 'highlights': ['Practical example of using PHP to restrict access to specific data based on user authentication.', 'Demonstration of creating a session for the user once the username and password match the admin.', 'The importance of user authentication and session management in securing sensitive data in a production application is emphasized.', 'Exploring methods for persisting user login status, such as utilizing local storage and verifying login status with a server.', 'Implementing local storage for persistent sessions', 'Remote server access for verifying user login status', 'Setting up user service for backend communication', 'Implementing authentication and session handling', 'The chapter discusses implementing sessions in an Angular application and redirecting users based on login status.', 'Usage of RxJS for asynchronous operations', 'Accessing and protecting admin-specific data']}, {'end': 12103.279, 'segs': [{'end': 10405.529, 'src': 'embed', 'start': 10381.284, 'weight': 1, 'content': [{'end': 10390.231, 'text': "so observable is logged in something like this and inside our auth.guard we're just returning risk.status.", 'start': 10381.284, 'duration': 8.947}, {'end': 10395.976, 'text': "okay, so let's just take a minute out of here and see what happened in our can activate guard.", 'start': 10390.231, 'duration': 5.745}, {'end': 10405.529, 'text': "i'm saying that if this variable is true, then we are 100% sure we are logged in because the angular application is not refreshed.", 'start': 10395.976, 'duration': 9.553}], 'summary': 'Auth.guard returns risk.status to verify 100% logged in status.', 'duration': 24.245, 'max_score': 10381.284, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ10381284.jpg'}, {'end': 10850.892, 'src': 'embed', 'start': 10807.419, 'weight': 4, 'content': [{'end': 10823.973, 'text': "so logout component there we are, right and yep, let's just close this file, don't save, go to app modules again.", 'start': 10807.419, 'duration': 16.554}, {'end': 10829.657, 'text': "let's just add another thing, which would be path.", 'start': 10823.973, 'duration': 5.684}, {'end': 10833.961, 'text': 'logout component is logout component.', 'start': 10829.657, 'duration': 4.304}, {'end': 10850.892, 'text': 'there we are and inside our logout component, logout component, we can just say logging you out.', 'start': 10835.56, 'duration': 15.332}], 'summary': 'Adding path to logout component in app modules.', 'duration': 43.473, 'max_score': 10807.419, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ10807419.jpg'}, {'end': 11142.564, 'src': 'embed', 'start': 11110.73, 'weight': 2, 'content': [{'end': 11118.253, 'text': 'but this is essentially the core of creating a login application with angular.', 'start': 11110.73, 'duration': 7.523}, {'end': 11129.516, 'text': "in this part what we're going to do is we're going to create something which allows other users to register on your angular application as well,", 'start': 11118.253, 'duration': 11.263}, {'end': 11136.959, 'text': 'and obviously for that you need to have front-end which the users can use to register validation.', 'start': 11129.516, 'duration': 7.443}, {'end': 11142.564, 'text': "you don't want username admin to be registered by anyone in the world.", 'start': 11136.959, 'duration': 5.605}], 'summary': 'Creating a login application with angular, enabling user registration and implementing front-end validation.', 'duration': 31.834, 'max_score': 11110.73, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ11110730.jpg'}, {'end': 11472.376, 'src': 'embed', 'start': 11445.241, 'weight': 0, 'content': [{'end': 11450.225, 'text': "we're gonna create a lot of changes here to make it a little bit understandable.", 'start': 11445.241, 'duration': 4.984}, {'end': 11455.288, 'text': "also, i'm gonna shift the php back into node now for this application onwards.", 'start': 11450.225, 'duration': 5.063}, {'end': 11460.092, 'text': "so uh, we're gonna see node and mongodb for the database.", 'start': 11455.288, 'duration': 4.804}, {'end': 11467.417, 'text': "so i'm just gonna create a register user with the username and password and confirm password as well,", 'start': 11460.092, 'duration': 7.325}, {'end': 11472.376, 'text': "because we're going to need to validate the same stuff on the backend as well.", 'start': 11469.315, 'duration': 3.061}], 'summary': 'Switching from php to node for backend, using mongodb for database, and implementing user registration with validation.', 'duration': 27.135, 'max_score': 11445.241, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ11445241.jpg'}, {'end': 11941.466, 'src': 'embed', 'start': 11908.435, 'weight': 3, 'content': [{'end': 11916.684, 'text': 'package.json says express as the dependency, I can create an index.js file here and quickly start a server.', 'start': 11908.435, 'duration': 8.249}, {'end': 11931.398, 'text': "so I can say express is Express and then I'm gonna say my app is just the Express server here and we can just say app.listen, what we had one, two,", 'start': 11916.684, 'duration': 14.714}, {'end': 11937.262, 'text': 'three, four, just console.log, server.', 'start': 11931.398, 'duration': 5.864}, {'end': 11941.466, 'text': 'listening at one, two, three, four, right.', 'start': 11937.262, 'duration': 4.204}], 'summary': 'Using package.json, express server quickly started with app.listen', 'duration': 33.031, 'max_score': 11908.435, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ11908435.jpg'}], 'start': 10324.949, 'title': 'Angular and node.js for user authentication and registration', 'summary': 'Discusses angular user authentication and logout, creating an angular login application with php backend, transitioning to node.js and mongodb for user registration, and setting up a node server with express, covering various components and functionalities.', 'chapters': [{'end': 11055.706, 'start': 10324.949, 'title': 'Angular authentication and logout implementation', 'summary': 'Discusses the implementation of user authentication and logout in an angular application, including setting up a can activate guard to check login status, creating a server-side api for login status, and implementing a logout functionality with a logout component and updating the authentication status.', 'duration': 730.757, 'highlights': ['Setting up a can activate guard to check login status', 'Creating a server-side API for login status', 'Implementing a logout functionality with a logout component']}, {'end': 11445.241, 'start': 11056.106, 'title': 'Creating angular login application with php backend', 'summary': 'Demonstrates creating a basic login application with angular front end and php backend, allowing users to register and includes setting up registration and dashboard components, along with implementing user registration functionality.', 'duration': 389.135, 'highlights': ['Creating a basic login application with Angular front end and PHP backend', 'Setting up registration and dashboard components', 'Implementing user registration functionality']}, {'end': 11598.724, 'start': 11445.241, 'title': 'Node and mongodb for user registration', 'summary': 'Focuses on migrating the backend from php to node.js, utilizing node.js and mongodb for user registration, and the implementation of a simple registration form with username, password, and confirm password fields.', 'duration': 153.483, 'highlights': ['Migrating backend to Node.js from PHP to utilize Node.js and MongoDB for user registration', 'Implementation of a simple registration form with username, password, and confirm password fields', 'Importance of validating data on the backend to prevent fraudulent registrations']}, {'end': 11819.393, 'start': 11598.724, 'title': 'Tutorial on front end registration', 'summary': 'Covers setting up the front end for user registration, including sending http requests, form styling, and user authentication, with a plan to proceed to back end setup in the next part.', 'duration': 220.669, 'highlights': ['The front end setup for user registration, including form styling and sending HTTP requests, with a plan to proceed to back end setup in the next part.', 'Discussion about the need to talk about rxjs for better understanding and usage in the tutorial.', 'Details about the front end code setup, including the use of interfaces, authentication, and linking front and back end.']}, {'end': 12103.279, 'start': 11821.143, 'title': 'Setting up a node server with express', 'summary': 'Details the process of setting up a node server with express, including installing dependencies like express and setting up middleware like body parser to communicate in json, with the server listening at port 1234 and handling a registration api endpoint.', 'duration': 282.136, 'highlights': ["The server is set up using Express and initialized to listen at port 1234, with the capability to handle a registration API endpoint, as demonstrated by the code 'app.listen(1234, () => console.log('Server listening at 1234'))'.", "Middleware like body parser is installed and used to communicate in JSON with the server, as shown by the code 'app.use(bodyParser.json())' to handle the request and response for the registration API endpoint.", 'The process involves installing and setting up dependencies like Express and body parser through npm, with a video link provided for guidance, ensuring a smooth setup for the Node server.']}], 'duration': 1778.33, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ10324949.jpg', 'highlights': ['Migrating backend to Node.js from PHP to utilize Node.js and MongoDB for user registration', 'Setting up a can activate guard to check login status', 'Creating a basic login application with Angular front end and PHP backend', 'The server is set up using Express and initialized to listen at port 1234', 'Implementing a logout functionality with a logout component']}, {'end': 14125.326, 'segs': [{'end': 12132.63, 'src': 'embed', 'start': 12103.279, 'weight': 4, 'content': [{'end': 12110.262, 'text': 'so what we can do is pretty much just say, constant username and password.', 'start': 12103.279, 'duration': 6.983}, {'end': 12111.382, 'text': "that's how we are sending it.", 'start': 12110.262, 'duration': 1.12}, {'end': 12113.663, 'text': 'right, um, is request.body.', 'start': 12111.382, 'duration': 2.281}, {'end': 12125.166, 'text': 'and then what we want to do is actually store, store this data on database.', 'start': 12116.32, 'duration': 8.846}, {'end': 12132.63, 'text': "so what we're going to do most probably is something like our user model dot, save,", 'start': 12125.166, 'duration': 7.464}], 'summary': 'Storing username and password on database using user model.', 'duration': 29.351, 'max_score': 12103.279, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ12103279.jpg'}, {'end': 12174.135, 'src': 'embed', 'start': 12148.853, 'weight': 0, 'content': [{'end': 12159.4, 'text': "so, um, that is how you're gonna work with this angular application, and This is pretty much it for setting up the database,", 'start': 12148.853, 'duration': 10.547}, {'end': 12160.561, 'text': 'setting up the backend pad.', 'start': 12159.4, 'duration': 1.161}, {'end': 12163.884, 'text': 'The next thing comes setting up the database operations.', 'start': 12161.021, 'duration': 2.863}, {'end': 12165.926, 'text': 'So that is all for this tutorial.', 'start': 12164.305, 'duration': 1.621}, {'end': 12174.135, 'text': "And in the next one, we're going to set up Mongo and see how to make use of it with our Angular application.", 'start': 12166.447, 'duration': 7.688}], 'summary': 'Setting up angular application and database operations. next, setting up mongo for use with angular.', 'duration': 25.282, 'max_score': 12148.853, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ12148853.jpg'}, {'end': 12598.746, 'src': 'embed', 'start': 12563.344, 'weight': 1, 'content': [{'end': 12568.134, 'text': "so let's just create something like this.", 'start': 12563.344, 'duration': 4.79}, {'end': 12573.962, 'text': 'so we have mongoose dot model and here goes the name of our collection.', 'start': 12568.134, 'duration': 5.828}, {'end': 12575.184, 'text': 'so that should be user.', 'start': 12573.962, 'duration': 1.222}, {'end': 12585.819, 'text': 'and what i want here is the user schema object which we just created.', 'start': 12577.834, 'duration': 7.985}, {'end': 12586.519, 'text': 'all right.', 'start': 12585.819, 'duration': 0.7}, {'end': 12587.54, 'text': 'so what it does?', 'start': 12586.519, 'duration': 1.021}, {'end': 12598.746, 'text': "what it does is that when we are creating the schema, it's mapping the data we are storing in the database and it's mapping that to javascript.", 'start': 12587.54, 'duration': 11.206}], 'summary': 'Creating a user schema object with mongoose to map data to javascript.', 'duration': 35.402, 'max_score': 12563.344, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ12563344.jpg'}, {'end': 13343.533, 'src': 'embed', 'start': 13306.908, 'weight': 2, 'content': [{'end': 13311.951, 'text': "so we're gonna do that in the next video, all right.", 'start': 13306.908, 'duration': 5.043}, {'end': 13318.636, 'text': 'so we have seen that our api works with our um http client.', 'start': 13311.951, 'duration': 6.685}, {'end': 13321.177, 'text': 'that is for for mac and for windows.', 'start': 13318.636, 'duration': 2.541}, {'end': 13322.178, 'text': 'postman you can use.', 'start': 13321.177, 'duration': 1.001}, {'end': 13327.124, 'text': "So now let's just implement that inside our Angular application.", 'start': 13322.762, 'duration': 4.362}, {'end': 13328.625, 'text': "So here's our app.", 'start': 13327.865, 'duration': 0.76}, {'end': 13332.787, 'text': "It's working nice so far.", 'start': 13330.726, 'duration': 2.061}, {'end': 13334.828, 'text': 'Registration and login seems to work.', 'start': 13332.807, 'duration': 2.021}, {'end': 13343.533, 'text': 'What I want to do is right here inside my login component.', 'start': 13335.829, 'duration': 7.704}], 'summary': 'Implementing api in angular app, registration and login are functional.', 'duration': 36.625, 'max_score': 13306.908, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ13306908.jpg'}, {'end': 13932.749, 'src': 'embed', 'start': 13905.689, 'weight': 3, 'content': [{'end': 13911.973, 'text': "which means that the cookie would not be created for someone who's not authenticated right.", 'start': 13905.689, 'duration': 6.284}, {'end': 13922.419, 'text': 'and then you can also have resave as false, which just says that do not force resaving the cookie over your back end when no change is made.', 'start': 13911.973, 'duration': 10.446}, {'end': 13925.962, 'text': 'so, with that being done.', 'start': 13923.82, 'duration': 2.142}, {'end': 13927.843, 'text': 'we are ready to use express sessions.', 'start': 13925.962, 'duration': 1.881}, {'end': 13932.749, 'text': 'so right here, when we do api login, When we have success.', 'start': 13927.843, 'duration': 4.906}], 'summary': 'Express sessions set up with options for authentication and resaving, ready for use in api login.', 'duration': 27.06, 'max_score': 13905.689, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ13905689.jpg'}], 'start': 12103.279, 'title': 'User data storage and authentication in angular', 'summary': 'Discusses storing user data in a database, setting up mongodb and mongoose, creating user authentication with mongoose, testing api with http client, and setting up express sessions for user authentication in an angular application.', 'chapters': [{'end': 12148.853, 'start': 12103.279, 'title': 'Storing user data in database', 'summary': 'Discusses the process of storing user data in a database, including the use of constant username and password, the method for storing data in the model, and the importance of processing data before saving, such as hashing passwords for security.', 'duration': 45.574, 'highlights': ['Storing data in the model involves using constant username and password, accessed through request.body.', 'The process includes defining a method in the model to process data before saving, such as hashing passwords for security.', 'Ensuring good practice by hashing passwords before saving is highlighted as an important security measure.']}, {'end': 12653.28, 'start': 12148.853, 'title': 'Setting up mongodb and mongoose', 'summary': 'Covers setting up mongodb, including installing mongodb and mongoose, and creating schemas for database operations in an angular application.', 'duration': 504.427, 'highlights': ['The chapter covers setting up MongoDB, including installing MongoDB and Mongoose, and creating schemas for database operations in an Angular application.', 'The tutorial provides guidance on setting up MongoDB, installing Mongoose, and creating schemas for database operations in an Angular application.', 'Instructions are provided on installing MongoDB and Mongoose, as well as creating schemas for database operations in an Angular application.']}, {'end': 12900.368, 'start': 12653.28, 'title': 'Creating user authentication with mongoose', 'summary': 'Discusses creating a user authentication system using mongoose, including separating files into schemas and models, implementing user login functionality, and creating a user collection in the angular six database.', 'duration': 247.088, 'highlights': ['The chapter discusses creating a user authentication system using Mongoose, including separating files into schemas and models, implementing user login functionality, and creating a user collection in the Angular six database.', 'The tutorial emphasizes the importance of using Mongoose for simplifying the process of creating schemas and models, making life a lot easier.', "The tutorial demonstrates the implementation of user login functionality using Mongoose, including using the 'find one' method to validate user credentials and creating a user session upon successful login.", "It mentions the use of async functions and the 'await' keyword to simplify the code, enhancing the efficiency and readability of the authentication system.", 'The chapter also covers creating a user collection in the Angular six database, manually inserting a record, and emphasizing the need to define data according to the schema for proper data insertion.']}, {'end': 13805.326, 'start': 12901.568, 'title': 'Testing api with http client', 'summary': 'Details the process of testing an api using an http client, resolving connection issues, debugging redundant collections, and implementing registration and login functionalities with validation and linking to the front end.', 'duration': 903.758, 'highlights': ['The chapter details the process of testing an API using an HTTP client, resolving connection issues, debugging redundant collections, and implementing registration and login functionalities with validation and linking to the front end.', "The speaker mentions using the tool 'paw' for Mac and 'postman' for Windows to perform HTTP requests and test APIs within an interface, eliminating the need for browser involvement and JavaScript coding.", 'The speaker demonstrates testing the API by sending a JSON request with a specific email and password, encountering connection refusal due to a previously declared response variable, and debugging by correcting the collection name and content to successfully test the API.', 'The process of implementing registration and login functionalities is explained, including handling existing user checks, successful registration messages, and redirecting users to the dashboard upon successful login.', 'The speaker discusses the integration of the backend with minimal validation and the need to link the functionalities with the front end in the subsequent video.']}, {'end': 14125.326, 'start': 13805.506, 'title': 'Setting up express sessions for user authentication', 'summary': 'Covers setting up express sessions for user authentication, including installing the express session module, initializing session with secret key, and using express sessions for user login and data retrieval.', 'duration': 319.82, 'highlights': ['Setting up express sessions with secret key and options like save uninitialized and resave as false to manage user authentication.', 'Using express sessions to set user data upon successful login and retrieving user data using app.get.', 'Installing express session module to create and send cookies to the client for user authentication.']}], 'duration': 2022.047, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ12103279.jpg', 'highlights': ['The chapter covers setting up MongoDB, including installing MongoDB and Mongoose, and creating schemas for database operations in an Angular application.', 'The chapter discusses creating a user authentication system using Mongoose, including separating files into schemas and models, implementing user login functionality, and creating a user collection in the Angular six database.', 'The chapter details the process of testing an API using an HTTP client, resolving connection issues, debugging redundant collections, and implementing registration and login functionalities with validation and linking to the front end.', 'Setting up express sessions with secret key and options like save uninitialized and resave as false to manage user authentication.', 'Storing data in the model involves using constant username and password, accessed through request.body.']}, {'end': 16335.114, 'segs': [{'end': 14267.05, 'src': 'embed', 'start': 14216.485, 'weight': 0, 'content': [{'end': 14227.513, 'text': "let's just see what we get.", 'start': 14216.485, 'duration': 11.028}, {'end': 14236.299, 'text': 'what if i set something like request dot session dot test equal to one here?', 'start': 14227.513, 'duration': 8.786}, {'end': 14243.524, 'text': 'and then if we reload this and reload it again, okay?', 'start': 14236.299, 'duration': 7.225}, {'end': 14245.795, 'text': 'so we are not okay.', 'start': 14243.524, 'duration': 2.271}, {'end': 14254.441, 'text': 'so now, adding request dot session dot save allows us to actually save changes to the session,', 'start': 14245.795, 'duration': 8.646}, {'end': 14267.05, 'text': 'and what we have is that we just need to put this request dot session dot save after we have made this change right.', 'start': 14254.441, 'duration': 12.609}], 'summary': 'Adding request.session.save allows saving changes to the session.', 'duration': 50.565, 'max_score': 14216.485, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ14216485.jpg'}, {'end': 14384.918, 'src': 'embed', 'start': 14339.702, 'weight': 1, 'content': [{'end': 14344.705, 'text': 'api is logged in and then request response.', 'start': 14339.702, 'duration': 5.003}, {'end': 14353.633, 'text': "i'm just gonna say uh, what does it expect me to send status?", 'start': 14344.705, 'duration': 8.928}, {'end': 14370.936, 'text': "right? so i'm just going to say response.json, status is equal to request.session.email actually exists, right, so that is how we're gonna check it.", 'start': 14353.633, 'duration': 17.303}, {'end': 14377.657, 'text': 'so once that is done, our this part is solved, the get part.', 'start': 14370.936, 'duration': 6.721}, {'end': 14382.338, 'text': 'then what we have is our auth card is logged in.', 'start': 14377.657, 'duration': 4.681}, {'end': 14384.918, 'text': "then we're gonna get this.", 'start': 14382.338, 'duration': 2.58}], 'summary': 'Logging in, sending status, and checking for session email existence for api handling.', 'duration': 45.216, 'max_score': 14339.702, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ14339702.jpg'}, {'end': 14595.247, 'src': 'embed', 'start': 14552.775, 'weight': 2, 'content': [{'end': 14559.459, 'text': 'what we had was that ng on in it got us some data.', 'start': 14552.775, 'duration': 6.684}, {'end': 14562.921, 'text': 'so if I go to dashboard again, this dot.', 'start': 14559.459, 'duration': 3.462}, {'end': 14563.942, 'text': 'user dot.', 'start': 14562.921, 'duration': 1.021}, {'end': 14566.404, 'text': 'get data or subscribe data.', 'start': 14563.942, 'duration': 2.462}, {'end': 14567.685, 'text': 'the stock messages data dot.', 'start': 14566.404, 'duration': 1.281}, {'end': 14569.366, 'text': 'message. cool.', 'start': 14567.685, 'duration': 1.681}, {'end': 14576.41, 'text': "now what I'm gonna do is an user user service.", 'start': 14569.366, 'duration': 7.044}, {'end': 14580.573, 'text': 'get data, my data, API data.', 'start': 14576.41, 'duration': 4.163}, {'end': 14584.876, 'text': 'just like that, my data would be modified.', 'start': 14582.233, 'duration': 2.643}, {'end': 14595.247, 'text': 'status email and code for now right.', 'start': 14584.876, 'duration': 10.371}], 'summary': 'Gathering and modifying data through user service api.', 'duration': 42.472, 'max_score': 14552.775, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ14552775.jpg'}, {'end': 15024.528, 'src': 'embed', 'start': 14942.052, 'weight': 3, 'content': [{'end': 14954.62, 'text': 'And if you take a look at the logout part, what we are doing for logout is that we are okay, the user is involved.', 'start': 14942.052, 'duration': 12.568}, {'end': 14962.811, 'text': 'Logout gets us API slash logout, Then subscribing to data.', 'start': 14956.267, 'duration': 6.544}, {'end': 14966.533, 'text': 'if data dot success is true, what should it return?', 'start': 14962.811, 'duration': 3.722}, {'end': 14969.335, 'text': 'Success, boolean, right?', 'start': 14968.054, 'duration': 1.281}, {'end': 14977.44, 'text': 'So now we do something like and this is a get request.', 'start': 14969.896, 'duration': 7.544}, {'end': 14990.64, 'text': 'Yep, so app dot, get Logout, api slash logout, request response.', 'start': 14977.44, 'duration': 13.2}, {'end': 14995.501, 'text': 'now we can just pretty much say request dot session.', 'start': 14990.64, 'duration': 4.861}, {'end': 15001.603, 'text': "uh, we can actually destroy the session as well, but i'm just gonna do something like that,", 'start': 14995.501, 'duration': 6.102}, {'end': 15007.184, 'text': 'because this is easy on eyes right now you cannot actually destroy the session as well using request session.', 'start': 15001.603, 'duration': 5.581}, {'end': 15010.085, 'text': 'destroy, and that is it.', 'start': 15007.184, 'duration': 2.901}, {'end': 15014.806, 'text': "i'm gonna send, uh, response.json.", 'start': 15010.085, 'duration': 4.721}, {'end': 15021.466, 'text': 'success is true.', 'start': 15017.742, 'duration': 3.724}, {'end': 15024.528, 'text': 'now we should be good to go now, her, log out.', 'start': 15021.466, 'duration': 3.062}], 'summary': 'The logout process involves a get request to api/logout, checking for success, and destroying the session if successful.', 'duration': 82.476, 'max_score': 14942.052, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ14942052.jpg'}, {'end': 15193.12, 'src': 'embed', 'start': 15162.753, 'weight': 5, 'content': [{'end': 15165.175, 'text': 'we are good one, two.', 'start': 15162.753, 'duration': 2.422}, {'end': 15165.916, 'text': 'hit summit.', 'start': 15165.175, 'duration': 0.741}, {'end': 15174.144, 'text': 'we log in, we log out, and this is how pretty much everything is working and we cannot just go to dashboard directly.', 'start': 15165.916, 'duration': 8.228}, {'end': 15175.144, 'text': 'it does not really work.', 'start': 15174.144, 'duration': 1}, {'end': 15186.116, 'text': 'so that is how pretty much we would create a very basic registration application and what we are left with is just the validation part.', 'start': 15176.13, 'duration': 9.986}, {'end': 15193.12, 'text': 'so yeah, and one more thing, that how we can allow user to edit the code the user has.', 'start': 15186.116, 'duration': 7.004}], 'summary': 'Creating a basic registration application with validation and user code editing.', 'duration': 30.367, 'max_score': 15162.753, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ15162753.jpg'}, {'end': 15625.32, 'src': 'embed', 'start': 15593.933, 'weight': 6, 'content': [{'end': 15595.154, 'text': 'i update the code.', 'start': 15593.933, 'duration': 1.221}, {'end': 15596.716, 'text': 'i get your code was updated.', 'start': 15595.154, 'duration': 1.562}, {'end': 15603.511, 'text': 'fair enough, i reload this page And you can see that our code is updated.', 'start': 15596.716, 'duration': 6.795}, {'end': 15611.294, 'text': 'So this is basically how you would expose something, some sort of interface to update user details,', 'start': 15604.111, 'duration': 7.183}, {'end': 15616.796, 'text': 'to let users update their own details on your Angular front end with Mongo and Node.', 'start': 15611.294, 'duration': 5.502}, {'end': 15622.038, 'text': 'And similarly, you can create a similar interface for updating passwords.', 'start': 15617.457, 'duration': 4.581}, {'end': 15625.32, 'text': 'And, you know, you can do pretty much everything now.', 'start': 15622.799, 'duration': 2.521}], 'summary': 'Update user details and passwords on angular front end with mongo and node.', 'duration': 31.387, 'max_score': 15593.933, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ15593933.jpg'}, {'end': 15743.113, 'src': 'embed', 'start': 15715.431, 'weight': 7, 'content': [{'end': 15727.879, 'text': 'okay, so inbuilt pipes pretty much means that you can customize or you can basically change the format of one type of date to another type.', 'start': 15715.431, 'duration': 12.448}, {'end': 15736.366, 'text': 'you can make stuff uppercase, you can make stuff lowercase, you can format a number as a currency value or or as a percentage value.', 'start': 15727.879, 'duration': 8.487}, {'end': 15740.17, 'text': 'so these are pretty much what angular gives you out of the box.', 'start': 15736.366, 'duration': 3.804}, {'end': 15743.113, 'text': 'sure, you can code your custom pipes.', 'start': 15740.17, 'duration': 2.943}], 'summary': 'Angular provides inbuilt pipes to customize and format data, including uppercase, lowercase, currency, and percentage values, with the option to create custom pipes.', 'duration': 27.682, 'max_score': 15715.431, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ15715431.jpg'}, {'end': 15791.217, 'src': 'embed', 'start': 15761.828, 'weight': 8, 'content': [{'end': 15771.07, 'text': 'this um repository here, mayhem, pd, angular 6, youtube and master branch is not really the branch i would suggest you to clone.', 'start': 15761.828, 'duration': 9.242}, {'end': 15773.671, 'text': 'just go to this login app.', 'start': 15771.07, 'duration': 2.601}, {'end': 15777.912, 'text': 'is the branch which just consists of the app when the login was complete?', 'start': 15773.671, 'duration': 4.241}, {'end': 15791.217, 'text': 'um, you can um clone this registration app branch to get all the files which are just just before this video right.', 'start': 15778.912, 'duration': 12.305}], 'summary': 'Clone the registration app branch to get all the files just before the video.', 'duration': 29.389, 'max_score': 15761.828, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ15761828.jpg'}, {'end': 15871.471, 'src': 'embed', 'start': 15844.154, 'weight': 9, 'content': [{'end': 15856.041, 'text': "and let's just create this new project by saying ng new, and let's name it something like, uh, pipes, i don't know, but that's, uh,", 'start': 15844.154, 'duration': 11.887}, {'end': 15857.482, 'text': 'just a couple of tutorials.', 'start': 15856.041, 'duration': 1.441}, {'end': 15860.144, 'text': 'so yeah, fine.', 'start': 15857.482, 'duration': 2.662}, {'end': 15865.927, 'text': 'so we just named our project pipes and let it install its dependencies.', 'start': 15860.144, 'duration': 5.783}, {'end': 15871.471, 'text': "now i believe it might pick something from cache, but i'm not sure.", 'start': 15865.927, 'duration': 5.544}], 'summary': "Created a new project 'pipes' using ng new command, installing dependencies.", 'duration': 27.317, 'max_score': 15844.154, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ15844154.jpg'}, {'end': 16147.865, 'src': 'embed', 'start': 16127.254, 'weight': 10, 'content': [{'end': 16138.54, 'text': 'the option one which the angular team has decided for this currency inbuilt pipe is the actual format in which you want to display that currency.', 'start': 16127.254, 'duration': 11.286}, {'end': 16147.865, 'text': 'similarly, if you take a look here inside this currency pipe, you can see that right here we can see what angular team has decided.', 'start': 16138.54, 'duration': 9.325}], 'summary': 'Angular team decided on the format for currency inbuilt pipe.', 'duration': 20.611, 'max_score': 16127.254, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ16127254.jpg'}, {'end': 16209.048, 'src': 'embed', 'start': 16175.712, 'weight': 12, 'content': [{'end': 16184.198, 'text': "and what we can do is, for example um, let's just say i want to toggle between different currencies.", 'start': 16175.712, 'duration': 8.486}, {'end': 16193.245, 'text': 'so what i can do is i can create a button here which, on click um, says toggle inr and usd.', 'start': 16184.198, 'duration': 9.047}, {'end': 16195.927, 'text': "let's just say right.", 'start': 16193.245, 'duration': 2.682}, {'end': 16200.51, 'text': 'and what it does is toggle currency.', 'start': 16195.927, 'duration': 4.583}, {'end': 16209.048, 'text': 'and instead of hardcoding this, we can say format here, something like this.', 'start': 16200.51, 'duration': 8.538}], 'summary': 'Creating button to toggle between currencies for dynamic formatting.', 'duration': 33.336, 'max_score': 16175.712, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ16175712.jpg'}, {'end': 16335.114, 'src': 'embed', 'start': 16308.74, 'weight': 13, 'content': [{'end': 16314.743, 'text': 'If INR is true, that means I want to return the price in Indian rupees.', 'start': 16308.74, 'duration': 6.003}, {'end': 16318.185, 'text': "So let's just take a conversion factor of 65 here.", 'start': 16314.903, 'duration': 3.282}, {'end': 16319.866, 'text': "Let's just assume that.", 'start': 16318.925, 'duration': 0.941}, {'end': 16324.868, 'text': "So now if you take a look, you can see that we get somebody who's made 3 to 5 zero.", 'start': 16320.426, 'duration': 4.442}, {'end': 16329.79, 'text': 'We can toggle it and it converts to $50.', 'start': 16325.488, 'duration': 4.302}, {'end': 16335.114, 'text': 'thing you can do with other filters are the predefined filters we have right here.', 'start': 16329.79, 'duration': 5.324}], 'summary': 'Using a conversion factor of 65, the price in indian rupees is toggled to $50, with 3 to 5 zeros, along with other predefined filters available.', 'duration': 26.374, 'max_score': 16308.74, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ16308740.jpg'}], 'start': 14125.326, 'title': 'User session, authentication, updating code, and angular pipes', 'summary': 'Covers handling user sessions, debugging, user authentication, logout flow, updating user code in angular, and using inbuilt pipes for formatting output.', 'chapters': [{'end': 14633.861, 'start': 14125.326, 'title': 'Handling user sessions and data retrieval', 'summary': 'Focuses on debugging a user session issue, resolving it by saving session changes, implementing a route to check user login status, and retrieving user data by creating an api endpoint and modifying the dashboard component to display user information.', 'duration': 508.535, 'highlights': ['By adding request.session.save after making changes, the user session issue is resolved, as verified by retrieving user data and checking the user login status.', "The implementation of a route to check user login status is demonstrated by using 'app.post' to validate the existence of 'request.session.email', ensuring secure user authentication.", "A new API endpoint 'API data' is created to return user information such as email and code, which is then utilized in the dashboard component to display user data and loading messages based on the retrieved status."]}, {'end': 15186.116, 'start': 14635.842, 'title': 'User authentication and logout flow', 'summary': 'Covers the user authentication and logout flow within an application, demonstrating the process of user login, logout, handling of session data, and potential errors encountered during the process.', 'duration': 550.274, 'highlights': ['The process of user authentication and logout flow is demonstrated, including user login, logout, handling of session data, and potential errors encountered during the process.', 'The code is shown for logging out a user, destroying the session, and handling the response, illustrating the steps involved in the logout process.', 'Demonstration of user registration, success message, and handling of duplicate username during the registration process is shown, outlining the steps involved in user registration and potential issues encountered.', 'The chapter showcases the process of user authentication and logout flow, including user login, logout, handling of session data, and potential errors encountered during the process.']}, {'end': 15743.113, 'start': 15186.116, 'title': 'Updating user code and using pipes in angular', 'summary': 'Discusses updating user code through an angular interface, including creating methods for updating code, handling success and error messages, and backend processes. it also covers the use of pipes in angular for formatting output and the advantages of using inbuilt pipes over custom ones.', 'duration': 556.997, 'highlights': ['The chapter discusses updating user code through an Angular interface', 'The use of pipes in Angular for formatting output and the advantages of using inbuilt pipes over custom ones']}, {'end': 16041.307, 'start': 15743.113, 'title': 'Angular 6 source code and new project', 'summary': "Covers the process of downloading source code for the web series, cloning specific branches, and creating a new angular 6 project named 'pipes', including a demonstration of serving the project and making changes to the app component.", 'duration': 298.194, 'highlights': ["The repository 'mayhem, pd, angular 6, youtube' contains source code related to the web series, and it is recommended to clone the 'login app' branch or the 'registration app' branch for working with the code.", "A new Angular 6 project named 'pipes' is created using the command 'ng new pipes', and the project dependencies are installed.", "The process of serving the 'pipes' project and making changes to the app component is demonstrated, including modifying the HTML content and displaying a specific amount as currency."]}, {'end': 16335.114, 'start': 16041.307, 'title': 'Angular inbuilt pipe for currency display', 'summary': 'Discusses utilizing the inbuilt currency pipe in angular to display currency symbols and toggle between different currencies using properties and methods.', 'duration': 293.807, 'highlights': ['Utilizing the inbuilt currency pipe to display different currency symbols based on user input', 'Implementing a toggle functionality to switch between different currencies using get properties and methods', 'Defining a conversion factor for currency conversion and utilizing predefined filters for various operations']}], 'duration': 2209.788, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ14125326.jpg', 'highlights': ['By adding request.session.save after making changes, the user session issue is resolved, as verified by retrieving user data and checking the user login status.', "The implementation of a route to check user login status is demonstrated by using 'app.post' to validate the existence of 'request.session.email', ensuring secure user authentication.", "A new API endpoint 'API data' is created to return user information such as email and code, which is then utilized in the dashboard component to display user data and loading messages based on the retrieved status.", 'The process of user authentication and logout flow is demonstrated, including user login, logout, handling of session data, and potential errors encountered during the process.', 'The code is shown for logging out a user, destroying the session, and handling the response, illustrating the steps involved in the logout process.', 'Demonstration of user registration, success message, and handling of duplicate username during the registration process is shown, outlining the steps involved in user registration and potential issues encountered.', 'The chapter discusses updating user code through an Angular interface.', 'The use of pipes in Angular for formatting output and the advantages of using inbuilt pipes over custom ones.', "The repository 'mayhem, pd, angular 6, youtube' contains source code related to the web series, and it is recommended to clone the 'login app' branch or the 'registration app' branch for working with the code.", "A new Angular 6 project named 'pipes' is created using the command 'ng new pipes', and the project dependencies are installed.", "The process of serving the 'pipes' project and making changes to the app component is demonstrated, including modifying the HTML content and displaying a specific amount as currency.", 'Utilizing the inbuilt currency pipe to display different currency symbols based on user input.', 'Implementing a toggle functionality to switch between different currencies using get properties and methods.', 'Defining a conversion factor for currency conversion and utilizing predefined filters for various operations.']}, {'end': 17600.23, 'segs': [{'end': 16379.564, 'src': 'embed', 'start': 16355.241, 'weight': 0, 'content': [{'end': 16368.677, 'text': 'there can be two types of pipes inbuilt, which we looked at in the last video, and custom pipes inbuilt could be any one of these and the custom.', 'start': 16355.241, 'duration': 13.436}, {'end': 16370.879, 'text': 'how would we create a custom pipe?', 'start': 16368.677, 'duration': 2.202}, {'end': 16376.402, 'text': 'is that we can make use of the angular CLI itself.', 'start': 16370.879, 'duration': 5.523}, {'end': 16379.564, 'text': 'so what I can do is right here.', 'start': 16376.402, 'duration': 3.162}], 'summary': 'The transcript discusses creating custom pipes using the angular cli.', 'duration': 24.323, 'max_score': 16355.241, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ16355241.jpg'}, {'end': 16489.767, 'src': 'embed', 'start': 16417.902, 'weight': 1, 'content': [{'end': 16420.365, 'text': "so let's just see what changes module.ts contains.", 'start': 16417.902, 'duration': 2.463}, {'end': 16432.43, 'text': 'now can see that declaration has reverse pipe in it now and as you can see, we did a fundamental mistake, that is, writing pipe in the name of pipe,', 'start': 16420.365, 'duration': 12.065}, {'end': 16434.951, 'text': 'because angular also does that.', 'start': 16432.43, 'duration': 2.521}, {'end': 16444.015, 'text': "so let's just quickly remove that and let's just remove our pipe as well.", 'start': 16434.951, 'duration': 9.064}, {'end': 16445.314, 'text': 'who wants a reverse pipe?', 'start': 16444.015, 'duration': 1.299}, {'end': 16448.436, 'text': 'dot pipe?', 'start': 16445.314, 'duration': 3.122}, {'end': 16449.897, 'text': 'and there we are.', 'start': 16448.436, 'duration': 1.461}, {'end': 16453.213, 'text': "Let's just give it one more shot.", 'start': 16451.912, 'duration': 1.301}, {'end': 16459.498, 'text': 'ng generate pipe, reverse, which creates a reverse pipe for us.', 'start': 16455.195, 'duration': 4.303}, {'end': 16460.499, 'text': 'There we go.', 'start': 16460.038, 'duration': 0.461}, {'end': 16470.205, 'text': 'And now, if you take a look inside this reverse pipe.ts, you can see that we get this function automatically created for us,', 'start': 16461.619, 'duration': 8.586}, {'end': 16471.628, 'text': 'which is a transform function.', 'start': 16470.205, 'duration': 1.423}, {'end': 16475.33, 'text': "So let's just see what is happening here.", 'start': 16472.428, 'duration': 2.902}, {'end': 16489.767, 'text': "If I console, log this value and arguments, let's just say get this, arguments like this and arguments right now.", 'start': 16476.071, 'duration': 13.696}], 'summary': 'Created a reverse pipe in module.ts and observed the generated transform function.', 'duration': 71.865, 'max_score': 16417.902, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ16417901.jpg'}, {'end': 16579.898, 'src': 'embed', 'start': 16522.556, 'weight': 2, 'content': [{'end': 16531.021, 'text': "so now what i'm gonna do is right here write this in quotes and pipe it with reverse.", 'start': 16522.556, 'duration': 8.465}, {'end': 16532.882, 'text': "let's just see what happens.", 'start': 16531.021, 'duration': 1.861}, {'end': 16535.443, 'text': 'you can see that we do not get that text.', 'start': 16532.882, 'duration': 2.561}, {'end': 16548.129, 'text': 'Now. the reason why we do not get that text is that whatever you return from this transform function would be actually the new value which this interpolation displays.', 'start': 16535.984, 'duration': 12.145}, {'end': 16557.492, 'text': 'So for example, if I return code dam here, right? You can see that code dam is displayed here.', 'start': 16548.609, 'duration': 8.883}, {'end': 16561.674, 'text': 'So whatever you return from the transform function would be displayed.', 'start': 16558.073, 'duration': 3.601}, {'end': 16573.814, 'text': 'Now, if we go to console here, we can see that in console we do get this is another test string and an array of elements, no element, a length,', 'start': 16561.694, 'duration': 12.12}, {'end': 16575.315, 'text': 'zero array.', 'start': 16573.814, 'duration': 1.501}, {'end': 16579.898, 'text': 'so what we want to do is actually give it some options.', 'start': 16575.315, 'duration': 4.583}], 'summary': 'Demonstration of using transform function to display new values in console and interpolation.', 'duration': 57.342, 'max_score': 16522.556, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ16522556.jpg'}, {'end': 16698.255, 'src': 'embed', 'start': 16656.35, 'weight': 3, 'content': [{'end': 16673.506, 'text': 'so i can say if args1 is equal to single quote, then what i want is new string is equal to a single quote plus new string.', 'start': 16656.35, 'duration': 17.156}, {'end': 16687.35, 'text': 'else, if args1 is double quote, I want new string is double quotes plus a new string, simple enough,', 'start': 16673.506, 'duration': 13.844}, {'end': 16698.255, 'text': 'and now I can just pretty much return this new string and take a look in the browser, so you can see if you carefully note.', 'start': 16687.35, 'duration': 10.905}], 'summary': 'Code checks for single or double quotes and appends accordingly.', 'duration': 41.905, 'max_score': 16656.35, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ16656349.jpg'}, {'end': 16811.079, 'src': 'embed', 'start': 16729.866, 'weight': 8, 'content': [{'end': 16737.057, 'text': 'there is a lot to do more in pipes as well, but this is how, basically, you would create your custom pipe.', 'start': 16729.866, 'duration': 7.191}, {'end': 16746.343, 'text': 'now you can format your text, beautify it, do whatever you want to do with it, and basically, yeah.', 'start': 16737.057, 'duration': 9.286}, {'end': 16747.603, 'text': 'so what?', 'start': 16746.343, 'duration': 1.26}, {'end': 16756.249, 'text': 'what else you can do is, uh, for example, you can just specify a bunch of strings here, for example.', 'start': 16747.603, 'duration': 8.646}, {'end': 16766.904, 'text': "um, let's just say you specify some strings here, separated by a full stop or something, and you can then pipe it to display it as a list.", 'start': 16756.249, 'duration': 10.655}, {'end': 16772.972, 'text': "that's a very useful case you might need to handle somewhere in your code.", 'start': 16766.904, 'duration': 6.068}, {'end': 16777.838, 'text': "so yeah, that's pretty much it how you would work with custom pipes.", 'start': 16772.972, 'duration': 4.866}, {'end': 16779.22, 'text': "and that's all for this tutorial.", 'start': 16777.838, 'duration': 1.382}, {'end': 16785.347, 'text': 'first things, first, what are directives?', 'start': 16782.446, 'duration': 2.901}, {'end': 16796.732, 'text': 'so directives, as you know that they can add custom behavior to your html and basically, the directives are just the attributes you add.', 'start': 16785.347, 'duration': 11.385}, {'end': 16799.113, 'text': 'custom attributes you add on your html tag.', 'start': 16796.732, 'duration': 2.381}, {'end': 16803.695, 'text': 'For example, ng-for is a directive.', 'start': 16799.793, 'duration': 3.902}, {'end': 16805.316, 'text': 'ng-if would be a directive.', 'start': 16803.695, 'duration': 1.621}, {'end': 16808.097, 'text': 'And basically, I have a list of directives here.', 'start': 16805.916, 'duration': 2.181}, {'end': 16811.079, 'text': 'Directives can be inbuilt and custom.', 'start': 16808.978, 'duration': 2.101}], 'summary': 'Creating and using custom pipes in angular for text formatting and list display.', 'duration': 81.213, 'max_score': 16729.866, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ16729866.jpg'}, {'end': 17055.258, 'src': 'embed', 'start': 17023.374, 'weight': 12, 'content': [{'end': 17025.356, 'text': 'well, this is um unnecessary.', 'start': 17023.374, 'duration': 1.982}, {'end': 17027.898, 'text': 'this is adding unnecessary code to your application.', 'start': 17025.356, 'duration': 2.542}, {'end': 17040.347, 'text': 'so what angular did is that it provides an else thing here which you can make use of to um actually display content if this condition is false.', 'start': 17027.898, 'duration': 12.449}, {'end': 17042.909, 'text': 'so to do that you have to add a semicolon.', 'start': 17040.347, 'duration': 2.562}, {'end': 17048.473, 'text': 'after that, write else and your templates reference here.', 'start': 17042.909, 'duration': 5.564}, {'end': 17050.614, 'text': 'now, what do i mean by that?', 'start': 17048.473, 'duration': 2.141}, {'end': 17055.258, 'text': 'i believe i have covered that earlier, as far as i can remember.', 'start': 17050.614, 'duration': 4.644}], 'summary': "Angular provides 'else' to display content if condition is false.", 'duration': 31.884, 'max_score': 17023.374, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ17023374.jpg'}, {'end': 17249.024, 'src': 'embed', 'start': 17223.346, 'weight': 4, 'content': [{'end': 17231.072, 'text': 'so this is how basically you would work with ng if here now, if we take a look at the next directive,', 'start': 17223.346, 'duration': 7.726}, {'end': 17242.28, 'text': "we have on the list is ng switch and in the ng switch is pretty much just like ng, if it's the same thing we used to do in programming languages,", 'start': 17231.072, 'duration': 11.208}, {'end': 17249.024, 'text': 'like, for example um, javascript, if you have if condition, then do this else.', 'start': 17242.28, 'duration': 6.744}], 'summary': 'Introduction to ng-switch directive in angularjs, similar to if condition in programming languages.', 'duration': 25.678, 'max_score': 17223.346, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ17223346.jpg'}, {'end': 17480.297, 'src': 'embed', 'start': 17427.303, 'weight': 6, 'content': [{'end': 17434.167, 'text': 'You can see that this is echoed out as it is without Angular evaluating this expression.', 'start': 17427.303, 'duration': 6.864}, {'end': 17437.169, 'text': 'So this is how ng-nonbindable would be used.', 'start': 17434.588, 'duration': 2.581}, {'end': 17448.317, 'text': 'Then we have ng-class as well, which you might have guessed that could be used to display a lot of classes based upon certain conditions.', 'start': 17438.23, 'duration': 10.087}, {'end': 17470.353, 'text': "So let's just say I have something like data is line javascript used on web?", 'start': 17448.958, 'duration': 21.395}, {'end': 17480.297, 'text': "and let's just say lang is swift used on ios.", 'start': 17470.353, 'duration': 9.944}], 'summary': 'Demonstrating ng-nonbindable and ng-class in angular for conditional class display.', 'duration': 52.994, 'max_score': 17427.303, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ17427303.jpg'}], 'start': 16335.114, 'title': 'Angular custom pipes and javascript transform function', 'summary': 'Covers creating custom pipes in angular, demonstrating automatic function creation, and the usage of transform function and options in javascript, showcasing the impact on interpolation and string manipulation.', 'chapters': [{'end': 16522.556, 'start': 16335.114, 'title': 'Angular custom pipes: creating and implementing', 'summary': 'Discusses creating custom pipes in angular using the cli, explaining the process and highlighting the mistakes to avoid, such as naming conventions, and demonstrates the automatic function creation for transforming data.', 'duration': 187.442, 'highlights': ['The process of creating custom pipes in Angular using the CLI is explained, emphasizing the generation and incorporation of the reverse pipe.', "The mistake of writing 'pipe' in the name of the pipe is highlighted, demonstrating the need to correct naming conventions for the pipe.", 'The automatic creation of the transform function in the reverse pipe is demonstrated, showcasing the functionality provided by Angular CLI for custom pipe creation.']}, {'end': 16698.255, 'start': 16522.556, 'title': 'Transform function and options in javascript', 'summary': "Demonstrates the usage of transform function and options in javascript, showcasing the return value's impact on interpolation and the manipulation of string based on specified arguments.", 'duration': 175.699, 'highlights': ['The return value from the transform function impacts the displayed value in interpolation.', 'Providing options affects the elements displayed in the console.', 'Conditional logic used to manipulate the string based on arguments.']}, {'end': 16960.139, 'start': 16698.255, 'title': 'Custom pipes and directives in angular', 'summary': 'Covers creating custom pipes to format and display text, with an example of displaying a list. it also discusses directives in angular, including inbuilt directives such as ng-for and custom directives, with a focus on the ngf directive.', 'duration': 261.884, 'highlights': ['Creating custom pipes to format and display text', 'Example of displaying a list using a custom pipe', 'Discussion of inbuilt and custom directives in Angular, including ng-for and ngf directive']}, {'end': 17277.539, 'start': 16960.76, 'title': 'Angular directives overview', 'summary': 'Covers the usage of ng-if and ng-switch directives in angular, emphasizing the optimization of code logic with detailed examples and browser outcomes.', 'duration': 316.779, 'highlights': ['Usage of ng-if directive to conditionally display content based on a true or false condition', 'Demonstration of ng-if else block to handle the false condition and maintain consistency in code', 'Introduction to ng-switch directive and its similarity to switch statements in programming languages']}, {'end': 17600.23, 'start': 17278.357, 'title': 'Angular directives: ng-nonbindable and ng-class', 'summary': 'Introduces ng-nonbindable to prevent angular from evaluating expressions and explains how ng-class can add classes to elements based on certain conditions, utilizing javascript and swift examples.', 'duration': 321.873, 'highlights': ['The ng-nonbindable directive is introduced to display content as-is without Angular evaluating expressions, providing a hands-on demonstration of its usage.', 'The ng-class directive is explained in the context of adding classes to elements based on certain conditions, illustrated with JavaScript and Swift examples to demonstrate its functionality.', 'The chapter also discusses the use of ng-for to iterate through data and the utilization of ng-class to dynamically add classes based on conditions, providing a practical example with JavaScript and Swift.']}], 'duration': 1265.116, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ16335114.jpg', 'highlights': ['The process of creating custom pipes in Angular using the CLI is explained, emphasizing the generation and incorporation of the reverse pipe.', 'The automatic creation of the transform function in the reverse pipe is demonstrated, showcasing the functionality provided by Angular CLI for custom pipe creation.', 'The return value from the transform function impacts the displayed value in interpolation.', 'Conditional logic used to manipulate the string based on arguments.', 'Usage of ng-if directive to conditionally display content based on a true or false condition', 'Introduction to ng-switch directive and its similarity to switch statements in programming languages', 'The ng-nonbindable directive is introduced to display content as-is without Angular evaluating expressions, providing a hands-on demonstration of its usage.', 'The ng-class directive is explained in the context of adding classes to elements based on certain conditions, illustrated with JavaScript and Swift examples to demonstrate its functionality.', 'Creating custom pipes to format and display text', 'Example of displaying a list using a custom pipe', "The mistake of writing 'pipe' in the name of the pipe is highlighted, demonstrating the need to correct naming conventions for the pipe.", 'Providing options affects the elements displayed in the console.', 'Demonstration of ng-if else block to handle the false condition and maintain consistency in code', 'Discussion of inbuilt and custom directives in Angular, including ng-for and ngf directive', 'The chapter also discusses the use of ng-for to iterate through data and the utilization of ng-class to dynamically add classes based on conditions, providing a practical example with JavaScript and Swift.']}, {'end': 20278.489, 'segs': [{'end': 17711.776, 'src': 'embed', 'start': 17658.892, 'weight': 3, 'content': [{'end': 17661.715, 'text': 'it created me two files and updated the module.', 'start': 17658.892, 'duration': 2.823}, {'end': 17663.496, 'text': "let's see what it updated.", 'start': 17661.715, 'duration': 1.781}, {'end': 17673.025, 'text': 'inside our module file you can see that it added red black directive inside declarations, right, and it has included that as well.', 'start': 17663.496, 'duration': 9.529}, {'end': 17675.107, 'text': 'very nice, very nice.', 'start': 17673.025, 'duration': 2.082}, {'end': 17686.98, 'text': 'now what we can do is uh, just look at this red black directive.ts file here and you can see that it has a selector of app red black.', 'start': 17675.107, 'duration': 11.873}, {'end': 17701.068, 'text': "now what angular does is that it prefixes your directives with something so that you do not clash with angular's inbuilt or some other libraries inbuilt directives by mistake.", 'start': 17686.98, 'duration': 14.088}, {'end': 17705.351, 'text': 'so this is just a oh security measure.', 'start': 17701.068, 'duration': 4.283}, {'end': 17711.776, 'text': "you can say from angular team, you can change this to whatever you want, but i'm just going to keep it this way.", 'start': 17705.351, 'duration': 6.425}], 'summary': 'Created 2 files, updated module, added red black directive, prefixed directive for security.', 'duration': 52.884, 'max_score': 17658.892, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ17658892.jpg'}, {'end': 18078.297, 'src': 'embed', 'start': 18044.621, 'weight': 4, 'content': [{'end': 18056.981, 'text': 'and you would need to place your stuff like this inside your ngOnInit and we can just create this element as element ref.', 'start': 18044.621, 'duration': 12.36}, {'end': 18061.385, 'text': 'We can just say this.element is EL.', 'start': 18058.443, 'duration': 2.942}, {'end': 18065.568, 'text': "And then inside ngOnInit, I'm just going to say this.element.", 'start': 18062.165, 'duration': 3.403}, {'end': 18071.312, 'text': 'Yep Hit on play, reload this guy.', 'start': 18067.189, 'duration': 4.123}, {'end': 18075.015, 'text': "And you can see that it's now in order.", 'start': 18072.853, 'duration': 2.162}, {'end': 18078.297, 'text': 'This paragraph is a custom directive one rendered by Alfred Black.', 'start': 18075.215, 'duration': 3.082}], 'summary': 'Demonstrates how to use ngoninit and element ref to create a custom directive, as shown by alfred black.', 'duration': 33.676, 'max_score': 18044.621, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ18044621.jpg'}, {'end': 18144.595, 'src': 'embed', 'start': 18110.632, 'weight': 0, 'content': [{'end': 18125.35, 'text': "Well Redux is, if you're seeing it for the first time, you can think of it as a person who is in charge of managing the data flow in your application.", 'start': 18110.632, 'duration': 14.718}, {'end': 18138.09, 'text': 'So Redux simplifies, governs, manages how your state of your application, how the data in your application is flowing from one view to another,', 'start': 18125.81, 'duration': 12.28}, {'end': 18144.595, 'text': 'or actually how views are anyway requesting the data from the Redux store.', 'start': 18138.09, 'duration': 6.505}], 'summary': 'Redux manages data flow in the application, simplifying and governing state and data flow between views.', 'duration': 33.963, 'max_score': 18110.632, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ18110632.jpg'}, {'end': 18430.229, 'src': 'embed', 'start': 18403.587, 'weight': 5, 'content': [{'end': 18407.99, 'text': 'i already answered that question in the previous slide only.', 'start': 18403.587, 'duration': 4.403}, {'end': 18409.912, 'text': 'so one one component.', 'start': 18407.99, 'duration': 1.922}, {'end': 18414.575, 'text': 'one needs to access data of another component that might be the use case of redux.', 'start': 18409.912, 'duration': 4.663}, {'end': 18423.819, 'text': 'when you need to update the components data that might also be the use case of Redux and when you want to keep data in sync.', 'start': 18414.575, 'duration': 9.244}, {'end': 18430.229, 'text': 'And if you carefully read all these three points, you would notice that these points are actually same.', 'start': 18424.46, 'duration': 5.769}], 'summary': 'Redux may be used to access and update component data to keep it in sync.', 'duration': 26.642, 'max_score': 18403.587, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ18403587.jpg'}, {'end': 18897.966, 'src': 'embed', 'start': 18863.576, 'weight': 6, 'content': [{'end': 18879.03, 'text': 'so what we need to do for that is go to our intro and write npm, install at the rate angular React X, which ng-rx is for reactive implementation,', 'start': 18863.576, 'duration': 15.454}, {'end': 18881.533, 'text': 'and write store here, Alice, to save it.', 'start': 18879.03, 'duration': 2.503}, {'end': 18891.161, 'text': "so what it does is that it gives us access to this Redux APIs through angular's interface.", 'start': 18881.533, 'duration': 9.628}, {'end': 18893.682, 'text': 'now Redux is a cross-language solution.', 'start': 18891.161, 'duration': 2.521}, {'end': 18895.304, 'text': "it's not limited to angular.", 'start': 18893.682, 'duration': 1.622}, {'end': 18897.966, 'text': 'you can find Redux on react as well.', 'start': 18895.304, 'duration': 2.662}], 'summary': "Installing '@angular/react' for redux implementation to access redux apis through angular's interface.", 'duration': 34.39, 'max_score': 18863.576, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ18863576.jpg'}, {'end': 19241.343, 'src': 'embed', 'start': 19214.349, 'weight': 8, 'content': [{'end': 19224.636, 'text': 'So a reducer is nothing but just a simple function which would respond to certain actions dispatched by your components.', 'start': 19214.349, 'duration': 10.287}, {'end': 19233.44, 'text': 'and with those actions, what it can do is that it can update the state, the main storage area of the application.', 'start': 19224.636, 'duration': 8.804}, {'end': 19241.343, 'text': 'so um, what we can do to create a reducer is that reducer is nothing but just a simple function.', 'start': 19233.44, 'duration': 7.903}], 'summary': 'A reducer is a simple function that updates the application state in response to actions.', 'duration': 26.994, 'max_score': 19214.349, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ19214349.jpg'}, {'end': 19690.518, 'src': 'embed', 'start': 19659.261, 'weight': 7, 'content': [{'end': 19664.445, 'text': 'so what we need to do is actually provide it reducers.', 'start': 19659.261, 'duration': 5.184}, {'end': 19665.346, 'text': 'so what that means?', 'start': 19664.445, 'duration': 0.901}, {'end': 19670.94, 'text': 'that your application can have multiple reducers, not just one,', 'start': 19665.996, 'duration': 4.944}, {'end': 19679.426, 'text': "because a single reducer will not be able to manage all the data flow in your application if there's a lot of data,", 'start': 19670.94, 'duration': 8.486}, {'end': 19681.107, 'text': 'and that actually makes sense as well.', 'start': 19679.426, 'duration': 1.681}, {'end': 19683.489, 'text': "you don't want to overcomplicate your apps.", 'start': 19681.107, 'duration': 2.382}, {'end': 19690.518, 'text': "so we're gonna do is just write reducers here, and the second object would be just that.", 'start': 19683.489, 'duration': 7.029}], 'summary': 'Multiple reducers are needed to manage large data flow in applications, avoiding overcomplication.', 'duration': 31.257, 'max_score': 19659.261, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ19659261.jpg'}, {'end': 19890.544, 'src': 'embed', 'start': 19862.425, 'weight': 2, 'content': [{'end': 19871.995, 'text': "so for example, if I just import this from, let's say, ng-rx store, what i can do and this is purely type checking right.", 'start': 19862.425, 'duration': 9.57}, {'end': 19875.636, 'text': 'so this is not really strictly part of code.', 'start': 19871.995, 'duration': 3.641}, {'end': 19877.718, 'text': 'but obviously you should do type checking.', 'start': 19875.636, 'duration': 2.082}, {'end': 19890.544, 'text': "so this is action, action reducer map and it could accept let's just say it would accept something like um app state, something like that.", 'start': 19877.718, 'duration': 12.826}], 'summary': 'Ngrx store supports type checking for action reducer maps.', 'duration': 28.119, 'max_score': 19862.425, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ19862425.jpg'}], 'start': 17600.23, 'title': 'Angular directives and redux integration', 'summary': 'Covers custom directive creation in angular, including prefixing selectors, accessing html elements, and lifecycle hooks. it also discusses redux implementation, its role in data flow management, and integrating redux with angular through ng-rx store module. additionally, it explains creating redux reducers, integrating redux in typescript, and integrating the redux store with angular components.', 'chapters': [{'end': 18078.297, 'start': 17600.23, 'title': 'Custom directives in angular', 'summary': 'Covers the creation and implementation of custom directives in angular, including the process of generating a directive, prefixing the selector, accessing and manipulating html elements, and the lifecycle hooks such as ngoninit for element manipulation.', 'duration': 478.067, 'highlights': ['The process of generating a directive and updating the module is demonstrated, with the addition of the directive inside declarations.', "The significance of prefixing the selector for directives to avoid clashes with Angular's inbuilt or other libraries' directives is explained.", 'The process of accessing and manipulating HTML elements using ElementRef to customize the appearance of the directive is demonstrated.', 'The explanation of the lifecycle hooks, specifically ngOnInit, for element manipulation is provided, emphasizing the necessity of placing element manipulation logic inside ngOnInit rather than the constructor.']}, {'end': 18496.568, 'start': 18078.998, 'title': 'Working with custom directives in angular', 'summary': 'Discusses redux, its purpose, and usage in managing data flow in an application, highlighting scenarios where redux is necessary and explaining its role in synchronizing data between components.', 'duration': 417.57, 'highlights': ['Redux is a person in charge of managing the data flow in an application, simplifying and governing the state and data flow between views and components.', 'Redux simplifies and manages the flow of application data and how views request data from the Redux store.', 'The need for Redux arises when one component needs to access data of another component, to update the components data, and to keep data in sync, highlighting scenarios where Redux is necessary.']}, {'end': 19185.893, 'start': 18497.709, 'title': 'Implementing redux in angular', 'summary': 'Explains the process of setting up a redux application in angular, including creating a store, defining reducers and actions, and integrating redux with angular through the ng-rx store module, while also mentioning the installation of ng-rx store and the creation of reducers.', 'duration': 688.184, 'highlights': ['The chapter explains the process of setting up a Redux application in Angular', 'Mentioning the installation of ng-rx store and the creation of reducers', 'Integrating Redux with Angular through the ng-rx store module']}, {'end': 19488.112, 'start': 19185.893, 'title': 'Creating a redux reducer', 'summary': 'Covers the basics of creating a redux reducer, which is a simple function responding to actions dispatched by components to update the state, with examples of defining initial state, handling actions, and type checking with typescript.', 'duration': 302.219, 'highlights': ['A reducer is a simple function that responds to actions dispatched by components to update the state of the application.', 'Defining initial state and handling actions using switch cases and destructuring operations.', 'Type checking with TypeScript using interfaces for defining the app reducer state.']}, {'end': 19954.354, 'start': 19488.112, 'title': 'Implementing redux in typescript', 'summary': 'Covers the implementation of redux in typescript, including defining actions, creating reducers, and integrating with the application, emphasizing the importance of organizing multiple reducers for managing different states.', 'duration': 466.242, 'highlights': ['The chapter emphasizes organizing multiple reducers for managing different states, such as user state and app state, to avoid overcomplicating the application and efficiently manage data flow.', 'The process of defining actions and creating reducers in TypeScript is demonstrated, showcasing the use of separate files to keep actions organized and accessible from components, thus streamlining the development process.', 'The integration of Redux with the application is explained, highlighting the use of store modules and the necessity of providing reducers to manage the data flow effectively.']}, {'end': 20278.489, 'start': 19954.354, 'title': 'Integrating redux store with angular components', 'summary': 'Focuses on integrating the redux store with angular components, demonstrating how to access and manage state data, with a highlight on subscribing to state changes and updating components accordingly.', 'duration': 324.135, 'highlights': ['The chapter emphasizes the process of accessing and managing state data from the Redux store in Angular components, showcasing the use of services and subscribing to observables to retrieve and display state data.', 'It explains the method of querying the state in the header component to determine if the user is logged in, using a user service to access the state and subscribing to observables to retrieve and display the state data.', 'The tutorial showcases the process of updating the default state from false to true, and the subsequent impact on the displayed information in the header component, providing a practical demonstration of state management and component reactivity.', 'The chapter concludes by hinting at the upcoming topic of updating the state and ensuring that components listening to specific state changes are appropriately informed, while also promoting an Angular 6 project competition for the viewers.']}], 'duration': 2678.259, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/2OHbjep_WjQ/pics/2OHbjep_WjQ17600230.jpg', 'highlights': ['Redux simplifies and manages the flow of application data and views', 'The process of accessing and managing state data from the Redux store in Angular components', 'The process of defining actions and creating reducers in TypeScript', 'The process of generating a directive and updating the module is demonstrated', 'The explanation of the lifecycle hooks, specifically ngOnInit, for element manipulation', 'The need for Redux arises when one component needs to access data of another component', 'The chapter explains the process of setting up a Redux application in Angular', 'The chapter emphasizes organizing multiple reducers for managing different states', 'A reducer is a simple function that responds to actions dispatched by components', "The significance of prefixing the selector for directives to avoid clashes with Angular's inbuilt or other libraries' directives"]}], 'highlights': ['The series covers everything from Angular 2, 4, 5, and Angular 6, minimizing the need to learn from scratch.', 'Angular services are singleton instances that store methods and can be injected into multiple components for sharing functionality.', 'Route guards in Angular 6 include four types - can activate, can activate child, can deactivate, and resolve, which verify user eligibility, protect child routes, keep routes active, and resolve data before loading routes.', 'The chapter covers setting up MongoDB, including installing MongoDB and Mongoose, and creating schemas for database operations in an Angular application.', 'The process of creating custom pipes in Angular using the CLI is explained, emphasizing the generation and incorporation of the reverse pipe.']}