title
Angular 2 Complete Course - Sections 1 & 2

description
New Version (updated Angular Version) of this Video: https://www.youtube.com/watch?v=DBjPIabiRNg Enjoy the complete (fully updated!), extremely comprehensive, 5-star rated course: https://acad.link/angular Boilerplate Github Repository: https://github.com/mschwarzmueller/angular-2-beta-boilerplate For RC: https://github.com/mschwarzmueller/angular2-seed (change imports to use @angular instead of angular2!) You can follow me on Twitter (@maxedapps), Facebook (https://www.facebook.com/academindchannel/) or visit our Website (https://www.academind.com). See you in the videos!

detail
{'title': 'Angular 2 Complete Course - Sections 1 & 2', 'heatmap': [{'end': 1082.26, 'start': 847.217, 'weight': 0.711}], 'summary': 'This 13-hour angular 2 course by maximilian schwarzmuller provides practical knowledge and experience in creating basic and advanced applications, covering angular 2 basics, application architecture, workspace setup, project structure, components, data output, directives, and dom manipulation.', 'chapters': [{'end': 248.82, 'segs': [{'end': 49.064, 'src': 'embed', 'start': 1.325, 'weight': 1, 'content': [{'end': 1.945, 'text': 'Hi everyone,', 'start': 1.325, 'duration': 0.62}, {'end': 12.171, 'text': "my name is Maximilian Schwarzmuller and in this video I'm releasing content from the first two sections of my five-star rated 13 hours Angular 2 course.", 'start': 1.945, 'duration': 10.226}, {'end': 13.051, 'text': 'I got on Udemy.', 'start': 12.171, 'duration': 0.88}, {'end': 21.336, 'text': 'After this video, you should be able to create your very first basic Angular 2 applications to set up your development environment,', 'start': 13.912, 'duration': 7.424}, {'end': 27.019, 'text': 'and you should have a basic knowledge about components, templates and what makes up an Angular 2 application.', 'start': 21.336, 'duration': 5.683}, {'end': 36.626, 'text': 'If you then want to learn more or dive deeper, I would be very happy to welcome you in this course as well, of course,', 'start': 27.999, 'duration': 8.627}, {'end': 38.788, 'text': 'as in all the other videos I got on this channel.', 'start': 36.626, 'duration': 2.162}, {'end': 43.111, 'text': "I wish you a lot of fun with the content and well, let's get going.", 'start': 39.428, 'duration': 3.683}, {'end': 49.064, 'text': 'Hi everyone, welcome to this course.', 'start': 47.102, 'duration': 1.962}], 'summary': 'Maximilian schwarzmuller releases content from first two sections of his 13-hour angular 2 course on udemy.', 'duration': 47.739, 'max_score': 1.325, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke81325.jpg'}, {'end': 134.696, 'src': 'embed', 'start': 109.366, 'weight': 0, 'content': [{'end': 118.369, 'text': 'This course is structured such that we learn all the fundamental building blocks of an Angular 2 application, all the theory and how to apply it.', 'start': 109.366, 'duration': 9.003}, {'end': 120.27, 'text': 'We have a lot of practical examples.', 'start': 118.65, 'duration': 1.62}, {'end': 122.671, 'text': 'In later stages of the course,', 'start': 120.91, 'duration': 1.761}, {'end': 134.696, 'text': "we'll create a real application which is more advanced than all the examples in the different sections and which will allow you to train all the concepts you learned in the sections before this.", 'start': 122.671, 'duration': 12.025}], 'summary': 'Angular 2 course covers fundamental building blocks, practical examples, and culminates in an advanced real application.', 'duration': 25.33, 'max_score': 109.366, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke8109366.jpg'}, {'end': 177.411, 'src': 'embed', 'start': 147.914, 'weight': 2, 'content': [{'end': 151.997, 'text': 'Now, I know most of you just want to get started, and we will do so in section 2,', 'start': 147.914, 'duration': 4.083}, {'end': 157.142, 'text': 'where we dive into components which are the key building block of any Angular 2 application.', 'start': 151.997, 'duration': 5.145}, {'end': 165.119, 'text': "Thereafter we'll learn more about data binding, which is how we can work with data in an Angular 2 application,", 'start': 157.912, 'duration': 7.207}, {'end': 171.545, 'text': 'how we can manipulate and change the DOM and pass data around in our application a very key concept.', 'start': 165.119, 'duration': 6.426}, {'end': 177.411, 'text': "Thereafter we'll talk about directives, learn what directives are and how we use them,", 'start': 172.166, 'duration': 5.245}], 'summary': 'In section 2, learn about angular 2 components, data binding, dom manipulation, and directives.', 'duration': 29.497, 'max_score': 147.914, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke8147914.jpg'}], 'start': 1.325, 'title': 'Angular 2 basics & course overview', 'summary': 'Introduces a 13-hour angular 2 course by maximilian schwarzmuller, covering creating basic applications, learning about components and templates, and providing practical knowledge and experience to create advanced angular 2 applications.', 'chapters': [{'end': 87.804, 'start': 1.325, 'title': 'Angular 2 basics & introduction', 'summary': "Introduces maximilian schwarzmuller's 13 hours angular 2 course, providing an overview of the content, the instructor's qualifications, and the learning objectives, including creating basic angular 2 applications and gaining knowledge about components and templates.", 'duration': 86.479, 'highlights': ['Maximilian Schwarzmuller introduces the first two sections of his 13 hours Angular 2 course, which is rated five stars on Udemy. The high rating indicates the quality and popularity of the course.', 'The video aims to enable viewers to create their very first basic Angular 2 applications and gain a basic understanding of components and templates. This sets clear learning objectives for the viewers.', "Maximilian Schwarzmuller emphasizes his qualifications to teach Angular 2, having worked with it since the alpha stage and possessing a profound knowledge of the framework. This establishes the instructor's credibility and expertise in Angular 2.", "The instructor expresses his enjoyment in working with JavaScript and Angular 2, as well as his passion for teaching. This indicates the instructor's enthusiasm and dedication to the subject matter."]}, {'end': 248.82, 'start': 88.464, 'title': 'Angular 2 course overview', 'summary': 'Outlines an angular 2 course, covering fundamental building blocks, practical examples, and a real advanced application, culminating in the ability to create angular 2 applications with practical knowledge and experience.', 'duration': 160.356, 'highlights': ['The course covers all the fundamental building blocks of an Angular 2 application and how to apply them, with practical examples and a real advanced application at the end.', 'The course structure includes learning about components, data binding, directives, services, forms, pipes, routing, and http in Angular 2.', 'The practical knowledge gained from the course will enable learners to create Angular 2 applications and work with data, DOM manipulation, and server access.', 'The course emphasizes the practical aspects of working with forms, the use of pipes for data transformation, and setting up routing and server access in Angular 2.']}], 'duration': 247.495, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke81325.jpg', 'highlights': ['The course covers all fundamental building blocks of an Angular 2 application with practical examples and a real advanced application at the end.', 'The video aims to enable viewers to create their very first basic Angular 2 applications and gain a basic understanding of components and templates.', 'The course structure includes learning about components, data binding, directives, services, forms, pipes, routing, and http in Angular 2.', 'Maximilian Schwarzmuller introduces the first two sections of his 13-hour Angular 2 course, which is rated five stars on Udemy.']}, {'end': 712.378, 'segs': [{'end': 300.764, 'src': 'embed', 'start': 275.018, 'weight': 0, 'content': [{'end': 281.86, 'text': 'Angular 2 follows a certain philosophy or, yes, architecture when it comes to building up applications with it.', 'start': 275.018, 'duration': 6.842}, {'end': 286.601, 'text': 'Basically, an Angular 2 application is very modular.', 'start': 282.7, 'duration': 3.901}, {'end': 293.882, 'text': 'We have a lot of modules, something that TypeScript supports really well, that hold the different parts of our application.', 'start': 286.841, 'duration': 7.041}, {'end': 300.764, 'text': 'And the Angular 2 framework itself also consists of a lot of packages or modules.', 'start': 294.662, 'duration': 6.102}], 'summary': 'Angular 2 emphasizes modularity and uses typescript for building applications.', 'duration': 25.746, 'max_score': 275.018, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke8275018.jpg'}, {'end': 378.246, 'src': 'embed', 'start': 352.27, 'weight': 2, 'content': [{'end': 358.515, 'text': 'We will have one or multiple components that really structure our application.', 'start': 352.27, 'duration': 6.245}, {'end': 362.698, 'text': 'You can think of it like an HTML document where you have a header,', 'start': 358.995, 'duration': 3.703}, {'end': 368.862, 'text': 'then a main section and the main section might have a sidebar and then a content section and then you have a footer at the end.', 'start': 362.698, 'duration': 6.164}, {'end': 378.246, 'text': 'that are certain sections or components on your webpage as well, right? Now Angular 2 works the same way.', 'start': 369.798, 'duration': 8.448}], 'summary': 'Angular 2 organizes application into components, similar to html structure.', 'duration': 25.976, 'max_score': 352.27, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke8352270.jpg'}, {'end': 694.49, 'src': 'embed', 'start': 635.059, 'weight': 1, 'content': [{'end': 642.224, 'text': 'well, service this class and then we take this service and inject it into component A and B,', 'start': 635.059, 'duration': 7.165}, {'end': 647.747, 'text': 'and then both components are able to use the functionality provided by this service.', 'start': 642.224, 'duration': 5.523}, {'end': 652.531, 'text': 'So service is also a key thing in Angular 2 applications,', 'start': 647.867, 'duration': 4.664}, {'end': 664.597, 'text': 'holding certain data or functionality that we store in this kind of centralized place that we can then use throughout our application.', 'start': 652.531, 'duration': 12.066}, {'end': 673.262, 'text': "So that's the architecture of an Angular 2 application, having these modules with components that make up our application directives,", 'start': 665.158, 'duration': 8.104}, {'end': 678.785, 'text': 'which change the DOM services, which kind of stores,', 'start': 673.262, 'duration': 5.523}, {'end': 688.328, 'text': 'central parts of our application that are usable in different places of our application and that are injected into those places or modules?', 'start': 678.785, 'duration': 9.543}, {'end': 694.49, 'text': 'And that is kind of the core philosophy of an Angular 2 application.', 'start': 689.268, 'duration': 5.222}], 'summary': 'Angular 2 architecture includes modules, components, and services, serving as a centralized store for data and functionality.', 'duration': 59.431, 'max_score': 635.059, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke8635059.jpg'}], 'start': 248.82, 'title': 'Angular 2 application architecture', 'summary': 'Discusses the modularity of an angular 2 application, focusing on components for reusability and scalability, making maintenance easier. it also emphasizes the use of components, directives, and services as modular building blocks for creating centralized functionality.', 'chapters': [{'end': 452.385, 'start': 248.82, 'title': 'Angular 2 application architecture', 'summary': 'Discusses the architecture of an angular 2 application, emphasizing its modularity with a focus on components, which enable reusability and scalability while making it easy to maintain.', 'duration': 203.565, 'highlights': ['Angular 2 applications are modular, consisting of many modules that hold different parts of the application, which allows for reusability and scalability. The modularity of Angular 2 applications enables reusability and scalability, making it easy to maintain, resembling server-side frameworks with certain includes or components.', 'Components are a crucial aspect of every Angular 2 application, allowing for the structuring of the application and enabling the creation of reusable parts. Components in Angular 2 applications are crucial for structuring the application and creating reusable parts, similar to creating sections or components on a webpage.', 'Components in Angular 2 applications can be used as siblings or nested within each other, allowing for communication and reusability. Components in Angular 2 applications can be used as siblings or nested within each other, enabling communication and reusability, thus contributing to the ease of maintenance.']}, {'end': 712.378, 'start': 452.945, 'title': 'Angular 2 architecture overview', 'summary': 'Explains the architecture of an angular 2 application, emphasizing the use of components, directives, and services as modular building blocks for creating reusable and centralized functionality throughout the application.', 'duration': 259.433, 'highlights': ['Components are directives with a view attached to them Components in Angular 2 are directives with an attached view, allowing for the creation of reusable HTML elements with specific functionality.', 'Services provide centralized functionality accessible from different parts of the application Services in Angular 2 act as centralized repositories for functionality or data that can be injected into various components or directives, promoting reusability and avoiding code duplication.', 'Modularity, building blocks, and reusability are core philosophies of Angular 2 application architecture The architecture of Angular 2 applications revolves around the principles of modularity, building blocks, and reusability, emphasizing the creation of modular components and the centralized nature of services.']}], 'duration': 463.558, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke8248820.jpg', 'highlights': ['Components in Angular 2 applications can be used as siblings or nested within each other, enabling communication and reusability, thus contributing to the ease of maintenance.', 'Services in Angular 2 act as centralized repositories for functionality or data that can be injected into various components or directives, promoting reusability and avoiding code duplication.', 'Components are a crucial aspect of every Angular 2 application, allowing for the structuring of the application and enabling the creation of reusable parts.', 'Modularity, building blocks, and reusability are core philosophies of Angular 2 application architecture.', 'Angular 2 applications are modular, consisting of many modules that hold different parts of the application, which allows for reusability and scalability.']}, {'end': 1132.448, 'segs': [{'end': 742.251, 'src': 'embed', 'start': 712.558, 'weight': 0, 'content': [{'end': 724.915, 'text': 'Bye. To develop Angular 2 applications, we need to create a certain development environment or workspace with which we will work throughout this course.', 'start': 712.558, 'duration': 12.357}, {'end': 727.998, 'text': 'Now, this workspace is really easy to set up.', 'start': 725.516, 'duration': 2.482}, {'end': 731.561, 'text': 'Indeed, I actually prepared it for you already.', 'start': 728.479, 'duration': 3.082}, {'end': 742.251, 'text': 'But there are two things we will have to do or to install on our machines to be able to use this workspace and especially use TypeScript.', 'start': 732.202, 'duration': 10.049}], 'summary': 'Prepare angular 2 workspace with ease, install typescript for usage.', 'duration': 29.693, 'max_score': 712.558, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke8712558.jpg'}, {'end': 818.928, 'src': 'embed', 'start': 788.357, 'weight': 1, 'content': [{'end': 790.398, 'text': 'And the other thing is obviously, well, TypeScript.', 'start': 788.357, 'duration': 2.041}, {'end': 796.782, 'text': 'The TypeScript compiler, which we need to install in our system so that we can use it throughout this project.', 'start': 790.858, 'duration': 5.924}, {'end': 797.963, 'text': "Let's get started.", 'start': 797.282, 'duration': 0.681}, {'end': 801.605, 'text': "The first thing I'm going to do is I'm going to search for Node.js.", 'start': 798.803, 'duration': 2.802}, {'end': 804.984, 'text': 'and on their website.', 'start': 803.664, 'duration': 1.32}, {'end': 811.646, 'text': 'you want to download the latest major and dependable version here for your system.', 'start': 804.984, 'duration': 6.662}, {'end': 818.928, 'text': "so either if you're a mac, you download it, or windows 2, so it's available for all systems, and then you just will download this,", 'start': 811.646, 'duration': 7.282}], 'summary': 'Install typescript compiler and node.js for project setup.', 'duration': 30.571, 'max_score': 788.357, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke8788357.jpg'}, {'end': 1082.26, 'src': 'heatmap', 'start': 847.217, 'weight': 0.711, 'content': [{'end': 851.399, 'text': 'So to do this, you want to fire up a terminal again on Windows.', 'start': 847.217, 'duration': 4.182}, {'end': 861.845, 'text': 'just open the command line on Mac, you will use your terminal app, and then what we want to do in this terminal here is on Mac we type sudo,', 'start': 851.399, 'duration': 10.446}, {'end': 867.528, 'text': "on Windows we don't, and then on both systems we follow up with npm.", 'start': 861.845, 'duration': 5.683}, {'end': 870.49, 'text': 'install npm-g.', 'start': 867.528, 'duration': 2.962}, {'end': 876.362, 'text': 'Now you hit this and then you enter your your password, your admin password on Mac.', 'start': 871.21, 'duration': 5.152}, {'end': 880.986, 'text': "And again, on Windows, you don't need that sudo command.", 'start': 877.303, 'duration': 3.683}, {'end': 882.007, 'text': 'So this is now running.', 'start': 881.086, 'duration': 0.921}, {'end': 884.969, 'text': 'And this makes sure we have the latest version of npm.', 'start': 882.387, 'duration': 2.582}, {'end': 892.035, 'text': 'Now, after that, we want to type npm minus v, well, to check which version we have.', 'start': 886.931, 'duration': 5.104}, {'end': 893.996, 'text': 'And, well, that seems pretty good.', 'start': 892.195, 'duration': 1.801}, {'end': 897.039, 'text': 'Good So now we got npm installed.', 'start': 895.277, 'duration': 1.762}, {'end': 898.96, 'text': 'The next thing is we need TypeScript.', 'start': 897.279, 'duration': 1.681}, {'end': 903.164, 'text': "To do this, well, we'll Google for it, TypeScript.", 'start': 899.521, 'duration': 3.643}, {'end': 908.247, 'text': "And then it's the first result here, typescriptlang.org.", 'start': 905.526, 'duration': 2.721}, {'end': 918.909, 'text': "And when we click on get TypeScript now, we're taken to this little command here, which we just copy and then enter into our still open terminal here.", 'start': 909.707, 'duration': 9.202}, {'end': 925.291, 'text': "And now I'm not going to execute it because I have TypeScript installed, but you just hit enter and this will install TypeScript.", 'start': 919.469, 'duration': 5.822}, {'end': 928.204, 'text': "And it's the same on Windows and Mac.", 'start': 926.463, 'duration': 1.741}, {'end': 933.207, 'text': "You don't need to execute this command, this is just for compilation, which we're not doing manually.", 'start': 928.864, 'duration': 4.343}, {'end': 938.229, 'text': 'We will let npm or specifically gulp handle this.', 'start': 933.247, 'duration': 4.982}, {'end': 939.35, 'text': "Okay, so that's that.", 'start': 938.35, 'duration': 1}, {'end': 940.931, 'text': 'We have all the tools we need.', 'start': 939.49, 'duration': 1.441}, {'end': 942.792, 'text': 'Now we need the actual workspace.', 'start': 941.111, 'duration': 1.681}, {'end': 950.096, 'text': 'You also find attached to this video a description, a PDF document, which will guide you through this whole installation process.', 'start': 943.332, 'duration': 6.764}, {'end': 958.358, 'text': "Now, the last step we have to do is actually set up our workspace, so the files we're going to use to write our Angular 2 application.", 'start': 950.854, 'duration': 7.504}, {'end': 960.038, 'text': 'This is really easy.', 'start': 958.778, 'duration': 1.26}, {'end': 966.301, 'text': "Attached to this video, you'll find a file called workspace manual installation.", 'start': 961.139, 'duration': 5.162}, {'end': 967.882, 'text': 'Download this file.', 'start': 966.822, 'duration': 1.06}, {'end': 971.464, 'text': "And we'll save it basically anywhere.", 'start': 969.283, 'duration': 2.181}, {'end': 974.785, 'text': 'And then you want to extract this file.', 'start': 971.484, 'duration': 3.301}, {'end': 981.414, 'text': "What I'm going to do is I'll just Getting this on my desktop.", 'start': 976.146, 'duration': 5.268}, {'end': 984.096, 'text': 'Okay, so here is my folder.', 'start': 982.916, 'duration': 1.18}, {'end': 987.839, 'text': "First, I'm going to rename it to, let's say, Angular 2 app.", 'start': 984.157, 'duration': 3.682}, {'end': 990.021, 'text': 'Name is purely up to you, obviously.', 'start': 988.4, 'duration': 1.621}, {'end': 998.428, 'text': 'And the next thing is we have to install all our dependencies like, well, the Angular 2 framework itself and a couple of other dependencies.', 'start': 990.822, 'duration': 7.606}, {'end': 1004.613, 'text': "We do this by, well, opening up our terminal again if we haven't already.", 'start': 998.728, 'duration': 5.885}, {'end': 1011.832, 'text': 'And in this terminal you want to navigate to this folder.', 'start': 1007.613, 'duration': 4.219}, {'end': 1029.188, 'text': 'Inside this folder we then have to run npm install and this will install all the packages we need.', 'start': 1021.201, 'duration': 7.987}, {'end': 1036.993, 'text': 'Now, this might take a couple of seconds and you might see some errors throughout this process, but that is not really a problem,', 'start': 1029.488, 'duration': 7.505}, {'end': 1039.976, 'text': 'because it only means that some things had to be recompiled, maybe.', 'start': 1036.993, 'duration': 2.983}, {'end': 1043.598, 'text': 'In the end it should finish without an error and I will see you then.', 'start': 1040.817, 'duration': 2.781}, {'end': 1048.56, 'text': 'So my installation just finished and this is how it should look like on your machine too.', 'start': 1044.239, 'duration': 4.321}, {'end': 1053.484, 'text': "No errors, warnings are okay and now we're good to go.", 'start': 1048.761, 'duration': 4.723}, {'end': 1059.126, 'text': "Now I'm still inside this folder here in my terminal and now I type npm start.", 'start': 1053.704, 'duration': 5.422}, {'end': 1068.757, 'text': 'What this will do is it will compile the files and start our light server and the Gulp process,', 'start': 1060.087, 'duration': 8.67}, {'end': 1073.418, 'text': 'which will watch all our files and recompile them whenever we change something there.', 'start': 1068.757, 'duration': 4.661}, {'end': 1082.26, 'text': 'Now, this will open up a new browser tab, specifically this one here, and you might see that loading text here.', 'start': 1074.498, 'duration': 7.762}], 'summary': 'Install npm and typescript, set up workspace, install dependencies, and start server.', 'duration': 235.043, 'max_score': 847.217, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke8847217.jpg'}, {'end': 928.204, 'src': 'embed', 'start': 882.387, 'weight': 4, 'content': [{'end': 884.969, 'text': 'And this makes sure we have the latest version of npm.', 'start': 882.387, 'duration': 2.582}, {'end': 892.035, 'text': 'Now, after that, we want to type npm minus v, well, to check which version we have.', 'start': 886.931, 'duration': 5.104}, {'end': 893.996, 'text': 'And, well, that seems pretty good.', 'start': 892.195, 'duration': 1.801}, {'end': 897.039, 'text': 'Good So now we got npm installed.', 'start': 895.277, 'duration': 1.762}, {'end': 898.96, 'text': 'The next thing is we need TypeScript.', 'start': 897.279, 'duration': 1.681}, {'end': 903.164, 'text': "To do this, well, we'll Google for it, TypeScript.", 'start': 899.521, 'duration': 3.643}, {'end': 908.247, 'text': "And then it's the first result here, typescriptlang.org.", 'start': 905.526, 'duration': 2.721}, {'end': 918.909, 'text': "And when we click on get TypeScript now, we're taken to this little command here, which we just copy and then enter into our still open terminal here.", 'start': 909.707, 'duration': 9.202}, {'end': 925.291, 'text': "And now I'm not going to execute it because I have TypeScript installed, but you just hit enter and this will install TypeScript.", 'start': 919.469, 'duration': 5.822}, {'end': 928.204, 'text': "And it's the same on Windows and Mac.", 'start': 926.463, 'duration': 1.741}], 'summary': 'Install npm, check version, install typescript on windows and mac', 'duration': 45.817, 'max_score': 882.387, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke8882387.jpg'}, {'end': 1082.26, 'src': 'embed', 'start': 1060.087, 'weight': 6, 'content': [{'end': 1068.757, 'text': 'What this will do is it will compile the files and start our light server and the Gulp process,', 'start': 1060.087, 'duration': 8.67}, {'end': 1073.418, 'text': 'which will watch all our files and recompile them whenever we change something there.', 'start': 1068.757, 'duration': 4.661}, {'end': 1082.26, 'text': 'Now, this will open up a new browser tab, specifically this one here, and you might see that loading text here.', 'start': 1074.498, 'duration': 7.762}], 'summary': 'Compiling files and starting the light server, with gulp process to watch and recompile files when changed, opening a new browser tab.', 'duration': 22.173, 'max_score': 1060.087, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke81060087.jpg'}], 'start': 712.558, 'title': 'Setting up angular 2 workspace', 'summary': 'Covers the setup of a development environment for angular 2 applications, including the installation of node.js and typescript, enabling the use of npm for dependency management and typescript compilation. it also explains the process of setting up the angular 2 workspace, including installing necessary tools like node, npm, and typescript, downloading workspace files, and running commands to install dependencies and start the development server.', 'chapters': [{'end': 830.208, 'start': 712.558, 'title': 'Setting up angular 2 workspace', 'summary': 'Covers the setup of a development environment for angular 2 applications, including the installation of node.js and typescript, enabling the use of npm for dependency management and typescript compilation.', 'duration': 117.65, 'highlights': ['The chapter covers the setup of a development environment for Angular 2 applications. Setting up a development environment for Angular 2 applications', 'The installation of Node.js and npm is necessary for managing dependencies and TypeScript compilation. Necessary installation of Node.js and npm for managing dependencies and TypeScript compilation', 'The installation of TypeScript compiler is required for using TypeScript throughout the project. Required installation of TypeScript compiler for using TypeScript throughout the project']}, {'end': 1132.448, 'start': 830.288, 'title': 'Setting up angular 2 workspace', 'summary': 'Explains the process of setting up the angular 2 workspace, including installing necessary tools like node, npm, and typescript, downloading workspace files, and running commands to install dependencies and start the development server.', 'duration': 302.16, 'highlights': ['The chapter explains the process of setting up the Angular 2 workspace, including installing necessary tools like Node, NPM, and TypeScript, downloading workspace files, and running commands to install dependencies and start the development server.', "To ensure the most recent version of NPM, users are instructed to run 'npm install npm-g', and then check the version with 'npm -v'.", 'The installation of TypeScript is demonstrated by directing users to the website typescriptlang.org and running the installation command in the terminal.', "After setting up the workspace and installing dependencies, users are instructed to run 'npm start' to compile files, start the server, and initiate the Gulp process for file-watching and recompilation."]}], 'duration': 419.89, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke8712558.jpg', 'highlights': ['Setting up a development environment for Angular 2 applications', 'Necessary installation of Node.js and npm for managing dependencies and TypeScript compilation', 'Required installation of TypeScript compiler for using TypeScript throughout the project', 'Explaining the process of setting up the Angular 2 workspace and installing necessary tools', 'Instructions for updating NPM and checking the version', 'Demonstration of TypeScript installation through the website and terminal command', "Instructions for running 'npm start' to compile files, start the server, and initiate the Gulp process"]}, {'end': 1540.818, 'segs': [{'end': 1180.299, 'src': 'embed', 'start': 1133.889, 'weight': 0, 'content': [{'end': 1137.831, 'text': 'This is the boilerplate as it was installed in the last video.', 'start': 1133.889, 'duration': 3.942}, {'end': 1143.154, 'text': 'No matter if you were following the full or the manual approach, in the end you should have this folder structure here.', 'start': 1137.891, 'duration': 5.263}, {'end': 1146.957, 'text': 'Let me tell you what each of these folders does.', 'start': 1144.555, 'duration': 2.402}, {'end': 1154.722, 'text': 'Well, the app folder here That is just a folder where our compiled TypeScript files will be moved to.', 'start': 1147.577, 'duration': 7.145}, {'end': 1156.543, 'text': "So we don't change anything here.", 'start': 1155.102, 'duration': 1.441}, {'end': 1161.507, 'text': "That is the code that will actually get executed in the end because we're writing in TypeScript.", 'start': 1157.044, 'duration': 4.463}, {'end': 1166.09, 'text': 'This will get compiled to JavaScript and the JavaScript code will then get executed.', 'start': 1161.667, 'duration': 4.423}, {'end': 1168.772, 'text': "But we're not touching these JavaScript files.", 'start': 1166.49, 'duration': 2.282}, {'end': 1171.214, 'text': "It's just our output directory.", 'start': 1169.632, 'duration': 1.582}, {'end': 1175.377, 'text': 'The assets folder contains the SCSS code.', 'start': 1172.216, 'duration': 3.161}, {'end': 1180.299, 'text': "Now, if you don't want to use SCSS, you can write normal CSS code in there too.", 'start': 1175.557, 'duration': 4.742}], 'summary': 'Boilerplate folder structure: app for typescript, assets for scss/css.', 'duration': 46.41, 'max_score': 1133.889, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke81133889.jpg'}, {'end': 1225.076, 'src': 'embed', 'start': 1202.7, 'weight': 2, 'content': [{'end': 1211.79, 'text': 'So this will be the folder structure in which we will work most of the time, because there we write all our logic, all the TypeScript logic,', 'start': 1202.7, 'duration': 9.09}, {'end': 1214.473, 'text': 'all our real Angular 2 application files.', 'start': 1211.79, 'duration': 2.683}, {'end': 1223.156, 'text': 'And here we got this app component file, which is the very first component, this hello world view we see and, at the same time,', 'start': 1215.574, 'duration': 7.582}, {'end': 1225.076, 'text': 'which is the root component of our project.', 'start': 1223.156, 'duration': 1.92}], 'summary': 'Folder structure for angular 2 project with app component as root.', 'duration': 22.376, 'max_score': 1202.7, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke81202700.jpg'}, {'end': 1361.743, 'src': 'embed', 'start': 1295.314, 'weight': 1, 'content': [{'end': 1299.416, 'text': 'and obviously this will include Angular 2 framework but also some other dependencies.', 'start': 1295.314, 'duration': 4.102}, {'end': 1302.298, 'text': "Now, when we're deploying our app.", 'start': 1300.217, 'duration': 2.081}, {'end': 1310.784, 'text': "we won't ship this whole folder, but I will bring out a specific section about deployment in the future, just that you know you will find it later.", 'start': 1302.298, 'duration': 8.486}, {'end': 1316.39, 'text': 'The source folder which will hold our compiled CSS files.', 'start': 1312.506, 'duration': 3.884}, {'end': 1321.415, 'text': 'So as with TypeScript in the dev folder which is compiled to the app folder,', 'start': 1316.65, 'duration': 4.765}, {'end': 1328.762, 'text': 'our SCSS files which live in the assets folder here will be compiled to CSS, which will then be stored in the source folder.', 'start': 1321.415, 'duration': 7.347}, {'end': 1332.786, 'text': "So this source folder is also something we don't touch.", 'start': 1329.362, 'duration': 3.424}, {'end': 1335.972, 'text': 'Well, the typings folder, you can mainly ignore it.', 'start': 1333.851, 'duration': 2.121}, {'end': 1343.535, 'text': 'That contains some info for TypeScript to correctly identify and use certain types, so to say.', 'start': 1336.272, 'duration': 7.263}, {'end': 1351.739, 'text': 'Now all these other files here basically provide some configuration to our project to allow our IDE to correctly work,', 'start': 1344.375, 'duration': 7.364}, {'end': 1359.062, 'text': 'to give TypeScript some information, to not throw certain compilation errors, and so on.', 'start': 1351.739, 'duration': 7.323}, {'end': 1361.743, 'text': "So that is really what's inside these files.", 'start': 1359.122, 'duration': 2.621}], 'summary': 'Deployment, folder structure, and file purposes for angular 2 framework.', 'duration': 66.429, 'max_score': 1295.314, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke81295314.jpg'}, {'end': 1429.086, 'src': 'embed', 'start': 1394.266, 'weight': 6, 'content': [{'end': 1397.588, 'text': 'And as you might be aware, with Angular 2, we create single-page applications.', 'start': 1394.266, 'duration': 3.322}, {'end': 1405.232, 'text': 'So, technically, this HTML file is the only HTML file ever sent from the server to our browser,', 'start': 1397.848, 'duration': 7.384}, {'end': 1409.595, 'text': 'the only HTML file which we will render in the browser, so to say.', 'start': 1405.232, 'duration': 4.363}, {'end': 1413.837, 'text': "And then we're manipulating this file through Angular 2.", 'start': 1409.955, 'duration': 3.882}, {'end': 1419.34, 'text': 'So we got our basic HTML skeleton here and the first important thing is the space ref tag here.', 'start': 1413.837, 'duration': 5.503}, {'end': 1429.086, 'text': "What this does is it sets the base URL so to say of our application to in this case the root directory therefore it's slash.", 'start': 1420.021, 'duration': 9.065}], 'summary': 'Angular 2 enables single-page applications, with only one html file sent from the server and manipulated through angular 2.', 'duration': 34.82, 'max_score': 1394.266, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke81394266.jpg'}, {'end': 1479.423, 'src': 'embed', 'start': 1448.073, 'weight': 7, 'content': [{'end': 1450.214, 'text': "And therefore, we're setting this to just a slash.", 'start': 1448.073, 'duration': 2.141}, {'end': 1458.176, 'text': 'Now, if you were to host this app on your server and there you had, like example.com, slash myangular2app,', 'start': 1450.534, 'duration': 7.642}, {'end': 1463.177, 'text': 'you would have to enter slash myangular2app slash into this base tag.', 'start': 1458.176, 'duration': 5.001}, {'end': 1470.119, 'text': 'and this tag is important for routing, to let angular to know where our actual route is.', 'start': 1463.897, 'duration': 6.222}, {'end': 1471.54, 'text': "that's very important.", 'start': 1470.119, 'duration': 1.421}, {'end': 1473.06, 'text': 'okay, then title and so on.', 'start': 1471.54, 'duration': 1.52}, {'end': 1479.423, 'text': 'then we got several imports here and this will probably change as angular 2 matures,', 'start': 1473.06, 'duration': 6.363}], 'summary': 'Setting base tag for routing in angular 2 is important for hosting app on server.', 'duration': 31.35, 'max_score': 1448.073, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke81448073.jpg'}, {'end': 1540.818, 'src': 'embed', 'start': 1503.397, 'weight': 8, 'content': [{'end': 1508.799, 'text': "Observables is a concept we will see when we're working with HTTP and we will see this in a later section.", 'start': 1503.397, 'duration': 5.402}, {'end': 1516.783, 'text': 'but this rx.js import here is important for us to well use that and basically use HTTP in Angular 2 without using promises.', 'start': 1508.799, 'duration': 7.984}, {'end': 1520.245, 'text': 'but we will see this in a later section, just so you know what this import does.', 'start': 1516.963, 'duration': 3.282}, {'end': 1523.507, 'text': 'Now, the next three imports are Angular 2 specific.', 'start': 1520.946, 'duration': 2.561}, {'end': 1529.731, 'text': "It's the core package, then some router-specific modules, and HTTP-specific modules.", 'start': 1523.867, 'duration': 5.864}, {'end': 1535.374, 'text': 'Theoretically, we would not need the latter two one if we were not using routing or HTTP,', 'start': 1530.471, 'duration': 4.903}, {'end': 1540.818, 'text': "but I already included them here so that we don't have to do this once we're in the specific sections in this course.", 'start': 1535.374, 'duration': 5.444}], 'summary': 'Observables concept will be used in http, along with rx.js import for angular 2. core, router-specific, and http-specific modules are also included for potential use.', 'duration': 37.421, 'max_score': 1503.397, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke81503397.jpg'}], 'start': 1133.889, 'title': 'Angular 2 project structure and index.html configuration', 'summary': "Delves into the folder structure of an angular 2 project, detailing the significance and content of folders like 'app', 'assets', 'dev', 'node modules', 'source', and 'typings', as well as emphasizing the importance of proper import syntax for 'app component'. it also covers the configuration of the index.html file, including base url setting, necessary imports, and the role of rx.js, with a focus on the specific configuration elements and the concept of single-page applications.", 'chapters': [{'end': 1361.743, 'start': 1133.889, 'title': 'Understanding angular 2 project structure', 'summary': "Explains the folder structure of an angular 2 project, including the purpose of each folder, such as 'app', 'assets', 'dev', 'node modules', 'source', and 'typings', and emphasizes the importance of proper import syntax for 'app component'.", 'duration': 227.854, 'highlights': ["The 'app' folder contains the compiled TypeScript files, which will be executed after being transpiled to JavaScript, emphasizing the significance of TypeScript in the project.", "The 'dev' folder holds the TypeScript files, where the majority of the logic and Angular 2 application files are written, including the root component of the project, 'app component'.", "The 'assets' folder contains the SCSS code, which can be used for development and will be transpiled to normal CSS, offering features like auto-prefixing, emphasizing the flexibility in using SCSS or normal CSS.", "The 'node modules' folder holds all the packages and dependencies required for developing Angular 2 applications, including the Angular 2 framework and other dependencies, clarifying its significance in the project.", "The 'source' folder stores the compiled CSS files, which are the result of transpiling the SCSS files from the 'assets' folder, showcasing the workflow of compiling SCSS to CSS.", "The 'typings' folder contains information for TypeScript to identify and use certain types, while other files provide configuration for the project and IDE, ensuring correct operation and avoiding compilation errors."]}, {'end': 1540.818, 'start': 1362.677, 'title': 'Angular 2 index.html configuration', 'summary': 'Explains the index.html file configuration for an angular 2 application, including the base url setting, the necessity of certain imports, and the purpose of rx.js. it also discusses the concept of single-page applications and the role of the html file, with a focus on the specific configuration elements.', 'duration': 178.141, 'highlights': ['The HTML file for Angular 2 serves as the only file sent from the server to the browser, emphasizing the concept of single-page applications. Single-page applications', 'The base tag in the HTML file sets the base URL of the application, essential for routing and indicating the actual route. Base URL setting', 'The import of rx.js enables the usage of observables, particularly for working with HTTP, which will be covered in a later section. Usage of observables for HTTP in Angular 2', 'The necessity of importing specific modules related to routing and HTTP in Angular 2, even if not immediately utilized, to streamline the process for subsequent sections in the course. Importance of specific modules for routing and HTTP']}], 'duration': 406.929, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke81133889.jpg', 'highlights': ["The 'app' folder contains the compiled TypeScript files, emphasizing the significance of TypeScript", "The 'node modules' folder holds all the packages and dependencies required for developing Angular 2 applications, clarifying its significance in the project", "The 'dev' folder holds the TypeScript files, including the root component of the project, 'app component'", "The 'assets' folder contains the SCSS code, emphasizing the flexibility in using SCSS or normal CSS", "The 'source' folder stores the compiled CSS files, showcasing the workflow of compiling SCSS to CSS", "The 'typings' folder contains information for TypeScript to identify and use certain types, ensuring correct operation and avoiding compilation errors", 'The HTML file for Angular 2 serves as the only file sent from the server to the browser, emphasizing the concept of single-page applications', 'The base tag in the HTML file sets the base URL of the application, essential for routing and indicating the actual route', 'The import of rx.js enables the usage of observables, particularly for working with HTTP', 'The necessity of importing specific modules related to routing and HTTP in Angular 2, even if not immediately utilized']}, {'end': 2199.038, 'segs': [{'end': 1567.816, 'src': 'embed', 'start': 1542.128, 'weight': 4, 'content': [{'end': 1550.431, 'text': "Good, then now we're just including our main style sheet, the app.css file, and then we're in the body where we have this MyAppLoading tag.", 'start': 1542.128, 'duration': 8.303}, {'end': 1557.473, 'text': 'MyApp is our root component, the app component, and MyApp is really just a selector of this component,', 'start': 1551.071, 'duration': 6.402}, {'end': 1560.834, 'text': 'to let Angular 2 know where to render this component.', 'start': 1557.473, 'duration': 3.361}, {'end': 1567.816, 'text': "We will see this when we're in the component section, but this is basically how we start up or implement our application.", 'start': 1561.374, 'duration': 6.442}], 'summary': 'The transcript discusses including the main style sheet app.css and starting the angular 2 application.', 'duration': 25.688, 'max_score': 1542.128, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke81542128.jpg'}, {'end': 1608.418, 'src': 'embed', 'start': 1582.769, 'weight': 3, 'content': [{'end': 1590.456, 'text': "And here we're basically setting the folder where these files are to be found, the app folder where I said our compiled JavaScript files will live in.", 'start': 1582.769, 'duration': 7.687}, {'end': 1594.641, 'text': 'And well, the default extension and so on.', 'start': 1591.617, 'duration': 3.024}, {'end': 1604.113, 'text': 'And we also say at the beginning, please import this app boot file, which is the bootstrap file, which will fire up all our application.', 'start': 1595.202, 'duration': 8.911}, {'end': 1608.418, 'text': 'And all other files will then be loaded dynamically when we need them.', 'start': 1604.674, 'duration': 3.744}], 'summary': 'Setting folder for compiled javascript files, importing app boot file to fire up the application, loading other files dynamically.', 'duration': 25.649, 'max_score': 1582.769, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke81582769.jpg'}, {'end': 1708.948, 'src': 'embed', 'start': 1680.016, 'weight': 2, 'content': [{'end': 1682.937, 'text': "But let's start with the very basics, with just one component.", 'start': 1680.016, 'duration': 2.921}, {'end': 1684.397, 'text': "Let's create one.", 'start': 1683.457, 'duration': 0.94}, {'end': 1693.002, 'text': 'Now, in my development environment, the way we set it up in the last video, and in here, I already get a component.', 'start': 1685.799, 'duration': 7.203}, {'end': 1701.625, 'text': 'This app.component.ts, ts stands for TypeScript, this file holds a complete Angular 2 component.', 'start': 1693.142, 'duration': 8.483}, {'end': 1708.948, 'text': 'So this file has everything which defines the basics of an Angular 2 component.', 'start': 1702.126, 'duration': 6.822}], 'summary': 'The app.component.ts file holds a complete angular 2 component.', 'duration': 28.932, 'max_score': 1680.016, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke81680016.jpg'}, {'end': 1910.723, 'src': 'embed', 'start': 1879.46, 'weight': 0, 'content': [{'end': 1883.762, 'text': 'So this is this modular approach I was talking in the architecture video.', 'start': 1879.46, 'duration': 4.302}, {'end': 1886.644, 'text': 'Angular 2 consists of modules.', 'start': 1884.243, 'duration': 2.401}, {'end': 1893.627, 'text': 'Everything is packed into modules, so to say, and we make things available outside of a module.', 'start': 1886.824, 'duration': 6.803}, {'end': 1903.796, 'text': 'This file is a module here, for example, by exporting things like this class and then we will be able to use this class outside of this file.', 'start': 1893.668, 'duration': 10.128}, {'end': 1910.723, 'text': "So this is where we define a class and as you can see this class doesn't contain any logic here.", 'start': 1904.977, 'duration': 5.746}], 'summary': 'Angular 2 uses a modular approach, packing everything into modules and making it available outside of a module.', 'duration': 31.263, 'max_score': 1879.46, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke81879460.jpg'}, {'end': 2005.392, 'src': 'embed', 'start': 1981.984, 'weight': 1, 'content': [{'end': 1992.284, 'text': "in this case this component metadata here, which really is just this JavaScript object we're passing as an argument you could say here in parentheses", 'start': 1981.984, 'duration': 10.3}, {'end': 2002.37, 'text': "And inside this JavaScript object, So between those curly braces, we're configuring our component, our app component here.", 'start': 1993.145, 'duration': 9.225}, {'end': 2005.392, 'text': 'And we got a lot of configuration options.', 'start': 2003.051, 'duration': 2.341}], 'summary': 'Configuring app component with javascript object for metadata and configuration options.', 'duration': 23.408, 'max_score': 1981.984, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke81981984.jpg'}], 'start': 1542.128, 'title': 'Angular 2 application setup and components overview', 'summary': 'Covers setting up an angular 2 application, including main style sheet, loading necessary files with system.js, and importing the app boot file. it also explains the basics of angular 2 components, the component-based modular approach, and the definition of a component including the class, typescript decorator, and component metadata.', 'chapters': [{'end': 1604.113, 'start': 1542.128, 'title': 'Setting up angular 2 application', 'summary': 'Covers the process of setting up an angular 2 application, including including main style sheet, loading necessary files with system.js, and importing the app boot file, which is the bootstrap file, to fire up the application.', 'duration': 61.985, 'highlights': ['The app.css file is included as the main style sheet for the application, while the body contains the MyAppLoading tag, the root component, and a script block to load all necessary files with system.js.', "The process involves setting the folder for the application's files, specifying the default extension, and importing the app boot file, which is the bootstrap file, to start the application."]}, {'end': 2199.038, 'start': 1604.674, 'title': 'Angular 2 components overview', 'summary': 'Covers the basics of angular 2 components, explaining how an angular 2 application consists of several components, and the component-based modular approach is the core of angular 2. it also discusses the definition of a component, including the class, typescript decorator, and component metadata.', 'duration': 594.364, 'highlights': ['The chapter covers the basics of Angular 2 components, explaining how an Angular 2 application consists of several components, and the component-based modular approach is the core of Angular 2.', 'The file app.component.ts holds a complete Angular 2 component, which defines the basics of an Angular 2 component and includes the template of the component.', 'Angular 2 consists of modules, and everything is packed into modules. The modular approach is implemented by exporting classes and making them available outside of the module.', "The AppComponent class is imported and used with the TypeScript decorator 'component', which adds metadata to the JavaScript class, and the decorator is compiled into JavaScript.", 'The component metadata is configured using a JavaScript object, with various configuration options, such as selector metadata, which specifies how the component can be used in an HTML file by using an HTML tag, and template metadata, which specifies the content to be included in the component.']}], 'duration': 656.91, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke81542128.jpg', 'highlights': ['The modular approach is implemented by exporting classes and making them available outside of the module.', 'The component metadata is configured using a JavaScript object, with various configuration options.', 'The file app.component.ts holds a complete Angular 2 component, which defines the basics of an Angular 2 component.', "The process involves setting the folder for the application's files, specifying the default extension, and importing the app boot file.", 'The app.css file is included as the main style sheet for the application, while the body contains the MyAppLoading tag.']}, {'end': 3164.248, 'segs': [{'end': 2249.204, 'src': 'embed', 'start': 2199.038, 'weight': 0, 'content': [{'end': 2209.662, 'text': "you should see that your Gulp workflow is updating, that he's starting the build TS process and that he's successfully finishing it.", 'start': 2199.038, 'duration': 10.624}, {'end': 2214.228, 'text': "Now let's have a look at our website.", 'start': 2210.325, 'duration': 3.903}, {'end': 2219.251, 'text': 'And as you can see, it got updated with our new, this is a test and the dummy text.', 'start': 2215.008, 'duration': 4.243}, {'end': 2228.758, 'text': 'Now okay, so we got our component and, as said, we have the selector, which we then enter into an HTML file,', 'start': 2221.233, 'duration': 7.525}, {'end': 2235.242, 'text': 'and Angular 2 finds the selector and then replaces it with whatever we specify here in our template.', 'start': 2228.758, 'duration': 6.484}, {'end': 2238.404, 'text': 'Okay, now where is this HTML file?', 'start': 2235.782, 'duration': 2.622}, {'end': 2239.165, 'text': "we're embedding it?", 'start': 2238.404, 'duration': 0.761}, {'end': 2246.943, 'text': 'Well, it can only be one, because you only have one HTML file in this folder here or in this whole project here.', 'start': 2240.182, 'duration': 6.761}, {'end': 2249.204, 'text': "And that's the index.html file.", 'start': 2247.324, 'duration': 1.88}], 'summary': 'Gulp workflow updated successfully, website reflects changes with new content. angular 2 replaces selector in html file.', 'duration': 50.166, 'max_score': 2199.038, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke82199038.jpg'}, {'end': 2334.101, 'src': 'embed', 'start': 2307.609, 'weight': 1, 'content': [{'end': 2317.034, 'text': 'the first thing is This app component will be our root component, and all our Angular 2 applications will have one such a root component.', 'start': 2307.609, 'duration': 9.425}, {'end': 2327.319, 'text': 'All other components will be somehow nested either in the parent child or in sibling connections within this app component.', 'start': 2317.575, 'duration': 9.744}, {'end': 2334.101, 'text': 'So all other components will be a child to our app component and components then amongst themselves.', 'start': 2327.819, 'duration': 6.282}], 'summary': 'The root component in angular 2 apps holds all other components.', 'duration': 26.492, 'max_score': 2307.609, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke82307609.jpg'}, {'end': 2447.818, 'src': 'embed', 'start': 2413.435, 'weight': 4, 'content': [{'end': 2416.797, 'text': 'This method will, like the name says, bootstrap our application.', 'start': 2413.435, 'duration': 3.362}, {'end': 2418.798, 'text': 'It will start our application.', 'start': 2416.837, 'duration': 1.961}, {'end': 2421.959, 'text': 'The second import is our app component.', 'start': 2419.578, 'duration': 2.381}, {'end': 2428.543, 'text': "Now here you can see we're importing app component from our app.component file, which is this file.", 'start': 2422.56, 'duration': 5.983}, {'end': 2431.865, 'text': "And here we're exporting this class.", 'start': 2429.283, 'duration': 2.582}, {'end': 2435.467, 'text': 'We could not import it if we would not export it here.', 'start': 2431.945, 'duration': 3.522}, {'end': 2439.415, 'text': "And then we're just using this bootstrap method.", 'start': 2436.894, 'duration': 2.521}, {'end': 2447.818, 'text': "we're importing here and we're passing one argument, which is our root component, the component we want to bootstrap,", 'start': 2439.415, 'duration': 8.403}], 'summary': 'Bootstraping application with app component and using bootstrap method with one argument.', 'duration': 34.383, 'max_score': 2413.435, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke82413435.jpg'}, {'end': 2644.516, 'src': 'embed', 'start': 2610.558, 'weight': 3, 'content': [{'end': 2617.803, 'text': 'then have parentheses and then curly braces inside the parentheses.', 'start': 2610.558, 'duration': 7.245}, {'end': 2623.047, 'text': 'So we create a new JavaScript object in these parentheses here.', 'start': 2618.223, 'duration': 4.824}, {'end': 2629.351, 'text': "And now inside here, we're doing all the configuration for our component.", 'start': 2624.848, 'duration': 4.503}, {'end': 2640.612, 'text': "Now, as I said, we have a lot of options how we can, what we can configure there, right? First thing is we'll create our selector.", 'start': 2631.624, 'duration': 8.988}, {'end': 2644.516, 'text': 'So the HTML tag by which we can embed this component.', 'start': 2640.813, 'duration': 3.703}], 'summary': 'Creating a new javascript object with configuration for a component, including options like selector.', 'duration': 33.958, 'max_score': 2610.558, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke82610558.jpg'}, {'end': 2894.562, 'src': 'embed', 'start': 2860.344, 'weight': 7, 'content': [{'end': 2872.409, 'text': 'Therefore, in the next video we will have a look at the various template expressions we can use in Angular 2 to alter our template to insert data dynamically.', 'start': 2860.344, 'duration': 12.065}, {'end': 2873.91, 'text': 'See you there.', 'start': 2873.509, 'duration': 0.401}, {'end': 2889.579, 'text': 'Bye Okay, until now we have created our own component, we have embedded it, we have set it up with the directives configuration.', 'start': 2874.15, 'duration': 15.429}, {'end': 2894.562, 'text': 'So we got a little bit into how we use those components to create our app.', 'start': 2890.119, 'duration': 4.443}], 'summary': 'Introduction to template expressions in angular 2.', 'duration': 34.218, 'max_score': 2860.344, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke82860344.jpg'}, {'end': 3003.12, 'src': 'embed', 'start': 2974.224, 'weight': 5, 'content': [{'end': 2984.147, 'text': 'And these double curly braces tell Angular 2 to replace whatever is between them with the result of the expression it finds there.', 'start': 2974.224, 'duration': 9.923}, {'end': 2990.049, 'text': 'So this could also be like a condition or a function, like a calculation.', 'start': 2984.187, 'duration': 5.862}, {'end': 2993.45, 'text': "But in this case, it's just referring to this property.", 'start': 2990.889, 'duration': 2.561}, {'end': 2995.891, 'text': 'So it will output the value of this property.', 'start': 2993.51, 'duration': 2.381}, {'end': 2998.058, 'text': 'Now let me save this.', 'start': 2996.957, 'duration': 1.101}, {'end': 3003.12, 'text': 'And you can see here, I am Max.', 'start': 2999.538, 'duration': 3.582}], 'summary': 'Angular 2 uses double curly braces to output property values.', 'duration': 28.896, 'max_score': 2974.224, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke82974224.jpg'}, {'end': 3078.317, 'src': 'embed', 'start': 3043.791, 'weight': 6, 'content': [{'end': 3044.851, 'text': "Well, we want to, let's say,", 'start': 3043.791, 'duration': 1.06}, {'end': 3057.681, 'text': "highlight our name and give this it's awesome some different styling just to showcase how we can dynamically influence our DOM, our HTML, here.", 'start': 3044.851, 'duration': 12.83}, {'end': 3061.993, 'text': "Now to do this, I'll first add a line break here.", 'start': 3059.332, 'duration': 2.661}, {'end': 3064.673, 'text': "So it's just a tag here.", 'start': 3062.013, 'duration': 2.66}, {'end': 3070.095, 'text': "And then I will have like, let's add another one.", 'start': 3065.494, 'duration': 4.601}, {'end': 3071.375, 'text': 'Then I have the question here.', 'start': 3070.395, 'duration': 0.98}, {'end': 3078.317, 'text': 'Is it awesome? And I will have an input element here.', 'start': 3071.575, 'duration': 6.742}], 'summary': 'Demonstrating dynamic dom influence with added styling and elements.', 'duration': 34.526, 'max_score': 3043.791, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke83043791.jpg'}], 'start': 2199.038, 'title': 'Angular 2 components and data output', 'summary': 'Covers setting up the gulp workflow, updating the website with new content, embedding components using selectors in html files, creating and bootstrapping a root component in angular 2, creating and embedding components, outputting data in angular 2 templates using template expressions, and the process of using components to build an application.', 'chapters': [{'end': 2609.086, 'start': 2199.038, 'title': 'Angular 2 components and bootstrapping', 'summary': 'Covers setting up the gulp workflow, updating the website with new content, embedding components using selectors in html files, and creating and bootstrapping a root component in angular 2.', 'duration': 410.048, 'highlights': ['Setting up Gulp workflow and updating website The Gulp workflow is shown to update and build TypeScript process, successfully finishing it and updating the website with new content.', 'Embedding components using selectors in HTML files The process of embedding components in HTML files using selectors and replacing them with specified content in Angular 2 is explained.', 'Creating and bootstrapping a root component in Angular 2 The process of creating a root component, bootstrapping it, and starting the application in Angular 2 is detailed, including the use of the bootstrap method and importing the app component.']}, {'end': 2912.014, 'start': 2610.558, 'title': 'Creating and embedding components in angular 2', 'summary': 'Explains how to create and embed components in angular 2, including configuring selectors, templates, and directives, and demonstrates the process of using components to build an application.', 'duration': 301.456, 'highlights': ['We create a new JavaScript object to configure the component, including defining the selector with the HTML tag for embedding and setting up the template for the component.', 'Components need to be bootstrapped in the app component by specifying it in the directives configuration, and importing the component in the file. This process ensures that the component can be correctly embedded and displayed.', 'The chapter emphasizes the need for using template expressions in Angular 2 to insert data dynamically, and hints at the future exploration of various template expressions in the next video.']}, {'end': 3164.248, 'start': 2912.774, 'title': 'Outputting data in angular 2', 'summary': 'Discusses how to output data in angular 2 templates using template expressions, showcasing the use of double curly braces to output property values and dynamically influence the dom with special styling based on user input.', 'duration': 251.474, 'highlights': ['Outputting property values using double curly braces The chapter demonstrates using double curly braces to output property values in Angular 2 templates, showcasing the ease of displaying information or data.', 'Dynamically influencing DOM with special styling based on user input The chapter illustrates dynamically influencing the DOM in Angular 2 by showcasing the ability to add special styling based on user input, such as highlighting the name based on user input.']}], 'duration': 965.21, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke82199038.jpg', 'highlights': ['Setting up Gulp workflow and updating website The Gulp workflow is shown to update and build TypeScript process, successfully finishing it and updating the website with new content.', 'Creating and bootstrapping a root component in Angular 2 The process of creating a root component, bootstrapping it, and starting the application in Angular 2 is detailed, including the use of the bootstrap method and importing the app component.', 'Embedding components using selectors in HTML files The process of embedding components in HTML files using selectors and replacing them with specified content in Angular 2 is explained.', 'We create a new JavaScript object to configure the component, including defining the selector with the HTML tag for embedding and setting up the template for the component.', 'Components need to be bootstrapped in the app component by specifying it in the directives configuration, and importing the component in the file. This process ensures that the component can be correctly embedded and displayed.', 'Outputting property values using double curly braces The chapter demonstrates using double curly braces to output property values in Angular 2 templates, showcasing the ease of displaying information or data.', 'Dynamically influencing DOM with special styling based on user input The chapter illustrates dynamically influencing the DOM in Angular 2 by showcasing the ability to add special styling based on user input, such as highlighting the name based on user input.', 'The chapter emphasizes the need for using template expressions in Angular 2 to insert data dynamically, and hints at the future exploration of various template expressions in the next video.']}, {'end': 3850.251, 'segs': [{'end': 3226.204, 'src': 'embed', 'start': 3191.407, 'weight': 3, 'content': [{'end': 3200.613, 'text': 'you just go in the source folder and you create this file by your own or on your own and just enter the CSS coding you need there, right?', 'start': 3191.407, 'duration': 9.206}, {'end': 3213.341, 'text': "So let's say for this thing here I want to be able to add a class which is called is awesome.", 'start': 3201.414, 'duration': 11.927}, {'end': 3219.153, 'text': "I don't seem to be able to type today is awesome.", 'start': 3215.828, 'duration': 3.325}, {'end': 3223.54, 'text': 'And this will have a font weight of bold.', 'start': 3220.435, 'duration': 3.105}, {'end': 3226.204, 'text': 'It will be a bold text and I will give it a red color.', 'start': 3223.6, 'duration': 2.604}], 'summary': "Creating a css file to add a 'is awesome' class with bold text and red color.", 'duration': 34.797, 'max_score': 3191.407, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke83191407.jpg'}, {'end': 3308.856, 'src': 'embed', 'start': 3285.223, 'weight': 5, 'content': [{'end': 3293.168, 'text': 'And Angular 2 will find this hashtag and will know that the text after this hashtag will be the name of our local variable.', 'start': 3285.223, 'duration': 7.945}, {'end': 3298.732, 'text': 'And this local variable will be bound to the element where Angular 2 finds it.', 'start': 3293.708, 'duration': 5.024}, {'end': 3305.575, 'text': 'So we can only use it within our HTML tags, so within the greater and lesser signs here.', 'start': 3299.672, 'duration': 5.903}, {'end': 3308.856, 'text': 'And then it is bound to the complete element.', 'start': 3306.515, 'duration': 2.341}], 'summary': 'Angular 2 binds local variable to html tags using hashtags.', 'duration': 23.633, 'max_score': 3285.223, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke83285223.jpg'}, {'end': 3363.226, 'src': 'embed', 'start': 3339.514, 'weight': 0, 'content': [{'end': 3350.584, 'text': "Now I'll use a built-in Angular 2 directive which is called class and then we have a dot followed by the name of the class we want to attach.", 'start': 3339.514, 'duration': 11.07}, {'end': 3352.306, 'text': "So it's our isAwesome class.", 'start': 3350.664, 'duration': 1.642}, {'end': 3357.022, 'text': 'and then close all the square brackets.', 'start': 3354.741, 'duration': 2.281}, {'end': 3359.964, 'text': 'And then we have an equal sign and quotation marks.', 'start': 3357.483, 'duration': 2.481}, {'end': 3363.226, 'text': 'And between those quotation marks,', 'start': 3360.724, 'duration': 2.502}], 'summary': "Using angular 2 directive 'class' to attach 'isawesome' class.", 'duration': 23.712, 'max_score': 3339.514, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke83339514.jpg'}, {'end': 3509.615, 'src': 'embed', 'start': 3480.167, 'weight': 4, 'content': [{'end': 3483.93, 'text': 'So I will add an event to my input element here.', 'start': 3480.167, 'duration': 3.763}, {'end': 3491.022, 'text': 'We will come to events and data binding in general in a separate section, in the next section.', 'start': 3484.861, 'duration': 6.161}, {'end': 3500.265, 'text': "So I'm not going to go into detail, but in general an event is added by using parentheses and between the parentheses I add the name of the event.", 'start': 3491.523, 'duration': 8.742}, {'end': 3505.166, 'text': 'And there are a couple of built-in events, so all the default events, like keyup.', 'start': 3500.485, 'duration': 4.681}, {'end': 3509.615, 'text': 'And then we have again equal sign and quotation marks.', 'start': 3506.454, 'duration': 3.161}], 'summary': 'Adding events to input elements, including default events like keyup.', 'duration': 29.448, 'max_score': 3480.167, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke83480167.jpg'}, {'end': 3590.457, 'src': 'embed', 'start': 3558.157, 'weight': 1, 'content': [{'end': 3570.439, 'text': 'Bye Hey, so in the last video we had a look at how we could conditionally attach CSS classes.', 'start': 3558.157, 'duration': 12.282}, {'end': 3578.146, 'text': 'We also learned how we can import style sheets into specific components with this configuration, with this metadata here.', 'start': 3570.859, 'duration': 7.287}, {'end': 3582.891, 'text': "So now let's mess a little bit more with our DOM here.", 'start': 3579.728, 'duration': 3.163}, {'end': 3590.457, 'text': "Let's say we want to add a button which is only enabled if we again have entered yes into our input field.", 'start': 3584.192, 'duration': 6.265}], 'summary': 'Learned about conditional css classes and importing style sheets into components, now experimenting with dom manipulation.', 'duration': 32.3, 'max_score': 3558.157, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke83558157.jpg'}, {'end': 3649.309, 'src': 'embed', 'start': 3620.871, 'weight': 2, 'content': [{'end': 3622.632, 'text': "that's the most default way.", 'start': 3620.871, 'duration': 1.761}, {'end': 3628.093, 'text': 'a directive can get squared brackets and then the name of the directive within those squared brackets.', 'start': 3622.632, 'duration': 5.461}, {'end': 3638.515, 'text': "So this disable thing here is not bound to the disabled HTML attribute of our button, but it's an Angular 2 built-in directive.", 'start': 3628.853, 'duration': 9.662}, {'end': 3649.309, 'text': 'So just an instruction, like every directive which tells Angular 2, hey, I have to disable this button if and now, here again,', 'start': 3639.463, 'duration': 9.846}], 'summary': "Angular 2 directive 'disable' is used to disable buttons based on instruction.", 'duration': 28.438, 'max_score': 3620.871, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke83620871.jpg'}], 'start': 3164.248, 'title': 'Angular 2 directives and dom manipulation', 'summary': 'Covers using angular 2 directives for conditional css class attachment and detachment, event binding for ui updates, and attribute directives for enabling/disabling buttons and changing text color based on input values.', 'chapters': [{'end': 3428.734, 'start': 3164.248, 'title': 'Using angular 2 directives', 'summary': 'Explains how to use angular 2 directives to conditionally attach and detach css classes to html elements based on certain conditions, utilizing examples and explanations of the syntax and functionality.', 'duration': 264.486, 'highlights': ["The chapter explains how to use the class directive in Angular 2 to conditionally attach and detach CSS classes based on specific conditions, providing a practical example of attaching the 'isAwesome' class to an element when a certain condition is met.", "It demonstrates the process of creating an SCSS file within the source folder and defining a CSS class called 'isAwesome' with properties such as font-weight: bold and color: red, providing a tangible example of styling with Angular 2.", "The transcript includes a detailed explanation of using the hashtag symbol to create local variables in Angular 2 templates, allowing for conditional binding of the 'isAwesome' class to an input element based on the input value, showcasing the functionality of template expressions and local variables in Angular 2."]}, {'end': 3850.251, 'start': 3428.734, 'title': 'Angular 2 dom manipulation', 'summary': 'Introduces using special class directives to conditionally attach css classes, adding event binding for ui updates, and using attribute directives to enable/disable a button and change text color based on input values in angular 2 dom manipulation.', 'duration': 421.517, 'highlights': ["Using special class directives to conditionally attach CSS classes The chapter explains how to attach and detach classes using special class directives, with the ability to check the input element and attach a class based on a condition, such as attaching an 'awesome' class when the input value equals 'yes'.", "Adding event binding for UI updates The section emphasizes the importance of adding events to ensure UI updates occur, demonstrating the use of built-in events like 'keyup' and adding an event to catch input changes for UI updates.", "Using attribute directives to enable/disable a button and change text color based on input values The tutorial showcases the use of attribute directives, specifically the 'disable' directive, to conditionally disable a button based on the input value, and the 'style' directive to directly apply a certain style, such as changing text color based on input values."]}], 'duration': 686.003, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke83164248.jpg', 'highlights': ["The chapter explains how to use the class directive in Angular 2 to conditionally attach and detach CSS classes based on specific conditions, providing a practical example of attaching the 'isAwesome' class to an element when a certain condition is met.", "Using special class directives to conditionally attach CSS classes The chapter explains how to attach and detach classes using special class directives, with the ability to check the input element and attach a class based on a condition, such as attaching an 'awesome' class when the input value equals 'yes'.", "Using attribute directives to enable/disable a button and change text color based on input values The tutorial showcases the use of attribute directives, specifically the 'disable' directive, to conditionally disable a button based on the input value, and the 'style' directive to directly apply a certain style, such as changing text color based on input values.", "It demonstrates the process of creating an SCSS file within the source folder and defining a CSS class called 'isAwesome' with properties such as font-weight: bold and color: red, providing a tangible example of styling with Angular 2.", "Adding event binding for UI updates The section emphasizes the importance of adding events to ensure UI updates occur, demonstrating the use of built-in events like 'keyup' and adding an event to catch input changes for UI updates.", "The transcript includes a detailed explanation of using the hashtag symbol to create local variables in Angular 2 templates, allowing for conditional binding of the 'isAwesome' class to an input element based on the input value, showcasing the functionality of template expressions and local variables in Angular 2."]}, {'end': 4445.812, 'segs': [{'end': 3904.897, 'src': 'embed', 'start': 3878.175, 'weight': 0, 'content': [{'end': 3887.921, 'text': 'so this is a like a simple tertiary operator here, where we have this one line, conditional check, and now you can see it is not read by default.', 'start': 3878.175, 'duration': 9.746}, {'end': 3890.323, 'text': 'but if i enter yes, it gets read.', 'start': 3887.921, 'duration': 2.402}, {'end': 3898.572, 'text': 'So we get this style directive here to quickly change the style of a certain part of our DOM.', 'start': 3892.628, 'duration': 5.944}, {'end': 3904.897, 'text': 'We got this class directive here to quickly attach or detach a class to a certain part of our DOM.', 'start': 3898.993, 'duration': 5.904}], 'summary': 'Using directives to quickly modify dom in angular.', 'duration': 26.722, 'max_score': 3878.175, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke83878175.jpg'}, {'end': 3989.764, 'src': 'embed', 'start': 3931.308, 'weight': 3, 'content': [{'end': 3940.314, 'text': 'And this is what we call data binding, how we basically use our data to change the DOM.', 'start': 3931.308, 'duration': 9.006}, {'end': 3945.24, 'text': 'and obviously we will have a lot deeper look throughout this course.', 'start': 3941.215, 'duration': 4.025}, {'end': 3951.448, 'text': 'but that is really the core of it and, as you can see, it is not that difficult to get.', 'start': 3945.24, 'duration': 6.208}, {'end': 3956.334, 'text': 'it just requires some exercise and we will do a lot of exercise throughout this course.', 'start': 3951.448, 'duration': 4.886}, {'end': 3957.396, 'text': 'see you in the next videos, bye.', 'start': 3956.334, 'duration': 1.062}, {'end': 3971.19, 'text': "So we already covered a lot about components and it's almost time to have our first little project,", 'start': 3963.905, 'duration': 7.285}, {'end': 3973.912, 'text': 'using all that knowledge to build a little application.', 'start': 3971.19, 'duration': 2.722}, {'end': 3979.436, 'text': "First, there's another thing I want to show to you or two other things.", 'start': 3974.813, 'duration': 4.623}, {'end': 3985.081, 'text': "The first thing is we're already nesting a component here.", 'start': 3980.117, 'duration': 4.964}, {'end': 3989.764, 'text': "We're nesting this my component component into our root component, the app component.", 'start': 3985.441, 'duration': 4.323}], 'summary': 'Data binding explained; nesting components in a little application.', 'duration': 58.456, 'max_score': 3931.308, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke83931308.jpg'}, {'end': 4148.656, 'src': 'embed', 'start': 4119.18, 'weight': 1, 'content': [{'end': 4122.662, 'text': 'so an array where I then import test component.', 'start': 4119.18, 'duration': 3.482}, {'end': 4124.323, 'text': 'otherwise we would not be able to use it.', 'start': 4122.662, 'duration': 1.661}, {'end': 4130.569, 'text': 'Let me save this so you can already see it there with an external HTML file, my second component.', 'start': 4124.684, 'duration': 5.885}, {'end': 4141.058, 'text': 'So this is how we use external HTML files instead of writing all our template like this in our TypeScript file, we can use an external file here.', 'start': 4130.908, 'duration': 10.15}, {'end': 4143.42, 'text': "Now that's one thing.", 'start': 4142.679, 'duration': 0.741}, {'end': 4148.656, 'text': 'The other thing is back to, yeah, my component here.', 'start': 4145.814, 'duration': 2.842}], 'summary': 'Demonstrating use of external html files to improve code readability and modularity.', 'duration': 29.476, 'max_score': 4119.18, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke84119180.jpg'}, {'end': 4245.984, 'src': 'embed', 'start': 4215.943, 'weight': 5, 'content': [{'end': 4223.37, 'text': "then this would keep our whole component from loading, just because we're waiting for this property to be set.", 'start': 4215.943, 'duration': 7.427}, {'end': 4225.391, 'text': 'So I will use..', 'start': 4224.33, 'duration': 1.061}, {'end': 4230.635, 'text': 'one of the lifecycle hooks AngularTube provides for components.', 'start': 4226.392, 'duration': 4.243}, {'end': 4238.419, 'text': 'These lifecycle hooks are certain events which are fired throughout the lifecycle of a component.', 'start': 4232.856, 'duration': 5.563}, {'end': 4245.984, 'text': 'So, whenever AngularTube creates a component and it does this for this myComponent because well, we tell it here,', 'start': 4238.439, 'duration': 7.545}], 'summary': "Using angulartube's lifecycle hooks to optimize component loading.", 'duration': 30.041, 'max_score': 4215.943, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke84215943.jpg'}, {'end': 4356.101, 'src': 'embed', 'start': 4329.521, 'weight': 2, 'content': [{'end': 4342.729, 'text': "We're implementing onInit and then Angular 2 knows well I can execute the onInit method in this component when this lifecycle hook is reached or this phase in the lifecycle is reached,", 'start': 4329.521, 'duration': 13.208}, {'end': 4351.175, 'text': "because this interface which I'm implementing here requires me to have the respective method implemented.", 'start': 4342.729, 'duration': 8.446}, {'end': 4356.101, 'text': "So in this case, that's the onInit, the ngOnInit method.", 'start': 4351.877, 'duration': 4.224}], 'summary': 'Implementing oninit in angular 2 to execute the ngoninit method in the component when the lifecycle hook is reached.', 'duration': 26.58, 'max_score': 4329.521, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke84329521.jpg'}], 'start': 3850.251, 'title': 'Angularjs directives and angular components basics', 'summary': 'Covers usage of style, class, and attribute directives in angularjs, enabling quick dom manipulation, along with implementing and preparing for a first project.', 'chapters': [{'end': 3957.396, 'start': 3850.251, 'title': 'Angularjs directives', 'summary': 'Covers the usage of style, class, and attribute directives in angularjs, allowing quick manipulation of the dom based on user input and data binding, with examples of conditional checks and ternary operators.', 'duration': 107.145, 'highlights': ['Usage of style, class, and attribute directives in AngularJS, enabling quick DOM manipulation based on user input and data binding.', 'Example of a simple tertiary operator used for conditional checks, with the ability to quickly change the style of a certain part of the DOM.', 'Explanation of data binding in AngularJS, showcasing how data is utilized to modify the DOM.']}, {'end': 4445.812, 'start': 3963.905, 'title': 'Angular components basics', 'summary': 'Covers nesting components, using an external html file, setting component properties dynamically, implementing lifecycle hooks, and preparing for a first project.', 'duration': 481.907, 'highlights': ['The chapter covers nesting components and using an external HTML file to demonstrate how to use an external file for templates instead of writing all the template in the TypeScript file. Nesting components, using external HTML file for templates', 'Demonstrates setting component properties dynamically using TypeScript and avoiding using the constructor to prevent potential delays in component loading. Dynamically setting component properties, avoiding delays in component loading', "Explains the implementation of lifecycle hooks, specifically the onInit hook, to initialize and set component properties at a specific phase in the component's lifecycle. Implementation of onInit lifecycle hook", 'Prepares for the first project, applying the knowledge gained about components, data binding, and template expressions. Preparation for the first project']}], 'duration': 595.561, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/d6Dp4Dyeke8/pics/d6Dp4Dyeke83850251.jpg', 'highlights': ['Covers usage of style, class, and attribute directives in AngularJS, enabling quick DOM manipulation based on user input and data binding.', 'The chapter covers nesting components and using an external HTML file for templates instead of writing all the template in the TypeScript file.', "Explains the implementation of lifecycle hooks, specifically the onInit hook, to initialize and set component properties at a specific phase in the component's lifecycle.", 'Prepares for the first project, applying the knowledge gained about components, data binding, and template expressions.', 'Example of a simple tertiary operator used for conditional checks, with the ability to quickly change the style of a certain part of the DOM.', 'Demonstrates setting component properties dynamically using TypeScript and avoiding using the constructor to prevent potential delays in component loading.', 'Explanation of data binding in AngularJS, showcasing how data is utilized to modify the DOM.']}], 'highlights': ['The course covers all fundamental building blocks of an Angular 2 application with practical examples and a real advanced application at the end.', 'Maximilian Schwarzmuller introduces the first two sections of his 13-hour Angular 2 course, which is rated five stars on Udemy.', 'Components in Angular 2 applications can be used as siblings or nested within each other, enabling communication and reusability, thus contributing to the ease of maintenance.', 'The video aims to enable viewers to create their very first basic Angular 2 applications and gain a basic understanding of components and templates.', 'The course structure includes learning about components, data binding, directives, services, forms, pipes, routing, and http in Angular 2.', 'Modularity, building blocks, and reusability are core philosophies of Angular 2 application architecture.', 'Services in Angular 2 act as centralized repositories for functionality or data that can be injected into various components or directives, promoting reusability and avoiding code duplication.', 'Setting up a development environment for Angular 2 applications.', "The 'app' folder contains the compiled TypeScript files, emphasizing the significance of TypeScript.", "The 'node modules' folder holds all the packages and dependencies required for developing Angular 2 applications, clarifying its significance in the project.", "The 'dev' folder holds the TypeScript files, including the root component of the project, 'app component'.", "The 'assets' folder contains the SCSS code, emphasizing the flexibility in using SCSS or normal CSS.", "The 'source' folder stores the compiled CSS files, showcasing the workflow of compiling SCSS to CSS.", 'The HTML file for Angular 2 serves as the only file sent from the server to the browser, emphasizing the concept of single-page applications.', 'The modular approach is implemented by exporting classes and making them available outside of the module.', 'The component metadata is configured using a JavaScript object, with various configuration options.', 'Setting up Gulp workflow and updating website The Gulp workflow is shown to update and build TypeScript process, successfully finishing it and updating the website with new content.', 'Creating and bootstrapping a root component in Angular 2 The process of creating a root component, bootstrapping it, and starting the application in Angular 2 is detailed, including the use of the bootstrap method and importing the app component.', 'Embedding components using selectors in HTML files The process of embedding components in HTML files using selectors and replacing them with specified content in Angular 2 is explained.', 'Outputting property values using double curly braces The chapter demonstrates using double curly braces to output property values in Angular 2 templates, showcasing the ease of displaying information or data.', 'Dynamically influencing DOM with special styling based on user input The chapter illustrates dynamically influencing the DOM in Angular 2 by showcasing the ability to add special styling based on user input, such as highlighting the name based on user input.', "The chapter explains how to use the class directive in Angular 2 to conditionally attach and detach CSS classes based on specific conditions, providing a practical example of attaching the 'isAwesome' class to an element when a certain condition is met.", "Using special class directives to conditionally attach CSS classes The chapter explains how to attach and detach classes using special class directives, with the ability to check the input element and attach a class based on a condition, such as attaching an 'awesome' class when the input value equals 'yes'.", "Using attribute directives to enable/disable a button and change text color based on input values The tutorial showcases the use of attribute directives, specifically the 'disable' directive, to conditionally disable a button based on the input value, and the 'style' directive to directly apply a certain style, such as changing text color based on input values.", "Adding event binding for UI updates The section emphasizes the importance of adding events to ensure UI updates occur, demonstrating the use of built-in events like 'keyup' and adding an event to catch input changes for UI updates.", 'Covers usage of style, class, and attribute directives in AngularJS, enabling quick DOM manipulation based on user input and data binding.', 'The chapter covers nesting components and using an external HTML file for templates instead of writing all the template in the TypeScript file.', "Explains the implementation of lifecycle hooks, specifically the onInit hook, to initialize and set component properties at a specific phase in the component's lifecycle.", 'Prepares for the first project, applying the knowledge gained about components, data binding, and template expressions.', 'Example of a simple tertiary operator used for conditional checks, with the ability to quickly change the style of a certain part of the DOM.', 'Demonstrates setting component properties dynamically using TypeScript and avoiding using the constructor to prevent potential delays in component loading.', 'Explanation of data binding in AngularJS, showcasing how data is utilized to modify the DOM.']}