title
Angular 8 Tutorial | Create Angular Project from Scratch | Angular Training | Edureka

description
🔥 Edureka Angular Certification Training (Use Code "𝐘𝐎𝐔𝐓𝐔𝐁𝐄𝟐𝟎"): https://www.edureka.co/angular-training This Edureka "Angular 8 Tutorial" will help you learn Angular 8 completely along with a step by step demonstration on how to create an Angular project from scratch. Below are the topics covered in this Angular Tutorial for Beginners: 2:47 Traditional web applications 3:27 Single page applications 4:27 Drawbacks of AngularJS and Rise of Angular 5:14 What is Angular? 5:43 Difference between AngularJS and Angular 6:43 Who uses Angular? 6:56 Why is Angular so popular? 8:48 What is new in Angular 8? 10:29 Angular Architecture 12:20 Installing VS Code and Angular 13:24 Installing Node.js 17:30 Files and Folders Created while Creating a new project 24:58 Simple Project 26:00 Working of Angular application 28:01 Typescript 1:03:28 Building Blocks of Angular 1:22:15 Demo 🔵Full-Stack Web Development Internship Program: http://bit.ly/fs-internship 🔴Do subscribe to our channel and hit the bell icon to never miss an update from us in the future: https://goo.gl/6ohpTV Edureka Community: https://bit.ly/EdurekaCommunity Instagram:https://www.instagram.com/edureka_learning/ Facebook: https://www.facebook.com/edurekaIN/ Twitter: https://twitter.com/edurekain LinkedIn: https://www.linkedin.com/company/edureka SlideShare: https://www.slideshare.net/EdurekaIN #edureka #angularedureka #angular8tutorial #angularframework #angularbasics How does it work? 1. This is a 4 Week Instructor-led Online Course, 20 hours of assignment and 20 hours of project work 2. We have a 24x7 One-on-One LIVE Technical Support to help you with any problems you might face or any clarifications you may require during the course. 3. At the end of the training, you will have to work on a project, based on which we will provide you with a Grade and a Verifiable Certificate! - - - - - - - - - - - - - - About the Course Angular certification training at Edureka makes you an expert in concepts such as SPA (Single Page Application), DOM manipulations, DOM events, Dependency Injection (DI), REST API communication, Async supporting libraries, and external libraries such as JQuery and Bootstrap. After completing this course, students should be able to : 1) Describe Client Side MVC, SPA, and Typescript 2) Discuss and Apply various application designs, testing practices, and related development tools DI 3) List different ways of development using alternate APIs and use them as peruse cases 4) Explain XHR communication, Form manipulation, and REST API communication 5) State Async supporting libraries/features like Promises, Observable 6) Describe Internationalization/Localization, and External libraries like JQuery, Bootstrap, incorporation 7) Explore Upgrading from 1.X AngularJS Application, and Multi-Device/Cross-Platform application 8) Illustrate how to use Node.JS, MongoDB (MEAN Stack) to create simple functioning RESTful APIs yourself. 9) Work on a real-life project, implementing an Electronic Voting System to learn 10) Create-Read-Update-Delete concepts and derive Business Insights. 11) A working code base implemented for a real-life project using MEAN stack to learn integration of different frontend requirements into a single project - Shopping Cart 12) Working code bases implemented for a real-life project using Firebase - Grocery List Management / Employee Management. - - - - - - - - - - - - - - Who should go for this Course? Angular Certification Course at Edureka is designed for professionals who want to learn modern client-side design and development techniques and wish to apply it on large web applications such as Cloud ERP, CRM, among others. This course is ideal for : 1) UI Developers and Technical Leads 2) Developers upgrading from AngularJS 1.x or above 3) Freshers and aspiring UI (JavaScript) developers 4) Full Stack Developers 5) QAs, Architects, and Technical Project Managers - - - - - - - - - - - - - - Why learn Angular? Angular is a JavaScript framework which is used to create scalable, enterprise, and performant client-side web applications. It provides an ecosystem for the development of client-side web applications. The ecosystem for development may include external tools or libraries as well. The ecosystem process includes project bootstrapping, development operations/tools, testing, and build support. One of the best features of Angular framework is that it is quite flexible when it comes to the usage of external libraries apart from the scalability it provides. With Angular framework adoption being high, performance management of the application is community-driven indirectly driving better job opportunities. Got a question on the topic? Please share it in the comment section below and our experts will answer it for you. Please write back to us at sales@edureka.in or call us at IND: 9606058406 / US: 18338555775 (toll-free) for more information.

detail
{'title': 'Angular 8 Tutorial | Create Angular Project from Scratch | Angular Training | Edureka', 'heatmap': [{'end': 1053.428, 'start': 905.452, 'weight': 0.715}, {'end': 5493.321, 'start': 5263.797, 'weight': 0.945}], 'summary': 'This angular 8 tutorial covers web development, typescript fundamentals, javascript, angular building blocks, component initialization, and cli setup, providing comprehensive insights into angular, visual studio code installation, typescript, and javascript fundamentals, and angular fundamentals and cli setup, with specific focus on angular version 12.14 and npm install command.', 'chapters': [{'end': 672.849, 'segs': [{'end': 61.603, 'src': 'embed', 'start': 31.906, 'weight': 1, 'content': [{'end': 37.949, 'text': 'So our discussion will start with the basic stuff, like types of web applications, angular.js and its drawbacks,', 'start': 31.906, 'duration': 6.043}, {'end': 42.512, 'text': 'the rise of angular and the differences between angular and angular.js.', 'start': 37.949, 'duration': 4.563}, {'end': 46.875, 'text': 'then we shall see who uses angular and why is it so popular.', 'start': 42.512, 'duration': 4.363}, {'end': 54.639, 'text': 'following that, we shall see what is new in angular 8 and then I will show you guys how to install Visual Studio code and angular on your systems.', 'start': 46.875, 'duration': 7.764}, {'end': 61.603, 'text': 'Then we shall be creating a project in angular and see what are the files and folders that are created along with that project.', 'start': 55.459, 'duration': 6.144}], 'summary': 'Discussion on web app types, angular.js drawbacks, rise of angular, differences, popularity, new features in angular 8, and project creation.', 'duration': 29.697, 'max_score': 31.906, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc831906.jpg'}, {'end': 98.953, 'src': 'embed', 'start': 72.384, 'weight': 0, 'content': [{'end': 78.048, 'text': 'So for that we shall take a deep look at TypeScript and the building blocks of angular after that is done.', 'start': 72.384, 'duration': 5.664}, {'end': 82.192, 'text': 'We shall move on to the most exciting part that is creating a website from scratch.', 'start': 78.369, 'duration': 3.823}, {'end': 89.582, 'text': 'So before we begin just make sure you subscribe to our channel and hit the bell icon to stay updated with all the latest edureka videos.', 'start': 83.114, 'duration': 6.468}, {'end': 96.671, 'text': "Also, if you're interested in getting an online training certification in angular check out the link given in the description box below.", 'start': 90.243, 'duration': 6.428}, {'end': 98.953, 'text': 'So coming back towards this session.', 'start': 97.472, 'duration': 1.481}], 'summary': 'A deep look at typescript and angular building blocks, followed by creating a website from scratch. subscribe to channel and check link for angular certification.', 'duration': 26.569, 'max_score': 72.384, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc872384.jpg'}, {'end': 177.253, 'src': 'embed', 'start': 152.213, 'weight': 3, 'content': [{'end': 158.098, 'text': 'to overcome these issues, single page application model was introduced in late 2002..', 'start': 152.213, 'duration': 5.885}, {'end': 164.283, 'text': 'The single page model resolve this frequent reloading issue of web pages making it much responsive and saving time.', 'start': 158.098, 'duration': 6.185}, {'end': 172.509, 'text': 'So what exactly is a single page application in a single page application model? The website has dynamic interaction with the user.', 'start': 164.983, 'duration': 7.526}, {'end': 177.253, 'text': 'It rewrites the current page rather than reloading the page entirely.', 'start': 173.37, 'duration': 3.883}], 'summary': 'Single page application model introduced in late 2002 resolves frequent page reloading, making it more responsive and time-saving.', 'duration': 25.04, 'max_score': 152.213, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc8152213.jpg'}, {'end': 313.563, 'src': 'embed', 'start': 285, 'weight': 6, 'content': [{'end': 288.142, 'text': 'angular was a complete rewrite of angular.js.', 'start': 285, 'duration': 3.142}, {'end': 291.825, 'text': 'the architecture of an angular application is different from angular.js.', 'start': 288.142, 'duration': 3.683}, {'end': 301.3, 'text': 'The main building blocks of angular are modules components templates metadata data binding directive services and dependency injection.', 'start': 292.478, 'duration': 8.822}, {'end': 308.322, 'text': "We'll be taking a look at each of these in a while angular does not have the concept of scope or controllers instead.", 'start': 301.96, 'duration': 6.362}, {'end': 313.563, 'text': 'It makes use of a hierarchy of components as its main architectural concept.', 'start': 308.642, 'duration': 4.921}], 'summary': 'Angular is a complete rewrite of angular.js, with a new architecture and main building blocks including modules, components, templates, and more.', 'duration': 28.563, 'max_score': 285, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc8285000.jpg'}, {'end': 484.168, 'src': 'embed', 'start': 452.575, 'weight': 4, 'content': [{'end': 459.797, 'text': "This is one of the biggest reasons for angular's popularity developers can make use of different modules to create single-page applications.", 'start': 452.575, 'duration': 7.222}, {'end': 462.103, 'text': 'Testing abilities.', 'start': 460.583, 'duration': 1.52}, {'end': 467.484, 'text': 'angular provides easy and simple testing as a result of module separation feature.', 'start': 462.103, 'duration': 5.381}, {'end': 470.345, 'text': 'angular is flexible and extensible.', 'start': 467.484, 'duration': 2.861}, {'end': 474.986, 'text': 'angular is very accommodating when it comes to integrating with the existing technology stack.', 'start': 470.345, 'duration': 4.641}, {'end': 484.168, 'text': 'So what is new in angular 8 angular it requires the support of typescript 3.4 for web development opt-in IV preview.', 'start': 476.026, 'duration': 8.142}], 'summary': "Angular's popularity stems from module-based single-page apps, easy testing, and typescript 3.4 support in angular 8.", 'duration': 31.593, 'max_score': 452.575, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc8452575.jpg'}, {'end': 565.731, 'src': 'embed', 'start': 539.818, 'weight': 5, 'content': [{'end': 544.901, 'text': 'Angular 8 has updated the dependencies on tools like RxJS, Node, and TypeScript.', 'start': 539.818, 'duration': 5.083}, {'end': 549.503, 'text': 'Now this is actually done for better performance and sync with the current environment.', 'start': 545.761, 'duration': 3.742}, {'end': 551.324, 'text': 'Web worker bundling.', 'start': 550.363, 'duration': 0.961}, {'end': 555.706, 'text': 'Web workers allow you to write code that runs separately from the main thread.', 'start': 551.984, 'duration': 3.722}, {'end': 558.888, 'text': 'This improves speed by parallelizing multiple tasks.', 'start': 556.166, 'duration': 2.722}, {'end': 565.731, 'text': 'The developers of Angular 8 have added bundling support for web workers as a result of requests from various developers.', 'start': 559.348, 'duration': 6.383}], 'summary': 'Angular 8 updated dependencies, added web worker bundling for improved performance and parallel task execution.', 'duration': 25.913, 'max_score': 539.818, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc8539818.jpg'}], 'start': 11.792, 'title': 'Angular 8 and web development', 'summary': 'Provides an overview of an angular 8 tutorial, covering basics, new features, and the importance of typescript. it also introduces web development, the rise of angular, its key features, and new features in angular 8, highlighting compatibility with typescript, new compilation and rendering pipeline, and backward compatibility of router.', 'chapters': [{'end': 89.582, 'start': 11.792, 'title': 'Angular 8 tutorial overview', 'summary': 'Provides an overview of an angular 8 tutorial, covering topics such as the basics of angular, the new features in angular 8, installation of visual studio code and angular, and the importance of typescript. it also emphasizes the process of creating a website from scratch and the significance of subscribing to the channel for updates.', 'duration': 77.79, 'highlights': ['The chapter begins with an introduction to the basics of Angular, including discussions on types of web applications, the drawbacks of angular.js, the rise of angular, and the differences between angular and angular.js.', 'The tutorial covers the significance of TypeScript and its building blocks in Angular, emphasizing the importance of understanding TypeScript before creating an angular application.', 'The chapter also focuses on the new features of Angular 8, followed by a demonstration of how to install Visual Studio code and Angular on the systems.', 'The session concludes with insights into creating a website from scratch and the importance of subscribing to the channel for staying updated with the latest edureka videos.']}, {'end': 672.849, 'start': 90.243, 'title': 'Angular web development overview', 'summary': 'Introduces web development, the transition from traditional to single-page applications, the rise of angular over angular.js, the key features of angular, its popularity, and the new features in angular 8, emphasizing the compatibility with typescript, new compilation and rendering pipeline, differential loading, backward compatibility of router, opt-in usage sharing, dependency updates, and web worker bundling.', 'duration': 582.606, 'highlights': ["Angular 8's new features and improvements", 'Introduction to web development and transition to single-page applications', "Angular's rise and features over Angular.js", "Angular's key features and popularity", 'Angular architecture and core building blocks']}], 'duration': 661.057, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc811792.jpg', 'highlights': ['The tutorial covers the significance of TypeScript and its building blocks in Angular, emphasizing the importance of understanding TypeScript before creating an angular application.', 'The chapter begins with an introduction to the basics of Angular, including discussions on types of web applications, the drawbacks of angular.js, the rise of angular, and the differences between angular and angular.js.', 'The chapter also focuses on the new features of Angular 8, followed by a demonstration of how to install Visual Studio code and Angular on the systems.', 'Introduction to web development and transition to single-page applications', "Angular's key features and popularity", "Angular 8's new features and improvements", "Angular's rise and features over Angular.js", 'Angular architecture and core building blocks', 'The session concludes with insights into creating a website from scratch and the importance of subscribing to the channel for staying updated with the latest edureka videos.']}, {'end': 1399.358, 'segs': [{'end': 724.617, 'src': 'embed', 'start': 695.115, 'weight': 3, 'content': [{'end': 696.856, 'text': 'and it also has other cool features.', 'start': 695.115, 'duration': 1.741}, {'end': 699.023, 'text': 'To install Visual Studio code.', 'start': 697.682, 'duration': 1.341}, {'end': 703.525, 'text': 'You can go to the official website and download the version that is suitable for your operating system.', 'start': 699.223, 'duration': 4.302}, {'end': 706.987, 'text': 'Let me just go to the browser over here.', 'start': 704.446, 'duration': 2.541}, {'end': 711.329, 'text': "I'll just type in VS code download.", 'start': 707.487, 'duration': 3.842}, {'end': 723.176, 'text': 'So as you can see, this is the official Visual Studio code downloading website.', 'start': 719.454, 'duration': 3.722}, {'end': 724.617, 'text': 'From here,', 'start': 723.897, 'duration': 0.72}], 'summary': 'To install visual studio code, visit the official website and download the suitable version for your os.', 'duration': 29.502, 'max_score': 695.115, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc8695115.jpg'}, {'end': 789.312, 'src': 'embed', 'start': 760.676, 'weight': 0, 'content': [{'end': 765.679, 'text': 'the typescript transpiler requires node.js for generating the typescript code to JavaScript.', 'start': 760.676, 'duration': 5.003}, {'end': 767.7, 'text': 'So, to install node.js,', 'start': 766.5, 'duration': 1.2}, {'end': 782.767, 'text': 'you can go to the official website and from here choose the version that is suitable for your operating system and download the same.', 'start': 767.7, 'duration': 15.067}, {'end': 787.07, 'text': 'Once the installer has been downloaded install node.js on your systems.', 'start': 783.608, 'duration': 3.462}, {'end': 789.312, 'text': "After you're done with the installation.", 'start': 787.951, 'duration': 1.361}], 'summary': 'Typescript transpiler requires node.js for generating javascript code. install node.js from official website.', 'duration': 28.636, 'max_score': 760.676, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc8760676.jpg'}, {'end': 1053.428, 'src': 'heatmap', 'start': 905.452, 'weight': 0.715, 'content': [{'end': 907.574, 'text': 'Now when you do this, you will encounter two questions.', 'start': 905.452, 'duration': 2.122}, {'end': 912.458, 'text': 'That is, if you would like to add angular routing, and what type of style sheet do you prefer?', 'start': 907.854, 'duration': 4.604}, {'end': 917.883, 'text': "So for the first question I'll just choose yes and press Y.", 'start': 913.239, 'duration': 4.644}, {'end': 919.945, 'text': "And for the second, I'm going to choose CSS.", 'start': 917.883, 'duration': 2.062}, {'end': 921.487, 'text': "So I'll hit enter.", 'start': 920.826, 'duration': 0.661}, {'end': 930.838, 'text': 'However, if you are comfortable with any other style sheet, you can go ahead and select that one.', 'start': 926.474, 'duration': 4.364}, {'end': 933.74, 'text': 'Now, this is going to take a while to create a project.', 'start': 931.719, 'duration': 2.021}, {'end': 948.473, 'text': 'The ng new command creates an initial skeleton of angular application by default at the root level of the workspace.', 'start': 942.508, 'duration': 5.965}, {'end': 951.015, 'text': 'Not just that, it also creates end-to-end tests.', 'start': 948.773, 'duration': 2.242}, {'end': 957.552, 'text': 'When you open this application on the localhost, you will see that a simple welcome page will appear,', 'start': 952.529, 'duration': 5.023}, {'end': 960.394, 'text': 'which you can modify later on to create your own application.', 'start': 957.552, 'duration': 2.842}, {'end': 966.118, 'text': 'So now our project is created.', 'start': 964.697, 'duration': 1.421}, {'end': 968.74, 'text': "Now what I'm going to do is just get into my project.", 'start': 966.138, 'duration': 2.602}, {'end': 972.022, 'text': 'So the name of my project was sample project.', 'start': 969.56, 'duration': 2.462}, {'end': 976.725, 'text': "And I'll hit enter.", 'start': 976.105, 'duration': 0.62}, {'end': 979.887, 'text': 'I want to open this project in Visual Studio code.', 'start': 977.526, 'duration': 2.361}, {'end': 993.018, 'text': "So I'll just type in code space So now my project is opened in Visual Studio Code.", 'start': 980.187, 'duration': 12.831}, {'end': 999.06, 'text': 'As you can see over here, my project already contains a number of files that are created by Angular.', 'start': 994.378, 'duration': 4.682}, {'end': 1001.36, 'text': 'The first is the end-to-end folder.', 'start': 999.74, 'duration': 1.62}, {'end': 1008.822, 'text': 'The end-to-end folder contains a source of files to perform set of end-to-end tests that correspond to the root level application,', 'start': 1001.94, 'duration': 6.882}, {'end': 1011.183, 'text': 'along with test specific configuration files.', 'start': 1008.822, 'duration': 2.361}, {'end': 1013.897, 'text': 'Next up is the node modules folder.', 'start': 1011.937, 'duration': 1.96}, {'end': 1017.838, 'text': 'This provides a set of NPM packages for the entire workplace.', 'start': 1014.457, 'duration': 3.381}, {'end': 1019.418, 'text': 'The source folder.', 'start': 1018.558, 'duration': 0.86}, {'end': 1025.539, 'text': 'Source folder contains all the root level application source files that are required for your application development.', 'start': 1019.998, 'duration': 5.541}, {'end': 1027.44, 'text': 'The edit config folder.', 'start': 1026.199, 'duration': 1.241}, {'end': 1031.76, 'text': 'The edit config folder specifies the configuration for the code editors.', 'start': 1028.119, 'duration': 3.641}, {'end': 1033.06, 'text': 'Git ignore.', 'start': 1032.421, 'duration': 0.639}, {'end': 1038.281, 'text': 'Git ignore specifies the intentionally untracked files that should be ignored by Git.', 'start': 1033.601, 'duration': 4.68}, {'end': 1040.642, 'text': 'The angular.json folder.', 'start': 1039.122, 'duration': 1.52}, {'end': 1047.805, 'text': 'All the CLI configuration defaults for all projects in the workspace, including configuration options for build,', 'start': 1041.48, 'duration': 6.325}, {'end': 1053.428, 'text': 'serve and test tools that the CLI uses, such as TSLint, Karma and Protractor.', 'start': 1047.805, 'duration': 5.623}], 'summary': 'Creating a new angular project with routing and css style, opening in visual studio code, containing various default files and folders.', 'duration': 147.976, 'max_score': 905.452, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc8905452.jpg'}, {'end': 960.394, 'src': 'embed', 'start': 931.719, 'weight': 1, 'content': [{'end': 933.74, 'text': 'Now, this is going to take a while to create a project.', 'start': 931.719, 'duration': 2.021}, {'end': 948.473, 'text': 'The ng new command creates an initial skeleton of angular application by default at the root level of the workspace.', 'start': 942.508, 'duration': 5.965}, {'end': 951.015, 'text': 'Not just that, it also creates end-to-end tests.', 'start': 948.773, 'duration': 2.242}, {'end': 957.552, 'text': 'When you open this application on the localhost, you will see that a simple welcome page will appear,', 'start': 952.529, 'duration': 5.023}, {'end': 960.394, 'text': 'which you can modify later on to create your own application.', 'start': 957.552, 'duration': 2.842}], 'summary': 'Ng new command creates initial angular app with end-to-end tests at root level of workspace.', 'duration': 28.675, 'max_score': 931.719, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc8931719.jpg'}, {'end': 1047.805, 'src': 'embed', 'start': 1019.998, 'weight': 2, 'content': [{'end': 1025.539, 'text': 'Source folder contains all the root level application source files that are required for your application development.', 'start': 1019.998, 'duration': 5.541}, {'end': 1027.44, 'text': 'The edit config folder.', 'start': 1026.199, 'duration': 1.241}, {'end': 1031.76, 'text': 'The edit config folder specifies the configuration for the code editors.', 'start': 1028.119, 'duration': 3.641}, {'end': 1033.06, 'text': 'Git ignore.', 'start': 1032.421, 'duration': 0.639}, {'end': 1038.281, 'text': 'Git ignore specifies the intentionally untracked files that should be ignored by Git.', 'start': 1033.601, 'duration': 4.68}, {'end': 1040.642, 'text': 'The angular.json folder.', 'start': 1039.122, 'duration': 1.52}, {'end': 1047.805, 'text': 'All the CLI configuration defaults for all projects in the workspace, including configuration options for build,', 'start': 1041.48, 'duration': 6.325}], 'summary': 'Source folder contains root level application source files for development, along with edit config, git ignore, and angular.json folders.', 'duration': 27.807, 'max_score': 1019.998, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc81019998.jpg'}], 'start': 673.569, 'title': 'Installing visual studio code and angular', 'summary': 'Covers installing visual studio code, an open-source cross-platform application, and angular, including installing node.js, angular cli, creating a new angular project, and an overview of the generated files and folders.', 'chapters': [{'end': 740.404, 'start': 673.569, 'title': 'Installing visual studio code', 'summary': 'Covers installing visual studio code, an open-source cross-platform application, which is lightweight, fast, and has other cool features, by downloading the suitable version from the official website and completing the setup.', 'duration': 66.835, 'highlights': ['Visual Studio code is lightweight, fast, and open-source cross-platform application. It also has other cool features.', 'To install Visual Studio code, you can go to the official website and download the version suitable for your operating system.', 'Choosing a suitable version for your operating system and downloading the installer completes the installation process.']}, {'end': 1399.358, 'start': 741.164, 'title': 'Installing angular and creating a project', 'summary': 'Covers the installation of node.js for transpiling typescript to javascript, installing angular cli globally, creating a new angular project using ng new command, and an overview of the files and folders generated in the project.', 'duration': 658.194, 'highlights': ['Node.js is required for transpiling TypeScript to JavaScript, essential for Angular development.', 'The installation of Angular CLI globally using npm install -g @angular/cli command.', 'Creation of a new Angular project using the ng new command and specifying options like Angular routing and preferred style sheet.', 'Overview of the files and folders generated in the Angular project, including their purposes and functionalities.']}], 'duration': 725.789, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc8673569.jpg', 'highlights': ['Node.js is required for transpiling TypeScript to JavaScript, essential for Angular development.', 'Creation of a new Angular project using the ng new command and specifying options like Angular routing and preferred style sheet.', 'Overview of the files and folders generated in the Angular project, including their purposes and functionalities.', 'Visual Studio code is lightweight, fast, and open-source cross-platform application. It also has other cool features.', 'To install Visual Studio code, you can go to the official website and download the version suitable for your operating system.']}, {'end': 2481.738, 'segs': [{'end': 1645.356, 'src': 'embed', 'start': 1604.284, 'weight': 0, 'content': [{'end': 1607.425, 'text': 'The app root selector is present in the index.html file.', 'start': 1604.284, 'duration': 3.141}, {'end': 1615.832, 'text': "So, to summarize it, I can say that the execution begins from main.ts and then it's passed on to the app module.ts file,", 'start': 1608.368, 'duration': 7.464}, {'end': 1618.853, 'text': 'following which the app component.ts file is executed.', 'start': 1615.832, 'duration': 3.021}, {'end': 1625.576, 'text': "So like I've already mentioned before angular is built on TypeScript before moving on further in this session.", 'start': 1619.733, 'duration': 5.843}, {'end': 1631.019, 'text': 'I would like you guys to get familiar with TypeScript in case you are already familiar with TypeScript.', 'start': 1625.816, 'duration': 5.203}, {'end': 1633.62, 'text': "You can skip this part and move on to what's the next part.", 'start': 1631.259, 'duration': 2.361}, {'end': 1635.329, 'text': 'Under this section.', 'start': 1634.668, 'duration': 0.661}, {'end': 1643.515, 'text': "I'm going to show you guys how to install TypeScript 3.4 and then the basic types that are available in TypeScript variables type assertions,", 'start': 1635.589, 'duration': 7.926}, {'end': 1645.356, 'text': 'functions, classes and interfaces.', 'start': 1643.515, 'duration': 1.841}], 'summary': 'Angular app execution flow: main.ts ➡ app module.ts ➡ app component.ts. typescript 3.4 installation and basic types demonstrated.', 'duration': 41.072, 'max_score': 1604.284, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc81604284.jpg'}, {'end': 1693.403, 'src': 'embed', 'start': 1665.596, 'weight': 3, 'content': [{'end': 1669.438, 'text': 'The TypeScript programming language is designed for development of large applications.', 'start': 1665.596, 'duration': 3.842}, {'end': 1676.242, 'text': 'However, it needs to be trans compiled to JavaScript, as the browsers understand JavaScript only.', 'start': 1670.219, 'duration': 6.023}, {'end': 1680.485, 'text': 'this process of converting TypeScript into JavaScript is called as transpilation.', 'start': 1676.242, 'duration': 4.243}, {'end': 1684.62, 'text': 'While using TypeScript you can make use of any of the JavaScript libraries.', 'start': 1681.218, 'duration': 3.402}, {'end': 1688.781, 'text': 'Also, any code you write in JavaScript will be valid in TypeScript,', 'start': 1685.26, 'duration': 3.521}, {'end': 1693.403, 'text': 'as you can convert JavaScript code into TypeScript by simply changing the extension from.', 'start': 1688.781, 'duration': 4.622}], 'summary': 'Typescript is designed for large applications, transpiled to javascript for browser use.', 'duration': 27.807, 'max_score': 1665.596, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc81665596.jpg'}, {'end': 1954.423, 'src': 'embed', 'start': 1928.295, 'weight': 1, 'content': [{'end': 1933.498, 'text': "So the first thing that I'm going to be discussing over here is the basic types that are present in TypeScript.", 'start': 1928.295, 'duration': 5.203}, {'end': 1937.261, 'text': 'TypeScript supports almost the same data types that are present in JavaScript.', 'start': 1933.498, 'duration': 3.763}, {'end': 1947.035, 'text': 'These can be Boolean numbers strings arrays tuples enum any void null and undefined never object and type assertions.', 'start': 1938.286, 'duration': 8.749}, {'end': 1954.423, 'text': "Now, in case you're coming from JavaScript background, you guys will be very much familiar with the VAR keyword,", 'start': 1948.056, 'duration': 6.367}], 'summary': 'Typescript supports various data types, including boolean, numbers, strings, arrays, and more.', 'duration': 26.128, 'max_score': 1928.295, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc81928295.jpg'}, {'end': 2083.339, 'src': 'embed', 'start': 2055.572, 'weight': 2, 'content': [{'end': 2059.094, 'text': 'So I could just have variable followed by the identifier.', 'start': 2055.572, 'duration': 3.522}, {'end': 2061.577, 'text': 'And then the semicolon.', 'start': 2060.617, 'duration': 0.96}, {'end': 2066.179, 'text': 'So these are the four methods in which you can declare variables in TypeScript.', 'start': 2062.178, 'duration': 4.001}, {'end': 2069.362, 'text': 'So before this we were actually talking about Boolean.', 'start': 2067.301, 'duration': 2.061}, {'end': 2073.556, 'text': 'So in case I want to create a variable holding boolean values.', 'start': 2070.475, 'duration': 3.081}, {'end': 2079.438, 'text': "All I have to do is type in let I'll call the variable as B and specify the type to be boolean.", 'start': 2073.636, 'duration': 5.802}, {'end': 2083.339, 'text': "And I'll give the value as false.", 'start': 2081.918, 'duration': 1.421}], 'summary': 'Transcript covers 4 methods to declare variables in typescript, including boolean type declaration with an example.', 'duration': 27.767, 'max_score': 2055.572, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc82055572.jpg'}, {'end': 2152.085, 'src': 'embed', 'start': 2126.887, 'weight': 7, 'content': [{'end': 2132.949, 'text': "Okay So as you can see the value is false the next basic type that's present in typescript is numbers.", 'start': 2126.887, 'duration': 6.062}, {'end': 2142.29, 'text': 'So, in typescript, numbers are nothing but floating-point values and typescript supports all types of numbers, such as octal, binary, hexadecimal,', 'start': 2133.849, 'duration': 8.441}, {'end': 2146.351, 'text': 'Etc. to declare any of these, you can make use of the number keyword.', 'start': 2142.29, 'duration': 4.061}, {'end': 2152.085, 'text': 'So in case I just change the value from Boolean to number and this will not be false.', 'start': 2146.931, 'duration': 5.154}], 'summary': 'In typescript, numbers are floating-point values and support various types, such as octal, binary, and hexadecimal.', 'duration': 25.198, 'max_score': 2126.887, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc82126887.jpg'}, {'end': 2220.817, 'src': 'embed', 'start': 2196.732, 'weight': 5, 'content': [{'end': 2203.696, 'text': 'Similarly, if you have to specify binary or hexadecimal values, all you have to do is change this by B or X.', 'start': 2196.732, 'duration': 6.964}, {'end': 2210.559, 'text': "So now let's move on to what's next type which is strings strings are used to work with text real data in TypeScript.", 'start': 2203.696, 'duration': 6.863}, {'end': 2213.16, 'text': 'You must use string keyword to specify them.', 'start': 2210.779, 'duration': 2.381}, {'end': 2215.842, 'text': 'Say for example, I have a variable say name.', 'start': 2213.881, 'duration': 1.961}, {'end': 2218.443, 'text': "So I'll type name.", 'start': 2217.442, 'duration': 1.001}, {'end': 2220.817, 'text': 'colon string.', 'start': 2219.557, 'duration': 1.26}], 'summary': "In typescript, use 'b' or 'x' to specify binary or hexadecimal values, and 'string' to work with text data.", 'duration': 24.085, 'max_score': 2196.732, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc82196732.jpg'}, {'end': 2298.214, 'src': 'embed', 'start': 2262.806, 'weight': 6, 'content': [{'end': 2264.287, 'text': "Okay, so I'll just clear this from here.", 'start': 2262.806, 'duration': 1.481}, {'end': 2271.529, 'text': "And I'll take two new variables and say let a be an array of string type.", 'start': 2265.907, 'duration': 5.622}, {'end': 2274.51, 'text': 'So string followed by square brackets.', 'start': 2272.149, 'duration': 2.361}, {'end': 2278.528, 'text': "Now for the values, I'll just specify TypeScript and JavaScript.", 'start': 2275.287, 'duration': 3.241}, {'end': 2281.269, 'text': "I'll just say ts followed by js.", 'start': 2278.548, 'duration': 2.721}, {'end': 2284.89, 'text': 'Okay, so this was the first method.', 'start': 2283.149, 'duration': 1.741}, {'end': 2288.131, 'text': 'The second method was making use of the angular brackets.', 'start': 2285.29, 'duration': 2.841}, {'end': 2298.214, 'text': "So I'll just type in let ab, which is a new variable, followed by the array keyword, and then I'll open up the angular brackets and specify the type,", 'start': 2288.691, 'duration': 9.523}], 'summary': 'Creating and initializing string arrays in typescript using two different methods.', 'duration': 35.408, 'max_score': 2262.806, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc82262806.jpg'}, {'end': 2422.789, 'src': 'embed', 'start': 2393.419, 'weight': 8, 'content': [{'end': 2400.101, 'text': 'So now the enum type enum in TypeScript allows you to define a set of named constants using these enums.', 'start': 2393.419, 'duration': 6.682}, {'end': 2405.803, 'text': 'You can make document intent easily or even create a set of different cases in TypeScript.', 'start': 2400.341, 'duration': 5.462}, {'end': 2411.565, 'text': 'You can use both numeric enums and string based enums enums are defined using the enum keyword.', 'start': 2406.003, 'duration': 5.562}, {'end': 2414.386, 'text': 'So let me take an example of a numeric enum.', 'start': 2412.105, 'duration': 2.281}, {'end': 2422.789, 'text': "So what I'm going to do is just type in enum which is the keyword followed by fruits and then I just call this enum as fruit.", 'start': 2414.826, 'duration': 7.963}], 'summary': 'Typescript enum allows defining named constants with enum keyword.', 'duration': 29.37, 'max_score': 2393.419, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc82393419.jpg'}], 'start': 1401.88, 'title': 'Typescript fundamentals', 'summary': 'Covers the basics of writing typescript code, including declaring variables, functions, transpiling typescript to javascript, and introducing basic types such as boolean, numbers, strings, arrays, tuples, enum, any, void, null, undefined, never, object, and type assertions.', 'chapters': [{'end': 1766.606, 'start': 1401.88, 'title': 'Angular application execution and typescript installation', 'summary': 'Discusses terminating a process using task kill, running an angular project successfully, and the execution flow of an angular application, along with the installation and features of typescript.', 'duration': 364.726, 'highlights': ['The execution flow of an Angular application begins from main.ts and is passed on to the app module.ts file, then the app component.ts file is executed.', 'Task kill command was used to terminate the process with ID 3680.', 'Successful compilation of an Angular project is demonstrated, followed by running the project on localhost 4200.', "Installation process of TypeScript is described, including the command 'npm install -g typescript' and checking the version using 'TSC --version'."]}, {'end': 2126.227, 'start': 1766.606, 'title': 'Typescript fundamentals', 'summary': 'Covers the basics of writing typescript code, including declaring variables, functions, transpiling typescript to javascript, and introducing basic types such as boolean, numbers, strings, arrays, tuples, enum, any, void, null, undefined, never, object, and type assertions.', 'duration': 359.621, 'highlights': ['The chapter covers the basics of writing TypeScript code', 'Introducing basic types such as Boolean, numbers, strings, arrays, tuples, enum, any, void, null, undefined, never, object, and type assertions', 'Declaring variables and functions in TypeScript', 'Transpiling TypeScript to JavaScript and executing the code']}, {'end': 2481.738, 'start': 2126.887, 'title': 'Typescript basic types and enums', 'summary': 'Discusses basic types in typescript including numbers, strings, arrays, tuples, and enums. it provides examples and explanations for each type, highlighting the syntax and use cases.', 'duration': 354.851, 'highlights': ['The chapter discusses the basic types in TypeScript, including numbers, strings, arrays, tuples, and enums.', 'It explains the syntax and use cases for declaring numbers in TypeScript, including support for floating-point values and different number formats such as octal, binary, and hexadecimal.', 'The transcript provides examples and explanations for declaring and using strings in TypeScript, emphasizing the use of the string keyword and practical demonstrations.', 'It demonstrates two methods for declaring arrays in TypeScript, using the type of the element followed by square brackets or specifying them within angular brackets.', 'The chapter explains the use of tuples in TypeScript, highlighting their ability to define arrays with a fixed number of elements and known data types.', 'It provides a comprehensive explanation of enums in TypeScript, highlighting their use in defining a set of named constants and demonstrating the syntax for both numeric and string-based enums.']}], 'duration': 1079.858, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc81401880.jpg', 'highlights': ['Covers the basics of writing TypeScript code', 'Introducing basic types such as Boolean, numbers, strings, arrays, tuples, enum, any, void, null, undefined, never, object, and type assertions', 'Declaring variables and functions in TypeScript', 'Transpiling TypeScript to JavaScript and executing the code', 'The chapter discusses the basic types in TypeScript, including numbers, strings, arrays, tuples, and enums', 'The transcript provides examples and explanations for declaring and using strings in TypeScript, emphasizing the use of the string keyword and practical demonstrations', 'It demonstrates two methods for declaring arrays in TypeScript, using the type of the element followed by square brackets or specifying them within angular brackets', 'It explains the syntax and use cases for declaring numbers in TypeScript, including support for floating-point values and different number formats such as octal, binary, and hexadecimal', 'It provides a comprehensive explanation of enums in TypeScript, highlighting their use in defining a set of named constants and demonstrating the syntax for both numeric and string-based enums', 'The execution flow of an Angular application begins from main.ts and is passed on to the app module.ts file, then the app component.ts file is executed']}, {'end': 3713.277, 'segs': [{'end': 2547.298, 'src': 'embed', 'start': 2506.821, 'weight': 1, 'content': [{'end': 2511.625, 'text': "Let me just save this, get back to my command prompt and over here, I'll transpile this file.", 'start': 2506.821, 'duration': 4.804}, {'end': 2515.929, 'text': "So now to execute it, I'll just type in node exm2.js.", 'start': 2512.626, 'duration': 3.303}, {'end': 2522.51, 'text': 'Okay, so as you can see over here the fruit that is initiated to do is mango.', 'start': 2517.958, 'duration': 4.552}, {'end': 2524.676, 'text': 'Okay, so I hope you guys have understood this.', 'start': 2522.952, 'duration': 1.724}, {'end': 2528.491, 'text': 'Okay, so now moving on towards next type, which is any.', 'start': 2525.37, 'duration': 3.121}, {'end': 2532.412, 'text': 'the. any type is used when you do not know what is the data type of the element?', 'start': 2528.491, 'duration': 3.921}, {'end': 2542.576, 'text': "This usually happens when you're dealing with dynamic values and you do not want to encounter compile time errors in case the type of the element generated is not as that you assumed.", 'start': 2532.833, 'duration': 9.743}, {'end': 2547.298, 'text': 'the any data type allows you to opt in and opt out of type checking during compilation.', 'start': 2542.576, 'duration': 4.722}], 'summary': 'Transpiling and executing code, demonstrating data types and type checking', 'duration': 40.477, 'max_score': 2506.821, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc82506821.jpg'}, {'end': 2616.259, 'src': 'embed', 'start': 2590.627, 'weight': 7, 'content': [{'end': 2599.872, 'text': 'This means it can be any type which is not a number a string boolean symbol null or unidentified in case you want to declare an object variable.', 'start': 2590.627, 'duration': 9.245}, {'end': 2602.093, 'text': 'All you have to do is make use of the let keyword.', 'start': 2600.212, 'duration': 1.881}, {'end': 2607.336, 'text': 'Let me just clear this specify the name of the variable and then type an object.', 'start': 2602.213, 'duration': 5.123}, {'end': 2610.858, 'text': 'So this is how you declare object types in TypeScript.', 'start': 2608.357, 'duration': 2.501}, {'end': 2616.259, 'text': 'So before moving on further, let me clearly differentiate between the let and the var keyword.', 'start': 2611.738, 'duration': 4.521}], 'summary': "In typescript, objects are declared using the 'let' keyword, different from the 'var' keyword.", 'duration': 25.632, 'max_score': 2590.627, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc82590627.jpg'}, {'end': 2743.144, 'src': 'embed', 'start': 2713.003, 'weight': 0, 'content': [{'end': 2720.293, 'text': "So now let's see what will happen if I change this var to let so just erase this and I'll type in let okay.", 'start': 2713.003, 'duration': 7.29}, {'end': 2724.8, 'text': 'So as you can see over here the scope of I is not going beyond this for loop.', 'start': 2720.554, 'duration': 4.246}, {'end': 2728.579, 'text': 'The I that is present outside this for loop throws an error.', 'start': 2725.518, 'duration': 3.061}, {'end': 2730.94, 'text': 'So I hope you guys have understood this now.', 'start': 2728.999, 'duration': 1.941}, {'end': 2735.001, 'text': 'This is why the let keyword is considered to be more safer than the var keyword.', 'start': 2730.98, 'duration': 4.021}, {'end': 2743.144, 'text': 'I is visible only within the for loop which is the nearest block and if you try to access it anywhere outside it it is not possible.', 'start': 2735.741, 'duration': 7.403}], 'summary': 'Changing var to let restricts scope to for loop, enhancing safety.', 'duration': 30.141, 'max_score': 2713.003, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc82713003.jpg'}, {'end': 2918.353, 'src': 'embed', 'start': 2876.355, 'weight': 8, 'content': [{'end': 2879.496, 'text': 'So this was the first method of specifying type assertions.', 'start': 2876.355, 'duration': 3.141}, {'end': 2882.198, 'text': 'The second method is to make use of the as keyword.', 'start': 2879.917, 'duration': 2.281}, {'end': 2888.081, 'text': "So instead of this what I'm going to have is my variable as a string.", 'start': 2882.598, 'duration': 5.483}, {'end': 2890.542, 'text': 'So I hope you guys are clear with this.', 'start': 2889.341, 'duration': 1.201}, {'end': 2893.513, 'text': 'So that was about type assertions.', 'start': 2891.451, 'duration': 2.062}, {'end': 2897.176, 'text': 'now moving on towards the next topic, which is functions in TypeScript.', 'start': 2893.513, 'duration': 3.663}, {'end': 2900.238, 'text': 'functions, as we all know, are the building blocks of a program.', 'start': 2897.176, 'duration': 3.062}, {'end': 2905.903, 'text': 'functions allow you to build up different layers of your program that deal with abstraction, information, hiding,', 'start': 2900.238, 'duration': 5.665}, {'end': 2910.847, 'text': 'Etc in TypeScript functions play a very important role in describing how to do tasks.', 'start': 2905.903, 'duration': 4.944}, {'end': 2918.353, 'text': 'Another advantage is that TypeScript also adds some new capabilities to standard JavaScript functions to make them easier to work with.', 'start': 2911.287, 'duration': 7.066}], 'summary': 'Introduction to type assertions and functions in typescript, with additional capabilities for javascript functions.', 'duration': 41.998, 'max_score': 2876.355, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc82876355.jpg'}, {'end': 3143.256, 'src': 'embed', 'start': 3116.434, 'weight': 2, 'content': [{'end': 3125.041, 'text': "I'll take in a variable a, I'll specify the variable a and then the arrow function and I'll just lock the value of a.", 'start': 3116.434, 'duration': 8.607}, {'end': 3130.906, 'text': 'so over here my variable ex over here holds the value of what the function has returned.', 'start': 3125.041, 'duration': 5.865}, {'end': 3134.849, 'text': 'a over here is the parameter and the action to be performed is console dot log.', 'start': 3130.906, 'duration': 3.943}, {'end': 3137.651, 'text': 'So now I just get back to my command prompt.', 'start': 3135.389, 'duration': 2.262}, {'end': 3143.256, 'text': "What I'm going to do is just transpile this file and I'll just open the JavaScript version of this.", 'start': 3138.312, 'duration': 4.944}], 'summary': 'Using arrow functions in javascript to lock variable values and transpile code.', 'duration': 26.822, 'max_score': 3116.434, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc83116434.jpg'}, {'end': 3202.661, 'src': 'embed', 'start': 3177.617, 'weight': 10, 'content': [{'end': 3184.098, 'text': 'TypeScript introduced classes so that they can avail the benefits of object-oriented techniques like encapsulation and abstraction.', 'start': 3177.617, 'duration': 6.481}, {'end': 3191.239, 'text': 'The class in TypeScript is compiled to plain JavaScript functions by TypeScript compiler to work across platforms and browsers.', 'start': 3184.558, 'duration': 6.681}, {'end': 3196.06, 'text': 'So class in JavaScript can include constructors, properties and methods.', 'start': 3192.079, 'duration': 3.981}, {'end': 3202.661, 'text': "Now, it's very important that you guys concentrate on this part because we're going to make use of this syntax in our project later on.", 'start': 3196.44, 'duration': 6.221}], 'summary': 'Typescript classes enable object-oriented techniques for cross-platform compatibility and future project use.', 'duration': 25.044, 'max_score': 3177.617, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc83177617.jpg'}, {'end': 3362.872, 'src': 'embed', 'start': 3318.925, 'weight': 3, 'content': [{'end': 3321.765, 'text': 'typescript classes also support inheritance.', 'start': 3318.925, 'duration': 2.84}, {'end': 3326.287, 'text': 'inheritance is the ability of a program to create new classes from an existing class.', 'start': 3321.765, 'duration': 4.522}, {'end': 3331.709, 'text': 'the class that is extended to create newer classes is called as the parent class or the superclass.', 'start': 3326.287, 'duration': 5.422}, {'end': 3335.25, 'text': 'the newly created classes are referred to as the child or the subclasses.', 'start': 3331.709, 'duration': 3.541}, {'end': 3339.058, 'text': 'A class inherits from another class using the extends keyword.', 'start': 3335.856, 'duration': 3.202}, {'end': 3345.402, 'text': 'Child classes inherit all properties and methods except the private members and constructors from the parent class.', 'start': 3339.458, 'duration': 5.944}, {'end': 3350.104, 'text': 'Another point to be noted over here is that TypeScript does not support multiple inheritance.', 'start': 3345.802, 'duration': 4.302}, {'end': 3353.787, 'text': "So what I'm going to do is just create a new file over here.", 'start': 3350.665, 'duration': 3.122}, {'end': 3362.872, 'text': "So I'll type code exm3.ts and over here, I'll just type in the syntax of inheritance.", 'start': 3354.327, 'duration': 8.545}], 'summary': 'Typescript classes support inheritance, allowing creation of new classes from existing ones. child classes inherit properties and methods from the parent class, but typescript does not support multiple inheritance.', 'duration': 43.947, 'max_score': 3318.925, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc83318925.jpg'}, {'end': 3595.668, 'src': 'embed', 'start': 3559.016, 'weight': 6, 'content': [{'end': 3561.979, 'text': "So now let's move on towards TypeScript interfaces,", 'start': 3559.016, 'duration': 2.963}, {'end': 3568.564, 'text': "and interface is a structure that will contain only the declaration of fields and methods and there'll be no definition of it.", 'start': 3561.979, 'duration': 6.585}, {'end': 3574.109, 'text': 'when some class inherits an interface, that class has to define each of them within the class itself.', 'start': 3568.564, 'duration': 5.545}, {'end': 3576.351, 'text': "I'll create a new file of here.", 'start': 3575.07, 'duration': 1.281}, {'end': 3579.374, 'text': 'In case you want to define an interface.', 'start': 3577.652, 'duration': 1.722}, {'end': 3583.277, 'text': "You'll have to make use of the interface keyword followed by the name of the interface.", 'start': 3579.594, 'duration': 3.683}, {'end': 3595.668, 'text': "I'll just specify the name to be my integers Within this I'll have a few variables say s which is a number D, which is a string and then a function.", 'start': 3584.138, 'duration': 11.53}], 'summary': 'Transcript covers typescript interfaces, including structure, inheritance, and syntax for defining interfaces.', 'duration': 36.652, 'max_score': 3559.016, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc83559016.jpg'}], 'start': 2481.738, 'title': 'Javascript and typescript fundamentals', 'summary': "Covers javascript variable logging with an example, typescript 'any' and object type, 'let' vs 'var', type assertions, functions, and classes, and typescript inheritance and interfaces, providing comprehensive insights into fundamental concepts.", 'chapters': [{'end': 2528.491, 'start': 2481.738, 'title': 'Javascript variable logging', 'summary': "Demonstrates how to log the value of a variable using console dot log in javascript, with an example of logging the value of a variable 'fruit name' as 'mango' and executing the script using node exm2.js.", 'duration': 46.753, 'highlights': ['The chapter explains the process of logging the value of a variable in JavaScript using console dot log.', "The example demonstrates logging the value of the variable 'fruit name' as 'mango' and executing the script using node exm2.js."]}, {'end': 2756.908, 'start': 2528.491, 'title': 'Typescript: any and object type, let vs var', 'summary': "Discusses the use of 'any' data type to handle dynamic values, opting in and out of type checking, and the concept of 'object' type in typescript. it also explains the difference between 'let' and 'var' keywords, demonstrating how 'let' provides safer scoping.", 'duration': 228.417, 'highlights': ["The 'any' data type in TypeScript allows opting in and out of type checking during compilation, enabling the declaration of variables that can hold any value, such as numbers, strings, etc.", "The 'object' type in TypeScript represents non-primitive types and can be declared using the 'let' keyword, allowing for the usage of non-primitive types in TypeScript.", "The difference between 'let' and 'var' keywords in TypeScript is demonstrated, with 'let' providing safer scoping by limiting the visibility of variables to the nearest block, making it more secure compared to 'var'."]}, {'end': 3318.925, 'start': 2756.928, 'title': 'Typescript functions and classes', 'summary': "Covers type assertions in typescript, including the use of angular brackets and the 'as' keyword, functions in typescript, including the creation of named and anonymous functions, and classes in typescript, highlighting the use of constructors, properties, and methods.", 'duration': 561.997, 'highlights': ['Type assertions in TypeScript', 'Functions in TypeScript', 'Classes in TypeScript']}, {'end': 3713.277, 'start': 3318.925, 'title': 'Typescript inheritance and interfaces', 'summary': "Explains typescript inheritance and interfaces, highlighting that child classes inherit properties and methods except private members and constructors, and that interfaces contain only the declaration of fields and methods with no definition. it also emphasizes the use of 'extends' for inheritance and 'implements' for interfaces, showcasing how to define and implement interfaces in classes.", 'duration': 394.352, 'highlights': ['Child classes inherit properties and methods except private members and constructors from the parent class', "The use of 'extends' for inheritance and 'implements' for interfaces", 'Interfaces contain only the declaration of fields and methods with no definition']}], 'duration': 1231.539, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc82481738.jpg', 'highlights': ["The difference between 'let' and 'var' keywords in TypeScript is demonstrated, with 'let' providing safer scoping by limiting the visibility of variables to the nearest block, making it more secure compared to 'var'.", "The 'any' data type in TypeScript allows opting in and out of type checking during compilation, enabling the declaration of variables that can hold any value, such as numbers, strings, etc.", 'The chapter explains the process of logging the value of a variable in JavaScript using console dot log.', 'Child classes inherit properties and methods except private members and constructors from the parent class', "The use of 'extends' for inheritance and 'implements' for interfaces", "The example demonstrates logging the value of the variable 'fruit name' as 'mango' and executing the script using node exm2.js.", 'Interfaces contain only the declaration of fields and methods with no definition', "The 'object' type in TypeScript represents non-primitive types and can be declared using the 'let' keyword, allowing for the usage of non-primitive types in TypeScript.", 'Type assertions in TypeScript', 'Functions in TypeScript', 'Classes in TypeScript']}, {'end': 4142.142, 'segs': [{'end': 3865.269, 'src': 'embed', 'start': 3786.488, 'weight': 0, 'content': [{'end': 3793.033, 'text': 'in. angular modules will allow you to group together other building blocks, such as components, directives, pipes and services.', 'start': 3786.488, 'duration': 6.545}, {'end': 3801.842, 'text': 'The modules of angular are referred to as ng modules applications created by angular are driven by functional sets which collect related data.', 'start': 3793.713, 'duration': 8.129}, {'end': 3806.267, 'text': 'Therefore, angular apps are defined by a set of ng modules.', 'start': 3802.123, 'duration': 4.144}, {'end': 3811.393, 'text': 'ng modules are very much different when compared to those of the JS modules or the JavaScript modules.', 'start': 3806.267, 'duration': 5.126}, {'end': 3815.734, 'text': 'NG modules declare a group of files that can be passed and analyzed.', 'start': 3811.853, 'duration': 3.881}, {'end': 3820.575, 'text': 'You can also make use of other NG modules within one by importing them.', 'start': 3816.074, 'duration': 4.501}, {'end': 3828.137, 'text': "above all, these modules prove to be very much helpful when you're creating large applications that have multiple functionalities,", 'start': 3820.575, 'duration': 7.562}, {'end': 3829.857, 'text': 'besides allowing clean creation.', 'start': 3828.137, 'duration': 1.72}, {'end': 3836.299, 'text': 'These modules also help you minimize the code size by reuse and optional import of the required ones.', 'start': 3830.217, 'duration': 6.082}, {'end': 3843.236, 'text': 'This is also referred to as lazy loading, meaning you can load any ng module only on your demand.', 'start': 3836.912, 'duration': 6.324}, {'end': 3848.499, 'text': "not to forget, ng modules are also one of the biggest reasons for angular's popularity.", 'start': 3843.236, 'duration': 5.263}, {'end': 3853.482, 'text': 'every application created with angular will have at least one ng module, which is the root module.', 'start': 3848.499, 'duration': 4.983}, {'end': 3856.464, 'text': 'This root module is referred to as the app module.', 'start': 3853.862, 'duration': 2.602}, {'end': 3859.505, 'text': 'So by default the app module will look something like this.', 'start': 3856.724, 'duration': 2.781}, {'end': 3861.787, 'text': 'So let me just get into the project.', 'start': 3860.446, 'duration': 1.341}, {'end': 3865.269, 'text': 'We created initially to show you all what this app module looks like.', 'start': 3861.827, 'duration': 3.442}], 'summary': 'Angular modules group building blocks, reduce code size & support lazy loading, driving functional sets.', 'duration': 78.781, 'max_score': 3786.488, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc83786488.jpg'}, {'end': 3915.209, 'src': 'embed', 'start': 3887.519, 'weight': 2, 'content': [{'end': 3892.72, 'text': 'They are also referred to as annotations and our JavaScript features in angular.', 'start': 3887.519, 'duration': 5.201}, {'end': 3899.722, 'text': 'these decorators contain some metadata to classes and properties so as to convey what they mean and how they are supposed to function.', 'start': 3892.72, 'duration': 7.002}, {'end': 3904.683, 'text': 'I shall explain what is metadata in detail later on when we reach the component section.', 'start': 3900.262, 'duration': 4.421}, {'end': 3915.209, 'text': 'Here the ng module decorator first identifies the root module or the app module and then tells angular how to launch and compile it by making use of the metadata.', 'start': 3905.283, 'duration': 9.926}], 'summary': 'Angular decorators convey metadata to classes and properties for functionality, including ng module decorator for root module identification and launch instructions.', 'duration': 27.69, 'max_score': 3887.519, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc83887519.jpg'}, {'end': 3986.3, 'src': 'embed', 'start': 3944.848, 'weight': 5, 'content': [{'end': 3948.771, 'text': 'the app component is present both in the declarations and in the bootstrap array.', 'start': 3944.848, 'duration': 3.923}, {'end': 3953.799, 'text': 'This app component is created by the angular CLI or the command line interface.', 'start': 3949.378, 'duration': 4.421}, {'end': 3956.2, 'text': 'for every default application.', 'start': 3953.799, 'duration': 2.401}, {'end': 3964.562, 'text': 'the declarations array present in the module informs angular about the components that belong to that module when you create more and more components to your application.', 'start': 3956.2, 'duration': 8.362}, {'end': 3971.104, 'text': 'All you must do is add them over here components cannot be used without declaring them in the NT module class.', 'start': 3964.903, 'duration': 6.201}, {'end': 3976.546, 'text': 'So make sure you declare every component you create exactly once in the NT module class.', 'start': 3971.685, 'duration': 4.861}, {'end': 3980.639, 'text': "If you fail to do so, you're sure to encounter an error.", 'start': 3977.438, 'duration': 3.201}, {'end': 3986.3, 'text': 'the declarations array can also contain declarables or components, directives and pipes.', 'start': 3980.639, 'duration': 5.661}], 'summary': 'The app component is declared in the bootstrap array and informs angular about the components belonging to the module.', 'duration': 41.452, 'max_score': 3944.848, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc83944848.jpg'}, {'end': 4042.325, 'src': 'embed', 'start': 4009.038, 'weight': 8, 'content': [{'end': 4010.539, 'text': 'So let me just remove this from here.', 'start': 4009.038, 'duration': 1.501}, {'end': 4016.262, 'text': 'So, apart from this, the ng module can also contain exports.', 'start': 4011.9, 'duration': 4.362}, {'end': 4023.006, 'text': 'exports are the subset of declarations that are accessible in the component templates of other ng modules.', 'start': 4016.262, 'duration': 6.744}, {'end': 4028.87, 'text': 'components, as mentioned earlier, angular applications have at least one component, which is the root component.', 'start': 4023.006, 'duration': 5.864}, {'end': 4035.082, 'text': 'This root component connects the component hierarchy with the page document object module or the Dom.', 'start': 4029.46, 'duration': 5.622}, {'end': 4042.325, 'text': 'all components define classes that have the applications data and logic, and they also are associated with the HTML template.', 'start': 4035.082, 'duration': 7.243}], 'summary': 'Ng module can contain exports, connecting component hierarchy with the page document object module, and defining classes with html templates.', 'duration': 33.287, 'max_score': 4009.038, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc84009038.jpg'}, {'end': 4124.877, 'src': 'embed', 'start': 4094.733, 'weight': 9, 'content': [{'end': 4100.804, 'text': 'Therefore life cycle hooks allow you to control the components runtime behavior and they are called only when they are defined.', 'start': 4094.733, 'duration': 6.071}, {'end': 4108.285, 'text': 'Angular provides a number of lifecycle hooks such as ngOnChanges, ngOnInit, ngDoCheck, etc.', 'start': 4101.46, 'duration': 6.825}, {'end': 4113.509, 'text': "ngOnChanges will respond to Angular's resets data bound input properties.", 'start': 4108.785, 'duration': 4.724}, {'end': 4118.011, 'text': 'The method receives a simple change object of current and previous property values.', 'start': 4114.009, 'duration': 4.002}, {'end': 4124.877, 'text': 'It is called before the ngOnInit method and whenever one or more data bound input property changes.', 'start': 4118.432, 'duration': 6.445}], 'summary': 'Angular lifecycle hooks control component behavior; ngdocheck, ngoninit, ngonchanges respond to property changes.', 'duration': 30.144, 'max_score': 4094.733, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc84094733.jpg'}], 'start': 3713.277, 'title': 'Angular fundamentals', 'summary': "Delves into angular's building blocks, including modules, components, templates, directives, data binding, services, and dependency injection. it emphasizes the importance of ng modules and their features for creating large applications and lazy loading, as well as the role of app components, declarations array, exports, and lifecycle hooks, including key lifecycle hooks such as ngonchanges and ngoninit.", 'chapters': [{'end': 3944.848, 'start': 3713.277, 'title': 'Angular building blocks', 'summary': 'Covers the building blocks of angular, including modules, components, templates, directives, data binding, services, and dependency injection, emphasizing the importance of ng modules and their features for creating large applications and lazy loading.', 'duration': 231.571, 'highlights': ['ng modules are very much different when compared to those of the JS modules or the JavaScript modules. NG modules declare a group of files that can be passed and analyzed.', 'every application created with angular will have at least one ng module, which is the root module.', 'modules also help you minimize the code size by reuse and optional import of the required ones. This is also referred to as lazy loading, meaning you can load any ng module only on your demand.', 'decorators contain some metadata to classes and properties so as to convey what they mean and how they are supposed to function.', 'angular applications are driven by functional sets which collect related data. Therefore, angular apps are defined by a set of ng modules.']}, {'end': 4142.142, 'start': 3944.848, 'title': 'Angular components and modules', 'summary': 'Explains the role of the app component, declarations array, exports, and lifecycle hooks in angular, emphasizing the necessity of declaring components in the module and providing insights into the component hierarchy and lifecycle, including key lifecycle hooks such as ngonchanges and ngoninit.', 'duration': 197.294, 'highlights': ['The app component is created by the angular CLI for every default application and is present in the declarations and bootstrap array.', 'Components must be declared exactly once in the module class to avoid encountering errors.', 'The declarations array informs Angular about the components that belong to the module and can also contain declarables such as components, directives, and pipes.', 'Exports in the ng module are a subset of declarations accessible in the component templates of other ng modules.', "The root component connects the component hierarchy with the page's document object model (DOM) and defines classes with application data and logic associated with HTML templates.", 'Angular components are associated with templates and a subset of directives, and their logic is defined inside a class, controlling the views of an MVC architecture.', "Lifecycle hooks, such as ngOnChanges and ngOnInit, provide visibility into key life moments and the ability to control the component's runtime behavior."]}], 'duration': 428.865, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc83713277.jpg', 'highlights': ['ng modules declare a group of files for analysis and reuse.', 'angular applications are defined by a set of ng modules.', 'decorators convey metadata to classes and properties.', 'modules help minimize code size through lazy loading.', 'every angular application has at least one ng module.', 'app component is present in the declarations and bootstrap array.', 'components must be declared exactly once in the module class.', 'declarations array informs Angular about the components.', 'exports in ng module are a subset of declarations.', 'lifecycle hooks like ngOnChanges and ngOnInit provide visibility.']}, {'end': 4564.753, 'segs': [{'end': 4178.662, 'src': 'embed', 'start': 4142.863, 'weight': 0, 'content': [{'end': 4150.299, 'text': "ngDoCheck ng do check will allow you to detect and act upon changes that angular can't or won't detect on its own.", 'start': 4142.863, 'duration': 7.436}, {'end': 4153.825, 'text': 'This function is called during every change detection run.', 'start': 4150.899, 'duration': 2.926}, {'end': 4158.292, 'text': 'There are many more life cycle hooks that you can check out for yourself in the official documentation.', 'start': 4154.206, 'duration': 4.086}, {'end': 4162.863, 'text': 'Okay, So now moving on towards the next building block, which is metadata.', 'start': 4158.92, 'duration': 3.943}, {'end': 4169.971, 'text': 'the metadata of a component informs angular of all the building blocks required to create and present the component, along with its view.', 'start': 4162.863, 'duration': 7.108}, {'end': 4170.752, 'text': 'to be specific.', 'start': 4169.971, 'duration': 0.781}, {'end': 4176.219, 'text': 'It links templates with the components, either directly, with inline code or by reference.', 'start': 4171.093, 'duration': 5.126}, {'end': 4178.662, 'text': 'the component, along with the template, describes a view.', 'start': 4176.219, 'duration': 2.443}], 'summary': 'Ngdocheck detects and acts upon changes not detected by angular, called during every change detection run. metadata informs angular of building blocks required to create and present components.', 'duration': 35.799, 'max_score': 4142.863, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc84142863.jpg'}, {'end': 4242.998, 'src': 'embed', 'start': 4202.65, 'weight': 2, 'content': [{'end': 4207.573, 'text': 'the providers array is nothing but an array of providers for the services that the component requires.', 'start': 4202.65, 'duration': 4.923}, {'end': 4210.42, 'text': 'So what exactly does a template do?', 'start': 4208.379, 'duration': 2.041}, {'end': 4215.163, 'text': 'templates are somewhat like HTML that inform angular how to render the components.', 'start': 4210.42, 'duration': 4.743}, {'end': 4216.423, 'text': 'as mentioned earlier,', 'start': 4215.163, 'duration': 1.26}, {'end': 4225.068, 'text': 'angular views are created in a hierarchical order and the template that is immediately associated with the component defines the components host view.', 'start': 4216.423, 'duration': 8.645}, {'end': 4232.772, 'text': 'the hierarchy of views will not just contain views from components of the same module, but also those of the other modules, the template syntax.', 'start': 4225.068, 'duration': 7.704}, {'end': 4239.537, 'text': 'As mentioned earlier, templates are very much like HTML, but they have angular template syntax.', 'start': 4233.655, 'duration': 5.882}, {'end': 4242.998, 'text': 'in angular, component can be a controller or a view model.', 'start': 4239.537, 'duration': 3.461}], 'summary': 'Angular templates define how components are rendered and inform the framework about the hierarchy of views.', 'duration': 40.348, 'max_score': 4202.65, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc84202650.jpg'}, {'end': 4388.536, 'src': 'embed', 'start': 4358.391, 'weight': 5, 'content': [{'end': 4365.394, 'text': 'All you have to do is add some binding markup to the template HTML in order to inform angular how to connect with both these sites.', 'start': 4358.391, 'duration': 7.003}, {'end': 4370.879, 'text': 'There are basically four forms of data binding markup and each of these has a direction.', 'start': 4366.054, 'duration': 4.825}, {'end': 4374.643, 'text': 'They can either be to the Dom from the Dom or both.', 'start': 4371.38, 'duration': 3.263}, {'end': 4378.708, 'text': "Okay So moving on let's discuss in detail about property binding.", 'start': 4375.304, 'duration': 3.404}, {'end': 4381.273, 'text': 'Property binding is actually one way.', 'start': 4379.392, 'duration': 1.881}, {'end': 4388.536, 'text': 'binding in property binding value flows in one direction, that is, from the components property into the target elements property.', 'start': 4381.273, 'duration': 7.263}], 'summary': 'Angular data binding has four forms, with property binding flowing in one direction.', 'duration': 30.145, 'max_score': 4358.391, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc84358391.jpg'}, {'end': 4534.31, 'src': 'embed', 'start': 4502.027, 'weight': 6, 'content': [{'end': 4504.369, 'text': "Okay So now let's move on towards pipes.", 'start': 4502.027, 'duration': 2.342}, {'end': 4510.82, 'text': 'With angular pipes, display value transformations can be declared in your template HTML.', 'start': 4505.495, 'duration': 5.325}, {'end': 4517.787, 'text': 'a class with the at the rate pipe decorator defines a function that transforms input values to output values for display.', 'start': 4510.82, 'duration': 6.967}, {'end': 4524.794, 'text': 'in the view, angular has various types of pipes, such as uppercase pipe, lowercase pipe date, pipe currency pipe, Etc.', 'start': 4517.787, 'duration': 7.007}, {'end': 4528.258, 'text': 'Not just that you can also Define your own pipes as well.', 'start': 4525.155, 'duration': 3.103}, {'end': 4534.31, 'text': 'So, as you can see over here, this input line is an example of two-way data binding.', 'start': 4529.147, 'duration': 5.163}], 'summary': 'Angular pipes allow value transformations in template html, including uppercase, lowercase, date, and currency pipes, and the ability to define custom pipes.', 'duration': 32.283, 'max_score': 4502.027, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc84502027.jpg'}], 'start': 4142.863, 'title': 'Angular component building blocks and data binding overview', 'summary': 'Discusses ngdocheck hook, component metadata, template syntax, and the use of providers array for services, along with the basics of data binding including interpolation, property binding, event binding, two-way data binding, and usage of pipes for value transformations.', 'chapters': [{'end': 4267.025, 'start': 4142.863, 'title': 'Angular component building blocks', 'summary': 'Discusses ngdocheck hook, component metadata, template syntax, and the use of providers array to specify required services, emphasizing the role of templates in defining component views and highlighting the importance of metadata for component creation.', 'duration': 124.162, 'highlights': ['The metadata of a component informs angular of all the building blocks required to create and present the component, along with its view, linking templates with the components, either directly or by reference.', "The ngDoCheck hook allows detecting and acting upon changes that Angular can't or won't detect on its own, and it is called during every change detection run.", "The template that is immediately associated with the component defines the component's host view, and templates are somewhat like HTML that inform Angular how to render the components.", 'The providers array is an array of providers for the services that the component requires, specifying the required services for the component.', 'Angular views are created in a hierarchical order, and templates play a crucial role in defining the hierarchy of views, which may contain views from components of the same module or other modules.']}, {'end': 4564.753, 'start': 4267.145, 'title': 'Angular data binding overview', 'summary': 'Covers the basics of data binding in angular, including interpolation, property binding, event binding, and two-way data binding, as well as the usage of pipes for value transformations in the template html.', 'duration': 297.608, 'highlights': ['Interpolation allows adding strings into the text within HTML element tags and attribute assignments.', 'Angular converts interpolation into property binding, and it allows configuring the interpolation delimiter.', 'Data binding in Angular includes property binding, event binding, and two-way data binding, which coordinates the template with the components.', "Property binding is one-way and used for flowing data from the components' property into the target elements' property.", 'Event binding in Angular allows listening to events such as mouse movements, keystrokes, and clicks, and it involves specifying the target event name within regular brackets on the left of an equal to symbol and the template statement on the right within quotes.', 'Two-way data binding involves setting a specific element property and listening to an element change event, and it can be specified within a combination of brackets and parenthesis.', 'Angular pipes enable display value transformations and include various types such as uppercase, lowercase, date, and currency pipes, and custom pipes can also be defined.']}], 'duration': 421.89, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc84142863.jpg', 'highlights': ['The ngDoCheck hook allows detecting and acting upon changes during every change detection run.', 'The metadata of a component informs angular of all the building blocks required to create and present the component.', "The template associated with the component defines the component's host view, somewhat like HTML.", 'The providers array specifies the required services for the component.', 'Angular views are created in a hierarchical order, defining the hierarchy of views.', 'Data binding in Angular includes property binding, event binding, and two-way data binding.', 'Angular pipes enable display value transformations, including uppercase, lowercase, date, and currency pipes.']}, {'end': 5263.797, 'segs': [{'end': 4629.595, 'src': 'embed', 'start': 4603.886, 'weight': 3, 'content': [{'end': 4610.689, 'text': 'components are also supposed to present properties and methods for data binding in order to function as a medium between view,', 'start': 4603.886, 'duration': 6.803}, {'end': 4613.149, 'text': 'which is rendered by the template, and the applications.', 'start': 4610.689, 'duration': 2.46}, {'end': 4619.372, 'text': 'logic, which generally includes some notion of a model component, can delegate their tasks to services.', 'start': 4613.149, 'duration': 6.223}, {'end': 4625.514, 'text': 'Say for example fetching some data from a server validating user input or logging outputs to the console.', 'start': 4619.752, 'duration': 5.762}, {'end': 4629.595, 'text': 'By defining such processing tasks in an injectable service class.', 'start': 4626.074, 'duration': 3.521}], 'summary': 'Components mediate between view and logic, using services for tasks like fetching data or validating input.', 'duration': 25.709, 'max_score': 4603.886, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc84603886.jpg'}, {'end': 4678.369, 'src': 'embed', 'start': 4647.062, 'weight': 4, 'content': [{'end': 4649.163, 'text': 'Okay, So what is dependency injection?', 'start': 4647.062, 'duration': 2.101}, {'end': 4655.753, 'text': 'Dependency injection can be used by new components to provide services or other things that they need.', 'start': 4649.89, 'duration': 5.863}, {'end': 4657.674, 'text': 'components basically consume services.', 'start': 4655.753, 'duration': 1.921}, {'end': 4662.937, 'text': 'That is services can be injected into a component giving that component access to service class.', 'start': 4657.775, 'duration': 5.162}, {'end': 4670.662, 'text': 'You must make use of the injectable decorator to provide the metadata that allows angular to inject it into a component as a dependency.', 'start': 4663.398, 'duration': 7.264}, {'end': 4678.369, 'text': 'Similarly, you can also use the injectable decorator to indicate that a component or any other class, say for example a service,', 'start': 4671.162, 'duration': 7.207}], 'summary': 'Dependency injection allows components to consume services, providing access to service class.', 'duration': 31.307, 'max_score': 4647.062, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc84647062.jpg'}, {'end': 4959.416, 'src': 'embed', 'start': 4888.705, 'weight': 0, 'content': [{'end': 4895.968, 'text': 'make sure that your development environment includes node.js and an MPM package manager to check the version of node on your systems.', 'start': 4888.705, 'duration': 7.263}, {'end': 4898.829, 'text': 'You can type in the command node hyphen V.', 'start': 4896.288, 'duration': 2.541}, {'end': 4901.33, 'text': "I've already shown this before but I'm doing this just for reference.", 'start': 4898.829, 'duration': 2.501}, {'end': 4906.616, 'text': 'So as you can see, I have node version 12.14.', 'start': 4902.233, 'duration': 4.383}, {'end': 4912.18, 'text': "1 The first step before creating a project is to install the angular CLI like I've already told you all before.", 'start': 4906.616, 'duration': 5.564}, {'end': 4917.163, 'text': "Once you're done with installing node, you'll have to install angular CLI on your systems.", 'start': 4913.02, 'duration': 4.143}, {'end': 4923.307, 'text': 'To do that, you can make use of the npm install hyphen G at the rate angular slash CLI command.', 'start': 4917.523, 'duration': 5.784}, {'end': 4932.013, 'text': 'So that is npm install hyphen G for global at the rate symbol angular slash CLI.', 'start': 4923.627, 'duration': 8.386}, {'end': 4942.031, 'text': 'Once that is done, you can create your new project.', 'start': 4939.77, 'duration': 2.261}, {'end': 4947.872, 'text': 'So to create a new project you should make use of the ng new command followed by the name of the project.', 'start': 4942.691, 'duration': 5.181}, {'end': 4952.934, 'text': "I'll just name it as 80 or angular tutorial and this is going to take a while guys.", 'start': 4947.892, 'duration': 5.042}, {'end': 4959.416, 'text': 'The first question that prompts is if you would like to add angular routing just say yes and hit enter.', 'start': 4953.794, 'duration': 5.622}], 'summary': 'Install node.js, check version, install angular cli, create new project using ng new command.', 'duration': 70.711, 'max_score': 4888.705, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc84888705.jpg'}], 'start': 4564.753, 'title': 'Angular fundamentals and cli setup', 'summary': "Covers angular's building blocks like services, components, and dependency injection, and emphasizes their roles within an application. it also details angular cli installation, project setup, commands, and steps, with specific mention of angular version 12.14 and npm install command.", 'chapters': [{'end': 4888.705, 'start': 4564.753, 'title': 'Angular building blocks and dependency injection', 'summary': 'Covers the key building blocks of angular, including services, components, dependency injection, providers, and directives, emphasizing their roles and interactions within an angular application.', 'duration': 323.952, 'highlights': ["Components are supposed to present properties and methods for data binding in order to function as a medium between view and the application's logic.", "Dependency injection allows new components to access services, and the injectable decorator is used to indicate a component's dependency.", 'Structural directives are used to alter the layout by adding, removing, or replacing elements in the DOM, with ngFor being a notable example.', 'Attribute directives modify the behavior or appearance of existing elements in templates, with ngModule serving as an example.']}, {'end': 5263.797, 'start': 4888.705, 'title': 'Angular cli installation and project setup', 'summary': 'Covers the installation of angular cli, creation of a new project, serving the project, and creating new components, emphasizing the commands and steps involved, with specific mention of the angular version 12.14 and the npm install command.', 'duration': 375.092, 'highlights': ["Node version 12.14 is used for the development environment, confirmed by using the 'node -v' command.", "Installation of Angular CLI using 'npm install -g @angular/cli' command after installing node.", "Creation of a new project using the 'ng new' command, with an example project name given.", "Serving the project using 'ng serve --open' command, which automatically opens the browser to localhost:4200.", "Creating a new component using the 'ng generate component' command, with a specific example of creating a 'courses' component."]}], 'duration': 699.044, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc84564753.jpg', 'highlights': ["Node version 12.14 is used for the development environment, confirmed by using the 'node -v' command.", "Installation of Angular CLI using 'npm install -g @angular/cli' command after installing node.", "Creation of a new project using the 'ng new' command, with an example project name given.", "Components are supposed to present properties and methods for data binding in order to function as a medium between view and the application's logic.", "Dependency injection allows new components to access services, and the injectable decorator is used to indicate a component's dependency."]}, {'end': 7510.23, 'segs': [{'end': 5314.41, 'src': 'embed', 'start': 5263.797, 'weight': 3, 'content': [{'end': 5267.418, 'text': 'and angular calls this function shortly after creating a component.', 'start': 5263.797, 'duration': 3.621}, {'end': 5270.559, 'text': "It's a very good place to put initialization logic.", 'start': 5268.098, 'duration': 2.461}, {'end': 5278.571, 'text': 'Now the reason why this class has been exported is because it can be imported anywhere else and therefore you will not have to rewrite the code.', 'start': 5271.707, 'duration': 6.864}, {'end': 5285.354, 'text': "Okay, so next what I'm going to do is add a course property to the courses component present in my class.", 'start': 5279.731, 'duration': 5.623}, {'end': 5292.298, 'text': "Okay, so I'll just type in course and I'll name this course as Angular itself.", 'start': 5287.656, 'duration': 4.642}, {'end': 5296.32, 'text': "Next, I'll have to show this course.", 'start': 5294.759, 'duration': 1.561}, {'end': 5301.163, 'text': "So what I'm going to do is just open up the courses component.html file.", 'start': 5297.461, 'duration': 3.702}, {'end': 5308.766, 'text': "I'll replace the statement with an interpolation property that specifies the course.", 'start': 5302.122, 'duration': 6.644}, {'end': 5310.948, 'text': 'So let me save this.', 'start': 5310.127, 'duration': 0.821}, {'end': 5314.41, 'text': 'Do not forget to save any changes you make to your project.', 'start': 5311.988, 'duration': 2.422}], 'summary': 'Angular component allows easy code reusability and course property addition.', 'duration': 50.613, 'max_score': 5263.797, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc85263797.jpg'}, {'end': 5493.321, 'src': 'heatmap', 'start': 5263.797, 'weight': 0.945, 'content': [{'end': 5267.418, 'text': 'and angular calls this function shortly after creating a component.', 'start': 5263.797, 'duration': 3.621}, {'end': 5270.559, 'text': "It's a very good place to put initialization logic.", 'start': 5268.098, 'duration': 2.461}, {'end': 5278.571, 'text': 'Now the reason why this class has been exported is because it can be imported anywhere else and therefore you will not have to rewrite the code.', 'start': 5271.707, 'duration': 6.864}, {'end': 5285.354, 'text': "Okay, so next what I'm going to do is add a course property to the courses component present in my class.", 'start': 5279.731, 'duration': 5.623}, {'end': 5292.298, 'text': "Okay, so I'll just type in course and I'll name this course as Angular itself.", 'start': 5287.656, 'duration': 4.642}, {'end': 5296.32, 'text': "Next, I'll have to show this course.", 'start': 5294.759, 'duration': 1.561}, {'end': 5301.163, 'text': "So what I'm going to do is just open up the courses component.html file.", 'start': 5297.461, 'duration': 3.702}, {'end': 5308.766, 'text': "I'll replace the statement with an interpolation property that specifies the course.", 'start': 5302.122, 'duration': 6.644}, {'end': 5310.948, 'text': 'So let me save this.', 'start': 5310.127, 'duration': 0.821}, {'end': 5314.41, 'text': 'Do not forget to save any changes you make to your project.', 'start': 5311.988, 'duration': 2.422}, {'end': 5321.494, 'text': 'To display the courses component, you must add it to the template of the shell of app component.', 'start': 5316.391, 'duration': 5.103}, {'end': 5327.098, 'text': 'Now you must remember that app courses is the element selector for the courses component.', 'start': 5322.115, 'duration': 4.983}, {'end': 5331.346, 'text': 'So to add an app component element to the app component template file.', 'start': 5327.924, 'duration': 3.422}, {'end': 5338.391, 'text': 'All you have to do is open app component dot HTML and over here just type in app courses.', 'start': 5331.687, 'duration': 6.704}, {'end': 5341.854, 'text': 'Okay, so I hope you guys are clear till here.', 'start': 5339.692, 'duration': 2.162}, {'end': 5345.476, 'text': "So now let's get back to our browser and see how it works.", 'start': 5343.255, 'duration': 2.221}, {'end': 5348.198, 'text': 'Let me just refresh this.', 'start': 5347.198, 'duration': 1}, {'end': 5351.3, 'text': 'I had actually terminated the process.', 'start': 5349.579, 'duration': 1.721}, {'end': 5354.743, 'text': "So what I'm going to do is just type in the ng serve command again.", 'start': 5351.641, 'duration': 3.102}, {'end': 5362.579, 'text': "In case you had not terminated this process and you're trying to reload the page and if you see any errors, just terminate the process.", 'start': 5355.896, 'duration': 6.683}, {'end': 5371.123, 'text': "like I've already shown you earlier in this tutorial how to terminate a process, terminate the process that hold 4200 and then rerun your server.", 'start': 5362.579, 'duration': 8.544}, {'end': 5377.646, 'text': 'Okay So as you can see over here, I have the course name which is angular previously.', 'start': 5373.264, 'duration': 4.382}, {'end': 5380.367, 'text': 'I just had one statement which was welcome to edureka.', 'start': 5377.666, 'duration': 2.701}, {'end': 5384.129, 'text': "So the next thing that I'm going to do over here is create a course class.", 'start': 5381.268, 'duration': 2.861}, {'end': 5390.585, 'text': "So next I'm going to create a new file over here and I'll just name it as course.ts.", 'start': 5385.262, 'duration': 5.323}, {'end': 5397.308, 'text': "In this file, I'll create an export class named course that is going to have the ID number and the name of the course.", 'start': 5391.565, 'duration': 5.743}, {'end': 5402.851, 'text': "So I'll just type in export class followed by the name of the class that is course.", 'start': 5397.929, 'duration': 4.922}, {'end': 5410.855, 'text': "It's going to have two properties that is the ID which is of number type and name which is of string type.", 'start': 5404.192, 'duration': 6.663}, {'end': 5413.557, 'text': 'Okay, let me just save this.', 'start': 5412.376, 'duration': 1.181}, {'end': 5422.33, 'text': "and then return to the course component.ts file and then I'll have to import the course class that I just created.", 'start': 5414.625, 'duration': 7.705}, {'end': 5435.239, 'text': "So within these import statements, I'll write import the name of the class which is course from dot dot followed by the name of the file.", 'start': 5422.35, 'duration': 12.889}, {'end': 5437.521, 'text': "I've forgotten a slash over here.", 'start': 5435.98, 'duration': 1.541}, {'end': 5440.283, 'text': 'So now I have imported the class.', 'start': 5438.541, 'duration': 1.742}, {'end': 5448.13, 'text': "So I'll just come back to this course component class And over here, I'll initialize the ID number and the name of the course.", 'start': 5441.583, 'duration': 6.547}, {'end': 5450.251, 'text': 'So let me just delete this.', 'start': 5449.21, 'duration': 1.041}, {'end': 5454.973, 'text': 'This course property is going to be of the type course class.', 'start': 5452.052, 'duration': 2.921}, {'end': 5461.336, 'text': "So I'll just type in course equals the ID number.", 'start': 5455.333, 'duration': 6.003}, {'end': 5465.398, 'text': "I'll just specify it to be one and the name.", 'start': 5462.637, 'duration': 2.761}, {'end': 5472.542, 'text': 'Okay, so let me just save this.', 'start': 5465.418, 'duration': 7.124}, {'end': 5480.658, 'text': "So now I'll jump on to the component dot HTML file courses component dot HTML file and update it over here.", 'start': 5473.496, 'duration': 7.162}, {'end': 5482.498, 'text': "So I'll just create a tag.", 'start': 5481.558, 'duration': 0.94}, {'end': 5489.26, 'text': "I'll say h2 tag and within this I'll open up the interpolation braces and I'll specify the course name.", 'start': 5482.558, 'duration': 6.702}, {'end': 5493.321, 'text': "So that's course dot name next.", 'start': 5490.08, 'duration': 3.241}], 'summary': 'Creating an angular component, adding course property, and displaying the course name with interpolation.', 'duration': 229.524, 'max_score': 5263.797, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc85263797.jpg'}, {'end': 5657.248, 'src': 'embed', 'start': 5629.497, 'weight': 1, 'content': [{'end': 5634.681, 'text': 'You can set up to a data binding between the input tag and the course dot name property.', 'start': 5629.497, 'duration': 5.184}, {'end': 5641.186, 'text': "Okay So what I'm going to do is open the course dot component dot HTML file and over here.", 'start': 5635.842, 'duration': 5.344}, {'end': 5653.525, 'text': "So, in place of span, I'll just use label and then I'll make use of the input tag and then the two-way data binding syntax ngModel,", 'start': 5642.107, 'duration': 11.418}, {'end': 5657.248, 'text': 'followed by the course name and the placeholder.', 'start': 5653.525, 'duration': 3.723}], 'summary': 'Set up two-way data binding between input tag and course name property.', 'duration': 27.751, 'max_score': 5629.497, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc85629497.jpg'}, {'end': 6587.058, 'src': 'embed', 'start': 6561.999, 'weight': 2, 'content': [{'end': 6567.744, 'text': 'They should focus on presenting data and delegate data access to a service in this tutorial.', 'start': 6561.999, 'duration': 5.745}, {'end': 6574.71, 'text': "I'm going to show you guys how to create a course service that all application classes can use to get the courses to do this.", 'start': 6567.824, 'duration': 6.886}, {'end': 6582.457, 'text': "I'll be relying on the dependency injection of angular services are a great way to share information among classes that do not know each other.", 'start': 6574.83, 'duration': 7.627}, {'end': 6587.058, 'text': "Here I'm going to create a message service and inject it in two places.", 'start': 6583.655, 'duration': 3.403}], 'summary': 'Tutorial focuses on creating a course service for data access in angular.', 'duration': 25.059, 'max_score': 6561.999, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc86561999.jpg'}, {'end': 6710.82, 'src': 'embed', 'start': 6681.554, 'weight': 0, 'content': [{'end': 6689.621, 'text': 'So once this is done, I have to make the core service available to the dependency injection system before angular can inject it for that.', 'start': 6681.554, 'duration': 8.067}, {'end': 6697.907, 'text': "I'll have to register a provider a provider like I've already told you all before is something that can create or deliver a service in this case.", 'start': 6689.921, 'duration': 7.986}, {'end': 6701.29, 'text': "It's going to instantiate the core service class to provide the service.", 'start': 6698.007, 'duration': 3.283}, {'end': 6710.82, 'text': 'So, as you can see over here, angular by default registers the provider with the root injector for your service by including the provider metadata.', 'start': 6702.116, 'duration': 8.704}], 'summary': 'Register core service with angular for dependency injection.', 'duration': 29.266, 'max_score': 6681.554, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc86681554.jpg'}], 'start': 5263.797, 'title': 'Angular component initialization and usage', 'summary': 'Covers initializing a component, creating an angular course class, implementing two-way data binding, creating a course component, and integrating component binding with services. it also explains dependency injection, core service registration, and app routing modification, resulting in a seamless user experience.', 'chapters': [{'end': 5341.854, 'start': 5263.797, 'title': 'Angular component initialization', 'summary': 'Explains the process of initializing a component in angular, including the importance of exporting a class for reusability, adding a course property to the component, and incorporating it into the app component template.', 'duration': 78.057, 'highlights': ['The importance of exporting a class for reusability and avoiding code rewriting is emphasized, showcasing the efficiency of Angular component design.', "The process of adding a course property to the courses component and displaying it through interpolation in the component's HTML file is demonstrated, highlighting practical implementation.", "The significance of incorporating the courses component into the app component template using the element selector 'app-courses' is explained, emphasizing the crucial step in completing the component integration."]}, {'end': 5606.283, 'start': 5343.255, 'title': 'Angular course creation and usage', 'summary': 'Covers the process of creating an angular course class with id and name properties, importing the class, using interpolation to display course details in the component html file, and demonstrating the usage of pipes to format strings.', 'duration': 263.028, 'highlights': ['The chapter covers the process of creating an Angular course class with ID and name properties.', 'Importing the class and initializing ID and name of the course are demonstrated.', 'Using interpolation to display course details in the component HTML file is explained.', 'Demonstrating the usage of pipes to format strings, specifically the uppercase pipe.']}, {'end': 5988.787, 'start': 5606.283, 'title': 'Two-way data binding in angular', 'summary': 'Explains the implementation of two-way data binding in angular, allowing the manipulation of course names and the creation of a mock course list, with the data flowing between the component class and the screen, and the auto import feature simplifying manual imports, resulting in a seamless user experience.', 'duration': 382.504, 'highlights': ['The implementation of two-way data binding in Angular allows the manipulation of course names and the data to flow between the component class and the screen.', 'Creation of a mock course list using the auto import feature simplifies manual imports and enhances the user experience.']}, {'end': 6386.666, 'start': 5988.787, 'title': 'Angular course component creation', 'summary': "Covers the creation of a course component in angular, detailing the addition of course details, event handling, and component creation, with a focus on html, css, and typescript files, and the use of ng-for and ng-if to display and select course details, resulting in the creation of a separate 'course detail' component.", 'duration': 397.879, 'highlights': ['The chapter covers the creation of a course component in Angular', 'The addition of course details, event handling, and component creation', 'The use of ng-for and ng-if to display and select course details', "Resulting in the creation of a separate 'course detail' component"]}, {'end': 6680.714, 'start': 6389.269, 'title': 'Angular component binding and services', 'summary': 'Discusses adding the input decorator in the course detail component, implementing property binding, and creating a course service to delegate data access, emphasizing the use of dependency injection. it also demonstrates the process of creating a service class and importing the course and courses classes.', 'duration': 291.445, 'highlights': ['The chapter discusses adding the input decorator in the course detail component.', 'Implementing property binding enables one-way data binding between components.', 'Creating a course service to delegate data access and using dependency injection for sharing information among classes.']}, {'end': 7510.23, 'start': 6681.554, 'title': 'Angular dependency injection and services', 'summary': 'Explains the process of registering a core service to the dependency injection system in angular, optimizing app performance by removing unused services, creating a messages component and service, modifying app routing module, and creating a dashboard and courses page. it also covers the concept of router outlet, router link, and navigating to the details page of a course.', 'duration': 828.676, 'highlights': ['The chapter explains the process of registering a core service to the dependency injection system in Angular, optimizing app performance by removing unused services, and creating a messages component and service.', 'The app by default registers the provider with the root injector for the service, creating a single shared instance for the core service and injecting it into any class that asks for it.', "Creating a messages component and service involves creating a property 'messages' of string type, adding a message to the messages array, and clearing the messages array.", 'Modifying the app routing module includes importing the necessary components, configuring the routes, and using router outlet and router link to navigate between the dashboard, courses page, and details page of a course.', "The chapter also covers the concept of router outlet, router link, and navigating to the details page of a course, with an empty path representing the dashboard and '/details/:id' representing the details page of a course."]}], 'duration': 2246.433, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pTec1e8oyc8/pics/pTec1e8oyc85263797.jpg', 'highlights': ['The process of registering a core service to the dependency injection system in Angular, optimizing app performance by removing unused services, and creating a messages component and service.', 'The implementation of two-way data binding in Angular allows the manipulation of course names and the data to flow between the component class and the screen.', 'Creating a course service to delegate data access and using dependency injection for sharing information among classes.', 'The chapter covers the creation of a course component in Angular, including the addition of course details, event handling, and component creation.', 'The importance of exporting a class for reusability and avoiding code rewriting is emphasized, showcasing the efficiency of Angular component design.']}], 'highlights': ['The tutorial covers the significance of TypeScript and its building blocks in Angular, emphasizing the importance of understanding TypeScript before creating an angular application.', 'Node.js is required for transpiling TypeScript to JavaScript, essential for Angular development.', 'The process of registering a core service to the dependency injection system in Angular, optimizing app performance by removing unused services, and creating a messages component and service.', 'Covers the basics of writing TypeScript code', 'The ngDoCheck hook allows detecting and acting upon changes during every change detection run.', 'Introduction to web development and transition to single-page applications', "The difference between 'let' and 'var' keywords in TypeScript is demonstrated, with 'let' providing safer scoping by limiting the visibility of variables to the nearest block, making it more secure compared to 'var'.", 'ng modules declare a group of files for analysis and reuse.', 'The chapter begins with an introduction to the basics of Angular, including discussions on types of web applications, the drawbacks of angular.js, the rise of angular, and the differences between angular and angular.js.', 'The chapter also focuses on the new features of Angular 8, followed by a demonstration of how to install Visual Studio code and Angular on the systems.']}