title
Angular 2 Tutorial for Beginners: Learn Angular 2 from Scratch | Mosh

description
🔥Get the COMPLETE COURSE (60% OFF - LIMITED TIME): https://programmingwithmosh.com/courses/angular Angular 2, now Angular 4, is a very hot topic. This Angular 2 tutorial teaches you the fundamentals of Angular. SUBSCRIBE FOR MORE VIDEOS! https://www.youtube.com/channel/UCWv7vMbMWH4-V0ZXdmDpPBA?sub_confirmation=1 HERE IS MY NEW ANGULAR 4 TUTORIAL: https://youtu.be/k5E2AVpwsko TABLE OF CONTENT: 00:00 What is Angular and what you can do with it 03:31 Architecture of Angular 2 apps 08:23 Getting the tools 09:40 Your first Angular 2 app 18:54 Angular 2.0 with TypeScript for Beginners (Udemy course) 19:50 Creating components 36:39 Dependency injection 42:25 Exercise 53:46 Discount coupon to get Angular 2 course on Udemy Seed project: http://bit.ly/1X0El6t Stay in touch: https://www.facebook.com/programmingwithmosh/ https://twitter.com/moshhamedani

detail
{'title': 'Angular 2 Tutorial for Beginners: Learn Angular 2 from Scratch | Mosh', 'heatmap': [{'end': 622.135, 'start': 518.222, 'weight': 0.794}, {'end': 849.147, 'start': 806.243, 'weight': 0.728}, {'end': 1696.951, 'start': 1655.452, 'weight': 0.749}], 'summary': "In this angular 2 tutorial, mosh hamadani introduces the framework's benefits, real-world application building, development environment setup, component creation, data binding, templating, and service interaction, emphasizing key concepts and practical application with real-world examples.", 'chapters': [{'end': 45.087, 'segs': [{'end': 45.087, 'src': 'embed', 'start': 4.431, 'weight': 0, 'content': [{'end': 7.934, 'text': "Hi, my name is Mosh Hamadani, and I'm going to be your instructor in this course.", 'start': 4.431, 'duration': 3.503}, {'end': 15.14, 'text': "Let me quickly explain in three minutes what Angular is, what you can do with it, and what you're going to learn in this course.", 'start': 8.635, 'duration': 6.505}, {'end': 23.848, 'text': 'Angular is a leading framework for building JavaScript-heavy applications, and often is used in building single-page apps or SPAs.', 'start': 16.261, 'duration': 7.587}, {'end': 30.874, 'text': 'What is a single page app? Well, in a standard web application, when we click on a link, the entire page is reloaded.', 'start': 24.488, 'duration': 6.386}, {'end': 37.76, 'text': 'In a single page app, instead of reloading the entire page, we replace the view that is in the content area with another view.', 'start': 31.455, 'duration': 6.305}, {'end': 45.087, 'text': 'We also keep track of history, so if the user navigates using back and forward buttons, we restore the application in the right state.', 'start': 38.261, 'duration': 6.826}], 'summary': 'Angular is a leading framework for building javascript-heavy single-page applications, and in this course, you will learn its concepts and applications.', 'duration': 40.656, 'max_score': 4.431, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_-CD_5YhJTA/pics/_-CD_5YhJTA4431.jpg'}], 'start': 4.431, 'title': 'Introduction to angular', 'summary': 'Introduces mosh hamadani as the instructor for the angular course and provides an overview of angular as a leading framework for building javascript-heavy single-page applications (spas) with features such as view replacement and history tracking.', 'chapters': [{'end': 45.087, 'start': 4.431, 'title': 'Introduction to angular', 'summary': 'Introduces mosh hamadani as the instructor for the angular course and provides an overview of angular as a leading framework for building javascript-heavy single-page applications (spas) with features such as view replacement and history tracking.', 'duration': 40.656, 'highlights': ['Angular is a leading framework for building JavaScript-heavy applications, often used in building single-page apps or SPAs. Angular is a popular framework for JavaScript-heavy applications and is frequently utilized for creating single-page applications (SPAs).', 'In a single page app, instead of reloading the entire page, we replace the view that is in the content area with another view. Single-page applications (SPAs) replace the content area view without reloading the entire page, providing a seamless user experience.', 'We also keep track of history, so if the user navigates using back and forward buttons, we restore the application in the right state. Angular applications maintain history, allowing seamless navigation using back and forward buttons, ensuring the application is restored to the correct state.']}], 'duration': 40.656, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_-CD_5YhJTA/pics/_-CD_5YhJTA4431.jpg', 'highlights': ['Angular is a leading framework for building JavaScript-heavy applications, often used in building single-page apps or SPAs.', 'In a single page app, instead of reloading the entire page, we replace the view that is in the content area with another view.', 'We also keep track of history, so if the user navigates using back and forward buttons, we restore the application in the right state.']}, {'end': 490.966, 'segs': [{'end': 105.917, 'src': 'embed', 'start': 46.048, 'weight': 0, 'content': [{'end': 49.811, 'text': 'As you might guess, these applications provide a very fast and fluid experience.', 'start': 46.048, 'duration': 3.763}, {'end': 53.293, 'text': 'Gmail is a very good example of a single-page application.', 'start': 50.391, 'duration': 2.902}, {'end': 60.838, 'text': 'So, anytime you want to build an application that has a lot of JavaScript, like single-page applications, but not necessarily,', 'start': 54.094, 'duration': 6.744}, {'end': 66.762, 'text': 'you may want to look at Angular to build this application in a modular, maintainable and testable way.', 'start': 60.838, 'duration': 5.924}, {'end': 70.925, 'text': 'Sure, there are lots of other frameworks out there that have the same promises.', 'start': 67.623, 'duration': 3.302}, {'end': 75.267, 'text': 'So why Angular? Well, Angular is one of the leading frameworks in this space.', 'start': 71.065, 'duration': 4.202}, {'end': 77.408, 'text': "It's been around for quite a few years.", 'start': 75.927, 'duration': 1.481}, {'end': 80.569, 'text': "It's just been rewritten with the best practices for the future.", 'start': 77.908, 'duration': 2.661}, {'end': 82.73, 'text': 'It has a huge community support.', 'start': 81.289, 'duration': 1.441}, {'end': 83.911, 'text': "It's backed by Google.", 'start': 82.89, 'duration': 1.021}, {'end': 86.171, 'text': "It's not going away anytime soon.", 'start': 84.371, 'duration': 1.8}, {'end': 92.194, 'text': 'And as Google Trends shows, the demand for Angular developers is increasing constantly.', 'start': 87.012, 'duration': 5.182}, {'end': 97.232, 'text': "So in this course, I'll be teaching you Angular 2 from scratch in a step-by-step fashion.", 'start': 93.069, 'duration': 4.163}, {'end': 103.396, 'text': "Whether you're familiar with Angular 1 or not doesn't really matter because Angular 2 is an entirely new framework.", 'start': 97.932, 'duration': 5.464}, {'end': 105.917, 'text': "And by the way, we'll be using TypeScript.", 'start': 104.216, 'duration': 1.701}], 'summary': 'Angular is a leading framework with huge community support, backed by google, and a growing demand for developers.', 'duration': 59.869, 'max_score': 46.048, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_-CD_5YhJTA/pics/_-CD_5YhJTA46048.jpg'}, {'end': 175.817, 'src': 'embed', 'start': 125.712, 'weight': 1, 'content': [{'end': 134.079, 'text': 'We get modules, classes, interfaces, access modifiers like public, private, IntelliSense and compile time checking.', 'start': 125.712, 'duration': 8.367}, {'end': 137.482, 'text': 'So we can catch a lot of programming errors during compile time.', 'start': 134.76, 'duration': 2.722}, {'end': 142.266, 'text': "If you have never worked with TypeScript, I can guarantee you're going to absolutely love it.", 'start': 138.383, 'duration': 3.883}, {'end': 148.529, 'text': "Okay, now you probably want to say, Mosh, tell me what I'll be able to do by the end of watching this course.", 'start': 143.087, 'duration': 5.442}, {'end': 150.43, 'text': "Well, it's easier to show you.", 'start': 149.049, 'duration': 1.381}, {'end': 158.253, 'text': "By the end of watching this course, you're going to build a real world application like this.", 'start': 154.451, 'duration': 3.802}, {'end': 163.435, 'text': 'So we have a list of users coming from a RESTful API with CRUD operations.', 'start': 159.093, 'duration': 4.342}, {'end': 165.455, 'text': 'We can add a new user.', 'start': 164.515, 'duration': 0.94}, {'end': 169.417, 'text': 'Here we have a form with custom validation and dirty tracking.', 'start': 166.456, 'duration': 2.961}, {'end': 175.817, 'text': 'So if I fill out one or two fields and accidentally try to navigate away, the application will warn me.', 'start': 170.236, 'duration': 5.581}], 'summary': "Typescript offers modules, classes, interfaces, and access modifiers for compile-time error checking. by the end of the course, you'll build a real-world application with crud operations and custom validation.", 'duration': 50.105, 'max_score': 125.712, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_-CD_5YhJTA/pics/_-CD_5YhJTA125712.jpg'}, {'end': 260.329, 'src': 'embed', 'start': 201.086, 'weight': 4, 'content': [{'end': 212.614, 'text': "And in this course, you're going to learn how to implement these patterns with Angular 2.", 'start': 201.086, 'duration': 11.528}, {'end': 216.337, 'text': 'In a nutshell, we have four key players in an Angular 2 app.', 'start': 212.614, 'duration': 3.723}, {'end': 220.78, 'text': 'Components, directives, routers, and services.', 'start': 217.218, 'duration': 3.562}, {'end': 224.123, 'text': "Let's take a look at each of these building blocks in more detail.", 'start': 221.541, 'duration': 2.582}, {'end': 227.128, 'text': 'At the very core, we have components.', 'start': 225.267, 'duration': 1.861}, {'end': 233.091, 'text': 'A component encapsulates the template, data, and the behavior of a view.', 'start': 228.008, 'duration': 5.083}, {'end': 236.893, 'text': "So it's more accurate to call it a view component.", 'start': 234.131, 'duration': 2.762}, {'end': 242.275, 'text': 'Every Angular 2 app has at least one component, which we call the root component.', 'start': 238.153, 'duration': 4.122}, {'end': 248.338, 'text': 'But in the real world, an application often consists of tens or hundreds of components.', 'start': 242.996, 'duration': 5.342}, {'end': 253.32, 'text': 'For example, Imagine we want to build an application like Udemy.', 'start': 249.299, 'duration': 4.021}, {'end': 260.329, 'text': 'We can divide this page into three components, navigation bar, sidebar, and courses.', 'start': 254.242, 'duration': 6.087}], 'summary': 'This course covers implementing angular 2 patterns, including components, directives, routers, and services, with an example of dividing a page into three components for an application like udemy.', 'duration': 59.243, 'max_score': 201.086, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_-CD_5YhJTA/pics/_-CD_5YhJTA201086.jpg'}, {'end': 373.163, 'src': 'embed', 'start': 348.277, 'weight': 8, 'content': [{'end': 356.739, 'text': 'applications written with plain javascript or jquery, we get a reference to a dom element in order to modify it or handle its events.', 'start': 348.277, 'duration': 8.462}, {'end': 358.599, 'text': "in angular we don't do that.", 'start': 356.739, 'duration': 1.86}, {'end': 360.8, 'text': 'instead we use binding.', 'start': 358.599, 'duration': 2.201}, {'end': 366.121, 'text': 'so in the view, we bind to the properties and methods of our component.', 'start': 360.8, 'duration': 5.321}, {'end': 373.163, 'text': 'if there is a change in the value of a property, the dom element bound to this property will refresh automatically.', 'start': 366.121, 'duration': 7.042}], 'summary': 'In angular, properties and methods are bound in the view, automatically refreshing dom elements on value change.', 'duration': 24.886, 'max_score': 348.277, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_-CD_5YhJTA/pics/_-CD_5YhJTA348277.jpg'}, {'end': 442.118, 'src': 'embed', 'start': 415.461, 'weight': 5, 'content': [{'end': 422.485, 'text': 'To have good separation of concerns in our applications, we delegate any logic that is not related to view to a service.', 'start': 415.461, 'duration': 7.024}, {'end': 433.651, 'text': 'So a service is just a plain class that encapsulates any non-user interface logic, like making HTTP calls, logging, business rules, and so on.', 'start': 423.586, 'duration': 10.065}, {'end': 442.118, 'text': "have another key player in angular apps and that's a router which is purely responsible for navigation.", 'start': 435.111, 'duration': 7.007}], 'summary': 'Delegate non-view logic to services for better separation of concerns in applications.', 'duration': 26.657, 'max_score': 415.461, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_-CD_5YhJTA/pics/_-CD_5YhJTA415461.jpg'}], 'start': 46.048, 'title': 'Angular 2 benefits and real-world app building', 'summary': "Discusses the advantages of using angular 2 for building modular, maintainable, and testable single-page applications, highlighting its huge community support, google's backing, and increasing demand for angular developers. it also covers building a real-world application with angular 2, including features like crud operations, custom validation, pagination, filtering, master-detail view, and the key building blocks of angular 2 app.", 'chapters': [{'end': 148.529, 'start': 46.048, 'title': 'Angular 2: building modular and testable applications', 'summary': "Discusses the advantages of using angular 2 for building modular, maintainable, and testable single-page applications, highlighting its huge community support, google's backing, and increasing demand for angular developers as shown by google trends.", 'duration': 102.481, 'highlights': ["Angular is a leading framework for building modular, maintainable, and testable single-page applications, with huge community support and Google's backing, as evidenced by its increasing demand for developers shown in Google Trends.", 'TypeScript, used in Angular 2, offers useful features such as modules, classes, interfaces, access modifiers, IntelliSense, and compile time checking, ensuring catching programming errors during compile time.', 'The course aims to teach Angular 2 from scratch in a step-by-step manner, emphasizing that familiarity with Angular 1 is not necessary as Angular 2 is an entirely new framework, and TypeScript will be used.', 'Gmail serves as an example of a single-page application providing a fast and fluid experience, illustrating the advantages of using Angular for applications with a lot of JavaScript.']}, {'end': 490.966, 'start': 149.049, 'title': 'Building real-world angular 2 app', 'summary': 'Covers building a real-world application with angular 2, including features like crud operations, custom validation, pagination, filtering, master-detail view, and the key building blocks of angular 2 app: components, directives, routers, and services.', 'duration': 341.917, 'highlights': ['Components in Angular 2 Explains the concept of components, their role in breaking down complex views, and their reusability, with examples like building an application like Udemy.', 'Services in Angular 2 Describes the role of services in delegating non-user interface logic and handling backend APIs, ensuring separation of concerns in the application.', 'Routers and Directives in Angular 2 Discusses the responsibilities of routers for navigation and directives for adding behavior to DOM elements, highlighting their significance in Angular 2 app development.', 'Features of Real-World Application Mentions the features of the real-world application built in the course, including CRUD operations, custom validation, pagination, filtering, and master-detail view.', 'Decoupling Components from DOM Explains the decoupling of components from the DOM in Angular 2, emphasizing the use of binding instead of direct manipulation for automatic refresh and unit testability.']}], 'duration': 444.918, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_-CD_5YhJTA/pics/_-CD_5YhJTA46048.jpg', 'highlights': ["Angular is a leading framework for building modular, maintainable, and testable single-page applications, with huge community support and Google's backing, as evidenced by its increasing demand for developers shown in Google Trends.", 'TypeScript, used in Angular 2, offers useful features such as modules, classes, interfaces, access modifiers, IntelliSense, and compile time checking, ensuring catching programming errors during compile time.', 'The course aims to teach Angular 2 from scratch in a step-by-step manner, emphasizing that familiarity with Angular 1 is not necessary as Angular 2 is an entirely new framework, and TypeScript will be used.', 'Gmail serves as an example of a single-page application providing a fast and fluid experience, illustrating the advantages of using Angular for applications with a lot of JavaScript.', 'Components in Angular 2 Explains the concept of components, their role in breaking down complex views, and their reusability, with examples like building an application like Udemy.', 'Services in Angular 2 Describes the role of services in delegating non-user interface logic and handling backend APIs, ensuring separation of concerns in the application.', 'Routers and Directives in Angular 2 Discusses the responsibilities of routers for navigation and directives for adding behavior to DOM elements, highlighting their significance in Angular 2 app development.', 'Features of Real-World Application Mentions the features of the real-world application built in the course, including CRUD operations, custom validation, pagination, filtering, and master-detail view.', 'Decoupling Components from DOM Explains the decoupling of components from the DOM in Angular 2, emphasizing the use of binding instead of direct manipulation for automatic refresh and unit testability.']}, {'end': 1055.045, 'segs': [{'end': 597.484, 'src': 'embed', 'start': 518.222, 'weight': 0, 'content': [{'end': 526.043, 'text': 'with node we get a tool called npm or node package manager, which we use for managing dependencies of our application.', 'start': 518.222, 'duration': 7.821}, {'end': 533.524, 'text': 'so once you install node, open up command prompt on windows or terminal on mac and type npm.', 'start': 526.043, 'duration': 7.481}, {'end': 536.285, 'text': 'install minus g typescript.', 'start': 533.524, 'duration': 2.761}, {'end': 538.858, 'text': "you're a mac user.", 'start': 537.657, 'duration': 1.201}, {'end': 541.579, 'text': 'you need to put sudo in the front.', 'start': 538.858, 'duration': 2.721}, {'end': 545.722, 'text': 'with this, we install typescript globally on our machine.', 'start': 541.579, 'duration': 4.143}, {'end': 549.544, 'text': 'the next thing you need is a code editor that supports typescript.', 'start': 545.722, 'duration': 3.822}, {'end': 556.208, 'text': "in this course i'll be using vs code, which is a beautiful, lightweight and cross-platform editor from microsoft.", 'start': 549.544, 'duration': 6.664}, {'end': 562.772, 'text': 'you can use sublime atom, intellij visual studio and any other editors that supports typescript.', 'start': 556.208, 'duration': 6.564}, {'end': 566.459, 'text': "And finally, I'll be using Chrome as my browser.", 'start': 564.198, 'duration': 2.261}, {'end': 570.441, 'text': 'You can use any browsers, but I would highly recommend to use Chrome,', 'start': 567.119, 'duration': 3.322}, {'end': 577.364, 'text': "because we'll be working with Chrome developer tools throughout the course and I want to make sure you have the exact same experience as me during the videos.", 'start': 570.441, 'duration': 6.923}, {'end': 587.429, 'text': 'The proper way to create an Angular app is to use Angular Command Line Interface, or CLI.', 'start': 581.566, 'duration': 5.863}, {'end': 589.63, 'text': 'But this tool is not ready yet.', 'start': 588.229, 'duration': 1.401}, {'end': 597.484, 'text': "for the time being, i've created a seed project that i've put together based on the guidelines on angular website.", 'start': 590.618, 'duration': 6.866}], 'summary': 'Use npm to install typescript, vs code as editor, and chrome for angular app development.', 'duration': 79.262, 'max_score': 518.222, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_-CD_5YhJTA/pics/_-CD_5YhJTA518222.jpg'}, {'end': 622.135, 'src': 'heatmap', 'start': 518.222, 'weight': 0.794, 'content': [{'end': 526.043, 'text': 'with node we get a tool called npm or node package manager, which we use for managing dependencies of our application.', 'start': 518.222, 'duration': 7.821}, {'end': 533.524, 'text': 'so once you install node, open up command prompt on windows or terminal on mac and type npm.', 'start': 526.043, 'duration': 7.481}, {'end': 536.285, 'text': 'install minus g typescript.', 'start': 533.524, 'duration': 2.761}, {'end': 538.858, 'text': "you're a mac user.", 'start': 537.657, 'duration': 1.201}, {'end': 541.579, 'text': 'you need to put sudo in the front.', 'start': 538.858, 'duration': 2.721}, {'end': 545.722, 'text': 'with this, we install typescript globally on our machine.', 'start': 541.579, 'duration': 4.143}, {'end': 549.544, 'text': 'the next thing you need is a code editor that supports typescript.', 'start': 545.722, 'duration': 3.822}, {'end': 556.208, 'text': "in this course i'll be using vs code, which is a beautiful, lightweight and cross-platform editor from microsoft.", 'start': 549.544, 'duration': 6.664}, {'end': 562.772, 'text': 'you can use sublime atom, intellij visual studio and any other editors that supports typescript.', 'start': 556.208, 'duration': 6.564}, {'end': 566.459, 'text': "And finally, I'll be using Chrome as my browser.", 'start': 564.198, 'duration': 2.261}, {'end': 570.441, 'text': 'You can use any browsers, but I would highly recommend to use Chrome,', 'start': 567.119, 'duration': 3.322}, {'end': 577.364, 'text': "because we'll be working with Chrome developer tools throughout the course and I want to make sure you have the exact same experience as me during the videos.", 'start': 570.441, 'duration': 6.923}, {'end': 587.429, 'text': 'The proper way to create an Angular app is to use Angular Command Line Interface, or CLI.', 'start': 581.566, 'duration': 5.863}, {'end': 589.63, 'text': 'But this tool is not ready yet.', 'start': 588.229, 'duration': 1.401}, {'end': 597.484, 'text': "for the time being, i've created a seed project that i've put together based on the guidelines on angular website.", 'start': 590.618, 'duration': 6.866}, {'end': 604.39, 'text': "we'll be using this seed project throughout the course, so download the attached zip file and put it somewhere on your machine.", 'start': 597.484, 'duration': 6.906}, {'end': 608.593, 'text': 'now let me show you what you will find inside the zip file.', 'start': 604.39, 'duration': 4.203}, {'end': 612.657, 'text': "so this is vs code editor that i'll be using throughout the course.", 'start': 608.593, 'duration': 4.064}, {'end': 622.135, 'text': 'look inside this folder you will find a few configuration files, an index.html and an app folder, which is the container for our application.', 'start': 612.657, 'duration': 9.478}], 'summary': 'Install npm, typescript, vs code, and chrome for typescript development. use seed project for angular app.', 'duration': 103.913, 'max_score': 518.222, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_-CD_5YhJTA/pics/_-CD_5YhJTA518222.jpg'}, {'end': 671.774, 'src': 'embed', 'start': 638.94, 'weight': 4, 'content': [{'end': 641.481, 'text': "We'll look at these files in more details in the next section.", 'start': 638.94, 'duration': 2.541}, {'end': 648.948, 'text': 'This tsconfig.json is the configuration file for TypeScript compiler.', 'start': 644.087, 'duration': 4.861}, {'end': 657.83, 'text': 'So it uses this configuration to determine how to compile or more accurately transpile our TypeScript files into JavaScript.', 'start': 649.948, 'duration': 7.882}, {'end': 665.012, 'text': 'For example, you can see that the target JavaScript is ES5, which is the current version of JavaScript.', 'start': 658.811, 'duration': 6.201}, {'end': 671.774, 'text': "If you want to understand any of these settings in more detail, it's best to look at tsconfig documentation on GitHub.", 'start': 665.972, 'duration': 5.802}], 'summary': 'The tsconfig.json file configures typescript compiler to transpile files into es5 javascript.', 'duration': 32.834, 'max_score': 638.94, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_-CD_5YhJTA/pics/_-CD_5YhJTA638940.jpg'}, {'end': 736.582, 'src': 'embed', 'start': 709.282, 'weight': 5, 'content': [{'end': 713.745, 'text': "Under scripts, we've got a few custom node commands, which we'll look at shortly.", 'start': 709.282, 'duration': 4.463}, {'end': 717.048, 'text': 'Then we got the dependencies for our application.', 'start': 714.786, 'duration': 2.262}, {'end': 722.072, 'text': "So we can see we've got dependency to Angular 2, System.js, and so on.", 'start': 717.929, 'duration': 4.143}, {'end': 727.918, 'text': 'going to move on, because i would rather to fast track to running our first angular app.', 'start': 723.456, 'duration': 4.462}, {'end': 736.582, 'text': "but if you're the kind of developer who prefers to understand the details first, i've attached a pdf with the details of these dependencies.", 'start': 727.918, 'duration': 8.664}], 'summary': 'Custom node commands, dependencies include angular 2, system.js. fast tracking to run angular app.', 'duration': 27.3, 'max_score': 709.282, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_-CD_5YhJTA/pics/_-CD_5YhJTA709282.jpg'}, {'end': 783.68, 'src': 'embed', 'start': 752.935, 'weight': 6, 'content': [{'end': 761.659, 'text': 'install npm will look at our package.json file and download our dependencies from npm registry.', 'start': 752.935, 'duration': 8.724}, {'end': 769.123, 'text': 'just be aware that this is going to take several minutes for the first time, so be patient.', 'start': 761.659, 'duration': 7.464}, {'end': 774.385, 'text': 'once these dependencies are installed, you will see a new folder here called node modules.', 'start': 769.123, 'duration': 5.262}, {'end': 777.707, 'text': 'so all our dependencies and their dependencies will be stored here.', 'start': 774.385, 'duration': 3.322}, {'end': 780.258, 'text': "now let's have one more.", 'start': 779.198, 'duration': 1.06}, {'end': 783.68, 'text': 'look at package.json.', 'start': 780.258, 'duration': 3.422}], 'summary': 'Npm installs dependencies from package.json, creating node_modules folder.', 'duration': 30.745, 'max_score': 752.935, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_-CD_5YhJTA/pics/_-CD_5YhJTA752935.jpg'}, {'end': 829.493, 'src': 'embed', 'start': 806.243, 'weight': 7, 'content': [{'end': 815.727, 'text': 'we can modify and save a TypeScript file and then the TypeScript compiler will automatically generate a JavaScript and JavaScript map file in the same folder.', 'start': 806.243, 'duration': 9.484}, {'end': 822.09, 'text': 'This JavaScript file is eventually the one that would be loaded in the browser, but we never have to view or modify it.', 'start': 816.607, 'duration': 5.483}, {'end': 824.411, 'text': 'We code purely in TypeScript.', 'start': 822.71, 'duration': 1.701}, {'end': 829.493, 'text': 'So back in the terminal, type npm start.', 'start': 826.051, 'duration': 3.442}], 'summary': "Typescript compiler generates javascript and map files in the same folder, allowing pure typescript coding. execute 'npm start' in the terminal.", 'duration': 23.25, 'max_score': 806.243, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_-CD_5YhJTA/pics/_-CD_5YhJTA806243.jpg'}, {'end': 849.147, 'src': 'heatmap', 'start': 806.243, 'weight': 0.728, 'content': [{'end': 815.727, 'text': 'we can modify and save a TypeScript file and then the TypeScript compiler will automatically generate a JavaScript and JavaScript map file in the same folder.', 'start': 806.243, 'duration': 9.484}, {'end': 822.09, 'text': 'This JavaScript file is eventually the one that would be loaded in the browser, but we never have to view or modify it.', 'start': 816.607, 'duration': 5.483}, {'end': 824.411, 'text': 'We code purely in TypeScript.', 'start': 822.71, 'duration': 1.701}, {'end': 829.493, 'text': 'So back in the terminal, type npm start.', 'start': 826.051, 'duration': 3.442}, {'end': 837.803, 'text': 'So now our TypeScript compiler is running in the watch mode and our light web server is started.', 'start': 832.662, 'duration': 5.141}, {'end': 842.245, 'text': 'This also launches our default browser, which on my machine is Safari.', 'start': 838.424, 'duration': 3.821}, {'end': 849.147, 'text': 'So I have to manually open up Chrome and navigate to local host port 3000.', 'start': 843.045, 'duration': 6.102}], 'summary': 'Typescript compiler generates javascript files automatically. npm start launches typescript compiler in watch mode and starts a web server.', 'duration': 42.904, 'max_score': 806.243, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_-CD_5YhJTA/pics/_-CD_5YhJTA806243.jpg'}, {'end': 1001.376, 'src': 'embed', 'start': 965.669, 'weight': 8, 'content': [{'end': 967.79, 'text': "Okay, now I'm going to go ahead and save the file.", 'start': 965.669, 'duration': 2.121}, {'end': 971.092, 'text': 'Look at the terminal.', 'start': 970.252, 'duration': 0.84}, {'end': 974.494, 'text': 'TypeScript compiler regenerated our JavaScript file.', 'start': 972.093, 'duration': 2.401}, {'end': 977.316, 'text': "Now let's switch over to Chrome.", 'start': 976.035, 'duration': 1.281}, {'end': 981.398, 'text': 'So Chrome automatically refreshed.', 'start': 980.097, 'duration': 1.301}, {'end': 985.22, 'text': 'So this is going to be our development experience throughout this course.', 'start': 982.479, 'duration': 2.741}, {'end': 991.264, 'text': 'We write TypeScript code and TypeScript compiler automatically generates JavaScript files for us.', 'start': 986.041, 'duration': 5.223}, {'end': 1001.376, 'text': 'simple and easy, but if you want to build a production application, you may want to include typescript compilation as part of your build process.', 'start': 992.268, 'duration': 9.108}], 'summary': 'Typescript compiler generates javascript files, simplifying development. for production, include typescript compilation in build process.', 'duration': 35.707, 'max_score': 965.669, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_-CD_5YhJTA/pics/_-CD_5YhJTA965669.jpg'}], 'start': 491.586, 'title': 'Angular development environment and app configuration', 'summary': 'Discusses setting up the development environment with node.js and npm, typescript, code editor selection, and chrome browser use. it also covers configuring typescript files, tsconfig.json, package.json for angular 2 app, and the process of running the first angular app with npm, typescript compiler, and lite web server.', 'chapters': [{'end': 612.657, 'start': 491.586, 'title': 'Setting up angular development environment', 'summary': 'Discusses setting up the development environment, including installing node.js and npm, globally installing typescript, selecting a code editor, and using chrome browser for angular app development.', 'duration': 121.071, 'highlights': ['Installing Node.js and npm Instructs to download Node.js from nodejs.org and install it, followed by using npm to globally install TypeScript.', 'Selecting a Code Editor Mentions the usage of VS Code as the preferred code editor for the course, but also suggests other editors that support TypeScript.', 'Using Chrome Browser Recommends using Chrome due to its compatibility with Chrome developer tools used throughout the course.', 'Seed Project for Angular App Provides a seed project for Angular app development, as the Angular Command Line Interface tool is not yet ready.']}, {'end': 1055.045, 'start': 612.657, 'title': 'Angular 2 app configuration', 'summary': 'Covers the configuration files for our angular 2 application, including typescript files, tsconfig.json, package.json, and the process of running the first angular app with npm, typescript compiler, and lite web server.', 'duration': 442.388, 'highlights': ['The TypeScript compiler uses tsconfig.json to transpile TypeScript files into JavaScript, with ES5 as the target JavaScript version. The tsconfig.json file configures the TypeScript compiler to transpile TypeScript files into JavaScript, with ES5 specified as the target JavaScript version.', 'The package.json contains dependencies for the application, including Angular 2 and System.js. The package.json file lists the dependencies for the application, such as Angular 2 and System.js.', 'Running npm install downloads the dependencies from the npm registry, creating a node_modules folder to store them. Executing npm install downloads the dependencies listed in package.json from the npm registry, resulting in the creation of a node_modules folder to store the dependencies.', 'Using npm start concurrently runs the TypeScript compiler in watch mode and starts the lite web server. The npm start command concurrently initiates the TypeScript compiler in watch mode and starts the lite web server, facilitating automatic generation of JavaScript files upon saving TypeScript files.', 'The development experience involves writing TypeScript code, with the TypeScript compiler automatically generating JavaScript files, while the browser sync feature automatically refreshes the page upon code changes. The development process entails writing TypeScript code, with the TypeScript compiler automatically producing JavaScript files and the browser sync feature refreshing the page upon code changes.']}], 'duration': 563.459, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_-CD_5YhJTA/pics/_-CD_5YhJTA491586.jpg', 'highlights': ['Installing Node.js and npm Instructs to download Node.js from nodejs.org and install it, followed by using npm to globally install TypeScript.', 'Selecting a Code Editor Mentions the usage of VS Code as the preferred code editor for the course, but also suggests other editors that support TypeScript.', 'Using Chrome Browser Recommends using Chrome due to its compatibility with Chrome developer tools used throughout the course.', 'Seed Project for Angular App Provides a seed project for Angular app development, as the Angular Command Line Interface tool is not yet ready.', 'The TypeScript compiler uses tsconfig.json to transpile TypeScript files into JavaScript, with ES5 as the target JavaScript version. The tsconfig.json file configures the TypeScript compiler to transpile TypeScript files into JavaScript, with ES5 specified as the target JavaScript version.', 'The package.json contains dependencies for the application, including Angular 2 and System.js. The package.json file lists the dependencies for the application, such as Angular 2 and System.js.', 'Running npm install downloads the dependencies from the npm registry, creating a node_modules folder to store them. Executing npm install downloads the dependencies listed in package.json from the npm registry, resulting in the creation of a node_modules folder to store the dependencies.', 'Using npm start concurrently runs the TypeScript compiler in watch mode and starts the lite web server. The npm start command concurrently initiates the TypeScript compiler in watch mode and starts the lite web server, facilitating automatic generation of JavaScript files upon saving TypeScript files.', 'The development experience involves writing TypeScript code, with the TypeScript compiler automatically generating JavaScript files, while the browser sync feature automatically refreshes the page upon code changes. The development process entails writing TypeScript code, with the TypeScript compiler automatically producing JavaScript files and the browser sync feature refreshing the page upon code changes.']}, {'end': 1869.56, 'segs': [{'end': 1186.867, 'src': 'embed', 'start': 1163.482, 'weight': 0, 'content': [{'end': 1171.984, 'text': 'So in the introductory section, you learned about the core building blocks of Angular 2 apps, components, directives, services, and routers.', 'start': 1163.482, 'duration': 8.502}, {'end': 1176.805, 'text': "In this section, we'll implement a component, a directive, and a service from scratch.", 'start': 1172.824, 'duration': 3.981}, {'end': 1181.846, 'text': "So by the end of this section, you'll have an idea of what it is like to build an Angular 2 app.", 'start': 1177.345, 'duration': 4.501}, {'end': 1186.867, 'text': "We'll look at routers later in the section called Building Single Page Applications.", 'start': 1182.446, 'duration': 4.421}], 'summary': "Introduction to angular 2: components, directives, services, and routers will be implemented. by the end, you'll have an idea of building an angular 2 app.", 'duration': 23.385, 'max_score': 1163.482, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_-CD_5YhJTA/pics/_-CD_5YhJTA1163482.jpg'}, {'end': 1231.285, 'src': 'embed', 'start': 1205.706, 'weight': 1, 'content': [{'end': 1210.427, 'text': 'And when it observes a change in a file, it will transpile it into JavaScript.', 'start': 1205.706, 'duration': 4.721}, {'end': 1215.668, 'text': 'And then the browser sync will kick in and automatically refresh the browser.', 'start': 1211.187, 'duration': 4.481}, {'end': 1217.689, 'text': "You're going to see this in a second.", 'start': 1216.588, 'duration': 1.101}, {'end': 1219.729, 'text': 'So back to VS Code.', 'start': 1218.829, 'duration': 0.9}, {'end': 1228.704, 'text': 'In Angular 2, each of the building blocks I talked about, like components, directives, and routers, are plain TypeScript classes.', 'start': 1221.84, 'duration': 6.864}, {'end': 1231.285, 'text': "And that's one thing that I love about Angular 2.", 'start': 1229.624, 'duration': 1.661}], 'summary': 'Typescript transpiles files into javascript for angular 2, with automatic browser refresh.', 'duration': 25.579, 'max_score': 1205.706, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_-CD_5YhJTA/pics/_-CD_5YhJTA1205706.jpg'}, {'end': 1432.273, 'src': 'embed', 'start': 1407.2, 'weight': 4, 'content': [{'end': 1414.064, 'text': 'When Angular sees an element that matches this CSS selector, it will create an instance of our component in the host element.', 'start': 1407.2, 'duration': 6.864}, {'end': 1419.208, 'text': "So here I'm assuming the host element is an element with the tag courses.", 'start': 1415.105, 'duration': 4.103}, {'end': 1423.667, 'text': 'The next attribute is template.', 'start': 1421.766, 'duration': 1.901}, {'end': 1432.273, 'text': 'And this template specifies the HTML that will be inserted into the DOM when the components view is rendered.', 'start': 1426.349, 'duration': 5.924}], 'summary': "Angular creates component instance for matching css selector, assuming host element is 'courses', with specified html template.", 'duration': 25.073, 'max_score': 1407.2, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_-CD_5YhJTA/pics/_-CD_5YhJTA1407200.jpg'}, {'end': 1575.955, 'src': 'embed', 'start': 1548.742, 'weight': 5, 'content': [{'end': 1552.463, 'text': 'Even though we defined a component in our application, nowhere we have referenced it.', 'start': 1548.742, 'duration': 3.721}, {'end': 1556.744, 'text': 'So Angular does not scan all your files to discover your components.', 'start': 1553.403, 'duration': 3.341}, {'end': 1561.645, 'text': 'It will only recognize the components that you have explicitly referenced.', 'start': 1557.544, 'duration': 4.101}, {'end': 1567.07, 'text': "So here we need to add a reference to course's component so it can be discovered by Angular.", 'start': 1562.588, 'duration': 4.482}, {'end': 1575.955, 'text': 'So we supply a new field here called directives, which is an array.', 'start': 1568.451, 'duration': 7.504}], 'summary': 'Angular requires explicit component references to recognize them, not scanning all files. directives field is used for explicit referencing.', 'duration': 27.213, 'max_score': 1548.742, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_-CD_5YhJTA/pics/_-CD_5YhJTA1548742.jpg'}, {'end': 1696.951, 'src': 'heatmap', 'start': 1655.452, 'weight': 0.749, 'content': [{'end': 1661.895, 'text': "look app folder and here's app.component.ts and here is our courses component.", 'start': 1655.452, 'duration': 6.443}, {'end': 1663.256, 'text': "so they're both in the same folder.", 'start': 1661.895, 'duration': 1.361}, {'end': 1669.938, 'text': 'so back in app.component.ts.', 'start': 1665.174, 'duration': 4.764}, {'end': 1679.145, 'text': 'here i type dot slash, which means start searching from the current folder and then the name of the module.', 'start': 1669.938, 'duration': 9.207}, {'end': 1684.489, 'text': 'so courses.component, without ts extension.', 'start': 1679.145, 'duration': 5.344}, {'end': 1688.332, 'text': "save. now let's look at our terminal.", 'start': 1684.489, 'duration': 3.843}, {'end': 1696.951, 'text': 'Okay, TypeScript compiler detected a change, so it transpiled our TS files into JavaScript files.', 'start': 1691.007, 'duration': 5.944}], 'summary': 'Ts compiler transpiled files from app.component.ts and courses.component in the same folder.', 'duration': 41.499, 'max_score': 1655.452, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_-CD_5YhJTA/pics/_-CD_5YhJTA1655452.jpg'}], 'start': 1055.905, 'title': 'Angular 2 app building and component overview', 'summary': 'Covers building an angular 2 app, including components, directives, and services. it also provides an overview of creating and using components in angular, with a focus on typescript and html integration.', 'chapters': [{'end': 1374.689, 'start': 1055.905, 'title': 'Angular 2 jumpstart section', 'summary': 'Provides an overview of building an angular 2 app, covering components, directives, and services. it emphasizes the simplicity and cleanliness of the angular 2 api, and offers insight into the structure of a typescript class and the application of decorators.', 'duration': 318.784, 'highlights': ['The chapter provides an overview of building an Angular 2 app, covering components, directives, and services. The section will guide the creation of a component, a service, and a directive from scratch, offering a comprehensive understanding of building an Angular 2 app.', 'It emphasizes the simplicity and cleanliness of the Angular 2 API. The API of Angular 2 is highlighted for its simplicity and cleanliness, providing a user-friendly development experience.', 'Insight into the structure of a TypeScript class and the application of decorators is provided. The transcript offers insight into the structure of a TypeScript class, the concept of exporting, and the application of decorators, providing a foundational understanding of Angular 2 development.']}, {'end': 1869.56, 'start': 1375.65, 'title': 'Angular components overview', 'summary': 'Explains the basics of creating and using components in angular, covering the use of selectors, templates, and the process of referencing components to be discovered by angular, with a focus on typescript and html integration.', 'duration': 493.91, 'highlights': ['The chapter explains the basics of creating and using components in Angular Covers the fundamental concepts of creating and using components in Angular', 'Explains the use of selectors and templates in Angular components Describes the use of selectors and templates in defining Angular components', 'Detailed explanation of referencing components to be discovered by Angular Provides a detailed explanation of referencing components to be discovered by Angular, including the use of directives', 'Focus on TypeScript and HTML integration for defining and rendering components Emphasizes the integration of TypeScript and HTML for defining and rendering components in Angular']}], 'duration': 813.655, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_-CD_5YhJTA/pics/_-CD_5YhJTA1055905.jpg', 'highlights': ['The section will guide the creation of a component, a service, and a directive from scratch, offering a comprehensive understanding of building an Angular 2 app.', 'The API of Angular 2 is highlighted for its simplicity and cleanliness, providing a user-friendly development experience.', 'The transcript offers insight into the structure of a TypeScript class, the concept of exporting, and the application of decorators, providing a foundational understanding of Angular 2 development.', 'Covers the fundamental concepts of creating and using components in Angular.', 'Describes the use of selectors and templates in defining Angular components.', 'Provides a detailed explanation of referencing components to be discovered by Angular, including the use of directives.', 'Emphasizes the integration of TypeScript and HTML for defining and rendering components in Angular.']}, {'end': 2357.596, 'segs': [{'end': 1896.701, 'src': 'embed', 'start': 1871.601, 'weight': 0, 'content': [{'end': 1876.626, 'text': 'Now if the value of this property in the component changes, the view will be automatically refreshed.', 'start': 1871.601, 'duration': 5.025}, {'end': 1880.409, 'text': "Angular would take care of that, so we don't have to do anything special.", 'start': 1877.466, 'duration': 2.943}, {'end': 1882.891, 'text': 'And this is called one-way binding.', 'start': 1881.189, 'duration': 1.702}, {'end': 1886.636, 'text': 'We also have two-way binding, which is used in forms.', 'start': 1884.155, 'duration': 2.481}, {'end': 1894.78, 'text': 'For example, when you type something into an input field that is bound to a property, as you modify the value of the input field,', 'start': 1887.236, 'duration': 7.544}, {'end': 1896.701, 'text': 'the property will be updated automatically.', 'start': 1894.78, 'duration': 1.921}], 'summary': 'Angular enables one-way and two-way binding for automatic view refresh and property updates.', 'duration': 25.1, 'max_score': 1871.601, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_-CD_5YhJTA/pics/_-CD_5YhJTA1871601.jpg'}, {'end': 2081.447, 'src': 'embed', 'start': 2028.603, 'weight': 1, 'content': [{'end': 2035.768, 'text': 'But sometimes we use special attributes like ng4 here, which is an example of a directive.', 'start': 2028.603, 'duration': 7.165}, {'end': 2040.251, 'text': 'So this directive extends the HTML and adds extra behavior.', 'start': 2036.588, 'duration': 3.663}, {'end': 2044.954, 'text': 'In this case, it will repeat the li element based on the expression assigned to it.', 'start': 2040.771, 'duration': 4.183}, {'end': 2054.804, 'text': 'At this point, our component is rendering a hard coded list of courses.', 'start': 2050.44, 'duration': 4.364}, {'end': 2058.726, 'text': 'But in a real world application, we often get the data from the server.', 'start': 2055.603, 'duration': 3.123}, {'end': 2065.25, 'text': 'As I explained before, this component should not include any logic other than the view logic.', 'start': 2059.706, 'duration': 5.544}, {'end': 2069.351, 'text': "So I'm not going to write the code to call the server and get the list of courses.", 'start': 2065.909, 'duration': 3.442}, {'end': 2075.596, 'text': 'Any logic that is not about this view should be encapsulated in a separate class, which we call a service.', 'start': 2070.213, 'duration': 5.383}, {'end': 2081.447, 'text': "So let's create a service that this component will use to get the courses from the server.", 'start': 2076.963, 'duration': 4.484}], 'summary': 'Using ng4 directive to repeat li element based on expression. encapsulating server logic in a separate service.', 'duration': 52.844, 'max_score': 2028.603, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_-CD_5YhJTA/pics/_-CD_5YhJTA2028603.jpg'}, {'end': 2357.596, 'src': 'embed', 'start': 2280.446, 'weight': 3, 'content': [{'end': 2282.228, 'text': 'So add the extra parameters here.', 'start': 2280.446, 'duration': 1.782}, {'end': 2284.77, 'text': 'So this is very fragile.', 'start': 2283.749, 'duration': 1.021}, {'end': 2287.092, 'text': 'It will cause a lot of cascading changes.', 'start': 2285.05, 'duration': 2.042}, {'end': 2295.021, 'text': "A more serious problem of this tight coupling is that we won't be able to isolate this component and unit test it.", 'start': 2288.479, 'duration': 6.542}, {'end': 2301.603, 'text': "Because when unit testing this component, we don't want to have a server up and running with a RESTful API.", 'start': 2296.181, 'duration': 5.422}, {'end': 2307.325, 'text': "We want to use a fake or a mock service that doesn't really need a server.", 'start': 2302.643, 'duration': 4.682}, {'end': 2311.006, 'text': 'And this way we can isolate the component and unit test it.', 'start': 2307.905, 'duration': 3.101}, {'end': 2315.488, 'text': 'So to solve this issue, we should not use the new operator here.', 'start': 2312.267, 'duration': 3.221}, {'end': 2329.441, 'text': 'Delete. instead we pass a parameter here course service, which is of type course service.', 'start': 2316.448, 'duration': 12.993}, {'end': 2332.423, 'text': 'now note the naming convention.', 'start': 2329.441, 'duration': 2.982}, {'end': 2335.585, 'text': 'the parameter name here uses camel case,', 'start': 2332.423, 'duration': 3.162}, {'end': 2341.569, 'text': 'so the first letter of the first word is lowercase and the first letter of every word after that is uppercase.', 'start': 2335.585, 'duration': 5.984}, {'end': 2347.069, 'text': 'But the naming convention for our class uses Pascal case.', 'start': 2343.387, 'duration': 3.682}, {'end': 2350.671, 'text': 'So the first letter of every word should be uppercase.', 'start': 2347.65, 'duration': 3.021}, {'end': 2357.596, 'text': 'So with this change, our component is no longer tightly coupled to the service.', 'start': 2352.653, 'duration': 4.943}], 'summary': 'Avoid tight coupling by passing parameters, enabling unit testing.', 'duration': 77.15, 'max_score': 2280.446, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_-CD_5YhJTA/pics/_-CD_5YhJTA2280446.jpg'}], 'start': 1871.601, 'title': 'Angular data binding, templating, and component-service interaction', 'summary': 'Covers one-way and two-way binding in angular, demonstrating automatic view refresh and input field property updates. it also explains the use of ng4 attribute to repeat li elements and encapsulation of server data retrieval logic in a separate service class. additionally, it highlights the implementation of a service in a component for retrieving data, emphasizing the importance of decoupling, unit testing, and naming conventions for parameters and classes.', 'chapters': [{'end': 2159.762, 'start': 1871.601, 'title': 'Angular data binding and templating', 'summary': 'Explains one-way and two-way binding in angular, demonstrating the automatic view refresh and input field property updates. it also covers the use of ng4 attribute to repeat li elements and the encapsulation of server data retrieval logic in a separate service class.', 'duration': 288.161, 'highlights': ['The chapter explains one-way and two-way binding in Angular. It covers the automatic view refresh and input field property updates, demonstrating the concept of one-way and two-way binding.', 'Demonstrates the use of ng4 attribute to repeat li elements. The usage of ng4 attribute to repeat li elements is explained, showcasing its functionality within the template.', 'Encapsulation of server data retrieval logic in a separate service class. The concept of encapsulating server data retrieval logic in a separate service class is introduced, emphasizing the separation of concerns and best practices.']}, {'end': 2357.596, 'start': 2161.803, 'title': 'Component-service interaction', 'summary': 'Explains the implementation of a service in a component for retrieving data, highlighting the importance of decoupling and unit testing, and emphasizing the naming conventions for parameters and classes.', 'duration': 195.793, 'highlights': ['The chapter emphasizes the importance of decoupling the component and the service to avoid tight coupling, which would lead to cascading changes in case of modifications and hinder unit testing.', 'It explains the significance of using a mock service instead of a live server with a RESTful API for isolating the component and unit testing it.', 'The naming conventions for parameters (camel case) and classes (Pascal case) are highlighted as a key practice for maintaining a consistent coding style.']}], 'duration': 485.995, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_-CD_5YhJTA/pics/_-CD_5YhJTA1871601.jpg', 'highlights': ['Covers one-way and two-way binding in Angular, demonstrating automatic view refresh and input field property updates.', 'Demonstrates the use of ng4 attribute to repeat li elements, showcasing its functionality within the template.', 'Encapsulation of server data retrieval logic in a separate service class, emphasizing the separation of concerns and best practices.', 'Emphasizes the importance of decoupling the component and the service to avoid tight coupling and hinder unit testing.', 'Explains the significance of using a mock service instead of a live server with a RESTful API for isolating the component and unit testing it.', 'Highlights the naming conventions for parameters (camel case) and classes (Pascal case) as a key practice for maintaining a consistent coding style.']}, {'end': 3251.011, 'segs': [{'end': 2429.597, 'src': 'embed', 'start': 2402.607, 'weight': 0, 'content': [{'end': 2407.35, 'text': 'But how do we get a dependency injection framework? Well, Angular already has that built into it.', 'start': 2402.607, 'duration': 4.743}, {'end': 2409.311, 'text': "So we don't have to do anything magical.", 'start': 2407.95, 'duration': 1.361}, {'end': 2414.694, 'text': "There is just one more tiny step we need to do here but I'm not going to do it yet.", 'start': 2410.812, 'duration': 3.882}, {'end': 2420.158, 'text': "I'm going to run the application now so you can see a very important error and then we'll come back and fix it.", 'start': 2415.195, 'duration': 4.963}, {'end': 2423.192, 'text': 'So save, back to Chrome.', 'start': 2420.99, 'duration': 2.202}, {'end': 2429.597, 'text': 'Okay, right click somewhere, inspect.', 'start': 2426.434, 'duration': 3.163}], 'summary': 'Angular comes with built-in dependency injection framework; a tiny step remains to be done.', 'duration': 26.99, 'max_score': 2402.607, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_-CD_5YhJTA/pics/_-CD_5YhJTA2402607.jpg'}, {'end': 2700.557, 'src': 'embed', 'start': 2672.141, 'weight': 1, 'content': [{'end': 2678.543, 'text': "In the constructor, we get author service and then use that to set the author's property.", 'start': 2672.141, 'duration': 6.402}, {'end': 2691.372, 'text': 'And then in app.component.ts, I modified the template here So I added authors element just below courses.', 'start': 2681.104, 'duration': 10.268}, {'end': 2699.317, 'text': 'So you see, with this components we can break up a big page with lots of different features into smaller, more manageable,', 'start': 2692.292, 'duration': 7.025}, {'end': 2700.557, 'text': 'more maintainable components.', 'start': 2699.317, 'duration': 1.24}], 'summary': 'Using author service, added authors element below courses to create more manageable components.', 'duration': 28.416, 'max_score': 2672.141, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_-CD_5YhJTA/pics/_-CD_5YhJTA2672141.jpg'}, {'end': 2748.722, 'src': 'embed', 'start': 2720.55, 'weight': 3, 'content': [{'end': 2729.776, 'text': "Then I came back here and I realized I've added this author's element here, but Angular doesn't know which component is responsible for that,", 'start': 2720.55, 'duration': 9.226}, {'end': 2735.619, 'text': "because I forgot to put author's component in the list of directives that this template is using.", 'start': 2729.776, 'duration': 5.843}, {'end': 2738.861, 'text': 'So chances are you made the same mistake as me.', 'start': 2736.96, 'duration': 1.901}, {'end': 2741.163, 'text': 'If so, this is your solution.', 'start': 2739.342, 'duration': 1.821}, {'end': 2748.722, 'text': 'Alright, now let me show you a real world example of a custom directive.', 'start': 2745.199, 'duration': 3.523}], 'summary': "The speaker forgot to include the author's component in the list of directives, causing angular to not recognize it.", 'duration': 28.172, 'max_score': 2720.55, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_-CD_5YhJTA/pics/_-CD_5YhJTA2720550.jpg'}, {'end': 2817.373, 'src': 'embed', 'start': 2773.151, 'weight': 2, 'content': [{'end': 2781.515, 'text': 'Now I want to use a directive to extend the input tag such that if it has the attribute autogrow, it will have this behavior.', 'start': 2773.151, 'duration': 8.364}, {'end': 2796.023, 'text': "So in VS Code under app folder, I'm going to create a new file, call it auto-grow, then .directive.ts.", 'start': 2783.316, 'duration': 12.707}, {'end': 2804.386, 'text': 'First, we start with a class, just like before.', 'start': 2802.165, 'duration': 2.221}, {'end': 2809.289, 'text': 'Export class, autogrow directive.', 'start': 2806.427, 'duration': 2.862}, {'end': 2815.011, 'text': 'We need to decorate this class with a directive decorator.', 'start': 2811.71, 'duration': 3.301}, {'end': 2817.373, 'text': 'So first, we import it.', 'start': 2815.932, 'duration': 1.441}], 'summary': 'Creating autogrow directive for extending input tag behavior', 'duration': 44.222, 'max_score': 2773.151, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_-CD_5YhJTA/pics/_-CD_5YhJTA2773151.jpg'}], 'start': 2358.796, 'title': 'Angular dependency injection and creating autogrow directive', 'summary': 'Discusses dependency injection in angular, emphasizing its role, process, and importance in decoupling components from services. it also demonstrates creating an autogrow directive, covering the implementation, event subscription, and application in a component, with a teaser for the next section.', 'chapters': [{'end': 2772.14, 'start': 2358.796, 'title': 'Dependency injection in angular', 'summary': "Discusses the concept of dependency injection in angular, highlighting how a dependency injection framework injects dependencies of classes, the role of angular's built-in dependency injection framework, and the process of using dependency injection to decouple components from services. it also emphasizes the importance of breaking down features into smaller, manageable components and the common mistake of not including a component in the list of directives.", 'duration': 413.344, 'highlights': ['The role of a dependency injection framework is to inject dependencies of classes when creating them, such as creating an instance of a service and injecting it into the constructor of a class. The dependency injection framework creates an instance of a service and injects it into the constructor of a class, enabling decoupling of components from services.', 'Angular has a built-in dependency injection framework, requiring only a small additional step to specify the dependencies for a component, thereby solving dependency-related errors. Angular has a built-in dependency injection framework, which can be utilized by specifying the dependencies for a component, effectively resolving dependency-related errors.', 'The importance of breaking up a big page with different features into smaller, more manageable components to enhance maintainability and manageability. Breaking up a big page with different features into smaller, more manageable components enhances maintainability and manageability.', 'The common mistake of not including a component in the list of directives when using it in a template, leading to the component not being rendered as expected. Forgetting to include a component in the list of directives when using it in a template can lead to the component not being rendered as expected.']}, {'end': 3251.011, 'start': 2773.151, 'title': 'Creating autogrow directive', 'summary': 'Demonstrates the creation of an autogrow directive to extend the input tag in angular, highlighting the implementation of the directive class, subscribing to events, accessing host elements, and applying the directive in a component, with a brief overview of components, directives, services, and dependency injection, and a teaser for the next section.', 'duration': 477.86, 'highlights': ['The chapter details the creation of an autogrow directive in Angular, covering the steps such as creating the directive class, using decorator to subscribe to focus and blur events, accessing host elements, and applying the directive in a component.', 'It briefly touches upon the concepts of components, directives, services, and dependency injection, providing a preview of the upcoming section on property and event binding.', 'The instructor encourages viewers to consider enrolling in the complete Angular course for an in-depth learning experience and hints at more advanced topics to be covered in the course.']}], 'duration': 892.215, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_-CD_5YhJTA/pics/_-CD_5YhJTA2358796.jpg', 'highlights': ["Angular's built-in dependency injection framework resolves dependency-related errors.", 'Breaking up a big page into smaller components enhances maintainability and manageability.', 'Creating an autogrow directive in Angular involves steps like creating the directive class and subscribing to focus and blur events.', 'Forgetting to include a component in the list of directives when using it in a template can lead to rendering issues.']}], 'highlights': ["Angular is a leading framework for building modular, maintainable, and testable single-page applications, with huge community support and Google's backing, as evidenced by its increasing demand for developers shown in Google Trends.", 'In a single page app, instead of reloading the entire page, we replace the view that is in the content area with another view.', 'We also keep track of history, so if the user navigates using back and forward buttons, we restore the application in the right state.', 'TypeScript, used in Angular 2, offers useful features such as modules, classes, interfaces, access modifiers, IntelliSense, and compile time checking, ensuring catching programming errors during compile time.', 'The course aims to teach Angular 2 from scratch in a step-by-step manner, emphasizing that familiarity with Angular 1 is not necessary as Angular 2 is an entirely new framework, and TypeScript will be used.', 'Components in Angular 2 Explains the concept of components, their role in breaking down complex views, and their reusability, with examples like building an application like Udemy.', 'Services in Angular 2 Describes the role of services in delegating non-user interface logic and handling backend APIs, ensuring separation of concerns in the application.', 'Routers and Directives in Angular 2 Discusses the responsibilities of routers for navigation and directives for adding behavior to DOM elements, highlighting their significance in Angular 2 app development.', 'Features of Real-World Application Mentions the features of the real-world application built in the course, including CRUD operations, custom validation, pagination, filtering, and master-detail view.', 'Decoupling Components from DOM Explains the decoupling of components from the DOM in Angular 2, emphasizing the use of binding instead of direct manipulation for automatic refresh and unit testability.', 'Installing Node.js and npm Instructs to download Node.js from nodejs.org and install it, followed by using npm to globally install TypeScript.', 'Selecting a Code Editor Mentions the usage of VS Code as the preferred code editor for the course, but also suggests other editors that support TypeScript.', 'Using Chrome Browser Recommends using Chrome due to its compatibility with Chrome developer tools used throughout the course.', 'Seed Project for Angular App Provides a seed project for Angular app development, as the Angular Command Line Interface tool is not yet ready.', 'The TypeScript compiler uses tsconfig.json to transpile TypeScript files into JavaScript, with ES5 as the target JavaScript version.', 'The package.json contains dependencies for the application, including Angular 2 and System.js.', 'Running npm install downloads the dependencies from the npm registry, creating a node_modules folder to store them.', 'Using npm start concurrently runs the TypeScript compiler in watch mode and starts the lite web server.', 'The development experience involves writing TypeScript code, with the TypeScript compiler automatically generating JavaScript files, while the browser sync feature automatically refreshes the page upon code changes.', 'The section will guide the creation of a component, a service, and a directive from scratch, offering a comprehensive understanding of building an Angular 2 app.', 'The API of Angular 2 is highlighted for its simplicity and cleanliness, providing a user-friendly development experience.', 'The transcript offers insight into the structure of a TypeScript class, the concept of exporting, and the application of decorators, providing a foundational understanding of Angular 2 development.', 'Covers the fundamental concepts of creating and using components in Angular.', 'Describes the use of selectors and templates in defining Angular components.', 'Provides a detailed explanation of referencing components to be discovered by Angular, including the use of directives.', 'Emphasizes the integration of TypeScript and HTML for defining and rendering components in Angular.', 'Covers one-way and two-way binding in Angular, demonstrating automatic view refresh and input field property updates.', 'Demonstrates the use of ng4 attribute to repeat li elements, showcasing its functionality within the template.', 'Encapsulation of server data retrieval logic in a separate service class, emphasizing the separation of concerns and best practices.', 'Emphasizes the importance of decoupling the component and the service to avoid tight coupling and hinder unit testing.', 'Explains the significance of using a mock service instead of a live server with a RESTful API for isolating the component and unit testing it.', 'Highlights the naming conventions for parameters (camel case) and classes (Pascal case) as a key practice for maintaining a consistent coding style.', "Angular's built-in dependency injection framework resolves dependency-related errors.", 'Breaking up a big page into smaller components enhances maintainability and manageability.', 'Creating an autogrow directive in Angular involves steps like creating the directive class and subscribing to focus and blur events.', 'Forgetting to include a component in the list of directives when using it in a template can lead to rendering issues.']}