title
Learn Angular 6 in 60 Minutes - Free Beginners Crash Course

description
For the love of god, SUBSCRIBE if you enjoy! Written version of this course: https://goo.gl/77uqca In this 100% free crash course, you're going to learn how to get up and running with Angular 6, along with a very solid and basic understanding of how Angular works. We're going to build an actual app while we learn how Angular 6 works. Throughout this Angular 6 tutorial, you're going to learn: - Install Angular 6 with the Angular CLI - Understand and Create Components - Understand and Create Services - Working with HTML & CSS in Angular 6 - Working with Angular 6 Routing - Working with the Angular 6 HTTP Client - Angular 6 Animation Let's get started! - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS weekly! My site: https://designcourse.com My personal FB account: http://fb.com/logodesigner Coursetro FB: http://fb.com/coursetro Coursetro's Twitter: http://twitter.com/designcoursecom Join my Discord! https://discord.gg/a27CKAF ^-Chat with me and others - - - - - - - - - - - - - - - - - - - - - - Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel and my website Coursetro.com. Come to my discord server or add me on social media and say Hi!

detail
{'title': 'Learn Angular 6 in 60 Minutes - Free Beginners Crash Course', 'heatmap': [{'end': 717.102, 'start': 673.815, 'weight': 1}, {'end': 2261.84, 'start': 2218.686, 'weight': 0.83}], 'summary': 'This 60-minute crash course on angular 6 covers installation, components, services, html/css usage, routing, http client, animations, and project setup, providing step-by-step guides and emphasizing practical application, with a focus on fetching data from api and implementing angular animations.', 'chapters': [{'end': 129.163, 'segs': [{'end': 31.182, 'src': 'embed', 'start': 2.841, 'weight': 1, 'content': [{'end': 5.223, 'text': 'Hey everyone, Gary Simon of CourseZetro.', 'start': 2.841, 'duration': 2.382}, {'end': 12.068, 'text': "So this feels like a strong case of deja vu because I've done this sort of crash course thing with Angular 2.", 'start': 5.343, 'duration': 6.725}, {'end': 13.789, 'text': 'There was not a version 3.', 'start': 12.068, 'duration': 1.721}, {'end': 15.83, 'text': 'So 2, 4, 5, and now 6.', 'start': 13.789, 'duration': 2.041}, {'end': 18.933, 'text': 'Now a lot of people say, oh great, another Angular version.', 'start': 15.83, 'duration': 3.103}, {'end': 22.535, 'text': 'But really, the difference is between 2, 4, 5, and 6.', 'start': 18.973, 'duration': 3.562}, {'end': 23.896, 'text': 'uh, are not very extreme.', 'start': 22.535, 'duration': 1.361}, {'end': 29.981, 'text': "if we're talking about the core fundamentals of how the framework works now, of course, if we're talking about angular js or the very first version,", 'start': 23.896, 'duration': 6.085}, {'end': 31.182, 'text': 'yes, big differences.', 'start': 29.981, 'duration': 1.201}], 'summary': 'Angular versions 2, 4, 5, and 6 are not very different in core fundamentals compared to the initial version.', 'duration': 28.341, 'max_score': 2.841, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/z4JUm0Bq9AM/pics/z4JUm0Bq9AM2841.jpg'}, {'end': 107.543, 'src': 'embed', 'start': 67.482, 'weight': 0, 'content': [{'end': 69.382, 'text': 'It allows you to click between these.', 'start': 67.482, 'duration': 1.9}, {'end': 72.503, 'text': "And as you can see, there's some nice subtle animation there.", 'start': 69.943, 'duration': 2.56}, {'end': 81.107, 'text': 'And this is pulling all the data from a free public API, okay, just for the purpose of experimenting and learning through tutorials.', 'start': 73.644, 'duration': 7.463}, {'end': 84.468, 'text': 'So you can see here, we click on this, we get specific information.', 'start': 81.867, 'duration': 2.601}, {'end': 92.313, 'text': "So what we're going to cover by learning about all this will be installing Angular 6 with the Angular command line interface,", 'start': 84.568, 'duration': 7.745}, {'end': 94.414, 'text': 'understanding and creating components.', 'start': 92.313, 'duration': 2.101}, {'end': 99.537, 'text': 'understanding creating services, working with HTML and CSS in Angular 6,', 'start': 94.414, 'duration': 5.123}, {'end': 107.543, 'text': 'working with the Angular 6 routing the Angular 6 HTTP client and finally animation and how that all works.', 'start': 99.537, 'duration': 8.006}], 'summary': 'Learning about angular 6: installing, creating components, services, html/css, routing, http client, and animation.', 'duration': 40.061, 'max_score': 67.482, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/z4JUm0Bq9AM/pics/z4JUm0Bq9AM67482.jpg'}], 'start': 2.841, 'title': 'Angular 6 crash course', 'summary': 'Discusses the minimal differences between angular versions 2, 4, 5, and 6, and presents a 60-minute crash course covering installation, components, services, html/css usage, routing, http client, and animations in angular 6.', 'chapters': [{'end': 129.163, 'start': 2.841, 'title': 'Angular 6 crash course', 'summary': 'Discusses the minimal differences between angular versions 2, 4, 5, and 6, and presents a 60-minute crash course covering installation, components, services, html/css usage, routing, http client, and animations in angular 6.', 'duration': 126.322, 'highlights': ['The chapter presents a 60-minute crash course on Angular 6 covering installation, components, services, HTML/CSS usage, routing, HTTP client, and animations. The crash course covers essential topics and is designed for beginners to Angular 2+, offering practical learning through example-based teaching.', 'The differences between Angular versions 2, 4, 5, and 6 are minimal in terms of core fundamentals. The core fundamentals of the framework remain consistent across these versions, making it easier for learners to transition between them.', 'The tutorial app demonstrates the use of a free public API to pull data, featuring sidebar navigation and subtle animations. The tutorial app showcases the practical application of Angular 6 by utilizing a free public API, demonstrating sidebar navigation and subtle animations.']}], 'duration': 126.322, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/z4JUm0Bq9AM/pics/z4JUm0Bq9AM2841.jpg', 'highlights': ['The chapter presents a 60-minute crash course on Angular 6 covering installation, components, services, HTML/CSS usage, routing, HTTP client, and animations.', 'The differences between Angular versions 2, 4, 5, and 6 are minimal in terms of core fundamentals.', 'The tutorial app demonstrates the use of a free public API to pull data, featuring sidebar navigation and subtle animations.']}, {'end': 288.201, 'segs': [{'end': 210.333, 'src': 'embed', 'start': 184.625, 'weight': 1, 'content': [{'end': 189.25, 'text': "and it's also going to allow you to do a bunch of other things like generate components services.", 'start': 184.625, 'duration': 4.625}, {'end': 191.653, 'text': "There's a bunch that it can do.", 'start': 190.391, 'duration': 1.262}, {'end': 200.265, 'text': "So if you're more interested in expanding upon your Angular CLI knowledge, then you can come here to the GitHub page,", 'start': 191.753, 'duration': 8.512}, {'end': 204.111, 'text': "and it's going to basically give you documentation and all this good stuff.", 'start': 200.265, 'duration': 3.846}, {'end': 210.333, 'text': 'So what we need to do first is we need to install it with a package manager.', 'start': 204.571, 'duration': 5.762}], 'summary': 'Angular cli enables generating components, services, and more. installation required with a package manager.', 'duration': 25.708, 'max_score': 184.625, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/z4JUm0Bq9AM/pics/z4JUm0Bq9AM184625.jpg'}, {'end': 288.201, 'src': 'embed', 'start': 241.444, 'weight': 0, 'content': [{'end': 249.089, 'text': 'so once you get to that stage, then we can go ahead and use npm to install the angular cli.', 'start': 241.444, 'duration': 7.645}, {'end': 254.192, 'text': 'so npm install hyphen g, That means global.', 'start': 249.089, 'duration': 5.103}, {'end': 255.873, 'text': 'You only have to do this once.', 'start': 254.492, 'duration': 1.381}, {'end': 260.235, 'text': 'And then forward slash, or Angular forward slash CLI.', 'start': 256.753, 'duration': 3.482}, {'end': 265.138, 'text': 'And this, by the way, comes straight from that Angular IO website that we were just at.', 'start': 260.615, 'duration': 4.523}, {'end': 267.764, 'text': "So I'm going to pause and let this run through.", 'start': 265.902, 'duration': 1.862}, {'end': 269.725, 'text': "All right, and it's done.", 'start': 267.784, 'duration': 1.941}, {'end': 273.448, 'text': 'Oh, and by the way, I get a lot of people ask me what are you using for your console here?', 'start': 269.765, 'duration': 3.683}, {'end': 277.992, 'text': 'Yeah, this is on Windows and this is called Commander C-M-D-E-R.', 'start': 273.488, 'duration': 4.504}, {'end': 280.554, 'text': "It's a free console emulator.", 'start': 278.733, 'duration': 1.821}, {'end': 288.201, 'text': 'And I also have a video, if you search on my YouTube channel, about how and where to get my particular theme, because you can theme this thing.', 'start': 280.995, 'duration': 7.206}], 'summary': 'Installing angular cli globally using npm for windows with commander c-m-d-e-r console emulator.', 'duration': 46.757, 'max_score': 241.444, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/z4JUm0Bq9AM/pics/z4JUm0Bq9AM241444.jpg'}], 'start': 129.483, 'title': 'Angular 6 crash course', 'summary': 'Provides a step-by-step guide to install angular cli using npm, along with instructions for checking installation. it also mentions the availability of a written version with all the code at coursetester.com.', 'chapters': [{'end': 288.201, 'start': 129.483, 'title': 'Angular 6 crash course', 'summary': 'Covers the steps to install angular cli, including the use of npm and checking for installation, while also highlighting the availability of a written version with all the code at coursetester.com.', 'duration': 158.718, 'highlights': ['The chapter covers the steps to install Angular CLI using npm and checking for installation, while also highlighting the availability of a written version with all the code at CourseTester.com.', 'The importance of installing Angular CLI is emphasized as it enables the generation of components and services, providing additional functionalities for Angular 6 development.', 'A recommendation to visit the GitHub page for Angular CLI documentation and further knowledge expansion is provided to the audience.', 'The speaker provides a personal recommendation for a console emulator, Commander C-M-D-E-R, and offers information on where to find a particular theme for the emulator.']}], 'duration': 158.718, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/z4JUm0Bq9AM/pics/z4JUm0Bq9AM129483.jpg', 'highlights': ['The chapter covers the steps to install Angular CLI using npm and checking for installation, while also highlighting the availability of a written version with all the code at CourseTester.com.', 'The importance of installing Angular CLI is emphasized as it enables the generation of components and services, providing additional functionalities for Angular 6 development.', 'A recommendation to visit the GitHub page for Angular CLI documentation and further knowledge expansion is provided to the audience.', 'The speaker provides a personal recommendation for a console emulator, Commander C-M-D-E-R, and offers information on where to find a particular theme for the emulator.']}, {'end': 469.397, 'segs': [{'end': 374.306, 'src': 'embed', 'start': 336.381, 'weight': 0, 'content': [{'end': 342.203, 'text': "I'm just gonna call this project ng six obviously would be the name of whatever you know app you're working on or whatever,", 'start': 336.381, 'duration': 5.822}, {'end': 345.866, 'text': "And then I'm also going to optionally.", 'start': 342.823, 'duration': 3.043}, {'end': 349.508, 'text': 'see, I say optionally because right now you could hit enter and it would generate your project.', 'start': 345.866, 'duration': 3.642}, {'end': 350.469, 'text': "You're ready to rock.", 'start': 349.749, 'duration': 0.72}, {'end': 353.211, 'text': 'There are certain flags though that you can add.', 'start': 351.17, 'duration': 2.041}, {'end': 358.956, 'text': "So these flags I'm going to add, I'm going to set the styling as in the CSS.", 'start': 353.892, 'duration': 5.064}, {'end': 365.22, 'text': "By default, if you don't add this, this part right here, it will just use straight up CSS.", 'start': 359.476, 'duration': 5.744}, {'end': 367.782, 'text': 'I want to use the power of SAS.', 'start': 366.121, 'duration': 1.661}, {'end': 370.805, 'text': "So we're going to say style equals SCSS.", 'start': 367.862, 'duration': 2.943}, {'end': 374.306, 'text': "And then also we're going to add the routing flag.", 'start': 371.525, 'duration': 2.781}], 'summary': "Creating a project named 'ng six' with optional styling flags, using scss and adding routing.", 'duration': 37.925, 'max_score': 336.381, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/z4JUm0Bq9AM/pics/z4JUm0Bq9AM336381.jpg'}, {'end': 446.706, 'src': 'embed', 'start': 420.955, 'weight': 2, 'content': [{'end': 434.619, 'text': "now you can also run ng and the serve command and because we wanted to open the browser after it builds out the project for us we'll put hyphen O flag for open.", 'start': 420.955, 'duration': 13.664}, {'end': 442.964, 'text': "And so it's a development server and it's located at localhost 4200, which has been standard all the way throughout version two of Angular.", 'start': 435.299, 'duration': 7.665}, {'end': 446.706, 'text': "So it's gonna pop this up off the side of my screen.", 'start': 443.644, 'duration': 3.062}], 'summary': 'Using ng serve command opens a development server at localhost 4200.', 'duration': 25.751, 'max_score': 420.955, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/z4JUm0Bq9AM/pics/z4JUm0Bq9AM420955.jpg'}], 'start': 288.661, 'title': 'Angular 6 project setup', 'summary': "Covers using angular cli to create a project, adding flags and routing in a sas project, and setting up an ng6 project in visual studio code. it includes estimated running time of 30 to 45 seconds for adding flags and emphasizes the use of 'ng serve' command to open a development server located at localhost 4200.", 'chapters': [{'end': 353.211, 'start': 288.661, 'title': 'Using angular cli to create a project', 'summary': "Demonstrates how to use angular cli to create an angular 6 project, starting with the command 'ng' to access all available commands and then using 'ng new' to create a new project, with optional flags that can be added for additional functionalities.", 'duration': 64.55, 'highlights': ["The chapter demonstrates how to use Angular CLI to create an Angular 6 project Using 'ng' command to access all available commands, using 'ng new' command to create a new project", "Starting with the command 'ng' to access all available commands The way to reference or call the Angular CLI, using 'ng' to get all commands and npm help", "Using 'ng new' to create a new project, with optional flags that can be added for additional functionalities Using 'ng new' command to create a new project, adding optional flags for additional functionalities"]}, {'end': 397.135, 'start': 353.892, 'title': 'Adding flags and routing in sas project', 'summary': 'Introduces the process of adding flags to a sas project to utilize scss styling and create a routing file for different page urls, with an estimated running time of 30 to 45 seconds.', 'duration': 43.243, 'highlights': ['Adding SCSS style flag to utilize SAS styling The process involves setting the style flag as SCSS to utilize the power of SAS for styling instead of straight up CSS.', 'Adding routing flag for creating routing file The routing flag is added to create a routing file for a project with different page URLs, simplifying the process of managing navigation within the project.', 'Estimated running time of 30 to 45 seconds The process is expected to take approximately 30 to 45 seconds to complete, allowing for efficient execution within a reasonable timeframe.']}, {'end': 469.397, 'start': 397.215, 'title': 'Setting up ng6 project in visual studio code', 'summary': "Covers setting up an ng6 project in visual studio code, launching a new window of visual studio code within the ng6 folder, running 'ng serve' command to open a development server located at localhost 4200, and accessing the simple landing page of the project.", 'duration': 72.182, 'highlights': ["Launching a new window of Visual Studio Code within the ng6 folder by typing 'code .' in Visual Studio Code.", "Running 'ng serve' command to open a development server located at localhost 4200 with the '-o' flag for open.", 'Accessing the simple landing page of the project after running the commands.']}], 'duration': 180.736, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/z4JUm0Bq9AM/pics/z4JUm0Bq9AM288661.jpg', 'highlights': ["Using 'ng new' to create a new project, with optional flags for additional functionalities", 'Adding SCSS style flag to utilize SAS styling', "Running 'ng serve' command to open a development server located at localhost 4200 with the '-o' flag for open"]}, {'end': 906.728, 'segs': [{'end': 563.162, 'src': 'embed', 'start': 536.956, 'weight': 0, 'content': [{'end': 542.942, 'text': "But for the most part, you know, if you're watching this with the next X months or whatever, it should be pretty similar.", 'start': 536.956, 'duration': 5.986}, {'end': 544.564, 'text': 'So we have a package JSON file.', 'start': 543.002, 'duration': 1.562}, {'end': 548.068, 'text': "I'm, generally speaking up to be working in here specifically,", 'start': 545.145, 'duration': 2.923}, {'end': 555.857, 'text': "but this will let you know I the version numbers of what version of angular and its libraries that you're working with.", 'start': 548.068, 'duration': 7.789}, {'end': 563.162, 'text': "so you can see this is angular 6, indeed alright arm, And we really don't need to worry about anything else in here for the most part.", 'start': 555.857, 'duration': 7.305}], 'summary': 'The transcript discusses the package json file, version numbers of angular and its libraries, specifically angular 6.', 'duration': 26.206, 'max_score': 536.956, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/z4JUm0Bq9AM/pics/z4JUm0Bq9AM536956.jpg'}, {'end': 701.41, 'src': 'embed', 'start': 673.815, 'weight': 2, 'content': [{'end': 680.078, 'text': "And by the way, you may be wondering if you're new to TypeScript, what this TS extension is.", 'start': 673.815, 'duration': 6.263}, {'end': 687.182, 'text': 'Well, basically, Angular 6 uses and has for quite a while, not just version 6, TypeScript.', 'start': 680.599, 'duration': 6.583}, {'end': 690.403, 'text': 'And in short, TypeScript provides strong type checking on JavaScript.', 'start': 687.222, 'duration': 3.181}, {'end': 692.784, 'text': "If you're not sure what that is, just go ahead and Google it.", 'start': 690.423, 'duration': 2.361}, {'end': 696.686, 'text': 'But basically, it kind of adds to your experience of writing JavaScript.', 'start': 693.124, 'duration': 3.562}, {'end': 701.41, 'text': "So what we'll do is in this app module file.", 'start': 697.126, 'duration': 4.284}], 'summary': 'Angular 6 uses typescript for strong type checking on javascript.', 'duration': 27.595, 'max_score': 673.815, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/z4JUm0Bq9AM/pics/z4JUm0Bq9AM673815.jpg'}, {'end': 717.102, 'src': 'heatmap', 'start': 673.815, 'weight': 1, 'content': [{'end': 680.078, 'text': "And by the way, you may be wondering if you're new to TypeScript, what this TS extension is.", 'start': 673.815, 'duration': 6.263}, {'end': 687.182, 'text': 'Well, basically, Angular 6 uses and has for quite a while, not just version 6, TypeScript.', 'start': 680.599, 'duration': 6.583}, {'end': 690.403, 'text': 'And in short, TypeScript provides strong type checking on JavaScript.', 'start': 687.222, 'duration': 3.181}, {'end': 692.784, 'text': "If you're not sure what that is, just go ahead and Google it.", 'start': 690.423, 'duration': 2.361}, {'end': 696.686, 'text': 'But basically, it kind of adds to your experience of writing JavaScript.', 'start': 693.124, 'duration': 3.562}, {'end': 701.41, 'text': "So what we'll do is in this app module file.", 'start': 697.126, 'duration': 4.284}, {'end': 709.376, 'text': "the way this works is that generally, whenever you're using the Angular CLI to generate components and services,", 'start': 701.41, 'duration': 7.966}, {'end': 717.102, 'text': "it's automatically going to update this file to import and add them to the ngModel decorator, specifically with components.", 'start': 709.376, 'duration': 7.726}], 'summary': 'Typescript provides strong type checking for angular 6, enhancing javascript experience.', 'duration': 43.287, 'max_score': 673.815, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/z4JUm0Bq9AM/pics/z4JUm0Bq9AM673815.jpg'}, {'end': 792.185, 'src': 'embed', 'start': 763.034, 'weight': 1, 'content': [{'end': 769.916, 'text': 'So when we use the Angular CLI to generate our project, like I mentioned before, it created a single component.', 'start': 763.034, 'duration': 6.882}, {'end': 775.898, 'text': "And so when you use that CLI to generate components, which we're going to do shortly, it creates four files.", 'start': 770.276, 'duration': 5.622}, {'end': 778.939, 'text': 'And we could see these four files right here for our initial component.', 'start': 775.938, 'duration': 3.001}, {'end': 781.7, 'text': 'So it has this HTML file.', 'start': 779.799, 'duration': 1.901}, {'end': 785.837, 'text': 'So this is where all the HTML templating goes.', 'start': 783.434, 'duration': 2.403}, {'end': 792.185, 'text': 'And this is the HTML that corresponds to this particular component.', 'start': 786.778, 'duration': 5.407}], 'summary': 'Using angular cli to generate a project creates a single component and four files, including an html file for templating.', 'duration': 29.151, 'max_score': 763.034, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/z4JUm0Bq9AM/pics/z4JUm0Bq9AM763034.jpg'}], 'start': 469.397, 'title': 'Angular 6 project structure and file structure', 'summary': 'Covers setting up the development server, navigating project file structure, and understanding angular 6 project basics. it also explains the file structure of an angular 6 project, including the source and app folders, and the role of components.', 'chapters': [{'end': 576.426, 'start': 469.397, 'title': 'Angular 6 project structure', 'summary': 'Discusses setting up the development server, navigating project file structure, and understanding the angular 6 project basics, emphasizing the importance of the package json file and the commands available through the angular cli.', 'duration': 107.029, 'highlights': ['The chapter emphasizes the importance of understanding the Angular 6 project structure for beginners, focusing on the package JSON file and the commands available through the Angular CLI.', 'It mentions the availability of different commands that can be run with the Angular CLI, such as npm start, build, and test, providing a quick overview of the functionalities.', 'It highlights the significance of the package JSON file, which specifies the version numbers of Angular and its libraries being used in the project, indicating the version as Angular 6.']}, {'end': 906.728, 'start': 576.506, 'title': 'Angular 6 file structure', 'summary': 'Explains the file structure of an angular 6 project, including the source folder, app folder, and the role of components, providing insights into file types, decorators, and their significance in component logic and html templating.', 'duration': 330.222, 'highlights': ['Angular 6 components create basic building blocks of the app, generating four files per component, including HTML, CSS, and component file. When using Angular CLI to generate components, it creates four files for each component, including HTML, CSS, test, and the component file.', 'The component file contains imports and a component decorator defining properties such as selector, template URL, and style URLs. The component file includes imports and a component decorator defining properties like selector, template URL, and style URLs, along with other purpose-specific properties.', "TypeScript provides strong type checking on JavaScript, enhancing the experience of writing JavaScript. TypeScript provides strong type checking on JavaScript, enhancing the experience of writing JavaScript and adding to the developer's experience."]}], 'duration': 437.331, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/z4JUm0Bq9AM/pics/z4JUm0Bq9AM469397.jpg', 'highlights': ['The package JSON file specifies the version numbers of Angular and its libraries, indicating the version as Angular 6.', 'Angular CLI generates four files per component, including HTML, CSS, and component file.', 'TypeScript provides strong type checking on JavaScript, enhancing the experience of writing JavaScript.']}, {'end': 1465.635, 'segs': [{'end': 958.975, 'src': 'embed', 'start': 933.964, 'weight': 0, 'content': [{'end': 942.488, 'text': "So what we want to do now is create or generate our own component, and we're going to do several of them, and we're going to do that with the CLI.", 'start': 933.964, 'duration': 8.524}, {'end': 951.112, 'text': 'So now hopping back here, the way we generate a component with a CLI is called ng generate.', 'start': 944.249, 'duration': 6.863}, {'end': 957.514, 'text': "Well, what is it that we want to generate? Well, in this case, it's going to be a component and then the name of the component.", 'start': 951.872, 'duration': 5.642}, {'end': 958.975, 'text': "So we'll say sidebar.", 'start': 958.015, 'duration': 0.96}], 'summary': 'Generating multiple components with cli using ng generate.', 'duration': 25.011, 'max_score': 933.964, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/z4JUm0Bq9AM/pics/z4JUm0Bq9AM933964.jpg'}, {'end': 1042.987, 'src': 'embed', 'start': 983.712, 'weight': 1, 'content': [{'end': 989.779, 'text': "So they're named based on the name that you gave them, all right, from sidebar component.", 'start': 983.712, 'duration': 6.067}, {'end': 993.824, 'text': "So we'll see there's a new folder that was added called sidebar with those four files.", 'start': 989.799, 'duration': 4.025}, {'end': 996.407, 'text': "that's pretty much standard, how that all works.", 'start': 994.725, 'duration': 1.682}, {'end': 999.331, 'text': 'and then, of course, it was also added to the declarations array.', 'start': 996.407, 'duration': 2.924}, {'end': 1003.457, 'text': 'right here, after app component, we have sidebar component.', 'start': 999.331, 'duration': 4.126}, {'end': 1013.073, 'text': "so for our particular use case we're going to add a couple more uh files and or components rather.", 'start': 1003.457, 'duration': 9.616}, {'end': 1016.096, 'text': 'so, on a shorthand method,', 'start': 1013.073, 'duration': 3.023}, {'end': 1025.723, 'text': 'because in some projects you need to need to generate a lot of these is simply ng g for generate c for component and then the name.', 'start': 1016.096, 'duration': 9.627}, {'end': 1038.515, 'text': "so we'll say posts hit the up arrow key, users up arrow key and then finally details.", 'start': 1025.723, 'duration': 12.792}, {'end': 1042.987, 'text': 'all right, awesome.', 'start': 1041.607, 'duration': 1.38}], 'summary': 'Created sidebar component with four files and added to declarations array.', 'duration': 59.275, 'max_score': 983.712, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/z4JUm0Bq9AM/pics/z4JUm0Bq9AM983712.jpg'}, {'end': 1133.66, 'src': 'embed', 'start': 1098.008, 'weight': 3, 'content': [{'end': 1107.796, 'text': "So if we look at sidebar and come to our component file, we'll see selector is app-sidebar.", 'start': 1098.008, 'duration': 9.788}, {'end': 1117.063, 'text': "So that's how we can embed a component in another component's template, such as app-component.html.", 'start': 1108.636, 'duration': 8.427}, {'end': 1127.113, 'text': 'So we have first our div ID container and then any HTML along with its logic will show up right here.', 'start': 1118.184, 'duration': 8.929}, {'end': 1131.197, 'text': "And then we'll have to the right another column.", 'start': 1127.133, 'duration': 4.064}, {'end': 1133.66, 'text': "So it's simply a very simple two column layout.", 'start': 1131.357, 'duration': 2.303}], 'summary': "Demonstrates embedding a component in another component's template, creating a simple two column layout.", 'duration': 35.652, 'max_score': 1098.008, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/z4JUm0Bq9AM/pics/z4JUm0Bq9AM1098008.jpg'}, {'end': 1299.286, 'src': 'embed', 'start': 1271.522, 'weight': 4, 'content': [{'end': 1277.748, 'text': 'if I bring back the menu control B in the index.html, we have to import material icons.', 'start': 1271.522, 'duration': 6.226}, {'end': 1278.308, 'text': 'All right.', 'start': 1278.008, 'duration': 0.3}, {'end': 1282.172, 'text': "So we're also going to, while we're here, we're going to add a custom Google web font.", 'start': 1278.368, 'duration': 3.804}, {'end': 1286.235, 'text': "So to do that, we're going to put it right just before the closing head tag.", 'start': 1282.612, 'duration': 3.623}, {'end': 1299.286, 'text': "And I'm going to copy off-screen from the written tutorial our custom Google web font called Montserrat right here,", 'start': 1287.016, 'duration': 12.27}], 'summary': 'Import material icons and add custom google web font montserrat.', 'duration': 27.764, 'max_score': 1271.522, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/z4JUm0Bq9AM/pics/z4JUm0Bq9AM1271522.jpg'}, {'end': 1436.333, 'src': 'embed', 'start': 1409.694, 'weight': 5, 'content': [{'end': 1414.778, 'text': "we're just going to make it a new CSS grid, which is a relatively new way to structure layouts.", 'start': 1409.694, 'duration': 5.084}, {'end': 1421.503, 'text': "If you've never seen display grid before, do a search on my channel or website.", 'start': 1415.658, 'duration': 5.845}, {'end': 1424.165, 'text': "I've covered the CSS grid multiple times.", 'start': 1421.663, 'duration': 2.502}, {'end': 1428.728, 'text': "um so if this stuff looks kind of confusing, like grid template columns, don't worry,", 'start': 1424.745, 'duration': 3.983}, {'end': 1436.333, 'text': "it's just basically saying we want that first sidebar column to be 70 pixels and then the other side will be auto.", 'start': 1428.728, 'duration': 7.605}], 'summary': 'Introducing a new css grid layout with a 70-pixel first sidebar column.', 'duration': 26.639, 'max_score': 1409.694, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/z4JUm0Bq9AM/pics/z4JUm0Bq9AM1409694.jpg'}], 'start': 906.728, 'title': 'Creating and embedding components', 'summary': 'Covers the generation of components using the cli, integration into the app module, and a shorthand method for generating multiple components. it also explores embedding custom components, adding a sidebar, implementing router links, importing material icons, and styling the layout using css grid and custom web fonts.', 'chapters': [{'end': 1042.987, 'start': 906.728, 'title': 'Creating components with cli', 'summary': 'Explains how to generate components using the cli, including the structure of the generated files and how they are integrated into the app module, as well as demonstrating a shorthand method for generating multiple components.', 'duration': 136.259, 'highlights': ["The CLI can generate a component with the command 'ng generate component [componentName]', which creates four files: HTML, testing, the actual component, and a SAS file, and updates the app.module.ts file. The CLI command 'ng generate component [componentName]' generates four files and updates the app.module.ts file, streamlining the process of creating a new component.", 'The generated files are structured within a new folder that is added to the project, and the component is automatically added to the declarations array in the app module. The generated files are organized within a new folder and the component is automatically added to the declarations array in the app module, ensuring seamless integration into the project structure.', "A shorthand method 'ng g c [componentName]' can be used to quickly generate multiple components by specifying their names in a sequential manner. The shorthand method 'ng g c [componentName]' expedites the generation of multiple components by allowing sequential specification of their names."]}, {'end': 1465.635, 'start': 1042.987, 'title': 'Embedding custom components and styling layout', 'summary': 'Discusses embedding custom components within an app, including adding a sidebar, implementing router links, importing material icons, and styling the layout using css grid and custom web fonts.', 'duration': 422.648, 'highlights': ["Embedding a sidebar component within the app component's HTML file by adding div ID container and app-sidebar, which creates a two-column layout, and implementing router links to direct users to different routes.", 'Adding HTML content to the sidebar component, including navigation elements, unordered lists, and material icons for user profile and message, with router links to specific pages.', 'Importing material icons and a custom Google web font (Montserrat) in the index.html file to enhance the visual appearance and user experience.', 'Styling the layout using CSS grid for the container element, setting specific column widths, and using SCSS to define rule sets for the content ID, with a focus on creating a visually appealing and functional layout.']}], 'duration': 558.907, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/z4JUm0Bq9AM/pics/z4JUm0Bq9AM906728.jpg', 'highlights': ["The CLI command 'ng generate component [componentName]' streamlines the process of creating a new component by generating four files and updating the app.module.ts file.", 'The generated files are organized within a new folder and the component is automatically added to the declarations array in the app module, ensuring seamless integration into the project structure.', "A shorthand method 'ng g c [componentName]' expedites the generation of multiple components by allowing sequential specification of their names.", "Embedding a sidebar component within the app component's HTML file creates a two-column layout and implements router links to direct users to different routes.", 'Importing material icons and a custom Google web font (Montserrat) in the index.html file enhances the visual appearance and user experience.', 'Styling the layout using CSS grid for the container element and using SCSS to define rule sets for the content ID focuses on creating a visually appealing and functional layout.']}, {'end': 1700.852, 'segs': [{'end': 1492.625, 'src': 'embed', 'start': 1466.115, 'weight': 0, 'content': [{'end': 1479.06, 'text': "All right, so we'll save that and then we're going to finally our last bit of CSS for this whole project will be in our sidebar, CSS file or SAS file.", 'start': 1466.115, 'duration': 12.945}, {'end': 1484.562, 'text': "All right, so once again from the tutorial, the written version, I'm just going to paste in some here.", 'start': 1479.08, 'duration': 5.482}, {'end': 1487.203, 'text': "It's only 24 lines, very minimal.", 'start': 1484.722, 'duration': 2.481}, {'end': 1492.625, 'text': "We're just referencing a nav element, unordered list element, and that's it.", 'start': 1487.243, 'duration': 5.382}], 'summary': '24 lines of minimal css added to sidebar file.', 'duration': 26.51, 'max_score': 1466.115, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/z4JUm0Bq9AM/pics/z4JUm0Bq9AM1466115.jpg'}, {'end': 1563.865, 'src': 'embed', 'start': 1535.535, 'weight': 3, 'content': [{'end': 1543.118, 'text': "Okay, so the way this works is basically we're going to import the components that we want to route.", 'start': 1535.535, 'duration': 7.583}, {'end': 1545.078, 'text': "That's what happens up here first.", 'start': 1543.138, 'duration': 1.94}, {'end': 1547.199, 'text': "All right, so we'll do that real quick.", 'start': 1545.619, 'duration': 1.58}, {'end': 1555.602, 'text': "So import, and we'll say users component from forward slash users.", 'start': 1547.239, 'duration': 8.363}, {'end': 1560.024, 'text': "That's what the CLI generates, its own folder, and then users.", 'start': 1556.082, 'duration': 3.942}, {'end': 1562.945, 'text': "You can see it's giving a suggestion already.", 'start': 1560.864, 'duration': 2.081}, {'end': 1563.865, 'text': 'We want this one.', 'start': 1563.105, 'duration': 0.76}], 'summary': 'Import the users component from /users for routing.', 'duration': 28.33, 'max_score': 1535.535, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/z4JUm0Bq9AM/pics/z4JUm0Bq9AM1535535.jpg'}, {'end': 1624.808, 'src': 'embed', 'start': 1597.668, 'weight': 1, 'content': [{'end': 1601.131, 'text': 'now the red squiggly line should have gone away now.', 'start': 1597.668, 'duration': 3.463}, {'end': 1613.08, 'text': 'next, this is where, within this route array, this is where we define all love our I routes right here in the happen as an array of objects.', 'start': 1601.131, 'duration': 11.949}, {'end': 1617.043, 'text': "so it's open this up and we'll put our first route here.", 'start': 1613.08, 'duration': 3.963}, {'end': 1624.808, 'text': "so each route will take a path I E, you know where, exactly like the brat, the URL where it's going to be.", 'start': 1617.043, 'duration': 7.765}], 'summary': 'Configured routes in the route array for the specified url path.', 'duration': 27.14, 'max_score': 1597.668, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/z4JUm0Bq9AM/pics/z4JUm0Bq9AM1597668.jpg'}, {'end': 1700.852, 'src': 'embed', 'start': 1649.312, 'weight': 2, 'content': [{'end': 1652.076, 'text': 'users component, and there we go.', 'start': 1649.312, 'duration': 2.764}, {'end': 1654.238, 'text': "so we're not done there.", 'start': 1652.076, 'duration': 2.162}, {'end': 1657.222, 'text': 'yet we want to have two more paths.', 'start': 1654.238, 'duration': 2.984}, {'end': 1658.283, 'text': "so what I'll do?", 'start': 1657.222, 'duration': 1.061}, {'end': 1662.969, 'text': 'just copy this and then paste that twice.', 'start': 1658.283, 'duration': 4.686}, {'end': 1670.321, 'text': "alright. so for this path we're gonna have forward slash or details, forward slash ID.", 'start': 1662.969, 'duration': 7.352}, {'end': 1672.602, 'text': 'so notice, we put that colon ID.', 'start': 1670.321, 'duration': 2.281}, {'end': 1682.59, 'text': "so this is basically a URL parameter and we don't know what the ID is going to be, but we can refer to it by the name ID in the future,", 'start': 1672.602, 'duration': 9.988}, {'end': 1685.412, 'text': "as you'll see a little bit later on.", 'start': 1682.59, 'duration': 2.822}, {'end': 1696.12, 'text': "alright. so then we'll say this is the details component and then we're just gonna have another route called posts, and this will be post component.", 'start': 1685.412, 'duration': 10.708}, {'end': 1700.852, 'text': "All right, very, very simple, and that's all we need to do there.", 'start': 1698.291, 'duration': 2.561}], 'summary': 'Creating two additional paths with url parameters and components for users, details, and posts.', 'duration': 51.54, 'max_score': 1649.312, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/z4JUm0Bq9AM/pics/z4JUm0Bq9AM1649312.jpg'}], 'start': 1466.115, 'title': 'Setting up css, routing, and react router setup', 'summary': 'Covers setting up css for the sidebar, updating the routing file, and importing components for routing. additionally, it discusses setting up routes for a react application, defining paths and components, including the use of url parameters, and creating a simple route structure.', 'chapters': [{'end': 1597.668, 'start': 1466.115, 'title': 'Setting up css and routing', 'summary': 'Covers setting up the final bit of css for the sidebar, updating the routing file to enable navigation between components, and importing components for routing in the app routing module, with a total of three components being imported.', 'duration': 131.553, 'highlights': ['The chapter covers setting up the final bit of CSS for the sidebar, updating the routing file to enable navigation between components, and importing components for routing in the app routing module, with a total of three components being imported.', 'The CSS for the sidebar is a minimal 24 lines, referencing a nav element and unordered list element.', 'The routing file needs to be updated to enable proper navigation between components, which is currently not functional.', 'Importing components for routing in the app routing module involves importing three components: users component, details component, and posts component.']}, {'end': 1700.852, 'start': 1597.668, 'title': 'React router setup', 'summary': 'Discusses setting up routes for a react application, defining paths and components, including the use of url parameters, and creating a simple route structure.', 'duration': 103.184, 'highlights': ['Within the route array, we define all our routes as an array of objects, specifying paths and corresponding components.', "We set up paths for 'users', 'details/:ID', and 'posts', each linked to specific components for displaying content.", "URL parameters, such as ':ID', are utilized to handle dynamic data in the routes."]}], 'duration': 234.737, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/z4JUm0Bq9AM/pics/z4JUm0Bq9AM1466115.jpg', 'highlights': ['The chapter covers setting up the final bit of CSS for the sidebar, updating the routing file, and importing components for routing in the app routing module.', 'We define all our routes within the route array as an array of objects, specifying paths and corresponding components.', "Setting up paths for 'users', 'details/:ID', and 'posts', each linked to specific components for displaying content.", 'Importing components for routing in the app routing module involves importing three components: users component, details component, and posts component.', "URL parameters, such as ':ID', are utilized to handle dynamic data in the routes.", 'The CSS for the sidebar is a minimal 24 lines, referencing a nav element and unordered list element.']}, {'end': 2336.527, 'segs': [{'end': 1727.38, 'src': 'embed', 'start': 1700.873, 'weight': 3, 'content': [{'end': 1705.355, 'text': "Okay, so now let's talk about services.", 'start': 1700.873, 'duration': 4.482}, {'end': 1710.838, 'text': 'So for our users component, we want to fetch a list of users from a public API.', 'start': 1706.216, 'duration': 4.622}, {'end': 1717.662, 'text': "So to do that, we're going to use the Angular CLI to generate a service for us, much in the same way that we use it to generate a component.", 'start': 1710.938, 'duration': 6.724}, {'end': 1719.303, 'text': "So let's go back here.", 'start': 1718.242, 'duration': 1.061}, {'end': 1721.304, 'text': 'ng generate.', 'start': 1719.303, 'duration': 2.001}, {'end': 1727.38, 'text': 'we want to generate a service, and what do we want to name it?', 'start': 1724.099, 'duration': 3.281}], 'summary': 'Using angular cli to generate a service for fetching users from a public api', 'duration': 26.507, 'max_score': 1700.873, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/z4JUm0Bq9AM/pics/z4JUm0Bq9AM1700873.jpg'}, {'end': 1774.496, 'src': 'embed', 'start': 1750.998, 'weight': 0, 'content': [{'end': 1761.006, 'text': 'So the purpose of the service files makes it so that if we have any type of reusable code that we want access through by all of our components,', 'start': 1750.998, 'duration': 10.008}, {'end': 1762.607, 'text': 'then we can create a service out of it.', 'start': 1761.006, 'duration': 1.601}, {'end': 1763.427, 'text': 'All right.', 'start': 1763.167, 'duration': 0.26}, {'end': 1771.013, 'text': 'So when it comes to connecting to an API to try to communicate and get data from, like a database of some sort,', 'start': 1763.508, 'duration': 7.505}, {'end': 1773.595, 'text': 'then you would do it in a service file like this', 'start': 1771.013, 'duration': 2.582}, {'end': 1774.496, 'text': 'All right.', 'start': 1773.615, 'duration': 0.881}], 'summary': 'Service files allow reusable code access, like connecting to an api to get data.', 'duration': 23.498, 'max_score': 1750.998, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/z4JUm0Bq9AM/pics/z4JUm0Bq9AM1750998.jpg'}, {'end': 1835.021, 'src': 'embed', 'start': 1803.962, 'weight': 1, 'content': [{'end': 1807.844, 'text': 'angular comes in, comes with a built-in HTTP client.', 'start': 1803.962, 'duration': 3.882}, {'end': 1811.747, 'text': "so let's import that at the top of this file right here.", 'start': 1807.844, 'duration': 3.903}, {'end': 1816.99, 'text': "so we're going to import HTTP client.", 'start': 1811.747, 'duration': 5.243}, {'end': 1824.854, 'text': "it's all one word and then from Angular common HTTP.", 'start': 1816.99, 'duration': 7.864}, {'end': 1834.02, 'text': 'So where did I get this information? Well, if you just type in the Angular 5 or 4 or Angular 6 HTTP library, you get the official documentation.', 'start': 1824.894, 'duration': 9.126}, {'end': 1835.021, 'text': 'This is where it resides.', 'start': 1834.06, 'duration': 0.961}], 'summary': 'Angular has a built-in http client, imported from angular common http. official documentation provides more details.', 'duration': 31.059, 'max_score': 1803.962, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/z4JUm0Bq9AM/pics/z4JUm0Bq9AM1803962.jpg'}, {'end': 1886.985, 'src': 'embed', 'start': 1859.299, 'weight': 2, 'content': [{'end': 1869.089, 'text': "alright. then, finally, we're going to create a custom method that we will call upon in our component called get users.", 'start': 1859.299, 'duration': 9.79}, {'end': 1879.863, 'text': "Alright, so we're going to return once a component calls this this.http.", 'start': 1871.701, 'duration': 8.162}, {'end': 1881.223, 'text': 'and this is all right there.', 'start': 1879.863, 'duration': 1.36}, {'end': 1884.024, 'text': 'this is by using our instance right there.', 'start': 1881.223, 'duration': 2.801}, {'end': 1886.985, 'text': 'get, and what do we want to get?', 'start': 1884.024, 'duration': 2.961}], 'summary': "Creating a custom 'get users' method for component with http calls.", 'duration': 27.686, 'max_score': 1859.299, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/z4JUm0Bq9AM/pics/z4JUm0Bq9AM1859299.jpg'}, {'end': 2181.534, 'src': 'embed', 'start': 2145.15, 'weight': 4, 'content': [{'end': 2151.394, 'text': "So what we do, because we're using the observables here, is we subscribe to the observable.", 'start': 2145.15, 'duration': 6.244}, {'end': 2157.218, 'text': 'And we say the data will be bound to this.users.', 'start': 2152.595, 'duration': 4.623}, {'end': 2166.762, 'text': 'dot group, not dot, but equals the return data right here.', 'start': 2160.097, 'duration': 6.665}, {'end': 2169.885, 'text': "alright. so that's all we have to do.", 'start': 2166.762, 'duration': 3.123}, {'end': 2171.886, 'text': "so we'll save that now again.", 'start': 2169.885, 'duration': 2.001}, {'end': 2173.728, 'text': "still nothing's gonna happen in the browser.", 'start': 2171.886, 'duration': 1.842}, {'end': 2181.534, 'text': "we're going to first go to the HTML for our users component.", 'start': 2173.728, 'duration': 7.806}], 'summary': 'Using observables to bind data to this.users in the html for the users component.', 'duration': 36.384, 'max_score': 2145.15, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/z4JUm0Bq9AM/pics/z4JUm0Bq9AM2145150.jpg'}, {'end': 2261.84, 'src': 'heatmap', 'start': 2218.686, 'weight': 0.83, 'content': [{'end': 2225.629, 'text': 'well, basically, this ng4 directive is what allows you to iterate over an array or an array of objects.', 'start': 2218.686, 'duration': 6.943}, {'end': 2232.311, 'text': 'basically. so this is the name that will refer to it through interpolation right here.', 'start': 2225.629, 'duration': 6.682}, {'end': 2236.473, 'text': "alright, so I'll show you what interpolation is in a second.", 'start': 2232.311, 'duration': 4.162}, {'end': 2238.954, 'text': 'a router link equals.', 'start': 2236.473, 'duration': 2.481}, {'end': 2246.896, 'text': "When the person's name is clicked, we're going to direct it to the details page.", 'start': 2240.134, 'duration': 6.762}, {'end': 2251.797, 'text': 'And if you recall, we created that path in the app routing file.', 'start': 2247.736, 'duration': 4.061}, {'end': 2261.84, 'text': "And then through interpolation, which is done through these double curly brackets, we're going to reference user.id.", 'start': 2252.617, 'duration': 9.223}], 'summary': 'The ng4 directive iterates over an array or array of objects, using interpolation to refer to the name and user.id for routing.', 'duration': 43.154, 'max_score': 2218.686, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/z4JUm0Bq9AM/pics/z4JUm0Bq9AM2218686.jpg'}], 'start': 1700.873, 'title': 'Angular service and http client for api communication', 'summary': 'Covers creating angular services with angular cli to fetch data from an api, and using angular 6 http client for api communication, including custom method creation and observables for data binding.', 'chapters': [{'end': 1774.496, 'start': 1700.873, 'title': 'Angular services and api communication', 'summary': 'Discusses how to create a service in angular using angular cli to fetch data from a public api, emphasizing the purpose of service files and their role in connecting to an api.', 'duration': 73.623, 'highlights': ['The purpose of a service file in Angular is to create reusable code accessible by all components, facilitating the communication and retrieval of data from an API or database.', "Angular CLI is used to generate a service for fetching data from a public API, creating a service file named 'data' that contains both test and actual service files."]}, {'end': 2336.527, 'start': 1774.596, 'title': 'Angular 6 http client usage', 'summary': 'Discusses the usage of angular 6 http client to communicate with an api, including importing the http client, creating custom methods, and using observables for data binding.', 'duration': 561.931, 'highlights': ['The chapter explains the process of importing the Angular 6 HTTP client and creating an instance of it through dependency injection, allowing communication with an API.', "The transcript details the creation of a custom method 'getUsers' to retrieve data from a free public API, 'jsonplaceholder.typicode.com', which responds with 10 different users and their data.", "The usage of observables for data binding is highlighted, with the explanation of subscribing to the observable and binding the return data to a property 'users' for display in the component's HTML."]}], 'duration': 635.654, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/z4JUm0Bq9AM/pics/z4JUm0Bq9AM1700873.jpg', 'highlights': ['The purpose of a service file in Angular is to create reusable code accessible by all components, facilitating the communication and retrieval of data from an API or database.', 'The chapter explains the process of importing the Angular 6 HTTP client and creating an instance of it through dependency injection, allowing communication with an API.', "The transcript details the creation of a custom method 'getUsers' to retrieve data from a free public API, 'jsonplaceholder.typicode.com', which responds with 10 different users and their data.", "Angular CLI is used to generate a service for fetching data from a public API, creating a service file named 'data' that contains both test and actual service files.", "The usage of observables for data binding is highlighted, with the explanation of subscribing to the observable and binding the return data to a property 'users' for display in the component's HTML."]}, {'end': 2662.292, 'segs': [{'end': 2456.214, 'src': 'embed', 'start': 2392.718, 'weight': 0, 'content': [{'end': 2396.459, 'text': 'so the id will be user id.', 'start': 2392.718, 'duration': 3.741}, {'end': 2405.341, 'text': "we'll call it and then here at the end, this is going to be user.id.", 'start': 2396.459, 'duration': 8.882}, {'end': 2407.905, 'text': 'All right.', 'start': 2407.625, 'duration': 0.28}, {'end': 2410.367, 'text': 'So that gives us access just to a single user.', 'start': 2407.925, 'duration': 2.442}, {'end': 2411.028, 'text': 'All right.', 'start': 2410.748, 'duration': 0.28}, {'end': 2415.512, 'text': "And then also just for muscle memory, we're going to do get posts.", 'start': 2411.508, 'duration': 4.004}, {'end': 2420.496, 'text': "And we'll work with the posts portion of the API.", 'start': 2415.792, 'duration': 4.704}, {'end': 2421.857, 'text': 'All right.', 'start': 2420.696, 'duration': 1.161}, {'end': 2422.518, 'text': 'So save that.', 'start': 2421.898, 'duration': 0.62}, {'end': 2426.682, 'text': "And now we're going to go ahead to the details component.", 'start': 2423.699, 'duration': 2.983}, {'end': 2429.124, 'text': 'All right.', 'start': 2428.723, 'duration': 0.401}, {'end': 2434.969, 'text': "So we'll come up here to our details component.", 'start': 2429.244, 'duration': 5.725}, {'end': 2438.383, 'text': 'All right, so the same thing here.', 'start': 2436.121, 'duration': 2.262}, {'end': 2441.745, 'text': 'We want to import that data service and the observable.', 'start': 2438.403, 'duration': 3.342}, {'end': 2450.35, 'text': "I don't feel like typing all that out again, so we'll just come up here in the users component, copy that, paste it right here.", 'start': 2441.765, 'duration': 8.585}, {'end': 2456.214, 'text': "And this time, we're also going to have something new, and that will be called activated route.", 'start': 2450.37, 'duration': 5.844}], 'summary': 'The transcript discusses user id, accessing a single user, and working with the posts portion of the api.', 'duration': 63.496, 'max_score': 2392.718, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/z4JUm0Bq9AM/pics/z4JUm0Bq9AM2392718.jpg'}, {'end': 2553.146, 'src': 'embed', 'start': 2520.892, 'weight': 2, 'content': [{'end': 2530.315, 'text': "so what we're saying here is this dot route, dot params, and we're going to subscribe to them and we'll say params.", 'start': 2520.892, 'duration': 9.423}, {'end': 2543.342, 'text': 'this dot user is equal to the parameters and we named it ID in that the routing file, if you recall.', 'start': 2531.977, 'duration': 11.365}, {'end': 2547.724, 'text': 'so we just bring that up real quick app routing.', 'start': 2543.342, 'duration': 4.382}, {'end': 2549.165, 'text': 'we named it ID, alright.', 'start': 2547.724, 'duration': 1.441}, {'end': 2553.146, 'text': "so that's what that is in reference to right here.", 'start': 2549.165, 'duration': 3.981}], 'summary': 'Subscribing to dot route dot params to access user id in the routing file.', 'duration': 32.254, 'max_score': 2520.892, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/z4JUm0Bq9AM/pics/z4JUm0Bq9AM2520892.jpg'}], 'start': 2336.527, 'title': 'Fetching more data from api and angular component details implementation', 'summary': 'Covers fetching more data from an api, emphasizing the need to access user information and posts, while also demonstrating the implementation of a details component in angular, including importing data service and observable, defining properties, subscribing to parameters, and displaying user details through interpolation.', 'chapters': [{'end': 2429.124, 'start': 2336.527, 'title': 'Fetching more data from api', 'summary': 'Covers the process of fetching more data from an api, including creating methods to retrieve single users and posts, emphasizing the need to access user information and posts.', 'duration': 92.597, 'highlights': ['The process involves creating methods to retrieve single users and posts from the API.', 'Emphasizing the need to access user information and posts.', "Copying the 'get users' method and pasting it twice to create 'get user singular' and 'get posts' methods."]}, {'end': 2662.292, 'start': 2429.244, 'title': 'Angular component details implementation', 'summary': 'Demonstrates the implementation of a details component, including importing data service and observable, defining properties, subscribing to parameters, and displaying user details through interpolation.', 'duration': 233.048, 'highlights': ['The chapter covers the implementation of a details component, including importing data service and observable, defining properties, subscribing to parameters, and displaying user details through interpolation.', "Parameter subscription: The component demonstrates subscribing to parameters in the URL to retrieve user data, utilizing 'this.route.params' and the 'ID' parameter.", 'Displaying user details: The component exemplifies the display of user details through interpolation, including user name, username, email, and phone.', "Importing dependencies: The demonstration includes importing the data service and observable, as well as the 'activated route' from angular/router."]}], 'duration': 325.765, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/z4JUm0Bq9AM/pics/z4JUm0Bq9AM2336527.jpg', 'highlights': ['Emphasizing the need to access user information and posts.', 'The process involves creating methods to retrieve single users and posts from the API.', "Parameter subscription: The component demonstrates subscribing to parameters in the URL to retrieve user data, utilizing 'this.route.params' and the 'ID' parameter.", 'The chapter covers the implementation of a details component, including importing data service and observable, defining properties, subscribing to parameters, and displaying user details through interpolation.']}, {'end': 2995.359, 'segs': [{'end': 2697.525, 'src': 'embed', 'start': 2663.172, 'weight': 0, 'content': [{'end': 2666.013, 'text': "We have all the data that's associated with each user.", 'start': 2663.172, 'duration': 2.841}, {'end': 2668.054, 'text': 'Awesome, awesome stuff.', 'start': 2666.974, 'duration': 1.08}, {'end': 2673.936, 'text': "All right, so just for more muscle memory, let's repeat this process for posts.", 'start': 2669.074, 'duration': 4.862}, {'end': 2678.597, 'text': 'So this also contains an endpoint for posts.', 'start': 2674.096, 'duration': 4.501}, {'end': 2680.598, 'text': "Let's see, right here.", 'start': 2679.598, 'duration': 1}, {'end': 2681.979, 'text': "And we'll return 100 items.", 'start': 2680.998, 'duration': 0.981}, {'end': 2683.699, 'text': 'All right.', 'start': 2683.459, 'duration': 0.24}, {'end': 2689.762, 'text': 'So maybe pause it if you want to challenge yourself and try to do it yourself.', 'start': 2683.759, 'duration': 6.003}, {'end': 2697.525, 'text': "But it's repeating the same process if you wanted to make it so that when a user clicks on this little post or this message icon,", 'start': 2689.842, 'duration': 7.683}], 'summary': 'Data includes user and post details, with 100 items returned.', 'duration': 34.353, 'max_score': 2663.172, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/z4JUm0Bq9AM/pics/z4JUm0Bq9AM2663172.jpg'}, {'end': 2750.143, 'src': 'embed', 'start': 2716.856, 'weight': 2, 'content': [{'end': 2718.236, 'text': "That's what we refer to it as.", 'start': 2716.856, 'duration': 1.38}, {'end': 2721.197, 'text': "So it's forward slash posts right here in the endpoint.", 'start': 2718.997, 'duration': 2.2}, {'end': 2723.538, 'text': "And then we're going to go over.", 'start': 2721.857, 'duration': 1.681}, {'end': 2726.478, 'text': "First, we'll go to our details component.", 'start': 2724.158, 'duration': 2.32}, {'end': 2728.839, 'text': "We're going to grab some stuff that we're going to need.", 'start': 2726.498, 'duration': 2.341}, {'end': 2736.62, 'text': "So for our posts, we don't need the route, this activated route here, because it's just forward slash posts.", 'start': 2730.139, 'duration': 6.481}, {'end': 2739.101, 'text': "So let's go up here right there.", 'start': 2737.121, 'duration': 1.98}, {'end': 2750.143, 'text': 'import that also import private data service right there.', 'start': 2740.894, 'duration': 9.249}], 'summary': 'The transcript discusses importing and referencing endpoint details for forward slash posts.', 'duration': 33.287, 'max_score': 2716.856, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/z4JUm0Bq9AM/pics/z4JUm0Bq9AM2716856.jpg'}, {'end': 2903.679, 'src': 'embed', 'start': 2825.345, 'weight': 1, 'content': [{'end': 2835.804, 'text': "Awesome, right, so it would be cool, for instance i to make it so that we highlight in some manner which page they're on.", 'start': 2825.345, 'duration': 10.459}, {'end': 2839.267, 'text': 'so this is where class binding comes into play.', 'start': 2835.804, 'duration': 3.463}, {'end': 2841.309, 'text': "there's also style binding, but we're going to cut.", 'start': 2839.267, 'duration': 2.042}, {'end': 2849.657, 'text': "we're going to cover class binding, and so what it will allow us to do is to, based on a template expression,", 'start': 2841.309, 'duration': 8.348}, {'end': 2857.386, 'text': "It'll allow us to determine which route we're currently on and, if so, it will add a class to these list items right here.", 'start': 2850.357, 'duration': 7.029}, {'end': 2863.534, 'text': "And that will allow us to style it in such a way that it's blue and it will let the user know where they're at currently.", 'start': 2857.786, 'duration': 5.748}, {'end': 2868.66, 'text': "Alright, so to do that, let's go ahead to our sidebar component file.", 'start': 2864.415, 'duration': 4.245}, {'end': 2879.158, 'text': "all right, and we need access or a way to know which route we're on or which, which path or page.", 'start': 2872.034, 'duration': 7.124}, {'end': 2891.366, 'text': "so we're going to import the router and another function called navigation end and we're going to import it from the angular router.", 'start': 2879.158, 'duration': 12.208}, {'end': 2899.737, 'text': "all right, so now we're going to create an instance of the router, All right.", 'start': 2891.366, 'duration': 8.371}, {'end': 2903.679, 'text': "And then inside of here, we're going to say router.events.", 'start': 2900.217, 'duration': 3.462}], 'summary': 'Using class binding to highlight current page in angular router.', 'duration': 78.334, 'max_score': 2825.345, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/z4JUm0Bq9AM/pics/z4JUm0Bq9AM2825345.jpg'}], 'start': 2663.172, 'title': 'Angular development', 'summary': 'Discusses creating an endpoint for posts and retrieving 100 items, as well as using class binding in angular to highlight current page, facilitating user interaction and dynamic styling changes.', 'chapters': [{'end': 2824.564, 'start': 2663.172, 'title': 'Endpoint for posts and retrieving data', 'summary': 'Discusses the process of creating an endpoint for posts and retrieving 100 items, emphasizing the importance of defining the method in the service and implementing it in the details component, allowing users to view posts from the endpoint.', 'duration': 161.392, 'highlights': ['Creating an endpoint for posts The chapter emphasizes the process of creating an endpoint for posts and mentions the return of 100 items, demonstrating the importance of defining the method in the service.', "Implementing endpoint in the details component The importance of implementing the endpoint in the details component is highlighted, emphasizing the subscription to data and passing it to 'posts' for display.", 'Displaying posts in the post component The process of displaying posts in the post component is explained, including the iteration through posts and the display of post title and body.']}, {'end': 2995.359, 'start': 2825.345, 'title': 'Angular class binding for highlighting current page', 'summary': "Discusses the usage of class binding in angular to dynamically add a class to list items based on the current route, allowing for styling changes to indicate the user's current page.", 'duration': 170.014, 'highlights': ["Class binding allows to dynamically add a class to list items based on the current route. This feature enables the styling of list items to indicate the user's current page, enhancing user experience.", 'Usage of router and navigation end function to determine the current route. The process involves importing the router and navigation end function from the Angular router, creating an instance of the router, and subscribing to router events to obtain the current URL.', "Implementation of class binding in the template file. The class binding is applied in the template file for the sidebar component using a template expression to validate and add the 'activated' class, which has been predefined for styling purposes."]}], 'duration': 332.187, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/z4JUm0Bq9AM/pics/z4JUm0Bq9AM2663172.jpg', 'highlights': ['Creating an endpoint for posts and retrieving 100 items', 'Class binding allows to dynamically add a class to list items based on the current route', 'Implementing endpoint in the details component', 'Usage of router and navigation end function to determine the current route', 'Displaying posts in the post component', 'Implementation of class binding in the template file']}, {'end': 3765.436, 'segs': [{'end': 3059.367, 'src': 'embed', 'start': 3030.814, 'weight': 0, 'content': [{'end': 3034.976, 'text': "Alright, so the final thing that we're going to take a look at is just animations.", 'start': 3030.814, 'duration': 4.162}, {'end': 3042.639, 'text': "Alright, so let's say for instance when this page loads here, this user's page loads, we want to have these animate in.", 'start': 3035.116, 'duration': 7.523}, {'end': 3052.884, 'text': "Alright, so Angular 6 comes with, it doesn't come with it, you have to install it, but Angular has its own animation library and it is quite powerful.", 'start': 3042.659, 'duration': 10.225}, {'end': 3059.367, 'text': 'And it can be quite confusing to understand at first, so just bear that in mind with me.', 'start': 3053.644, 'duration': 5.723}], 'summary': 'Angular 6 has a powerful animation library that needs to be installed separately.', 'duration': 28.553, 'max_score': 3030.814, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/z4JUm0Bq9AM/pics/z4JUm0Bq9AM3030814.jpg'}, {'end': 3142.015, 'src': 'embed', 'start': 3110.231, 'weight': 2, 'content': [{'end': 3112.513, 'text': 'So the import statement, here it is in full.', 'start': 3110.231, 'duration': 2.282}, {'end': 3119.701, 'text': "So we're importing browser animations module from Angular Platform Browser forward slash animations.", 'start': 3112.974, 'duration': 6.727}, {'end': 3123.546, 'text': 'And then we have to add it as import as well.', 'start': 3120.382, 'duration': 3.164}, {'end': 3128.131, 'text': 'So we copy this, put a comma there, and then there we go.', 'start': 3123.606, 'duration': 4.525}, {'end': 3137.933, 'text': 'Alright, now in order for us to use it in one of our components, we have to import the various animation functions from the animations library.', 'start': 3129.229, 'duration': 8.704}, {'end': 3142.015, 'text': 'So we want to use it in our users component.', 'start': 3138.453, 'duration': 3.562}], 'summary': 'Imported browser animations module from angular platform browser for use in the users component.', 'duration': 31.784, 'max_score': 3110.231, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/z4JUm0Bq9AM/pics/z4JUm0Bq9AM3110231.jpg'}, {'end': 3690.579, 'src': 'embed', 'start': 3662.996, 'weight': 3, 'content': [{'end': 3667.498, 'text': 'and then we have all of our stuff, all the stuff that we would upload right here.', 'start': 3662.996, 'duration': 4.502}, {'end': 3668.658, 'text': "but it's quite large.", 'start': 3667.498, 'duration': 1.16}, {'end': 3671.52, 'text': "like the vendors, that's 3.5 megs for simple app.", 'start': 3668.658, 'duration': 2.862}, {'end': 3672.721, 'text': "that's crazy right.", 'start': 3671.52, 'duration': 1.201}, {'end': 3676.663, 'text': 'so we would add for production ng build, hyphen, prod.', 'start': 3672.721, 'duration': 3.942}, {'end': 3684.311, 'text': "Now, when we do this, it's going to add this prod flag will greatly reduce the size of it.", 'start': 3677.663, 'duration': 6.648}, {'end': 3690.579, 'text': 'And if you have any issues in your code, it will be quick to point them out right here, like in the details component HTML file.', 'start': 3684.712, 'duration': 5.867}], 'summary': "Using 'ng build --prod' reduces app size to 3.5mb, aiding quick issue resolution.", 'duration': 27.583, 'max_score': 3662.996, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/z4JUm0Bq9AM/pics/z4JUm0Bq9AM3662996.jpg'}], 'start': 2995.419, 'title': 'Angular animations', 'summary': "Covers the installation and usage of angular animations library, and explains the implementation of stagger animations in angular 6 with tips on reducing app size using 'ng build prod' command.", 'chapters': [{'end': 3334.994, 'start': 2995.419, 'title': 'Angular animations overview', 'summary': 'Covers the installation of angular animations library, importation of animation functions, and the definition of animation triggers and transitions for components, along with a brief overview of the functionality and its potential usage.', 'duration': 339.575, 'highlights': ['The chapter covers the installation of Angular animations library The speaker explains the steps for installing the Angular animations library using the console with a runtime of around 5 seconds.', 'Definition of animation triggers and transitions for components The speaker demonstrates the process of defining animation triggers and transitions for components, including the usage of key animation functions such as trigger, style, transition, animate, keyframes, query, and stagger.', 'Importation of animation functions The chapter details the importation of various animation functions from the Angular animations library for usage in the users component, providing insight into the required and optional functions for different purposes.']}, {'end': 3765.436, 'start': 3335.654, 'title': 'Angular 6 animations', 'summary': "Explains the implementation of stagger animations in angular 6 with detailed code examples and tips on reducing app size by using 'ng build prod' command.", 'duration': 429.782, 'highlights': ["Explanation of stagger animations The chapter provides a detailed explanation of stagger animations in Angular 6, including the use of 'query', 'animate', and 'style' functions with specific durations and easing options.", "Reduction of app size using 'ng build prod' The chapter highlights the process of reducing app size by using the 'ng build prod' command, which significantly decreases the file size from 3.5 MB to 339 KB.", 'Encouragement for further learning The chapter encourages further learning by suggesting visiting the official website for more in-depth understanding of Angular 6 and mentions upcoming tutorials on intermediate topics.']}], 'duration': 770.017, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/z4JUm0Bq9AM/pics/z4JUm0Bq9AM2995419.jpg', 'highlights': ['The chapter covers the installation of Angular animations library with a runtime of around 5 seconds.', 'The chapter provides a detailed explanation of stagger animations in Angular 6.', 'The chapter details the importation of various animation functions from the Angular animations library for usage in the users component.', "The chapter highlights the process of reducing app size by using the 'ng build prod' command, which significantly decreases the file size from 3.5 MB to 339 KB."]}], 'highlights': ["The CLI command 'ng generate component [componentName]' streamlines the process of creating a new component by generating four files and updating the app.module.ts file.", 'The chapter covers setting up the final bit of CSS for the sidebar, updating the routing file, and importing components for routing in the app routing module.', 'The purpose of a service file in Angular is to create reusable code accessible by all components, facilitating the communication and retrieval of data from an API or database.', 'The chapter covers the installation of Angular animations library with a runtime of around 5 seconds.']}