title
Angular Full Course - Learn Angular in 6 Hours | Angular Tutorial For Beginners | Edureka

description
🔥 Edureka Angular Certification Training (Use Code "𝐘𝐎𝐔𝐓𝐔𝐁𝐄𝟐𝟎"): https://www.edureka.co/angular-training This Edureka Angular Full Course video will help you understand and learn the fundamentals of Angular. This Angular Tutorial is ideal for both beginners as well as professionals who want to master various concepts of Angular. 🔵Angular Tutorial for Beginners: https://www.youtube.com/watch?v=pTec1e8oyc8 🔴Subscribe to our channel to get video updates. Hit the subscribe button above: https://goo.gl/6ohpTV ------------Edureka Online Training and Certification----------- 🟣 Angular Online Training: http://bit.ly/3tMWCfa 🟣 Python Online Training: https://bit.ly/2CQYGN7 🔵 AWS Online Training: https://bit.ly/2ZnbW3s 🟣 RPA Online Training: https://bit.ly/2Zd0ac0 🔵 Data Science Online Training: https://bit.ly/2NCT239 🟣 Big Data Online Training: https://bit.ly/3g8zksu 🔵 Java Online Training: https://bit.ly/31rxJcY 🟣 Selenium Online Training: https://bit.ly/3dIrh43 🔵 PMP Online Training: https://bit.ly/3dJxMTW 🟣 Tableau Online Training: https://bit.ly/3g784KJ ----------------Edureka Masters Programs------------ 🟣Full Stack Developer Masters Program: https://bit.ly/3dSY21q 🔵DevOps Engineer Masters Program: https://bit.ly/2B9tZCp 🟣Cloud Architect Masters Program: https://bit.ly/3i9z0eJ 🔵Data Scientist Masters Program: https://bit.ly/2YHaolS 🟣Big Data Architect Masters Program: https://bit.ly/31qrOVv 🔵Business Intelligence Masters Program: https://bit.ly/2BPLtn2 --------------Edureka PGP Courses------------- 🔵Artificial and Machine Learning PGP: https://bit.ly/2Ziy7b1 ----------------------------------------- Twitter: https://twitter.com/edurekain LinkedIn: https://www.linkedin.com/company/edureka Instagram: https://www.instagram.com/edureka_learning/ Facebook: https://www.facebook.com/edurekaIN/ SlideShare: https://www.slideshare.net/EdurekaIN Castbox: https://castbox.fm/networks/505?country=in Meetup: https://www.meetup.com/edureka/ #Edureka​ #EdurekaAngular​ #Angular​FullCourse​ #Angular​TutorialForBeginners​ #futureofAngular​ ​ #Angular​in2021​ #Angular​Explained​ #Angular​Edureka​ #EdurekaTraining​ #Angular​ ------------------------------------------- About the Angular Course Angular certification training at Edureka will help you in learning the following : 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. - - - - - - - - - - - - - - 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 Full Course - Learn Angular in 6 Hours | Angular Tutorial For Beginners | Edureka', 'heatmap': [{'end': 1772.622, 'start': 1323.815, 'weight': 0.714}, {'end': 2662.754, 'start': 2429.434, 'weight': 0.751}, {'end': 4646.906, 'start': 4189.575, 'weight': 0.704}, {'end': 5308.63, 'start': 5086.917, 'weight': 0.72}, {'end': 13264.496, 'start': 13031.001, 'weight': 1}], 'summary': 'The 6-hour angular tutorial for beginners covers angular features, installation, components, data binding, dependency injection, routing, forms, crud operations, bootstrap integration, testing, deployment using docker, and a comparison with react. it also includes beginner, intermediate, and advanced level interview questions, and discusses angular vs angular.js, angular cli, component creation, routing, forms, crud operations, mongodb integration, bootstrap incorporation, software testing, automation, server optimization, and angular vs react comparative analysis.', 'chapters': [{'end': 321.69, 'segs': [{'end': 36.059, 'src': 'embed', 'start': 8.863, 'weight': 1, 'content': [{'end': 13.666, 'text': 'Angular is the most popular frontend framework to create dynamic web applications.', 'start': 8.863, 'duration': 4.803}, {'end': 20.91, 'text': 'It is mostly used to build complex enterprise-grade applications like single-page apps and progressive web apps.', 'start': 14.146, 'duration': 6.764}, {'end': 28.274, 'text': 'The demand for frontend developers with knowledge about Angular is high because of the high scalability of the framework.', 'start': 21.71, 'duration': 6.564}, {'end': 36.059, 'text': 'Hi all, I welcome you all to this session by Edureka where we will be discussing the full course on Angular.', 'start': 28.914, 'duration': 7.145}], 'summary': 'Angular is a popular framework for dynamic web apps, with high demand for developers due to its scalability.', 'duration': 27.196, 'max_score': 8.863, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU8863.jpg'}, {'end': 272.232, 'src': 'embed', 'start': 246.301, 'weight': 0, 'content': [{'end': 255.324, 'text': "In comparison, we'll compare in terms of license, DOM, data binding, market trends, speed and performance, amongst other features.", 'start': 246.301, 'duration': 9.023}, {'end': 260.341, 'text': "Next we'll understand how one can become an angular developer.", 'start': 256.416, 'duration': 3.925}, {'end': 264.685, 'text': 'Why one should become an angular developer will be addressed in this session.', 'start': 261.081, 'duration': 3.604}, {'end': 272.232, 'text': "We'll also look at the roles and responsibilities and then what are the skills required to become an angular developer.", 'start': 265.165, 'duration': 7.067}], 'summary': 'Comparing licenses, dom, data binding, market trends, speed, and performance of angular. discussing how to become an angular developer and the associated roles, responsibilities, and required skills.', 'duration': 25.931, 'max_score': 246.301, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU246301.jpg'}], 'start': 8.863, 'title': 'Angular course overview', 'summary': 'Covers a comprehensive course on angular, including its features, installation, components, data binding, dependency injection, routing, forms, crud operations, bootstrap integration, testing, deployment using docker, and a comparison with react. it also discusses the skills and learning path to become an angular developer, along with beginner, intermediate, and advanced level interview questions.', 'chapters': [{'end': 321.69, 'start': 8.863, 'title': 'Angular course overview', 'summary': 'Covers a comprehensive course on angular, including its features, installation, components, data binding, dependency injection, routing, forms, crud operations, bootstrap integration, testing, deployment using docker, and a comparison with react. it also discusses the skills and learning path to become an angular developer, along with beginner, intermediate, and advanced level interview questions.', 'duration': 312.827, 'highlights': ["The demand for frontend developers with knowledge about Angular is high because of the high scalability of the framework. The high demand for frontend developers with Angular knowledge is due to the framework's high scalability, leading to increased career opportunities.", 'The chapter covers a comprehensive course on Angular, including its features, installation, components, data binding, dependency injection, routing, forms, CRUD operations, Bootstrap integration, testing, deployment using Docker, and a comparison with React. The course provides a comprehensive overview of Angular, encompassing various topics such as features, installation, components, data binding, dependency injection, routing, forms, CRUD operations, Bootstrap integration, testing, and deployment using Docker, as well as a comparison with React.', 'It also discusses the skills and learning path to become an Angular developer, along with beginner, intermediate, and advanced level interview questions. The session delves into the skills and learning path to become an Angular developer, along with beginner, intermediate, and advanced level interview questions to prepare individuals for different job roles.']}], 'duration': 312.827, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU8863.jpg', 'highlights': ['The chapter covers a comprehensive course on Angular, including its features, installation, components, data binding, dependency injection, routing, forms, CRUD operations, Bootstrap integration, testing, deployment using Docker, and a comparison with React.', 'The demand for frontend developers with knowledge about Angular is high because of the high scalability of the framework.', 'It also discusses the skills and learning path to become an Angular developer, along with beginner, intermediate, and advanced level interview questions.']}, {'end': 1235.103, 'segs': [{'end': 686.638, 'src': 'embed', 'start': 661.81, 'weight': 8, 'content': [{'end': 672.236, 'text': 'So initially HTML is great for declaring static documents, but it falters when you try to use it for declaring dynamic views in web application.', 'start': 661.81, 'duration': 10.426}, {'end': 678.059, 'text': 'Now, this is where angular.js lets you extend HTML vocabulary for your applications.', 'start': 672.956, 'duration': 5.103}, {'end': 686.638, 'text': 'Now. here you can see JavaScript based files to develop an application using angular.js.', 'start': 680.014, 'duration': 6.624}], 'summary': 'Html is limited for dynamic views, angular.js extends it for web applications.', 'duration': 24.828, 'max_score': 661.81, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU661810.jpg'}, {'end': 809.153, 'src': 'embed', 'start': 780.367, 'weight': 1, 'content': [{'end': 785.091, 'text': 'Now speaking of features of angular apart from the ones you see here on the screen.', 'start': 780.367, 'duration': 4.724}, {'end': 789.995, 'text': 'There are many others such as it lets maximum number of users.', 'start': 785.491, 'duration': 4.504}, {'end': 796.94, 'text': "It's very simple and expressive data binding and it has fastest loading capacity.", 'start': 790.655, 'duration': 6.285}, {'end': 801.965, 'text': "Now, let's look at the factors that differentiate angular.js from angular.", 'start': 797.841, 'duration': 4.124}, {'end': 804.73, 'text': 'Firstly, you have architecture.', 'start': 802.748, 'duration': 1.982}, {'end': 809.153, 'text': 'now angular.js supports model view control architecture.', 'start': 804.73, 'duration': 4.423}], 'summary': 'Angular has maximum user capacity, simple data binding, and fast loading. it supports model view control architecture.', 'duration': 28.786, 'max_score': 780.367, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU780367.jpg'}, {'end': 893.135, 'src': 'embed', 'start': 866.219, 'weight': 0, 'content': [{'end': 871.385, 'text': 'It occurs via various link functions controller functions and derivative definitions.', 'start': 866.219, 'duration': 5.166}, {'end': 880.011, 'text': 'Angular, on the other hand, uses declaration, constructive functions, and provides a hierarchical dependency injection architecture.', 'start': 872.429, 'duration': 7.582}, {'end': 889.634, 'text': 'Now we have Angular CLI, or your command line interface, which is used for generating component services, et cetera,', 'start': 880.631, 'duration': 9.003}, {'end': 893.135, 'text': 'and even complete projects quickly and efficiently.', 'start': 889.634, 'duration': 3.501}], 'summary': 'Comparison of link functions and controllers in angular with its cli for efficient project generation', 'duration': 26.916, 'max_score': 866.219, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU866219.jpg'}], 'start': 322.01, 'title': 'Angular and angular.js comparison', 'summary': "Covers the basics of website development using html, css, and javascript, emphasizing the importance of javascript frameworks like angular, with a focus on angular's features, development, and popularity. it provides an overview of angular.js, highlighting its features, including dependency injection, increased productivity, and typescript integration. additionally, it compares angular and angular.js, highlighting differences in architecture, language, dependency injection, cli, expression syntax, and performance, with angular being faster and using typescript, while angular.js uses javascript and supports two-way binding. lastly, it compares the advantages and disadvantages of angular.js and angular, highlighting their compatibility, architecture, performance, and demand in enterprise-level applications.", 'chapters': [{'end': 641.738, 'start': 322.01, 'title': 'Website development basics with javascript frameworks', 'summary': "Covers the basics of website development using html, css, and javascript, emphasizing the importance of javascript frameworks like angular, with a focus on angular's features, development, and popularity.", 'duration': 319.728, 'highlights': ['Angular is a popular JavaScript framework, with Angular 4 being the most widely used version, according to a 2018 survey where 36.9% of engineers used AngularJS or Angular 2 for user interface creation. According to a 2018 survey, Angular is the second most frequently used technology in frameworks, libraries, and other Technologies, with 36.9% of engineers using AngularJS or Angular 2 for creating user interfaces.', 'Angular is an application design framework and development platform for creating efficient and sophisticated single-page applications, built on TypeScript and offering developer tools for code building, testing, and updating. Angular is an application design framework and development platform, built on TypeScript, offering developer tools for code building, testing, and updating, as well as being used to create efficient single-page applications.', 'HTML and CSS provide the basic structure and aesthetics for web pages, while JavaScript adds interactive components to keep users engaged, making frameworks like Angular essential for efficient development. HTML and CSS provide basic structure and aesthetics for web pages, while JavaScript adds interactive components to keep users engaged, making frameworks like Angular essential for efficient development.']}, {'end': 779.647, 'start': 642.378, 'title': 'Angular.js framework overview', 'summary': 'Provides an overview of angular.js, a javascript-based open-source front-end web framework for developing single-page applications, highlighting its features, including dependency injection, increased productivity, and typescript integration, and its role as a platform for creating efficient and sophisticated single-page applications.', 'duration': 137.269, 'highlights': ['Angular.js extends HTML vocabulary for dynamic views in web applications. Angular.js allows for extending HTML vocabulary for dynamic views in web applications, providing a more expressive and readable environment for developing single-page applications.', 'Angular.js features include dependency injection and increased productivity. Angular.js offers features such as dependency injection and increased productivity, enhancing the development process for web applications.', 'Angular.js is a TypeScript-based open-source web application framework. Angular.js is a TypeScript-based open-source web application framework, providing a modern and efficient platform for building scalable web applications.', 'TypeScript is used to develop applications with Angular.js, trans compiling to JavaScript. TypeScript, a programming language developed for large applications, is utilized to develop applications with Angular.js, trans compiling to JavaScript for improved efficiency.']}, {'end': 948.803, 'start': 780.367, 'title': 'Angular vs angular.js comparison', 'summary': 'Compares angular and angular.js, highlighting differences in architecture, language, dependency injection, cli, expression syntax, and performance, with angular being faster and using typescript, while angular.js uses javascript and supports two-way binding.', 'duration': 168.436, 'highlights': ['Angular is much faster than angular.js, with change detection done through unidirectional data flow, making the application much faster.', 'Angular uses TypeScript, while angular.js uses JavaScript for language, differentiating the two frameworks.', 'Angular CLI is used for generating component services, et cetera, and even complete projects quickly and efficiently, while AngularJS does not use command line interface.', 'In Angular, the architecture follows the view view model model kind of architecture, whereas angular.js supports model view control architecture.', 'Angular supports flux architecture for change detection, while angular.js uses two-way binding and keeps checking each scoped variable with its previous value using digest cycle.']}, {'end': 1235.103, 'start': 949.608, 'title': 'Angular.js vs angular: a comparison', 'summary': "Compares the advantages and disadvantages of angular.js and angular, highlighting their compatibility, architecture, performance, and developer-friendliness, with angular's typescript-based framework being more demandable in enterprise-level applications.", 'duration': 285.495, 'highlights': ["Angular's TypeScript-based framework is more demandable in enterprise-level applications Google's shift to TypeScript has increased the overall performance of applications, making Angular's TypeScript-based framework more demandable in the enterprise level.", "Angular.js and Angular's compatibility and advantages Angular.js is mobile compatible, while Angular provides a better alternative for building large and complex applications. Angular.js supports faster coding and prototyping, immensely clean and organized coding, and two-way data binding, while Angular offers independent and self-sufficient components, faster performance, and scalability.", 'Comparison of GUI and Command-Line Interface (CLI) GUI is more user-friendly but consumes more memory and can be slower on older devices, while CLI is less user-friendly but more resource-optimized. GUI allows easy interaction and modification of appearance, but designing and developing a good-looking interface consumes a lot of time and can be expensive for hardware support.']}], 'duration': 913.093, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU322010.jpg', 'highlights': ['Angular is a popular JavaScript framework, with Angular 4 being the most widely used version, according to a 2018 survey where 36.9% of engineers used AngularJS or Angular 2 for user interface creation.', 'Angular is an application design framework and development platform for creating efficient and sophisticated single-page applications, built on TypeScript and offering developer tools for code building, testing, and updating.', 'HTML and CSS provide the basic structure and aesthetics for web pages, while JavaScript adds interactive components to keep users engaged, making frameworks like Angular essential for efficient development.', 'Angular.js extends HTML vocabulary for dynamic views in web applications, providing a more expressive and readable environment for developing single-page applications.', 'Angular.js features include dependency injection and increased productivity, enhancing the development process for web applications.', 'Angular.js is a TypeScript-based open-source web application framework, providing a modern and efficient platform for building scalable web applications.', 'Angular is much faster than angular.js, with change detection done through unidirectional data flow, making the application much faster.', 'Angular uses TypeScript, while angular.js uses JavaScript for language, differentiating the two frameworks.', 'Angular CLI is used for generating component services, et cetera, and even complete projects quickly and efficiently, while AngularJS does not use command line interface.', "Angular's TypeScript-based framework is more demandable in enterprise-level applications Google's shift to TypeScript has increased the overall performance of applications, making Angular's TypeScript-based framework more demandable in the enterprise level.", "Angular.js and Angular's compatibility and advantages Angular.js is mobile compatible, while Angular provides a better alternative for building large and complex applications. Angular.js supports faster coding and prototyping, immensely clean and organized coding, and two-way data binding, while Angular offers independent and self-sufficient components, faster performance, and scalability.", 'Comparison of GUI and Command-Line Interface (CLI) GUI is more user-friendly but consumes more memory and can be slower on older devices, while CLI is less user-friendly but more resource-optimized. GUI allows easy interaction and modification of appearance, but designing and developing a good-looking interface consumes a lot of time and can be expensive for hardware support.']}, {'end': 2760.067, 'segs': [{'end': 1284.48, 'src': 'embed', 'start': 1256.348, 'weight': 6, 'content': [{'end': 1259.33, 'text': 'to perform various tasks like viewing and managing files.', 'start': 1256.348, 'duration': 2.982}, {'end': 1267.054, 'text': 'It allows the user to type single line commands into the interface which is used in operating systems in CLI.', 'start': 1260.15, 'duration': 6.904}, {'end': 1271.137, 'text': 'The information is shown or presented to the user in plain text and files.', 'start': 1267.295, 'duration': 3.842}, {'end': 1274.375, 'text': 'A simple example of CLI is your command prompt.', 'start': 1271.894, 'duration': 2.481}, {'end': 1280.598, 'text': 'So moving on towards the benefits of CLI, CLI consumes very low memory or the RAM.', 'start': 1275.396, 'duration': 5.202}, {'end': 1284.48, 'text': 'This is because it makes use of single line commands.', 'start': 1281.699, 'duration': 2.781}], 'summary': 'Cli enables users to perform tasks with single line commands, consuming low memory.', 'duration': 28.132, 'max_score': 1256.348, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU1256348.jpg'}, {'end': 1772.622, 'src': 'heatmap', 'start': 1323.815, 'weight': 0.714, 'content': [{'end': 1328.756, 'text': 'This made the developers very difficult to handle the web applications using AngularJS.', 'start': 1323.815, 'duration': 4.941}, {'end': 1336.761, 'text': 'Therefore, to solve this issue, angular.js was completely rewritten and it was named as angular.', 'start': 1329.617, 'duration': 7.144}, {'end': 1345.425, 'text': 'with this new conversion from angular.js to angular, the angular CLI was introduced and typescript was used instead of JavaScript.', 'start': 1336.761, 'duration': 8.664}, {'end': 1347.527, 'text': 'talking in precise about the angular CLI', 'start': 1345.425, 'duration': 2.102}, {'end': 1354.97, 'text': 'The angular CLI is a command line interface tool that can be used to develop and generate angular project produce components,', 'start': 1347.867, 'duration': 7.103}, {'end': 1357.832, 'text': 'services and modules with just single line commands.', 'start': 1354.97, 'duration': 2.862}, {'end': 1364.488, 'text': 'It also helps in the reduction of application size of angular which offers enhanced development experience.', 'start': 1358.826, 'duration': 5.662}, {'end': 1369.13, 'text': 'Not just that it also offers a clean coding feature of typescript.', 'start': 1365.248, 'duration': 3.882}, {'end': 1377.993, 'text': 'This eventually has led to the ease in developers life and therefore more and more developers are getting attracted towards the angular CLI.', 'start': 1370.03, 'duration': 7.963}, {'end': 1387.877, 'text': "So now let's move on and see how you can actually install the angular CLI the angular CLI can be installed using the node packet manager or the NPM.", 'start': 1378.994, 'duration': 8.883}, {'end': 1395.135, 'text': "Now for this you have to make sure that node.js is installed on your systems in case you're not familiar with this.", 'start': 1388.832, 'duration': 6.303}, {'end': 1397.677, 'text': 'You can check out the angular 8 tutorial video.', 'start': 1395.356, 'duration': 2.321}, {'end': 1406.221, 'text': "Once you've installed node, all you have to do is open your command prompt and over here just type in the command npm.", 'start': 1398.697, 'duration': 7.524}, {'end': 1413.165, 'text': 'install hyphen G, which stands for global at the rate angular CLI.', 'start': 1406.221, 'duration': 6.944}, {'end': 1422.518, 'text': 'This command is going to install the latest version of angular-cli globally.', 'start': 1417.895, 'duration': 4.623}, {'end': 1427.781, 'text': 'in case you do not specify the hyphen G extension, the angular-cli will not be visible globally.', 'start': 1422.518, 'duration': 5.263}, {'end': 1429.883, 'text': 'This is going to take a while guys.', 'start': 1428.582, 'duration': 1.301}, {'end': 1439.509, 'text': 'So now the angular-cli has been installed.', 'start': 1436.927, 'duration': 2.582}, {'end': 1442.231, 'text': 'You can ignore the message that you see on the screen.', 'start': 1440.209, 'duration': 2.022}, {'end': 1447.414, 'text': 'It just says that a new minor version of node has been released and it asks for its update.', 'start': 1442.731, 'duration': 4.683}, {'end': 1451.697, 'text': "For now, I'm just going to ignore this and I'll just clear the screen.", 'start': 1448.134, 'duration': 3.563}, {'end': 1457.881, 'text': "So after you've installed the angular-cli, you can check for its version.", 'start': 1454.279, 'duration': 3.602}, {'end': 1462.625, 'text': 'To do that, simply type in ng double hyphen version.', 'start': 1458.642, 'duration': 3.983}, {'end': 1469.47, 'text': 'This command is going to check the version of angular-cli that is installed on your systems.', 'start': 1465.026, 'duration': 4.444}, {'end': 1473.992, 'text': "So, as you can see on the screen, the angular CLI that I'm using is 9.0.1.", 'start': 1470.171, 'duration': 3.821}, {'end': 1482.334, 'text': 'in case you want to know what this versioning tells in detail, check out the angular 9 video from edureka.', 'start': 1473.992, 'duration': 8.342}, {'end': 1488.816, 'text': 'now. in case you faced any issues while installing angular, you can simply type in the command ng help serve.', 'start': 1482.334, 'duration': 6.482}, {'end': 1491.977, 'text': 'this command will give you an online support by the angular team.', 'start': 1488.816, 'duration': 3.161}, {'end': 1497.058, 'text': 'So let me just type in the command which is ng help serve.', 'start': 1492.657, 'duration': 4.401}, {'end': 1508.562, 'text': "Now if you're wondering what ng is ng actually stands for angular all the commands of the angular CLI begin with ng.", 'start': 1501.678, 'duration': 6.884}, {'end': 1515.765, 'text': 'So here it is as you can see all the commands that you can use along with the angular CLI have been described over here.', 'start': 1509.322, 'duration': 6.443}, {'end': 1521.849, 'text': 'So just clear the screen and now we shall see how you can create a project using the angular CLI.', 'start': 1516.346, 'duration': 5.503}, {'end': 1531.693, 'text': 'To create a new project using the angular CLI simply type in the command ng new followed by the name of your application or your project.', 'start': 1522.869, 'duration': 8.824}, {'end': 1534.994, 'text': "In this case, I'll just call it as my first project.", 'start': 1532.573, 'duration': 2.421}, {'end': 1542.517, 'text': "The moment you hit enter you'll encounter two questions.", 'start': 1539.796, 'duration': 2.721}, {'end': 1546.878, 'text': "The first question would be if you'd like to add routing to your angular project.", 'start': 1542.897, 'duration': 3.981}, {'end': 1554.181, 'text': "Now personally, I'd recommend you guys to add routing to your project as it helps in navigating through your application.", 'start': 1547.959, 'duration': 6.222}, {'end': 1556.182, 'text': "So I'm going to type in yes.", 'start': 1555.041, 'duration': 1.141}, {'end': 1563.257, 'text': "and I'll hit enter the second question that you encounter is regarding the style sheet since I'm comfortable with CSS.", 'start': 1556.914, 'duration': 6.343}, {'end': 1564.838, 'text': "I'll just hit enter for CSS.", 'start': 1563.457, 'duration': 1.381}, {'end': 1570.721, 'text': "So now it's going to take a while for it to create a new project.", 'start': 1567.94, 'duration': 2.781}, {'end': 1577.965, 'text': 'So as you can see our project has been successfully created.', 'start': 1575.023, 'duration': 2.942}, {'end': 1580.666, 'text': "Now, what I'm going to do is get into my project.", 'start': 1578.565, 'duration': 2.101}, {'end': 1586.529, 'text': "So for that, I'll just type in CD and the name of my project which was my first project.", 'start': 1581.346, 'duration': 5.183}, {'end': 1592.43, 'text': "and I'll just open this using the Visual Studio code.", 'start': 1590.089, 'duration': 2.341}, {'end': 1596.012, 'text': 'In case you do not know how to install Visual Studio code.', 'start': 1593.671, 'duration': 2.341}, {'end': 1599.354, 'text': 'You can refer to the angular 8 tutorial video from edureka.', 'start': 1596.333, 'duration': 3.021}, {'end': 1609.48, 'text': 'So, as you can see over here, my first project has been created with a number of files and folders.', 'start': 1603.437, 'duration': 6.043}, {'end': 1615.083, 'text': 'the details of each of these files and folders has also been explained in the angular 8 tutorial video,', 'start': 1609.48, 'duration': 5.603}, {'end': 1617.525, 'text': 'and I strongly recommend you guys to check out that video.', 'start': 1615.083, 'duration': 2.442}, {'end': 1626.079, 'text': 'So whenever you create a new project using the angular CLI, you will get a pre-made project to start off in order to view this project.', 'start': 1618.371, 'duration': 7.708}, {'end': 1633.187, 'text': "You can simply type in the ng serve command which is going to serve your application on the browser's localhost first number 4200.", 'start': 1626.52, 'duration': 6.667}, {'end': 1637.372, 'text': "So I'll just get back to my command prompt and over here.", 'start': 1633.187, 'duration': 4.185}, {'end': 1640.335, 'text': "I'll just type in ng serve hyphen O.", 'start': 1637.392, 'duration': 2.943}, {'end': 1647.511, 'text': 'Now the hyphen or the open extension is going to run this project by default on the localhost port number 4200.', 'start': 1641.169, 'duration': 6.342}, {'end': 1650.832, 'text': 'This is going to take a while again.', 'start': 1647.511, 'duration': 3.321}, {'end': 1651.972, 'text': 'So forward it.', 'start': 1650.852, 'duration': 1.12}, {'end': 1656.633, 'text': 'So this is an additional question that you see in angular 9.', 'start': 1652.912, 'duration': 3.721}, {'end': 1660.234, 'text': 'So all angular wants to do is collect some anonymous information,', 'start': 1656.633, 'duration': 3.601}, {'end': 1665.736, 'text': 'and that is to check the compatibility of your commands and the time taken for the development of project.', 'start': 1660.234, 'duration': 5.502}, {'end': 1669.535, 'text': 'So since this project is not going to be a very confidential one.', 'start': 1666.553, 'duration': 2.982}, {'end': 1671.116, 'text': "I'll just hit Y and hit enter.", 'start': 1669.555, 'duration': 1.561}, {'end': 1675.499, 'text': 'However, if you wish to change your mind,', 'start': 1673.038, 'duration': 2.461}, {'end': 1682.925, 'text': 'angular also gives you an option of undoing this by simply changing the ng analytics project configuration to off.', 'start': 1675.499, 'duration': 7.426}, {'end': 1692.812, 'text': "The hyphen or extension that I've given over here is optional.", 'start': 1690.07, 'duration': 2.742}, {'end': 1699.66, 'text': 'You can also run the ng serve command without specifying the hyphen O or the double hyphen open extension.', 'start': 1693.934, 'duration': 5.726}, {'end': 1706.927, 'text': 'So as you can see over here, this is the default or the welcome page from angular.', 'start': 1702.603, 'duration': 4.324}, {'end': 1712.452, 'text': 'So as you can see on the screen, it says that my first project app is running now.', 'start': 1707.587, 'duration': 4.865}, {'end': 1717.337, 'text': 'All you have to do to create your own application is modify this project as per your requirements.', 'start': 1712.512, 'duration': 4.825}, {'end': 1721.845, 'text': 'Since the main focus of this session is to understand the angular CLI.', 'start': 1718.243, 'duration': 3.602}, {'end': 1727.068, 'text': "I'm not going to go into the depth of creating and modifying your projects for that.", 'start': 1722.425, 'duration': 4.643}, {'end': 1730.249, 'text': 'You can check out the other angular 8 videos from edureka.', 'start': 1727.308, 'duration': 2.941}, {'end': 1732.51, 'text': "So now let's get back to the command prompt.", 'start': 1730.89, 'duration': 1.62}, {'end': 1739.354, 'text': "So the next thing that I'll show you guys over here is the installation of angular materials.", 'start': 1735.272, 'duration': 4.082}, {'end': 1752.282, 'text': 'Angular materials or the user interface components help you design your application in a structured manner that attracts users and makes it easier to access the elements or the components present in your application.', 'start': 1740.234, 'duration': 12.048}, {'end': 1758.306, 'text': 'Angular materials also help in designing your applications beautifully with unique styles and shapes.', 'start': 1753.003, 'duration': 5.303}, {'end': 1772.622, 'text': 'To add on angular materials using the angular CLI type in the command ng add at the rate angular slash materials slash material.', 'start': 1759.287, 'duration': 13.335}], 'summary': 'Angular.js was rewritten to angular, introducing angular cli and typescript, making development easier and attracting more developers.', 'duration': 448.807, 'max_score': 1323.815, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU1323815.jpg'}, {'end': 1515.765, 'src': 'embed', 'start': 1465.026, 'weight': 7, 'content': [{'end': 1469.47, 'text': 'This command is going to check the version of angular-cli that is installed on your systems.', 'start': 1465.026, 'duration': 4.444}, {'end': 1473.992, 'text': "So, as you can see on the screen, the angular CLI that I'm using is 9.0.1.", 'start': 1470.171, 'duration': 3.821}, {'end': 1482.334, 'text': 'in case you want to know what this versioning tells in detail, check out the angular 9 video from edureka.', 'start': 1473.992, 'duration': 8.342}, {'end': 1488.816, 'text': 'now. in case you faced any issues while installing angular, you can simply type in the command ng help serve.', 'start': 1482.334, 'duration': 6.482}, {'end': 1491.977, 'text': 'this command will give you an online support by the angular team.', 'start': 1488.816, 'duration': 3.161}, {'end': 1497.058, 'text': 'So let me just type in the command which is ng help serve.', 'start': 1492.657, 'duration': 4.401}, {'end': 1508.562, 'text': "Now if you're wondering what ng is ng actually stands for angular all the commands of the angular CLI begin with ng.", 'start': 1501.678, 'duration': 6.884}, {'end': 1515.765, 'text': 'So here it is as you can see all the commands that you can use along with the angular CLI have been described over here.', 'start': 1509.322, 'duration': 6.443}], 'summary': 'The angular cli version 9.0.1 is checked and demonstrated with ng help serve command for online support.', 'duration': 50.739, 'max_score': 1465.026, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU1465026.jpg'}, {'end': 1717.337, 'src': 'embed', 'start': 1690.07, 'weight': 10, 'content': [{'end': 1692.812, 'text': "The hyphen or extension that I've given over here is optional.", 'start': 1690.07, 'duration': 2.742}, {'end': 1699.66, 'text': 'You can also run the ng serve command without specifying the hyphen O or the double hyphen open extension.', 'start': 1693.934, 'duration': 5.726}, {'end': 1706.927, 'text': 'So as you can see over here, this is the default or the welcome page from angular.', 'start': 1702.603, 'duration': 4.324}, {'end': 1712.452, 'text': 'So as you can see on the screen, it says that my first project app is running now.', 'start': 1707.587, 'duration': 4.865}, {'end': 1717.337, 'text': 'All you have to do to create your own application is modify this project as per your requirements.', 'start': 1712.512, 'duration': 4.825}], 'summary': "Running ng serve command without specifying the optional extensions displays the default welcome page from angular, showing 'my first project app' running.", 'duration': 27.267, 'max_score': 1690.07, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU1690070.jpg'}, {'end': 1772.622, 'src': 'embed', 'start': 1735.272, 'weight': 5, 'content': [{'end': 1739.354, 'text': "So the next thing that I'll show you guys over here is the installation of angular materials.", 'start': 1735.272, 'duration': 4.082}, {'end': 1752.282, 'text': 'Angular materials or the user interface components help you design your application in a structured manner that attracts users and makes it easier to access the elements or the components present in your application.', 'start': 1740.234, 'duration': 12.048}, {'end': 1758.306, 'text': 'Angular materials also help in designing your applications beautifully with unique styles and shapes.', 'start': 1753.003, 'duration': 5.303}, {'end': 1772.622, 'text': 'To add on angular materials using the angular CLI type in the command ng add at the rate angular slash materials slash material.', 'start': 1759.287, 'duration': 13.335}], 'summary': 'Installing angular materials improves app design and accessibility.', 'duration': 37.35, 'max_score': 1735.272, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU1735272.jpg'}, {'end': 1860.675, 'src': 'embed', 'start': 1835.008, 'weight': 9, 'content': [{'end': 1843.13, 'text': 'Going through the Angular overview, we all know that our primary goal is to build client-side application with HTML and TypeScript.', 'start': 1835.008, 'duration': 8.122}, {'end': 1847.992, 'text': 'Well for that, the most basic building blocks of Angular are ng-modules.', 'start': 1843.59, 'duration': 4.402}, {'end': 1851.012, 'text': "We'll learn more about it in the upcoming slides.", 'start': 1848.532, 'duration': 2.48}, {'end': 1852.393, 'text': 'For now.', 'start': 1851.633, 'duration': 0.76}, {'end': 1860.675, 'text': 'going through the architecture, we see that there are several parts to Angular, such as templates, components, derivatives,', 'start': 1852.393, 'duration': 8.282}], 'summary': 'Angular overview: build client-side app with html and typescript using ng-modules.', 'duration': 25.667, 'max_score': 1835.008, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU1835008.jpg'}, {'end': 2365.753, 'src': 'embed', 'start': 2320.662, 'weight': 0, 'content': [{'end': 2329.348, 'text': 'Now going back to the app component.ts, we have template URL which basically contains HTML file for our component.', 'start': 2320.662, 'duration': 8.686}, {'end': 2335.843, 'text': 'Now going into the HTML file, we see that we have a message that we need to be displaying.', 'start': 2329.881, 'duration': 5.962}, {'end': 2345.966, 'text': 'Now again, in the TypeScript file, we also have style URLs, which contains basically a styling file or a CSS file for this component.', 'start': 2336.323, 'duration': 9.643}, {'end': 2351.848, 'text': 'Now since we have not given any particular styling for this message that has been displayed, it is empty.', 'start': 2346.346, 'duration': 5.502}, {'end': 2355.329, 'text': 'Again, if you want to style, you can give some stylings.', 'start': 2352.508, 'duration': 2.821}, {'end': 2357.55, 'text': 'Now this is about the component.', 'start': 2356.009, 'duration': 1.541}, {'end': 2360.992, 'text': 'which has the decorator at component.', 'start': 2358.331, 'duration': 2.661}, {'end': 2365.753, 'text': "Now let's understand more about component by creation of the component.", 'start': 2361.612, 'duration': 4.141}], 'summary': 'The typescript file contains a message to display, but no specific styling has been applied. stylings can be added as desired.', 'duration': 45.091, 'max_score': 2320.662, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU2320662.jpg'}, {'end': 2662.754, 'src': 'heatmap', 'start': 2429.434, 'weight': 0.751, 'content': [{'end': 2434.497, 'text': 'we have component metadata that has been created and then associated class.', 'start': 2429.434, 'duration': 5.063}, {'end': 2437.198, 'text': 'Demo component is the name of the class.', 'start': 2435.057, 'duration': 2.141}, {'end': 2440.657, 'text': 'Also, there are some properties that has been created.', 'start': 2437.816, 'duration': 2.841}, {'end': 2448.399, 'text': 'We should also note, along with creation of the components, there is some updates made to the app component.', 'start': 2441.057, 'duration': 7.342}, {'end': 2454.36, 'text': 'Now here, they say there is an update made in app.module.typescript.', 'start': 2448.879, 'duration': 5.481}, {'end': 2456.16, 'text': "Now let's look into it.", 'start': 2455.12, 'duration': 1.04}, {'end': 2466.683, 'text': 'Going to the app.module.ts, we see that demo component is being added as the declaration in the ngModule.', 'start': 2456.901, 'duration': 9.782}, {'end': 2472.527, 'text': 'Now along with that, they have also imported the demo as the component.', 'start': 2467.366, 'duration': 5.161}, {'end': 2477.449, 'text': 'Now hence, we have encountered the updates already made in the app component.', 'start': 2473.208, 'duration': 4.241}, {'end': 2480.37, 'text': "Let's get back to our demo TypeScript file.", 'start': 2478.049, 'duration': 2.321}, {'end': 2486.791, 'text': 'Now as I mentioned earlier, selector uses this attribute called appDemo.', 'start': 2481.15, 'duration': 5.641}, {'end': 2493.753, 'text': 'This should be mentioned in our main index.html file for it to render the component.', 'start': 2487.552, 'duration': 6.201}, {'end': 2508.684, 'text': "So I'm gonna be mentioning the app demo as a custom tag because I want my custom tag to be identified so that my component is being rendered.", 'start': 2494.374, 'duration': 14.31}, {'end': 2510.405, 'text': 'Now I save this.', 'start': 2509.544, 'duration': 0.861}, {'end': 2525.173, 'text': 'Now going back to demo.component, I also should make sure this component is being run in my app.html which is the component file for HTML here.', 'start': 2510.425, 'duration': 14.748}, {'end': 2537.054, 'text': "Again, I'm using my app demo as the custom tab to make sure that my message in the just created component will be displayed.", 'start': 2525.825, 'duration': 11.229}, {'end': 2539.836, 'text': 'now going back to the TS file here', 'start': 2537.054, 'duration': 2.782}, {'end': 2545, 'text': 'I also see there is a HTML file as I mentioned earlier.', 'start': 2540.276, 'duration': 4.724}, {'end': 2545.961, 'text': "Let's look into it.", 'start': 2545.08, 'duration': 0.881}, {'end': 2555.565, 'text': "Now because of our Angular CLI's property, there is a default message that has been typed when you create the Angular component, that is DemoWorks.", 'start': 2546.823, 'duration': 8.742}, {'end': 2559.646, 'text': 'Now also, CSS is empty here as well.', 'start': 2556.445, 'duration': 3.201}, {'end': 2568.609, 'text': 'Now if you will, you can give a property to CSS for styling, but here, let me leave it alone for time being.', 'start': 2560.386, 'duration': 8.223}, {'end': 2573.95, 'text': 'Now CSS, now as I mentioned, styling URL contains CSS file.', 'start': 2569.249, 'duration': 4.701}, {'end': 2576.699, 'text': "Now let's look into the output indeed.", 'start': 2574.738, 'duration': 1.961}, {'end': 2582.32, 'text': 'Now I say ng serve enter.', 'start': 2576.719, 'duration': 5.601}, {'end': 2590.203, 'text': 'Now the compilation is done and this is what we have.', 'start': 2585.561, 'duration': 4.642}, {'end': 2593.584, 'text': 'We have demo works which has been displayed.', 'start': 2590.723, 'duration': 2.861}, {'end': 2601.846, 'text': 'The message that we have actually given in our components HTML file and then we have this in our app HTML file.', 'start': 2594.204, 'duration': 7.642}, {'end': 2607.433, 'text': "Now let's see the changes that we can actually do this particular component.", 'start': 2602.932, 'duration': 4.501}, {'end': 2615.494, 'text': 'Considering the selector first, we can actually define this particular component as a div as well.', 'start': 2608.133, 'duration': 7.361}, {'end': 2620.815, 'text': 'For that, you need to give this as a class instead of an attribute.', 'start': 2615.874, 'duration': 4.941}, {'end': 2626.716, 'text': 'So here, I just say dot app demo, which will define this as class.', 'start': 2621.535, 'duration': 5.181}, {'end': 2634.752, 'text': "Again, since I've defined this as class, it will show error as I have to change in my app component.", 'start': 2627.396, 'duration': 7.356}, {'end': 2637.093, 'text': 'Now this is no more a custom tag.', 'start': 2635.272, 'duration': 1.821}, {'end': 2640.475, 'text': 'I am going to specify this as a class.', 'start': 2637.834, 'duration': 2.641}, {'end': 2648.541, 'text': 'Now you can see it works the same.', 'start': 2646.039, 'duration': 2.502}, {'end': 2657.767, 'text': 'Now again, going back to our TypeScript file, you can also define this in a square bracket.', 'start': 2649.722, 'duration': 8.045}, {'end': 2662.754, 'text': 'which will take it as an attribute instead of custom type.', 'start': 2659.451, 'duration': 3.303}], 'summary': "Updates made to app component and demo component in typescript for angular cli, resulting in 'demoworks' message displayed in the app.", 'duration': 233.32, 'max_score': 2429.434, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU2429434.jpg'}, {'end': 2657.767, 'src': 'embed', 'start': 2594.204, 'weight': 2, 'content': [{'end': 2601.846, 'text': 'The message that we have actually given in our components HTML file and then we have this in our app HTML file.', 'start': 2594.204, 'duration': 7.642}, {'end': 2607.433, 'text': "Now let's see the changes that we can actually do this particular component.", 'start': 2602.932, 'duration': 4.501}, {'end': 2615.494, 'text': 'Considering the selector first, we can actually define this particular component as a div as well.', 'start': 2608.133, 'duration': 7.361}, {'end': 2620.815, 'text': 'For that, you need to give this as a class instead of an attribute.', 'start': 2615.874, 'duration': 4.941}, {'end': 2626.716, 'text': 'So here, I just say dot app demo, which will define this as class.', 'start': 2621.535, 'duration': 5.181}, {'end': 2634.752, 'text': "Again, since I've defined this as class, it will show error as I have to change in my app component.", 'start': 2627.396, 'duration': 7.356}, {'end': 2637.093, 'text': 'Now this is no more a custom tag.', 'start': 2635.272, 'duration': 1.821}, {'end': 2640.475, 'text': 'I am going to specify this as a class.', 'start': 2637.834, 'duration': 2.641}, {'end': 2648.541, 'text': 'Now you can see it works the same.', 'start': 2646.039, 'duration': 2.502}, {'end': 2657.767, 'text': 'Now again, going back to our TypeScript file, you can also define this in a square bracket.', 'start': 2649.722, 'duration': 8.045}], 'summary': 'The tutorial demonstrates changes in defining components in html and typescript.', 'duration': 63.563, 'max_score': 2594.204, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU2594204.jpg'}], 'start': 1235.103, 'title': 'Angular cli and component creation', 'summary': "Discusses the benefits of using angular cli, such as lower system resource consumption and faster processing, along with the installation of angular materials. it also covers the overview of angular, emphasizing the role and benefits of components, and demonstrates the creation of a component using the 'ng g c' command.", 'chapters': [{'end': 1564.838, 'start': 1235.103, 'title': 'Benefits of using angular cli', 'summary': 'Discusses the shift from gui to cli due to lower system resource consumption, faster processing and the introduction of angular cli, which helps in reducing application size and offers a clean coding feature of typescript, leading to an enhanced development experience.', 'duration': 329.735, 'highlights': ['The CLI consumes very low memory or the RAM, making it much faster and more efficient compared to GUI. CLI consumes very low memory or the RAM, leading to faster and more efficient performance compared to GUI.', 'The Angular CLI is a command line interface tool that can be used to develop and generate angular projects, produce components, services, and modules with just single line commands. Angular CLI is a tool for developing and generating angular projects, components, services, and modules with single line commands.', 'Angular CLI helps in the reduction of application size of angular which offers enhanced development experience and clean coding feature of typescript. Angular CLI reduces the application size of angular, offering an enhanced development experience and clean coding feature of typescript.', 'CLI comes in very cheap as it requires lower screen resolution, and it transfers data quite fast. CLI is cost-effective as it requires lower screen resolution and transfers data quickly.', 'The CPU processing time for CLI is very less when compared to GUI. CLI has significantly lower CPU processing time compared to GUI.']}, {'end': 1827.721, 'start': 1567.94, 'title': 'Angular cli and angular materials installation', 'summary': 'Covers the creation of a new project using angular cli, serving the project on localhost, and installing angular materials using angular cli, as well as explaining the benefits of using it for application design and user experience.', 'duration': 259.781, 'highlights': ['The chapter covers the creation of a new project using Angular CLI, serving the project on localhost, and installing Angular Materials using Angular CLI. This includes the process of creating a new project, serving it on localhost, and installing Angular Materials using Angular CLI.', 'Angular Materials help in designing applications beautifully with unique styles and shapes, attracting user attention and making it easier to access elements. Angular Materials aid in designing applications attractively with unique styles and shapes, enhancing user experience and accessibility.', 'Choosing a pre-built theme and customizing theme files are part of the process when adding Angular Materials using Angular CLI. The process involves choosing a pre-built theme and customizing theme files when adding Angular Materials using Angular CLI.', 'Setting up global Angular Material typography and browser animations for Angular Material can enhance application usability and user experience. Setting up global Angular Material typography and browser animations can enhance application usability and user experience.']}, {'end': 2365.753, 'start': 1835.008, 'title': 'Angular overview and component creation', 'summary': 'Introduces the basic building blocks of angular, including ng-modules, templates, components, metadata, and router services, emphasizing the role of components in defining views and the advantages of using components over modules. it also explores the benefits of components, their real-time use cases, and demonstrates the creation of a component in visual studio code.', 'duration': 530.745, 'highlights': ['Components define views and divide UI into smaller parts, increasing application accessibility and providing a clearer view of the UI. Components define many views arranged hierarchically, leading to a clear UI view and increased application accessibility.', 'Components offer in-browser navigational capabilities and maintain the web component ecosystem for coordination between frameworks, making them reusable. Components provide in-browser navigational capabilities and maintain the web component ecosystem for reusability and coordination between frameworks.', 'Real-time use cases of components include video streaming applications, real-time data applications like weather forecast, e-commerce applications, and user-generated content portals. Components are extensively used in various real-time applications such as video streaming, weather forecasting, e-commerce, and user-generated content portals.', 'The demonstration showcases the creation of a component in Visual Studio Code, emphasizing the structure of a component, including the associated class, metadata, selector, template URL, and style URLs. The demonstration highlights the creation of a component in Visual Studio Code, explaining the structure including the associated class, metadata, selector, template URL, and style URLs.']}, {'end': 2760.067, 'start': 2366.553, 'title': 'Creating angular component', 'summary': "Demonstrates how to create an angular component using the 'ng g c' command, which generates a component with html, typescript, spec, and css files. it also covers updating the app component and app.module.ts, configuring the selector, and altering the template and styling.", 'duration': 393.514, 'highlights': ["The 'ng g c' command generates a component with HTML, TypeScript, spec, and CSS files. Using the 'ng g c' command creates a component with associated HTML, TypeScript, spec, and CSS files, facilitating the component creation process.", 'The app.component and app.module.ts are updated during the component creation process. The creation of a new component triggers updates in the app.component and app.module.ts files, ensuring the integration of the newly created component with the Angular application.', "The chapter explains the process of configuring the selector and rendering the component in the app HTML file. It details the configuration of the selector using the 'appDemo' attribute and rendering the component by adding the custom tag 'app-demo' to the app HTML file.", 'Demonstrates alternative ways of defining the component, such as using class instead of an attribute, specifying the template as an inline message, and providing styling options. It demonstrates alternative ways of defining the component, including using a class instead of an attribute, specifying the template as an inline message, and providing options for styling, offering flexibility in component customization.']}], 'duration': 1524.964, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU1235103.jpg', 'highlights': ['Angular CLI reduces the application size of angular, offering an enhanced development experience and clean coding feature of typescript.', 'CLI has significantly lower CPU processing time compared to GUI.', 'CLI is cost-effective as it requires lower screen resolution and transfers data quickly.', 'Angular Materials aid in designing applications attractively with unique styles and shapes, enhancing user experience and accessibility.', 'Setting up global Angular Material typography and browser animations can enhance application usability and user experience.', 'Components define many views arranged hierarchically, leading to a clear UI view and increased application accessibility.', 'Components provide in-browser navigational capabilities and maintain the web component ecosystem for reusability and coordination between frameworks.', "Using the 'ng g c' command creates a component with associated HTML, TypeScript, spec, and CSS files, facilitating the component creation process.", 'The creation of a new component triggers updates in the app.component and app.module.ts files, ensuring the integration of the newly created component with the Angular application.', "It details the configuration of the selector using the 'appDemo' attribute and rendering the component by adding the custom tag 'app-demo' to the app HTML file.", 'It demonstrates alternative ways of defining the component, including using a class instead of an attribute, specifying the template as an inline message, and providing options for styling, offering flexibility in component customization.']}, {'end': 3975.173, 'segs': [{'end': 2840.258, 'src': 'embed', 'start': 2818.209, 'weight': 10, 'content': [{'end': 2826.374, 'text': 'So in other words, a template is a snippet of HTML which tells Angular how to render a particular component in your application.', 'start': 2818.209, 'duration': 8.165}, {'end': 2833.478, 'text': "So you'll see a lot of components here while we learn about templates as templates and components are interlinked.", 'start': 2827.174, 'duration': 6.304}, {'end': 2840.258, 'text': "Speaking of you can actually define a component's view with its companion template,", 'start': 2834.156, 'duration': 6.102}], 'summary': 'Angular uses templates to render components in applications.', 'duration': 22.049, 'max_score': 2818.209, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU2818209.jpg'}, {'end': 3084.518, 'src': 'embed', 'start': 3054.258, 'weight': 11, 'content': [{'end': 3057.82, 'text': 'Now you will have a question as to what template variables are.', 'start': 3054.258, 'duration': 3.562}, {'end': 3063.782, 'text': 'So they can actually range from your DOM element within a template to your directive.', 'start': 3058.6, 'duration': 5.182}, {'end': 3068.544, 'text': 'Now directive is something that will manipulate your HTML head and body.', 'start': 3064.222, 'duration': 4.322}, {'end': 3074.126, 'text': 'Also it can be an element or template reference or even a web component.', 'start': 3069.224, 'duration': 4.902}, {'end': 3078.212, 'text': 'Naturally, we need syntax for creating a template.', 'start': 3075.129, 'duration': 3.083}, {'end': 3084.518, 'text': 'Within a template, you can actually use special syntax to leverage many of the Angular features.', 'start': 3078.933, 'duration': 5.585}], 'summary': 'Template variables range from dom elements to directives, web components, and special syntax for angular features.', 'duration': 30.26, 'max_score': 3054.258, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU3054258.jpg'}, {'end': 3226.591, 'src': 'embed', 'start': 3202.359, 'weight': 0, 'content': [{'end': 3210.723, 'text': 'When there is a component decorator as in TypeScript file, a template is being loaded and this is a part of this component.', 'start': 3202.359, 'duration': 8.364}, {'end': 3219.527, 'text': 'Now based on Angular CLI, that is your command line interface, the template uses template URL as HTML file.', 'start': 3211.303, 'duration': 8.224}, {'end': 3226.591, 'text': 'Now this is a property of the component which helps you store the HTML related information.', 'start': 3220.086, 'duration': 6.505}], 'summary': 'Component decorator in typescript file loads a template using template url as html file, a property of the component.', 'duration': 24.232, 'max_score': 3202.359, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU3202359.jpg'}, {'end': 3376.618, 'src': 'embed', 'start': 3346.256, 'weight': 4, 'content': [{'end': 3349.338, 'text': 'Now in this class you can actually define different properties.', 'start': 3346.256, 'duration': 3.082}, {'end': 3354.162, 'text': "Now here what I'm gonna do is I'm gonna define a property called title.", 'start': 3350.299, 'duration': 3.863}, {'end': 3360.765, 'text': "Let's say I am saying this as app works.", 'start': 3355.003, 'duration': 5.762}, {'end': 3362.026, 'text': "it's just a demo message.", 'start': 3360.765, 'duration': 1.261}, {'end': 3369.432, 'text': 'you can actually give anything that you want and when you give this to call this particular property,', 'start': 3362.026, 'duration': 7.406}, {'end': 3376.618, 'text': "you're supposed to mention either here in your inline template or in your html file.", 'start': 3369.432, 'duration': 7.186}], 'summary': "Class allows defining properties, such as 'title' for app message.", 'duration': 30.362, 'max_score': 3346.256, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU3346256.jpg'}, {'end': 3586.009, 'src': 'embed', 'start': 3558.327, 'weight': 12, 'content': [{'end': 3566.794, 'text': "Again, for any particular property that you want to specify from your class, you'll always have to use double curly braces.", 'start': 3558.327, 'duration': 8.467}, {'end': 3573.019, 'text': "My property is gonna be object, and I'm gonna close my paragraph.", 'start': 3567.475, 'duration': 5.544}, {'end': 3576.683, 'text': 'Now, I just saved this.', 'start': 3574.681, 'duration': 2.002}, {'end': 3578.464, 'text': "Let's see what's gonna happen.", 'start': 3577.283, 'duration': 1.181}, {'end': 3586.009, 'text': 'As you can see, the output that you have is object object.', 'start': 3582.287, 'duration': 3.722}], 'summary': "Using double curly braces to specify properties from a class results in 'object object' output.", 'duration': 27.682, 'max_score': 3558.327, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU3558327.jpg'}, {'end': 3651.214, 'src': 'embed', 'start': 3616.014, 'weight': 1, 'content': [{'end': 3617.614, 'text': 'Now next we have array.', 'start': 3616.014, 'duration': 1.6}, {'end': 3622.676, 'text': "Let's see how we can actually display array property here for that.", 'start': 3618.195, 'duration': 4.481}, {'end': 3626.317, 'text': "I'm going to have to use the property called my array.", 'start': 3623.136, 'duration': 3.181}, {'end': 3634.499, 'text': 'Here as we know array is supposed to be mentioned within square bracket.', 'start': 3627.857, 'duration': 6.642}, {'end': 3639.64, 'text': 'Now I say a again you can give any particular example.', 'start': 3635.119, 'duration': 4.521}, {'end': 3642.428, 'text': "I'm just taking Wobbles here.", 'start': 3639.66, 'duration': 2.768}, {'end': 3646.03, 'text': 'I just say this for example.', 'start': 3642.448, 'duration': 3.582}, {'end': 3651.214, 'text': 'Now here again in template for displaying array.', 'start': 3646.05, 'duration': 5.164}], 'summary': "Demonstrating array property 'my array' within square brackets using 'wobbles' as an example.", 'duration': 35.2, 'max_score': 3616.014, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU3616014.jpg'}, {'end': 3828.606, 'src': 'embed', 'start': 3794.295, 'weight': 7, 'content': [{'end': 3797.116, 'text': "It is just a name that I'm giving to my template.", 'start': 3794.295, 'duration': 2.821}, {'end': 3799.817, 'text': 'You can give any particular name you want.', 'start': 3797.476, 'duration': 2.341}, {'end': 3802.778, 'text': 'And I close this condition.', 'start': 3801.037, 'duration': 1.741}, {'end': 3810.28, 'text': "So this is if condition, like if my array is this, then type this statement that I'm giving over here.", 'start': 3803.258, 'duration': 7.022}, {'end': 3817.562, 'text': 'Now here, type the array is present.', 'start': 3810.9, 'duration': 6.662}, {'end': 3820.563, 'text': 'or just say array is present.', 'start': 3818.922, 'duration': 1.641}, {'end': 3821.583, 'text': 'Anything is cool.', 'start': 3820.783, 'duration': 0.8}, {'end': 3828.606, 'text': 'Now when you specify this, I may have to specify something called as ngTemplate.', 'start': 3822.183, 'duration': 6.423}], 'summary': 'Demonstrating conditional statement usage in template with array presence check.', 'duration': 34.311, 'max_score': 3794.295, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU3794295.jpg'}], 'start': 2760.728, 'title': 'Angular templates and data binding', 'summary': 'Explains the relationship between components and templates, the use of templates in change detection, dynamic data display, object and array property display, and basics of data binding in angular, with examples and version compatibility.', 'chapters': [{'end': 2984.505, 'start': 2760.728, 'title': 'Angular component templates', 'summary': 'Explains the relationship between component and template in angular, the hierarchy of components and templates, and the association of views in a hierarchical structure, with key pointers about view hierarchy and ngmodules.', 'duration': 223.777, 'highlights': ["A template is a snippet of HTML which tells Angular how to render a particular component in your application. Explains the definition of a template as a snippet of HTML guiding Angular's rendering of a component.", 'There is a root component and hence a root template, with child and grandchild components having associated templates. Describes the existence of a root component and template, along with child and grandchild components with their respective associated templates.', 'Views are often organized in hierarchical structure, allowing editing or showing/hiding entire UI parts or pages as a group. Highlights the hierarchical organization of views, enabling the manipulation of UI parts or pages as a collective unit.', 'A view hierarchy can include views from components in the same ngModules or from different NG modules. Indicates the inclusivity of views from components within the same ngModules or different NG modules in a view hierarchy.', 'Metadata associates with templates and components via inline code or by reference, defining a particular view. Emphasizes the association of metadata with templates and components, specifying the definition of a view through inline code or by reference.']}, {'end': 3314.64, 'start': 2985.186, 'title': 'Angular templates and variables', 'summary': 'Explains the role of templates in angular change detection, types of templates, benefits of template variables, syntax for creating templates and available templates. it also covers the creation of components and templates, with a demonstration.', 'duration': 329.454, 'highlights': ['The chapter explains the role of templates in Angular change detection, types of templates, benefits of template variables, syntax for creating templates and available templates. The transcript provides a comprehensive explanation of the role of templates in Angular change detection, including the two types of templates (inline template and template file), benefits of template variables, syntax for creating templates, and available templates such as Material dashboard and paper Angular template.', 'The chapter covers the creation of components and templates, with a demonstration. It details the process of creating components and templates, emphasizing the loading of component files, the use of component decorators in TypeScript files, and the use of template URL and inline function for storing HTML related information. It also includes a practical demonstration of creating and displaying messages in HTML files and using inline way of printing HTML related information.']}, {'end': 3532.322, 'start': 3315.201, 'title': 'Angular interpolation and dynamic data display', 'summary': 'Covers the concept of interpolation in angular, defining dynamic data using properties within a class associated with a component, and displaying dynamic data in html files, enabling dynamic data display and object specification.', 'duration': 217.121, 'highlights': ['The chapter explains how to define dynamic data using properties within a class associated with a component, allowing for flexible and dynamic data display.', 'It covers the concept of interpolation in Angular, demonstrating how to dynamically display data by defining properties and calling them within inline templates or HTML files.', "The transcript elaborates on defining properties such as 'title' and 'my object' to showcase dynamic data display, providing a practical understanding of dynamic data specification and display in Angular."]}, {'end': 3730.548, 'start': 3533.603, 'title': 'Displaying object and array properties', 'summary': 'Demonstrates how to display object and array properties in a template using angular, highlighting the use of inline templates, specifying object properties, and displaying array properties within ul tags.', 'duration': 196.945, 'highlights': ["The chapter demonstrates how to display object properties, such as specifying 'object' and 'color' to display the property 'red'.", "It explains the process of displaying array properties within ul tags and using 'li' to display the array elements, exemplified by 'Wobbles' and 'AEI'.", 'The usage of inline templates and the requirement to specify object properties within double curly braces is emphasized.']}, {'end': 3975.173, 'start': 3731.189, 'title': 'Angular data binding basics', 'summary': 'Covers the basics of angular data binding, including ngfor and ngif usage, as well as the types of data binding in angular, such as one-way and two-way data binding, with examples and version compatibility.', 'duration': 243.984, 'highlights': ['Data binding has been a part of all angular versions starting from angular.js right through to the latest version, which is angular 9. Data binding has been consistent across different Angular versions, from angular.js to angular 9.', 'Two-way data binding allows synchronization of data in such a way that views can be updated using the models, and the models can be updated using the views. Two-way data binding enables bidirectional updating of views and models in Angular.', 'one-way data binding can be achieved through interpolation or string interpolation, property binding, and event binding. One-way data binding can be implemented through interpolation, property binding, and event binding.', 'ngFor is a condition for calling an array or specifying or assigning a particular array. ngFor is used for iterating through and displaying an array in Angular.', 'ngIf is used for implementing an if condition to display content based on the evaluation of the condition. ngIf is utilized for conditionally rendering content based on a specified condition.']}], 'duration': 1214.445, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU2760728.jpg', 'highlights': ["A template is a snippet of HTML guiding Angular's rendering of a component.", 'Views are organized hierarchically, allowing manipulation of UI parts as a group.', 'Metadata associates with templates and components, defining a particular view.', 'A view hierarchy can include views from components in the same or different NG modules.', 'The chapter explains the role of templates in Angular change detection and their types.', 'It covers the creation of components and templates, emphasizing the loading of component files.', 'The chapter explains how to define dynamic data using properties within a class associated with a component.', 'It covers the concept of interpolation in Angular, demonstrating dynamic data display.', 'The chapter demonstrates how to display object properties and array properties.', 'Data binding has been consistent across different Angular versions, from angular.js to angular 9.', 'Two-way data binding allows synchronization of data between views and models.', 'One-way data binding can be achieved through interpolation, property binding, and event binding.', 'ngFor is used for iterating through and displaying an array in Angular.', 'ngIf is utilized for conditionally rendering content based on a specified condition.']}, {'end': 6143.367, 'segs': [{'end': 4646.906, 'src': 'heatmap', 'start': 4189.575, 'weight': 0.704, 'content': [{'end': 4197.597, 'text': 'So basically the app component dot HTML file has taken data from the app component dot TS file now to show you guys another example of this.', 'start': 4189.575, 'duration': 8.022}, {'end': 4201.438, 'text': 'I just open the app component dot TS file and over here.', 'start': 4198.017, 'duration': 3.421}, {'end': 4204.399, 'text': "I'll create two new properties, which is course.", 'start': 4201.898, 'duration': 2.501}, {'end': 4209.24, 'text': "And I'll name it as angular and another property will be image.", 'start': 4205.899, 'duration': 3.341}, {'end': 4213.536, 'text': "Now within this image, I'll just paste in some random URL.", 'start': 4210.174, 'duration': 3.362}, {'end': 4218.919, 'text': "The reason why I'm adding these two properties is to show you guys some more examples using interpolation.", 'start': 4214.256, 'duration': 4.663}, {'end': 4221.361, 'text': "I'll just paste in some URL over here.", 'start': 4219.8, 'duration': 1.561}, {'end': 4226.884, 'text': "I'll save this and I'll get back to my app component dot HTML file over here.", 'start': 4222.161, 'duration': 4.723}, {'end': 4229.606, 'text': "I'll open some paragraph tag and over here.", 'start': 4227.204, 'duration': 2.402}, {'end': 4230.626, 'text': "I'll just type in something.", 'start': 4229.666, 'duration': 0.96}, {'end': 4234.168, 'text': "I'll say learn the course name with edureka.", 'start': 4231.006, 'duration': 3.162}, {'end': 4239.754, 'text': "I'll save this and I'll open my development server Okay.", 'start': 4235.689, 'duration': 4.065}, {'end': 4244.019, 'text': 'So as you can see over here in place, of course, I have angular which is the name of the course.', 'start': 4239.934, 'duration': 4.085}, {'end': 4247.783, 'text': 'Similarly, I can also return the image using interpolation.', 'start': 4244.86, 'duration': 2.923}, {'end': 4256.133, 'text': "So what I'm going to do is just open up a div tag and within this I'll open the image tag and the source will be the image.", 'start': 4248.064, 'duration': 8.069}, {'end': 4260.878, 'text': "I'll save this I'll get back to my development server.", 'start': 4258.675, 'duration': 2.203}, {'end': 4268.442, 'text': 'So as you can see over here the image has been added not just this you can also add an arithmetic expressions using interpolation.', 'start': 4261.601, 'duration': 6.841}, {'end': 4275.203, 'text': "So just to show you an example of this I'll type in 2 star 2 I'll save and I'll get back to my development server.", 'start': 4269.002, 'duration': 6.201}, {'end': 4280.084, 'text': 'So as you can see over here, I have the result of 2 stars 2 which is 4.', 'start': 4276.064, 'duration': 4.02}, {'end': 4281.025, 'text': 'So, basically,', 'start': 4280.084, 'duration': 0.941}, {'end': 4289.146, 'text': 'the component property that is specified within the two curly braces will be replaced by angular with the string value that is associated with that component property.', 'start': 4281.025, 'duration': 8.121}, {'end': 4295.72, 'text': "Now, like I've already shown you, all interpolation can be used for different purposes and different requirements.", 'start': 4289.855, 'duration': 5.865}, {'end': 4296.701, 'text': 'not just this.', 'start': 4295.72, 'duration': 0.981}, {'end': 4303.748, 'text': 'angular also allows you to configure the interpolation delimiter and use something of your choice instead of using the two curly braces.', 'start': 4296.701, 'duration': 7.047}, {'end': 4306.33, 'text': 'So now talking about property binding.', 'start': 4304.528, 'duration': 1.802}, {'end': 4311.891, 'text': 'In property binding the value flows from a components property into the target elements property.', 'start': 4307.108, 'duration': 4.783}, {'end': 4320.195, 'text': 'Therefore, property binding can be used to read or pull data from the target elements or to call a method that belongs to that target element.', 'start': 4312.291, 'duration': 7.904}, {'end': 4325.778, 'text': 'the events that are raised by the element can be acknowledged through event binding, which will be covered later on in the session.', 'start': 4320.195, 'duration': 5.583}, {'end': 4332.932, 'text': 'So, in general, you can say that the component property value will be set to the element property using property binding.', 'start': 4326.57, 'duration': 6.362}, {'end': 4335.153, 'text': 'now to show you guys how to make use of property binding.', 'start': 4332.932, 'duration': 2.221}, {'end': 4337.353, 'text': "What I'm going to do is just clear off this part.", 'start': 4335.453, 'duration': 1.9}, {'end': 4342.015, 'text': 'So property binding in angular is specified using square brackets.', 'start': 4338.394, 'duration': 3.621}, {'end': 4345.496, 'text': 'So in case I want to display the image using property binding.', 'start': 4342.755, 'duration': 2.741}, {'end': 4348.777, 'text': 'All I have to do is just make use of square brackets for the source.', 'start': 4345.876, 'duration': 2.901}, {'end': 4357.796, 'text': "So I'll just open the image tag and I'll type in source within square brackets and then I'll specify the name of the property which is image.", 'start': 4349.417, 'duration': 8.379}, {'end': 4363.44, 'text': "Okay So as you can see over here, I've specified source within square brackets and over here.", 'start': 4358.717, 'duration': 4.723}, {'end': 4366.023, 'text': 'There are no two curly braces like the previous example.', 'start': 4363.681, 'duration': 2.342}, {'end': 4369.265, 'text': "I'll just save this I'll get back to my development server.", 'start': 4366.423, 'duration': 2.842}, {'end': 4373.729, 'text': 'Okay So as you can see over here, the image has been returned using property binding.', 'start': 4369.946, 'duration': 3.783}, {'end': 4379.834, 'text': 'I know many of you have noticed that you can use interpolation and property binding interchangeably.', 'start': 4374.51, 'duration': 5.324}, {'end': 4386.673, 'text': 'In the previous example, I retrieve the same image without using the square brackets, but using the interpolation braces.', 'start': 4380.47, 'duration': 6.203}, {'end': 4393.437, 'text': 'So one thing I want you all to note over here is that when you need to set element properties to non-string data values,', 'start': 4387.174, 'duration': 6.263}, {'end': 4396.058, 'text': 'you must use property binding and not interpolation.', 'start': 4393.437, 'duration': 2.621}, {'end': 4399.16, 'text': 'Okay So now moving on towards event binding.', 'start': 4396.078, 'duration': 3.082}, {'end': 4405.801, 'text': 'The event binding feature lets you listen to certain events such as mouse movements, keystrokes, Etc.', 'start': 4399.818, 'duration': 5.983}, {'end': 4406.662, 'text': 'in angular,', 'start': 4405.801, 'duration': 0.861}, {'end': 4416.867, 'text': 'event binding can be achieved by specifying the target event with regular brackets on the left hand side of an equal to sign and the template statement on the right hand side within quotes.', 'start': 4406.662, 'duration': 10.205}, {'end': 4418.308, 'text': 'now to show you guys an example of this.', 'start': 4416.867, 'duration': 1.441}, {'end': 4420.549, 'text': "I'll open up my project and over here.", 'start': 4418.588, 'duration': 1.961}, {'end': 4421.81, 'text': "I'll just create a button.", 'start': 4420.809, 'duration': 1.001}, {'end': 4427.753, 'text': "So I'll just open I'll just create a div and within this I'll create a button.", 'start': 4421.85, 'duration': 5.903}, {'end': 4434.102, 'text': 'So here The target event is going to be click and the template statement will be go back.', 'start': 4428.814, 'duration': 5.288}, {'end': 4437.063, 'text': "I've not created this function yet.", 'start': 4435.682, 'duration': 1.381}, {'end': 4443.124, 'text': "I'll get back to the app component TS file and over here.", 'start': 4439.883, 'duration': 3.241}, {'end': 4444.864, 'text': "I'll just create a go back function.", 'start': 4443.444, 'duration': 1.42}, {'end': 4449.385, 'text': "So it's going to be a simple function, which is not really going to return anything.", 'start': 4446.005, 'duration': 3.38}, {'end': 4450.846, 'text': "So I'll just type in go back.", 'start': 4449.405, 'duration': 1.441}, {'end': 4455.907, 'text': "I'll save this I'll get back to my development server.", 'start': 4452.946, 'duration': 2.961}, {'end': 4459.969, 'text': 'Okay, so, as you can see over here, a button has been created.', 'start': 4456.465, 'duration': 3.504}, {'end': 4464.395, 'text': "now this button can be clicked, but since I've not specified anything within the function,", 'start': 4459.969, 'duration': 4.426}, {'end': 4467.859, 'text': 'this button is not doing anything as of now to know more about this.', 'start': 4464.395, 'duration': 3.464}, {'end': 4470.983, 'text': 'You can check out the angular 8 tutorial video from edureka.', 'start': 4468.039, 'duration': 2.944}, {'end': 4475.137, 'text': 'Okay, so now moving on towards two-way data binding in angular.', 'start': 4471.696, 'duration': 3.441}, {'end': 4483.579, 'text': 'So, basically, whenever event binding occurs and event handler will be set by angular for the target event when that particular event gets raised,', 'start': 4475.497, 'duration': 8.082}, {'end': 4486.5, 'text': 'the template statement is executed by the handler.', 'start': 4483.579, 'duration': 2.921}, {'end': 4492.901, 'text': 'generally, receivers are involved with template statements that perform actions in response to the event.', 'start': 4486.5, 'duration': 6.401}, {'end': 4496.562, 'text': 'event binding is used to convey information about the event.', 'start': 4492.901, 'duration': 3.661}, {'end': 4500.743, 'text': 'these data values of information include anything such as string, object, Etc.', 'start': 4496.562, 'duration': 4.181}, {'end': 4504.822, 'text': "Now let's move on and take a look at two-way data binding.", 'start': 4501.661, 'duration': 3.161}, {'end': 4510.464, 'text': 'angular allows two-way data binding that will allow your application to share data in two directions, that is,', 'start': 4504.822, 'duration': 5.642}, {'end': 4513.324, 'text': 'from the components to the templates and vice-versa.', 'start': 4510.464, 'duration': 2.86}, {'end': 4518.546, 'text': 'this makes sure that the models and the views present in your application are always synchronized.', 'start': 4513.324, 'duration': 5.222}, {'end': 4524.908, 'text': 'two-way data binding will perform two things, that is, setting the element property and listening to the element change events.', 'start': 4518.546, 'duration': 6.362}, {'end': 4529.496, 'text': 'The syntax of two-way data binding is a combination of property binding syntax.', 'start': 4525.555, 'duration': 3.941}, {'end': 4533.877, 'text': 'That is the square brackets and the event binding syntax, which is the regular bracket.', 'start': 4529.756, 'duration': 4.121}, {'end': 4538.458, 'text': 'So, basically, regular brackets will be present within square brackets.', 'start': 4534.357, 'duration': 4.101}, {'end': 4542.679, 'text': 'according to angular, this syntax resembles banana in a box.', 'start': 4538.458, 'duration': 4.221}, {'end': 4544.44, 'text': 'now to show this to you guys in detail.', 'start': 4542.679, 'duration': 1.761}, {'end': 4549.101, 'text': "What I'm going to do is open one of my projects that I've made use of two-way data binding.", 'start': 4544.84, 'duration': 4.261}, {'end': 4553.822, 'text': 'NG model that you see over here is an example of two-way data binding.', 'start': 4550.321, 'duration': 3.501}, {'end': 4560.004, 'text': 'Now in this project you will be able to see that when I make changes in the views it will be reflected in the models.', 'start': 4554.702, 'duration': 5.302}, {'end': 4563.165, 'text': "Now, this is because I've made use of two-way data binding over here.", 'start': 4560.384, 'duration': 2.781}, {'end': 4567.206, 'text': "So what I'm going to do is just open up my project and over here.", 'start': 4563.565, 'duration': 3.641}, {'end': 4569.407, 'text': "I'll try to change the name of the course.", 'start': 4567.566, 'duration': 1.841}, {'end': 4574.448, 'text': "So in case I don't make use of two-way data binding when I make changes to the name over here,", 'start': 4570.007, 'duration': 4.441}, {'end': 4576.989, 'text': 'it should not be reflected to the name that is present over here.', 'start': 4574.448, 'duration': 2.541}, {'end': 4579.77, 'text': 'This name is reflected from the models.', 'start': 4577.509, 'duration': 2.261}, {'end': 4582.271, 'text': "What I'm going to do is to try to make changes to this.", 'start': 4580.39, 'duration': 1.881}, {'end': 4588.775, 'text': 'So as you can see when I make changes to the views the corresponding change is reflected in the models as well.', 'start': 4582.944, 'duration': 5.831}, {'end': 4591.481, 'text': 'So this was an example of two-way data binding.', 'start': 4588.795, 'duration': 2.686}, {'end': 4599.395, 'text': 'So what exactly are Angular directives?', 'start': 4597.594, 'duration': 1.801}, {'end': 4605.658, 'text': 'Angular directives are basically functions that are executed whenever they are discovered on the DOM by the Angular compiler.', 'start': 4599.795, 'duration': 5.863}, {'end': 4609.82, 'text': "These directives impart the application's HTML through an advanced syntax.", 'start': 4606.038, 'duration': 3.782}, {'end': 4615.723, 'text': 'They have distinct names that can either be predefined by Angular or custom names defined by the user itself.', 'start': 4610.36, 'duration': 5.363}, {'end': 4620.465, 'text': 'A directive class in Angular is defined using the iterate directive decorator.', 'start': 4616.283, 'duration': 4.182}, {'end': 4625.128, 'text': 'Directives provide instructions through which the templates transform the DOM dynamically.', 'start': 4620.986, 'duration': 4.142}, {'end': 4628.03, 'text': "So now let's move on towards the types of directives.", 'start': 4625.808, 'duration': 2.222}, {'end': 4634.455, 'text': 'There are basically four types of directives in Angular, that is, the component directives, the structural directives,', 'start': 4628.791, 'duration': 5.664}, {'end': 4636.537, 'text': 'attribute directives and the custom directives.', 'start': 4634.455, 'duration': 2.082}, {'end': 4639.119, 'text': 'Components are nothing but a type of directives.', 'start': 4637.117, 'duration': 2.002}, {'end': 4646.906, 'text': 'The reason why they are defined specially under the Ether8 component decorator is that components are very much distinctive and central to Angular.', 'start': 4639.399, 'duration': 7.507}], 'summary': 'Angular app demonstrates interpolation, property binding, event binding, two-way data binding, and directives.', 'duration': 457.331, 'max_score': 4189.575, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU4189575.jpg'}, {'end': 4625.128, 'src': 'embed', 'start': 4599.795, 'weight': 1, 'content': [{'end': 4605.658, 'text': 'Angular directives are basically functions that are executed whenever they are discovered on the DOM by the Angular compiler.', 'start': 4599.795, 'duration': 5.863}, {'end': 4609.82, 'text': "These directives impart the application's HTML through an advanced syntax.", 'start': 4606.038, 'duration': 3.782}, {'end': 4615.723, 'text': 'They have distinct names that can either be predefined by Angular or custom names defined by the user itself.', 'start': 4610.36, 'duration': 5.363}, {'end': 4620.465, 'text': 'A directive class in Angular is defined using the iterate directive decorator.', 'start': 4616.283, 'duration': 4.182}, {'end': 4625.128, 'text': 'Directives provide instructions through which the templates transform the DOM dynamically.', 'start': 4620.986, 'duration': 4.142}], 'summary': 'Angular directives execute functions on dom discovery, transforming html dynamically.', 'duration': 25.333, 'max_score': 4599.795, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU4599795.jpg'}, {'end': 5308.63, 'src': 'heatmap', 'start': 5069.168, 'weight': 0, 'content': [{'end': 5070.529, 'text': "So I'll just import forms module.", 'start': 5069.168, 'duration': 1.361}, {'end': 5076.873, 'text': "Okay Next, I'll open the new comp.ts file, add two new properties that is fruits and the selected fruit.", 'start': 5071.129, 'duration': 5.744}, {'end': 5092.142, 'text': "Next, I'll create a new function that is the onSelect function which will return the details of the selected fruit.", 'start': 5086.917, 'duration': 5.225}, {'end': 5101.03, 'text': 'So onSelect fruit which is of type fruit and return type will be void.', 'start': 5092.803, 'duration': 8.227}, {'end': 5108.057, 'text': 'This.selectedFruit equals fruit.', 'start': 5103.372, 'duration': 4.685}, {'end': 5113.451, 'text': "Okay, so now I'll open the newcomp.component.html file.", 'start': 5109.71, 'duration': 3.741}, {'end': 5118.133, 'text': "Over here, I'm going to paste the code that I have already written for ng-if and ng-for.", 'start': 5113.912, 'duration': 4.221}, {'end': 5122.195, 'text': "Okay, so I'll save this and I'll get back to my development server.", 'start': 5118.894, 'duration': 3.301}, {'end': 5126.63, 'text': 'Okay, so as you can see on the screen, I have the list of fruits that are available.', 'start': 5123.288, 'duration': 3.342}, {'end': 5130.272, 'text': "When I click on any of these fruits, you'll be able to see the details of them.", 'start': 5127.13, 'duration': 3.142}, {'end': 5132.554, 'text': 'So I hope you guys have understood till here.', 'start': 5130.973, 'duration': 1.581}, {'end': 5136.617, 'text': 'The next structural directive that we learn is the star ng switch directive.', 'start': 5132.934, 'duration': 3.683}, {'end': 5141.019, 'text': 'The star ng switch directive is used to add or remove templates from the DOM.', 'start': 5137.357, 'duration': 3.662}, {'end': 5144.642, 'text': 'This is done by specifying an expression that is to be matched.', 'start': 5141.38, 'duration': 3.262}, {'end': 5148.728, 'text': 'The star ng if directive is actually a set of collaborating directives.', 'start': 5145.222, 'duration': 3.506}, {'end': 5155.54, 'text': 'The expression that is required to be matched will be specified using the ng switch case directive within the same container element.', 'start': 5149.069, 'duration': 6.471}, {'end': 5159.126, 'text': "So what I'm going to do is just paste the code that I have already written.", 'start': 5156.742, 'duration': 2.384}, {'end': 5167.621, 'text': 'This code will produce the list of fruits within the dropdown list and I will be able to select any of them.', 'start': 5162.779, 'duration': 4.842}, {'end': 5171.703, 'text': "Okay So I'll just save this and I'll get back to my development server.", 'start': 5168.342, 'duration': 3.361}, {'end': 5177.386, 'text': 'Okay So as you can see on the screen, I have a dropdown list and a message saying no fruit selected.', 'start': 5172.424, 'duration': 4.962}, {'end': 5183.129, 'text': 'When I click on any of these, I will get the corresponding message instead of no fruit selected, which is the default case message.', 'start': 5177.686, 'duration': 5.443}, {'end': 5185.65, 'text': 'Okay, so I hope you guys have understood till here.', 'start': 5183.829, 'duration': 1.821}, {'end': 5188.071, 'text': 'Now moving on towards attribute directives.', 'start': 5186.21, 'duration': 1.861}, {'end': 5194.774, 'text': 'Attribute directives are used to modify the behavior or appearance of some existing element, component or some other directives.', 'start': 5188.631, 'duration': 6.143}, {'end': 5203.077, 'text': 'As the name suggests, these directives are utilized as attributes of elements within templates and they resemble the HTML attributes.', 'start': 5195.534, 'duration': 7.543}, {'end': 5206.499, 'text': 'One of the most common examples is the ngModel directive.', 'start': 5203.718, 'duration': 2.781}, {'end': 5209.42, 'text': 'This directive is used for two-way data binding.', 'start': 5207.179, 'duration': 2.241}, {'end': 5214.744, 'text': 'It is commonly used to modify the behavior of an existing element that is usually the input element.', 'start': 5210.001, 'duration': 4.743}, {'end': 5221.087, 'text': "ngModel sets the input element's display value property and it will also respond to change events that take place.", 'start': 5215.384, 'duration': 5.703}, {'end': 5224.97, 'text': 'For instance, consider the ngModel directive used in the previous example.', 'start': 5221.428, 'duration': 3.542}, {'end': 5229.957, 'text': "Okay, so as you can see on the screen, I've made use of the ngModel directive.", 'start': 5226.254, 'duration': 3.703}, {'end': 5233.079, 'text': 'And this directive is used within the input tag.', 'start': 5230.537, 'duration': 2.542}, {'end': 5240.025, 'text': 'So what basically happens over here is, in case I make changes to the name of the fruit on the views, it will get reflected in the models as well.', 'start': 5233.4, 'duration': 6.625}, {'end': 5242.186, 'text': 'So let me just get back to my development server.', 'start': 5240.405, 'duration': 1.781}, {'end': 5245.169, 'text': "Okay, so what I'm going to do over here is try to change the name of apple.", 'start': 5242.547, 'duration': 2.622}, {'end': 5249.317, 'text': 'Okay, so, as you can see, when I make changes to the name of Apple,', 'start': 5246.155, 'duration': 3.162}, {'end': 5253.239, 'text': 'the corresponding change is reflected in the name of the fruit present in the models as well.', 'start': 5249.317, 'duration': 3.922}, {'end': 5255.501, 'text': 'This is an example of two-way data binding.', 'start': 5253.579, 'duration': 1.922}, {'end': 5258.322, 'text': 'Here, the models are modified using the views.', 'start': 5256.001, 'duration': 2.321}, {'end': 5261.804, 'text': 'The ngModel directive is a part of form control module.', 'start': 5258.842, 'duration': 2.962}, {'end': 5265.566, 'text': 'The form control module is used to keep a track of validation status,', 'start': 5262.064, 'duration': 3.502}, {'end': 5269.769, 'text': 'the value and the user interaction in order to keep the models in sync with the views.', 'start': 5265.566, 'duration': 4.203}, {'end': 5272.751, 'text': 'So now moving on towards the custom attribute directives.', 'start': 5270.189, 'duration': 2.562}, {'end': 5278.355, 'text': 'The minimum requirement for an attribute directive is a class with the at the rate directive decorator.', 'start': 5273.311, 'duration': 5.044}, {'end': 5281.959, 'text': 'This class contains the selector that will identify the attribute.', 'start': 5278.776, 'duration': 3.183}, {'end': 5289.125, 'text': 'To create this directive class using the Angular CLI, you just have to type in the command ng generate directive,', 'start': 5282.419, 'duration': 6.706}, {'end': 5290.486, 'text': 'followed by the name of the directive.', 'start': 5289.125, 'duration': 1.361}, {'end': 5300.415, 'text': "So what I'm going to do is just open up the command prompt and over here I'll type ng generate directive my directive.", 'start': 5291.007, 'duration': 9.408}, {'end': 5308.63, 'text': 'So this will create two files that is the directive.ts file and the directive.spec.ts file.', 'start': 5302.844, 'duration': 5.786}], 'summary': 'Developed components, used ng switch & ngmodel for data binding, and created custom attribute directives.', 'duration': 38.889, 'max_score': 5069.168, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU5069168.jpg'}], 'start': 3975.173, 'title': 'Angular development fundamentals', 'summary': 'Covers one-way data binding, interpolation, property binding, event binding, forms, directives, dependency injection, and services in angular, demonstrating various concepts and their implementations with examples and use cases.', 'chapters': [{'end': 4111.39, 'start': 3975.173, 'title': 'Angular one-way data binding', 'summary': "Explains one-way data binding in angular, covering interpolation, property binding, and event binding, while demonstrating interpolation binding and creating a new angular project using the 'ng new' command.", 'duration': 136.217, 'highlights': ['Interpolation binding is used to return HTML output from TypeScript code to the views. Interpolation binding allows returning HTML output from TypeScript to the views, enhancing the user interface experience.', "Creating a new Angular project using the 'ng new' command involves responding to specific questions, such as Angular routing preferences and style sheet selection. The process of creating a new Angular project involves responding to questions regarding Angular routing preferences and style sheet selection, with a demonstration of using 'ng new' command to create a project.", "The 'ng serve' command serves the project on localhost, with an option to open the project directly on port 4200. The 'ng serve' command serves the project on localhost, with an option to open the project directly on port 4200, facilitating easy project testing and development."]}, {'end': 4957.05, 'start': 4113.786, 'title': 'Angular interpolation and binding', 'summary': 'Covers the basics of angular interpolation, property binding, event binding, two-way data binding, and directives. it explains how to use interpolation to display data, property binding to set element properties, and event binding to acknowledge events. additionally, it covers two-way data binding for synchronized data sharing and different types of directives in angular.', 'duration': 843.264, 'highlights': ['Angular Interpolation The chapter explains how to use interpolation to display dynamic data in Angular templates, demonstrated by setting the title of the project and using interpolation to display course name and image in the app component dot HTML file.', "Property Binding It covers the concept of property binding where the value flows from a component's property into the target element's property, demonstrated by using square brackets for the source to display an image using property binding.", 'Event Binding The chapter discusses event binding to acknowledge events raised by elements, demonstrated by creating a button with a click event and a corresponding function to handle it.', 'Two-way Data Binding It explains two-way data binding for synchronized data sharing between components and templates, demonstrated by changing the name of the course and showing the corresponding change in models using NG model.', 'Angular Directives The chapter explores Angular directives, including structural directives such as ngFor and ngIf, and the use of ngTemplate element to render HTML in Angular.']}, {'end': 5281.959, 'start': 4957.831, 'title': 'Angular forms and directives', 'summary': 'Covers creating interfaces, importing modules, adding properties and functions, using ngif and ngfor directives, and understanding attribute directives and two-way data binding in angular forms.', 'duration': 324.128, 'highlights': ['The ngModel directive is used for two-way data binding, modifying the behavior of an input element, and reflects changes in both the views and models.', 'Attribute directives are utilized as attributes of elements within templates and are used to modify the behavior or appearance of existing elements, components, or other directives.', 'The star ng switch directive is used to add or remove templates from the DOM by specifying an expression to be matched, and is accompanied by the ng switch case directive within the same container element.', "Creating an interface called 'fruit' with properties 'id' (number) and 'name' (string), and importing it to create a list of fruits with IDs and names.", 'Adding the forms module to appmodule.ts and including it within imports to enable form-related functionalities.']}, {'end': 5550.154, 'start': 5282.419, 'title': 'Angular directive creation and usage', 'summary': 'Explains how to create a directive using angular cli, demonstrates its usage, and provides insights on dependency injection in angular, with examples and use cases.', 'duration': 267.735, 'highlights': ["Angular CLI allows easy creation of directives using the command 'ng generate directive '. The Angular CLI simplifies the creation of directives by using the command 'ng generate directive '.", 'Directives should be declared within modules, similar to components, and auto-imported if the relevant extension is added. It is essential to declare directives within modules, and auto-importing can occur with the appropriate extension.', "The '@Directive' decorator specifies the CSS attribute selector for the directive, such as 'appMyDirective'. The '@Directive' decorator defines the CSS attribute selector, e.g., 'appMyDirective', for the directive.", 'Dependency injection is a vital design pattern in Angular, injecting required dependencies into classes rather than hardcoding them. Dependency injection is a crucial design pattern in Angular, injecting necessary dependencies into classes instead of hardcoding them.', 'Dependency injection is recommended in scenarios involving configuration data, multiple components with the same dependency, distinct implementations, or different instances with varied configurations. Dependency injection is advised in situations like configuration data, shared dependencies, distinct implementations, or varied instance configurations.']}, {'end': 6143.367, 'start': 5550.194, 'title': 'Dependency injection & services in angular', 'summary': 'Discusses the concept of dependency injection and its implementation in angular, highlighting the drawbacks of tightly coupled code, the benefits of using dependency injection, and the role of services in angular application development.', 'duration': 593.173, 'highlights': ['Dependency injection allows for flexible code, as changes to dependencies do not require modifications to the main class. The code demonstrates that making changes to dependencies like processor, display, or camera classes would require corresponding modifications to the constructor of the mobile class, indicating inflexible code.', "Dependency injection facilitates testing and maintenance, making the code more efficient and usable. By using dependency injection, the code becomes more testable, allowing for easy testing of various parameters and ensuring the application's functionality, thus enhancing its usability.", 'Dependency injection framework manages dependencies, providing a solution for managing a large number of dependencies in the application. The dependency injection framework includes an injector that registers and manages all the dependencies of the application, addressing the challenge of managing numerous dependencies effectively.', 'Services in Angular have a well-defined purpose and can perform various tasks, such as fetching data and checking user input validity. Services in Angular have a specific purpose and can perform tasks such as fetching data, checking user input validity, and returning output, enhancing the versatility of the application.', 'Services in Angular follow the single responsibility principle, allowing for separation of concerns and reusability without redundancy. The separation of services from components in Angular follows the single responsibility principle, ensuring that services can be used anywhere without rewriting code, thus reducing redundancy.']}], 'duration': 2168.194, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU3975173.jpg', 'highlights': ['Covers one-way data binding, interpolation, property binding, event binding, forms, directives, dependency injection, and services in angular, demonstrating various concepts and their implementations with examples and use cases.', "The 'ng serve' command serves the project on localhost, with an option to open the project directly on port 4200, facilitating easy project testing and development.", 'The chapter explores Angular directives, including structural directives such as ngFor and ngIf, and the use of ngTemplate element to render HTML in Angular.', 'Dependency injection is a crucial design pattern in Angular, injecting necessary dependencies into classes instead of hardcoding them.', 'Services in Angular have a specific purpose and can perform tasks such as fetching data, checking user input validity, and returning output, enhancing the versatility of the application.']}, {'end': 7703.11, 'segs': [{'end': 6299.568, 'src': 'embed', 'start': 6265.089, 'weight': 6, 'content': [{'end': 6269.15, 'text': "and it's very essential functionality for every front-end framework.", 'start': 6265.089, 'duration': 4.061}, {'end': 6277.512, 'text': 'It enables programmers to create modern single-page applications with numerous views that may be loaded once by a browser.', 'start': 6269.71, 'duration': 7.802}, {'end': 6288.234, 'text': 'Now once a browser is loaded a single-page application should be viewed in different and numerous ways and routing comes in handy with that.', 'start': 6278.152, 'duration': 10.082}, {'end': 6299.568, 'text': 'So let me give you some instance of actions that user do while browsing through an application now, it could be like you type a URL into address bar.', 'start': 6289.051, 'duration': 10.517}], 'summary': 'Front-end routing enables modern single-page applications with multiple views and user actions like typing a url.', 'duration': 34.479, 'max_score': 6265.089, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU6265089.jpg'}, {'end': 7028.322, 'src': 'embed', 'start': 6974.54, 'weight': 1, 'content': [{'end': 6984.463, 'text': 'So in order to make sure that we import our router services in our angular application, we need to make sure that we give this particular command.', 'start': 6974.54, 'duration': 9.923}, {'end': 6994.026, 'text': 'So basically the angular router is an optional service and that again presents a particular component view for our given URL.', 'start': 6985.203, 'duration': 8.823}, {'end': 6996.694, 'text': 'It is not part of angular core.', 'start': 6994.913, 'duration': 1.781}, {'end': 7000.615, 'text': "That's why it's in its own library package.", 'start': 6997.314, 'duration': 3.301}, {'end': 7005.817, 'text': "That's why you're supposed to be using at angular slash router now.", 'start': 7001.115, 'duration': 4.702}, {'end': 7010.759, 'text': 'next, in order to configure, there is a bunch of code structure that you have to follow.', 'start': 7005.817, 'duration': 4.942}, {'end': 7017.561, 'text': 'So basically a rooted angular application has one singleton instance of router service.', 'start': 7011.339, 'duration': 6.222}, {'end': 7028.322, 'text': 'Now, when the browser URL changes, the router looks for corresponding route from which it can actually determine the component to display.', 'start': 7018.28, 'duration': 10.042}], 'summary': "Angular router is an optional service providing component views for urls, not in core, to be imported using 'angular/router'.", 'duration': 53.782, 'max_score': 6974.54, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU6974540.jpg'}, {'end': 7134.698, 'src': 'embed', 'start': 7074.952, 'weight': 0, 'content': [{'end': 7084.441, 'text': 'navigational error, root config, load, start or load, and again there are a couple of more events that you can look up for.', 'start': 7074.952, 'duration': 9.489}, {'end': 7087.684, 'text': "with that said, let's dive into the demonstration part.", 'start': 7084.441, 'duration': 3.243}, {'end': 7093.803, 'text': "Now for the demonstration, I'm gonna consider Visual Studio Code here.", 'start': 7088.922, 'duration': 4.881}, {'end': 7102.205, 'text': "So firstly, what I'm gonna have to do to start with our routing project is we need to generate a routing project.", 'start': 7094.523, 'duration': 7.682}, {'end': 7116.213, 'text': "For that I'm gonna take terminal and in a new terminal I'm gonna say this command where it goes like ng new and any project name that you're creating.", 'start': 7102.786, 'duration': 13.427}, {'end': 7121.475, 'text': 'Now say I will create a project name called angular routing.', 'start': 7116.533, 'duration': 4.942}, {'end': 7124.916, 'text': 'You can select any name that you want.', 'start': 7122.295, 'duration': 2.621}, {'end': 7134.698, 'text': "With this I'm gonna have to give a command dash dash routing indicating that this is a routing project.", 'start': 7125.596, 'duration': 9.102}], 'summary': 'Demonstration on generating a routing project using ng new command in visual studio code.', 'duration': 59.746, 'max_score': 7074.952, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU7074952.jpg'}, {'end': 7561.41, 'src': 'embed', 'start': 7520.478, 'weight': 2, 'content': [{'end': 7528.123, 'text': "I just say export const because I'm calling this particular constant.", 'start': 7520.478, 'duration': 7.645}, {'end': 7530.104, 'text': 'Routing components.', 'start': 7528.963, 'duration': 1.141}, {'end': 7536.243, 'text': 'and I create an array over here.', 'start': 7534.122, 'duration': 2.121}, {'end': 7541.865, 'text': 'So here, if I create an array, both these things will be called inside.', 'start': 7537.083, 'duration': 4.782}, {'end': 7552.748, 'text': 'So I say student list component and we have our teacher list component.', 'start': 7543.005, 'duration': 9.743}, {'end': 7554.429, 'text': 'I say save.', 'start': 7553.889, 'duration': 0.54}, {'end': 7558.228, 'text': "Now let's go ahead and import it.", 'start': 7555.987, 'duration': 2.241}, {'end': 7561.41, 'text': 'That should be done in our app module TypeScript file.', 'start': 7558.448, 'duration': 2.962}], 'summary': 'Creating and importing components for student and teacher lists in typescript.', 'duration': 40.932, 'max_score': 7520.478, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU7520478.jpg'}], 'start': 6143.987, 'title': 'Angular routing and navigation', 'summary': 'Discusses the essentials of angular routing and navigation, emphasizing its significance in directing users to appropriate web pages and enabling the creation of modern single-page applications, covering single-page app routing techniques, angular routing project demonstration, and configuring routes and components using typescript.', 'chapters': [{'end': 6754.568, 'start': 6143.987, 'title': 'Angular routing and navigation', 'summary': 'Discusses the essentials of angular routing and navigation, including the process, architecture, and common tasks, emphasizing the significance of routing in directing users to appropriate web pages and enabling the creation of modern single-page applications with numerous views.', 'duration': 610.581, 'highlights': ["The development server is run directly on localhost port number 4200, in case you do not make use of the hyphen or command. Specifying the hyphen or extension with the 'ng serve' command runs the development server directly on localhost port number 4200.", 'Angular routing is nothing but a technique for directing users to appropriate web page so they can complete their tasks. Angular routing is a technique for directing users to appropriate web pages to complete tasks.', "Routing is a process of partitioning an application's UI using URLs and it's very essential functionality for every front-end framework. Routing is essential for partitioning an application's UI using URLs in every front-end framework.", "When Angular router receives a URL, it applies redirects, recognizes the status of the router, executes guards and data resolutions, activates required components, and navigates and updates browser's location. The five major operations for Angular routing include applying redirects, recognizing router status, executing guards and data resolutions, activating required components, and navigating and updating browser's location.", 'To generate an application with routing enabled, angular CLI is used to generate a basic angular application with application routing module called app routing module. Angular CLI generates a basic Angular application with the application routing module called app routing module to enable routing.']}, {'end': 7074.952, 'start': 6755.345, 'title': 'Single-page app routing techniques', 'summary': 'Introduces single-page app routing techniques in angular, emphasizing the importance of choosing a routing strategy early, demonstrating the steps to create a sample application, defining routes, controlling navigation with ui elements, adding a 404 page, and understanding router references and events.', 'duration': 319.607, 'highlights': ['The importance of choosing a routing strategy early It is crucial to choose a routing strategy early in the development of the project, as visitors to the site depend only on application URL references in production.', "Demonstrating the steps to create a sample application The process involves creating an Angular project, generating components like 'crisis list' and 'heroes list', and using 'ng serve' to compile and output the application.", 'Defining routes and controlling navigation with UI elements The process includes opening app module TS file, updating components in app.component.html, and controlling navigation using button tags and CSS code lines.', "Understanding router references and events Router imports, configuration, router outlet, and router events are explained, emphasizing the router's role in displaying components, emitting navigation events, and its library package at angular/router."]}, {'end': 7355.283, 'start': 7074.952, 'title': 'Angular routing project demonstration', 'summary': 'Covers the process of generating a routing project using angular, including creating the project, configuring routes, and generating components.', 'duration': 280.331, 'highlights': ['Generating a routing project using Angular The chapter demonstrates the process of generating a routing project using Angular, including creating the project with routing, configuring routes, and generating components.', 'Creating the project with routing and styling selection The process of creating a project with routing and selecting a styling sheet is explained, with the demonstration of package installation and project creation.', 'Configuring routes for the application The chapter covers the configuration of routes for the application, including importing the necessary modules and making declarations in the routing module TypeScript file.', 'Generating components in the routing project The process of generating components in the routing project is demonstrated, including the command for creating a new component and considerations for component naming and styling.']}, {'end': 7703.11, 'start': 7355.283, 'title': 'Configuring routes and components', 'summary': 'Covers the creation of components and the configuration of routes using typescript, including the creation of objects for each route, the importation of components to avoid redundancy, and the display of the routing output using the router outlet tag.', 'duration': 347.827, 'highlights': ['Creation of components and configuration of routes using TypeScript. The chapter covers the creation of components and the configuration of routes using TypeScript.', 'Creation of objects for each route. Objects are created for each route to configure the paths and components for the application.', 'Importation of components to avoid redundancy. Importing components to avoid redundancy in both the routing module file and app module file.', 'Display of the routing output using the router outlet tag. The router outlet tag is used to display the routing output, ensuring it is always present.', "Usage of npm start to view the output on localhost:4200. The command 'npm start' is used to view the output on localhost:4200 after the configuration and compilation are completed."]}], 'duration': 1559.123, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU6143987.jpg', 'highlights': ['Angular CLI generates a basic Angular application with the application routing module called app routing module to enable routing.', "Routing is essential for partitioning an application's UI using URLs in every front-end framework.", "The five major operations for Angular routing include applying redirects, recognizing router status, executing guards and data resolutions, activating required components, and navigating and updating browser's location.", 'It is crucial to choose a routing strategy early in the development of the project, as visitors to the site depend only on application URL references in production.', "Router imports, configuration, router outlet, and router events are explained, emphasizing the router's role in displaying components, emitting navigation events, and its library package at angular/router.", 'The chapter demonstrates the process of generating a routing project using Angular, including creating the project with routing, configuring routes, and generating components.', 'The process of creating a project with routing and selecting a styling sheet is explained, with the demonstration of package installation and project creation.', 'The chapter covers the configuration of routes for the application, including importing the necessary modules and making declarations in the routing module TypeScript file.', 'The chapter covers the creation of components and the configuration of routes using TypeScript.', 'The router outlet tag is used to display the routing output, ensuring it is always present.']}, {'end': 9716.857, 'segs': [{'end': 7825.581, 'src': 'embed', 'start': 7771.627, 'weight': 6, 'content': [{'end': 7776.21, 'text': "so i'm just going to go ahead and add a button over here.", 'start': 7771.627, 'duration': 4.583}, {'end': 7781.415, 'text': 'i say button now.', 'start': 7776.21, 'duration': 5.205}, {'end': 7784.638, 'text': 'this will keep it enabled.', 'start': 7781.415, 'duration': 3.223}, {'end': 7800.188, 'text': 'we want our student to be displayed here and similarly i say router link for our teachers.', 'start': 7784.638, 'duration': 15.55}, {'end': 7817.757, 'text': 'i close the tag And once I have finished this, adding anchor and button tags and just save.', 'start': 7800.188, 'duration': 17.569}, {'end': 7822.6, 'text': "let's go ahead and see this, as you can see clicking on this buttons.", 'start': 7817.757, 'duration': 4.843}, {'end': 7825.581, 'text': 'This works now.', 'start': 7823.52, 'duration': 2.061}], 'summary': 'Developed a webpage with buttons for student and teacher, enabling navigation.', 'duration': 53.954, 'max_score': 7771.627, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU7771627.jpg'}, {'end': 8409.711, 'src': 'embed', 'start': 8380.487, 'weight': 1, 'content': [{'end': 8386.296, 'text': "In the following example, I'll show you how to display the current value using interpolation in the template.", 'start': 8380.487, 'duration': 5.809}, {'end': 8401.025, 'text': 'So when you modify the form control element, this displayed value will change accordingly.', 'start': 8395.222, 'duration': 5.803}, {'end': 8409.711, 'text': "Angular's reactive forms give you access to the details about some control through the properties and methods provided with the instances.", 'start': 8401.626, 'duration': 8.085}], 'summary': 'Demonstrates using interpolation to display current value in angular reactive forms.', 'duration': 29.224, 'max_score': 8380.487, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU8380486.jpg'}, {'end': 8565.555, 'src': 'embed', 'start': 8522.641, 'weight': 3, 'content': [{'end': 8528.606, 'text': 'In the next example, we will see how to manage multiple form control instances in a single group.', 'start': 8522.641, 'duration': 5.965}, {'end': 8537.112, 'text': "What we're going to do is we will import the form group and form control classes present in the at angular slash forms package.", 'start': 8529.166, 'duration': 7.946}, {'end': 8548.571, 'text': "So the first thing we're gonna do here is to create a form group instance.", 'start': 8544.67, 'duration': 3.901}, {'end': 8565.555, 'text': "Now let's create a property called the employee form and set this to a new form group instance.", 'start': 8558.713, 'duration': 6.842}], 'summary': 'Demonstrating how to manage multiple form control instances in a single group using angular forms package.', 'duration': 42.914, 'max_score': 8522.641, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU8522641.jpg'}, {'end': 9058.576, 'src': 'embed', 'start': 9019.164, 'weight': 4, 'content': [{'end': 9031.932, 'text': 'So I will just specify the ID as 101, name as John designation as project manager and set the initial skill to the scale present at an index number 0,', 'start': 9019.164, 'duration': 12.768}, {'end': 9032.633, 'text': 'which is Java.', 'start': 9031.932, 'duration': 0.701}, {'end': 9056.035, 'text': 'This component is just like any other component you create in an angular project.', 'start': 9051.832, 'duration': 4.203}, {'end': 9058.576, 'text': "There's nothing that is specific to the form.", 'start': 9056.475, 'duration': 2.101}], 'summary': 'John, id 101, is designated as a project manager with initial skill in java.', 'duration': 39.412, 'max_score': 9019.164, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU9019164.jpg'}, {'end': 9198.759, 'src': 'embed', 'start': 9162.196, 'weight': 0, 'content': [{'end': 9170.981, 'text': "you're going to have to remove the reactive form tag from the app.component.html and replace it with the app-tdf tag.", 'start': 9162.196, 'duration': 8.785}, {'end': 9181.527, 'text': 'So next, we are going to be creating the HTML form template.', 'start': 9177.805, 'duration': 3.722}, {'end': 9185.389, 'text': 'I will copy paste the code that I already have.', 'start': 9182.387, 'duration': 3.002}, {'end': 9192.256, 'text': 'and this is what it looks like.', 'start': 9191.015, 'duration': 1.241}, {'end': 9196.538, 'text': 'So here we have specified the name designation and the skills.', 'start': 9193.256, 'duration': 3.282}, {'end': 9198.759, 'text': 'Please note that for skills.', 'start': 9196.898, 'duration': 1.861}], 'summary': 'Replace reactive form with app-tdf tag, create html form template', 'duration': 36.563, 'max_score': 9162.196, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU9162196.jpg'}], 'start': 7703.11, 'title': 'Angular forms and crud operations', 'summary': 'Covers creating anchor and button tags, routing urls, types of angular forms, form building blocks, reactive forms, form controls manipulation, managing multiple form control instances, and understanding crud operations, aiming to improve user experience and database management.', 'chapters': [{'end': 7825.581, 'start': 7703.11, 'title': 'Routing tutorial update', 'summary': 'Explains how to create anchor and button tags to link student and teacher urls, allowing users to navigate within the system, resulting in improved user experience.', 'duration': 122.471, 'highlights': ['Creating anchor and button tags to link student and teacher URLs for improved user navigation', 'Demonstrating the functionality of the created buttons in the system']}, {'end': 8170.57, 'start': 7826.201, 'title': 'Angular forms tutorial', 'summary': 'Discusses the basics of angular forms, highlighting the types of forms (reactive and template-driven), their building blocks, differences, testing, mutability, and scalability, while emphasizing the advantages of reactive forms in testing and scalability.', 'duration': 344.369, 'highlights': ['Angular forms assist in managing user input, with the majority of web applications relying on forms for various purposes, such as retrieving search results and entering emails. Web applications depend on forms for various purposes like retrieving search results, entering emails, and submitting details.', 'Angular provides two types of forms: reactive and template-driven, with common building blocks including form control, form group, form array, and control value accessor. Angular provides two types of forms: reactive and template-driven, with common building blocks including form control, form group, form array, and control value accessor.', 'Reactive forms, built within the component class, are more explicit and allow easier testing and scalability compared to template-driven forms. Reactive forms, built within the component class, allow easier testing and scalability compared to template-driven forms.']}, {'end': 8501.572, 'start': 8170.57, 'title': 'Reactive forms in angular', 'summary': 'Explains the process of creating and manipulating form controls in angular reactive forms and also covers topics like updating templates, displaying components, and controlling form values.', 'duration': 331.002, 'highlights': ['The form control class is the basic building block in reactive forms, allowing for tasks like updating, checking, and validation.', 'Linking form controls to form control elements in the template is crucial in updating the template.', 'Displaying and changing form control values can be achieved through the value changes observable and the value property.', 'The set value method of a form control instance can update the value and validate its structure, useful for retrieving form data from a backend API.', 'Grouping form controls is essential in organizing and managing related form inputs.']}, {'end': 9276.349, 'start': 8501.572, 'title': 'Managing multiple form control instances', 'summary': 'Explains how to manage multiple form control instances in a single group, linking the form group model with the view, and capturing form data, while also demonstrating the process of creating template-driven forms in angular.', 'duration': 774.777, 'highlights': ['The form group instance provides its model value as an object reduced from the values of each control in the group. The form group instance model value is an object derived from the values of each control in the group.', 'The form group tracks the status and modifies it if any of the controls is changed, and the parent control generates a new status or value change. The form group tracks and modifies the status if any control is changed, while the parent control generates a new status or value change.', 'The ngSubmit event listener captures the current value of the employee form, and the form data can be saved by binding it to a callback action. The ngSubmit event listener captures the current value of the employee form, enabling the form data to be saved by binding it to a callback action.', 'Creating a separate template-driven employee form involves creating the employee model class, the component that controls the form, and a template that specifies the form layout, and binding data properties to each form control using ngModel. Creating a separate template-driven employee form includes creating the employee model class, the controlling component, specifying the form layout in a template, and binding data properties to each form control using ngModel.']}, {'end': 9716.857, 'start': 9277.01, 'title': 'Understanding crud operations in angular', 'summary': 'Explains the importance of crud operations in web applications, detailing the create, read, update, and delete functions and their relevance to database management, with a demonstration of implementing crud operations in angular.', 'duration': 439.847, 'highlights': ['The chapter emphasizes the significance of CRUD operations, highlighting the ability to create, read, update, and delete items in web applications as crucial to most full-stack projects. CRUD operations (create, read, update, and delete) are essential for most web applications, such as storefronts, blog posting pages, to-do lists, and social media clones, to avoid getting stuck.', 'The chapter provides a comprehensive explanation of CRUD, identifying it as an acronym for create, read, update, and delete, which are fundamental operations in traditional database systems. CRUD represents the basic operations for interacting with most traditional database systems and is essential for managing relational databases like Oracle, MongoDB, Microsoft SQL Server, and MySQL.', 'The chapter details the create function in CRUD, explaining its role in adding new records to a database and highlighting that only an administrator may be able to add new attributes to the database. The create function allows users to add new records to the database, with administrators having the ability to add new attributes, ensuring controlled access to database modifications.', 'The chapter explains the read function in CRUD, likening it to a search command and highlighting the ability to search for specific records using keywords or filters. The read function allows users to search for specific records in a database using keywords or filters, providing a way to extract specific information from the database.', 'The chapter elaborates on the update function in CRUD, emphasizing its role in making changes to existing records in the database and providing an example of updating a database record for a restaurant menu item. The update function enables users to modify existing records, such as updating attributes like dish ingredients in a restaurant menu, allowing for dynamic changes to database records.', 'The chapter highlights the delete function in CRUD, explaining its purpose in removing records from a database and distinguishing between hard delete and soft delete options. The delete function allows users to remove records from the database, with options for hard delete (permanently removing records) or soft delete (changing the status of a record).', 'The chapter outlines the steps for performing CRUD operations in Angular, including mocking backend data, creating an Angular module, importing Angular modules, creating components, adding Angular routing, and implementing CRUD methods. The process for performing CRUD operations in Angular involves steps such as mocking backend data, creating an Angular module, importing necessary Angular modules, creating components, adding routing, and implementing CRUD methods.']}], 'duration': 2013.747, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU7703110.jpg', 'highlights': ['Reactive forms allow easier testing and scalability compared to template-driven forms.', 'Angular provides two types of forms: reactive and template-driven, with common building blocks including form control, form group, form array, and control value accessor.', 'The form control class is the basic building block in reactive forms, allowing for tasks like updating, checking, and validation.', 'The ngSubmit event listener captures the current value of the employee form, enabling the form data to be saved by binding it to a callback action.', 'CRUD operations (create, read, update, and delete) are essential for most web applications, such as storefronts, blog posting pages, to-do lists, and social media clones, to avoid getting stuck.', 'The chapter provides a comprehensive explanation of CRUD, identifying it as an acronym for create, read, update, and delete, which are fundamental operations in traditional database systems.', 'The process for performing CRUD operations in Angular involves steps such as mocking backend data, creating an Angular module, importing necessary Angular modules, creating components, adding routing, and implementing CRUD methods.']}, {'end': 11420.829, 'segs': [{'end': 10185.514, 'src': 'embed', 'start': 10151.391, 'weight': 2, 'content': [{'end': 10154.332, 'text': 'Now, all you have to do is just keep hitting enter.', 'start': 10151.391, 'duration': 2.941}, {'end': 10157.533, 'text': "Now, I'm just going to keep saying enter.", 'start': 10155.152, 'duration': 2.381}, {'end': 10160.313, 'text': "It's going to ask if it is okay.", 'start': 10158.313, 'duration': 2}, {'end': 10161.734, 'text': 'Just say yes.', 'start': 10160.934, 'duration': 0.8}, {'end': 10167.104, 'text': 'And as you can see package.json has been created.', 'start': 10162.862, 'duration': 4.242}, {'end': 10169.145, 'text': "Now, let's move on to our next step.", 'start': 10167.604, 'duration': 1.541}, {'end': 10172.967, 'text': 'Now we need to create a body parser for that.', 'start': 10169.845, 'duration': 3.122}, {'end': 10185.514, 'text': "I'm going to go ahead and give the command npm install Express Mongoose body parser and I need to be saving it in a file.", 'start': 10173.087, 'duration': 12.427}], 'summary': 'Creating package.json and installing express, mongoose, and body parser using npm command.', 'duration': 34.123, 'max_score': 10151.391, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU10151391.jpg'}, {'end': 10798.504, 'src': 'embed', 'start': 10772.259, 'weight': 1, 'content': [{'end': 10780.482, 'text': "as you saw, I've added an action button to edit our employee and action button for deleting our employee record.", 'start': 10772.259, 'duration': 8.223}, {'end': 10782.243, 'text': 'now, all this in our HTML.', 'start': 10780.482, 'duration': 1.761}, {'end': 10790.734, 'text': "Let's go ahead and see what we have done in the rest of the files now before we go ahead and see all our employee related component files.", 'start': 10782.583, 'duration': 8.151}, {'end': 10795.26, 'text': "Let's go ahead and create our models and services for that.", 'start': 10791.134, 'duration': 4.126}, {'end': 10798.504, 'text': 'I have created a file name called shared.', 'start': 10795.5, 'duration': 3.004}], 'summary': 'Added action buttons for editing and deleting employee records in html, and created a file named shared for models and services.', 'duration': 26.245, 'max_score': 10772.259, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU10772259.jpg'}, {'end': 10877.316, 'src': 'embed', 'start': 10848.851, 'weight': 3, 'content': [{'end': 10861.292, 'text': 'We have to type a command and that is The command is going to be ng space G space S and a service name here.', 'start': 10848.851, 'duration': 12.441}, {'end': 10863.494, 'text': 'My service name is also employee.', 'start': 10861.612, 'duration': 1.882}, {'end': 10868.078, 'text': "So I'm going to give this and let's see what happens next in our service files.", 'start': 10863.954, 'duration': 4.124}, {'end': 10871.421, 'text': 'Now here my service file has been created.', 'start': 10869.039, 'duration': 2.382}, {'end': 10874.134, 'text': "Let's see the further operations here.", 'start': 10872.233, 'duration': 1.901}, {'end': 10877.316, 'text': "Now here we're supposed to create an array.", 'start': 10874.154, 'duration': 3.162}], 'summary': "Using command 'ng g s' to create a service named 'employee'.", 'duration': 28.465, 'max_score': 10848.851, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU10848851.jpg'}, {'end': 11370.108, 'src': 'embed', 'start': 11346.014, 'weight': 0, 'content': [{'end': 11353.819, 'text': 'now, since I want all my records to be displayed dynamically, as in when I add into the form, all my functions should be called here.', 'start': 11346.014, 'duration': 7.805}, {'end': 11357.742, 'text': "Let's go ahead and see our final application how it works.", 'start': 11354.159, 'duration': 3.583}, {'end': 11360.183, 'text': "Now I'm going to say forms.", 'start': 11358.442, 'duration': 1.741}, {'end': 11362.484, 'text': "I'm going to add one more record here.", 'start': 11360.703, 'duration': 1.781}, {'end': 11367.647, 'text': 'It says form submitted our create is successfully done.', 'start': 11362.504, 'duration': 5.143}, {'end': 11370.108, 'text': 'Our reading is successfully done.', 'start': 11368.267, 'duration': 1.841}], 'summary': 'Application dynamically displays records; successful form submission and reading.', 'duration': 24.094, 'max_score': 11346.014, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU11346014.jpg'}], 'start': 9716.857, 'title': 'Backend data storage and crud operations in angular with mongodb', 'summary': 'Demonstrates the successful connection between front-end and mongodb backend, ensuring successful data interaction with auto-generated ids and record deletion. it covers setting up mongodb for crud operations and creating an angular application with detailed steps for crud operations and client-side functionality.', 'chapters': [{'end': 9766.091, 'start': 9716.857, 'title': 'Backend data storage and deletion', 'summary': 'Demonstrates the connection between front-end and mongodb backend by displaying and deleting a single record through forms, ensuring a successful data interaction between the two with the generation of auto-generated ids and the successful deletion of the record from the database.', 'duration': 49.234, 'highlights': ['The successful display of a single record in JSON format with auto-generated ID on refreshing the MongoDB backend.', 'The demonstration of the successful deletion of the record from the database, establishing a clear connection between the front-end and MongoDB backend.', 'The observation of the absence of data in the MongoDB backend after the record deletion, confirming the successful interaction between the front-end and the database.']}, {'end': 10097.077, 'start': 9766.491, 'title': 'Setting up mongodb for crud operations', 'summary': 'Covers the prerequisites for creating an application and performing crud operations, including the need for typescript, angular-cli, mongodb, and node.js. the detailed steps include installing mongodb, setting up a database, and connecting to the mongodb app.', 'duration': 330.586, 'highlights': ['The first step in the demonstration is to install MongoDB, ensuring the installation of MongoDB Edition depending on the operating system used. The chapter begins with the initial step of installing MongoDB, tailored to the specific operating system.', "After installing MongoDB, the next process involves navigating to the installation file in the program files, accessing the server's bin directory, and running the MongoDB executable file. The subsequent process after installation entails navigating to the program files, accessing the server's bin directory, and running the MongoDB executable file.", 'Creating a file for storing database records in a specified directory, followed by running commands in the command prompt to establish the server connection, is essential for the setup. Creating a file for storing database records and running commands in the command prompt to establish the server connection are crucial steps in the setup process.', 'The demonstration also covers creating a database and collection within the MongoDB app, allowing for the addition and management of data records. The demonstration includes creating a database and collection within the MongoDB app for adding and managing data records.']}, {'end': 10651.309, 'start': 10097.637, 'title': 'Creating angular application and crud operations', 'summary': 'Covers the creation of an angular application, including the creation of package.json file, body parser, establishing server-db connection, creating root javascript file, models, and implementing crud operations such as create, read, update, and delete.', 'duration': 553.672, 'highlights': ['The chapter covers the creation of an Angular application, including the creation of package.json file, body parser, establishing server-DB connection, creating root JavaScript file, models, and implementing CRUD operations such as create, read, update, and delete. Creation of Angular application, establishment of server-DB connection, implementation of CRUD operations.', "The speaker demonstrates the creation of a package.json file using the 'npm init' command, creating a package.json file for the project. Creation of package.json file using 'npm init' command.", "The process of creating a body parser is explained, including the installation of required packages using the 'npm install' command. Explanation of creating a body parser and installing required packages.", 'The demonstration includes the establishment of a connection between the server and the database, and the use of Mongoose to call collections. Establishment of server-database connection using Mongoose.', "The steps for creating a root JavaScript file, 'index.js', are explained, including setting up request statements for Express and calling the DB file. Creation of 'index.js' and setting up request statements for Express.", "The process of creating models for implementing CRUD operations is detailed, including the creation of an 'employees.js' file within a 'models' folder. Creation of models for implementing CRUD operations.", 'The implementation of CRUD operations, including create, read, update, and delete, is explained, with details on creating a controller file and defining operations such as get and post requests. Explanation of CRUD operations implementation, including create, read, update, and delete.']}, {'end': 11420.829, 'start': 10651.949, 'title': 'Creating angular client-side application', 'summary': 'Covers the process of creating a client-side angular application, including creating components, models, services, forms, routing, and functionality for adding, updating, and deleting records, with detailed explanations of commands and code structure.', 'duration': 768.88, 'highlights': ["The process of creating a client-side Angular application by generating a new application named 'angular app' using the command 'ng new', followed by opening and serving the application.", "Creation of components using the command 'ng g c employee' to generate component files and the addition of form and table structure for employee records in the HTML.", "Creation of models using the command 'ng g class employee --type model' and services using the command 'ng g s employee', with detailed explanations of the commands and operations involved.", "Implementation of form structure, submission, reset, and button functionalities, including the use of 'ngSubmit' and 'ngModel' in the HTML, and the corresponding functions in the TypeScript file.", 'Incorporation of HTTP client in the service file to handle get, post, put, and delete operations for employee records, with the usage of MongoDB for generating IDs.', 'Creation of components for navbar, home, and post, with detailed explanations of their structure and functionality, including dynamic title addition and record display operations.', 'Demonstration of adding, updating, and deleting records in the application, with a walkthrough of the functionality and verification of the operations in MongoDB.']}], 'duration': 1703.972, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU9716857.jpg', 'highlights': ['Demonstration of adding, updating, and deleting records in the application, with a walkthrough of the functionality and verification of the operations in MongoDB.', 'Incorporation of HTTP client in the service file to handle get, post, put, and delete operations for employee records, with the usage of MongoDB for generating IDs.', 'The demonstration includes the establishment of a connection between the server and the database, and the use of Mongoose to call collections.', "The process of creating a client-side Angular application by generating a new application named 'angular app' using the command 'ng new', followed by opening and serving the application.", 'The chapter covers the creation of an Angular application, including the creation of package.json file, body parser, establishing server-DB connection, creating root JavaScript file, models, and implementing CRUD operations such as create, read, update, and delete.']}, {'end': 12643.534, 'segs': [{'end': 11571.98, 'src': 'embed', 'start': 11474.02, 'weight': 0, 'content': [{'end': 11476.882, 'text': 'the uppermost region of my website contains a navbar.', 'start': 11474.02, 'duration': 2.862}, {'end': 11481.636, 'text': "This nav bar contains links to all the pages that I've created in my website.", 'start': 11477.552, 'duration': 4.084}, {'end': 11486.08, 'text': "If I click on any of these pages, I'll be redirected to that particular page.", 'start': 11482.136, 'duration': 3.944}, {'end': 11494.067, 'text': 'One more thing I want you guys to note is that for redirecting you can simply type in the address of that page in the address bar itself.', 'start': 11487.381, 'duration': 6.686}, {'end': 11495.348, 'text': 'Next up.', 'start': 11494.967, 'duration': 0.381}, {'end': 11497.029, 'text': "I've made use of carousel images.", 'start': 11495.468, 'duration': 1.561}, {'end': 11501.273, 'text': 'So as you can see over here, I basically have three carousel images.', 'start': 11498.11, 'duration': 3.163}, {'end': 11503.028, 'text': 'Followed by that.', 'start': 11502.347, 'duration': 0.681}, {'end': 11510.635, 'text': "I've created a jumbotron that contains cards having the latest news updates from the FIFA World Cup 2022.", 'start': 11503.128, 'duration': 7.507}, {'end': 11517.923, 'text': "Next I've created another jumbotron wherein I've embedded an official video from FIFA World Cup 2022.", 'start': 11510.635, 'duration': 7.288}, {'end': 11521.106, 'text': "So this was the home page now, let's move on to the venue page.", 'start': 11517.923, 'duration': 3.183}, {'end': 11523.508, 'text': 'So just like the home page.', 'start': 11522.227, 'duration': 1.281}, {'end': 11526.091, 'text': "I've embedded another video on the venue page.", 'start': 11523.969, 'duration': 2.122}, {'end': 11532.248, 'text': 'Now this video will basically show you all the stadiums that are constructed for FIFA World Cup 2022 at Qatar.', 'start': 11526.684, 'duration': 5.564}, {'end': 11536.711, 'text': 'Also, I have a separate card that will allow you to book tickets online.', 'start': 11533.048, 'duration': 3.663}, {'end': 11544.336, 'text': 'So basically when you click on book online, you will be redirected to the ticketing section of the fifa.com website.', 'start': 11538.112, 'duration': 6.224}, {'end': 11547.778, 'text': 'Next up is the locations page.', 'start': 11546.337, 'duration': 1.441}, {'end': 11553.665, 'text': 'Now this page basically contains the images of all the stadiums and a small description about each of them.', 'start': 11548.641, 'duration': 5.024}, {'end': 11557.088, 'text': "Not just that I've also created a drop-down list over here.", 'start': 11554.326, 'duration': 2.762}, {'end': 11564.113, 'text': 'So when I click on any of the stadium names that particular stadiums image will appear.', 'start': 11559.109, 'duration': 5.004}, {'end': 11571.98, 'text': "So this is the website that I've created without manually having to write any HTML or CSS code.", 'start': 11566.776, 'duration': 5.204}], 'summary': 'Website features include navbar, carousel, jumbotron with fifa world cup 2022 updates, venue details, and stadium images.', 'duration': 97.96, 'max_score': 11474.02, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU11474020.jpg'}, {'end': 12186.49, 'src': 'embed', 'start': 12145.039, 'weight': 1, 'content': [{'end': 12152.045, 'text': "so if I open up the nav bar and over here, if I click on any of these, I'll be redirected to that particular component.", 'start': 12145.039, 'duration': 7.006}, {'end': 12156.969, 'text': "So the first thing that I'm going to do is modify the home component dot HTML file.", 'start': 12152.925, 'duration': 4.044}, {'end': 12159.791, 'text': "So just clear the data that's present over here.", 'start': 12157.709, 'duration': 2.082}, {'end': 12163.091, 'text': "and the first thing that's present in my page is a carousel.", 'start': 12160.689, 'duration': 2.402}, {'end': 12170.277, 'text': "So what I'm going to do is just get back to bootstrap and over here and select carousel and I'll just take any of these codes.", 'start': 12163.611, 'duration': 6.666}, {'end': 12176.882, 'text': 'I just copy it get back to my project paste it save it and rerun my server.', 'start': 12170.977, 'duration': 5.905}, {'end': 12186.49, 'text': "So as you can see over here the carousel images have been added but you are not able to see them because I've not specified the source.", 'start': 12180.285, 'duration': 6.205}], 'summary': 'Modifying the home component to add carousel images from bootstrap.', 'duration': 41.451, 'max_score': 12145.039, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU12145039.jpg'}, {'end': 12385.565, 'src': 'embed', 'start': 12355.266, 'weight': 14, 'content': [{'end': 12359.447, 'text': 'You will see that the app routing module.ts file will not be present in your workplace.', 'start': 12355.266, 'duration': 4.181}, {'end': 12363.489, 'text': "Now to show you guys all this what I'm going to do is just get inside my project.", 'start': 12360.467, 'duration': 3.022}, {'end': 12366.251, 'text': 'So just type in CD basic.', 'start': 12364.11, 'duration': 2.141}, {'end': 12372.195, 'text': "And then I'll just type in code space dot.", 'start': 12369.413, 'duration': 2.782}, {'end': 12376.538, 'text': 'This will open up my project in Visual Studio code.', 'start': 12373.957, 'duration': 2.581}, {'end': 12385.565, 'text': 'So as you can see over here a project has been created with a number of files.', 'start': 12381.962, 'duration': 3.603}], 'summary': 'The app routing module.ts file is missing from the workplace. project opened in visual studio code.', 'duration': 30.299, 'max_score': 12355.266, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU12355266.jpg'}, {'end': 12572.356, 'src': 'embed', 'start': 12531.233, 'weight': 5, 'content': [{'end': 12536.557, 'text': 'The app component.ts file defines the logic for the applications root component, which is the app component.', 'start': 12531.233, 'duration': 5.324}, {'end': 12546.322, 'text': 'The view or the HTML file which is associated with this component becomes the root of the view hierarchy, the app component dot HTML file.', 'start': 12537.375, 'duration': 8.947}, {'end': 12549.664, 'text': "the output that we've just seen on the default page is rendered from here", 'start': 12546.322, 'duration': 3.342}, {'end': 12554.268, 'text': 'This file defines an HTML template associated with the root app component.', 'start': 12550.285, 'duration': 3.983}, {'end': 12560.272, 'text': 'The app component dot CSS file is the personal app components CSS or style sheet.', 'start': 12555.689, 'duration': 4.583}, {'end': 12564.035, 'text': 'So now talking about the app routing module dot TS file.', 'start': 12561.073, 'duration': 2.962}, {'end': 12570.035, 'text': 'This file is created because you choose to have routing in your application in case you would have selected.', 'start': 12564.932, 'duration': 5.103}, {'end': 12572.356, 'text': 'No, this file would not have been created.', 'start': 12570.215, 'duration': 2.141}], 'summary': 'The app component.ts file defines the logic for the applications root component, with associated html and css files. the app routing module.ts file is created for routing in the application.', 'duration': 41.123, 'max_score': 12531.233, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU12531233.jpg'}], 'start': 11421.389, 'title': 'Incorporating bootstrap into angular application', 'summary': 'Explains the methods of incorporating bootstrap into an angular application using bootstrap cdn links and npm, followed by adding css and javascript paths in the angular.json file, demonstrating successful integration.', 'chapters': [{'end': 11697.224, 'start': 11421.389, 'title': 'Creating fifa website with bootstrap and angular', 'summary': "Covers the creation of a fifa website using bootstrap and angular, including the website's components, such as navigation bar, carousel images, jumbotron with news updates and embedded videos, venue page with stadium videos and ticket booking, locations page with stadium images and drop-down list, and the process of embedding bootstrap into angular using cdn and npm.", 'duration': 275.835, 'highlights': ['The website includes components like navigation bar, carousel images, jumbotron with news updates and embedded videos, venue page with stadium videos and ticket booking, locations page with stadium images and drop-down list, created without manually writing HTML or CSS code. The website components demonstrate the usage of bootstrap and angular to create a FIFA website, showcasing various features such as navigation, multimedia integration, and interactive elements.', 'Bootstrap is an open-source framework used to create responsive websites, offering readily available layouts, components, and utilities. Bootstrap is highlighted as an open-source framework enabling the creation of responsive websites with its readily available features and functionalities.', 'Two ways to embed bootstrap into angular are through CDN (Content Delivery Network) and NPM (Node Packet Manager), with demonstrated steps for using the bootstrap CDN to deliver CSS and JavaScript to an angular application. The process of embedding bootstrap into angular is outlined, covering the use of CDN to deliver CSS and JavaScript to an angular application, offering flexibility in implementation.']}, {'end': 12069.154, 'start': 11698.104, 'title': 'Incorporating bootstrap into angular application', 'summary': 'Explains two methods of incorporating bootstrap into an angular application: using bootstrap cdn links and npm, followed by adding css and javascript paths in the angular.json file, demonstrating the successful integration of bootstrap into the project.', 'duration': 371.05, 'highlights': ['Bootstrap successfully embedded into the Angular application, using NPM to install bootstrap, jquery, and popper.js, and specifying paths in the angular.json file for CSS and JavaScript.', 'Demonstration of incorporating the bootstrap min.css file into the angular.json file and successfully loading the CSS and JavaScript globally.', "Adding components to the project using 'ng generate component' and specifying paths for the components in the app routing module.ts file."]}, {'end': 12258.712, 'start': 12069.961, 'title': 'Angular bootstrap project', 'summary': 'Demonstrates the process of integrating various elements, such as path match, router link, carousel images, and embedded videos from the bootstrap official website into an angular project, ensuring redirection, functionality, and visual enhancements.', 'duration': 188.751, 'highlights': ["The user is redirected to the home page if the entered path is not exact, ensuring smooth navigation and user experience. In case the user enters an incomplete path, such as 'ven' instead of 'ven UE', they are redirected to the home page, ensuring seamless navigation and user experience.", 'Integration of carousel images from Bootstrap official website enhances the visual appeal of the project. The addition of carousel images from the Bootstrap official website enhances the visual appeal and user experience of the project, providing a more dynamic and engaging interface.', 'Incorporating embedded videos from Bootstrap official website showcases the process of integrating multimedia elements for enhanced content presentation. The demonstration of incorporating embedded videos from the Bootstrap official website showcases the process of integrating multimedia elements to enhance content presentation and user engagement.', 'The utilization of router link property facilitates seamless redirection to various components within the project, enhancing navigation and accessibility. By leveraging the router link property, seamless redirection to different components within the project is facilitated, optimizing navigation and accessibility for users.']}, {'end': 12451.561, 'start': 12259.433, 'title': 'Creating angular application', 'summary': 'Covers the process of creating an angular project using angular cli, including installation, project creation, file structure, and serving the application on a development server on port 4200.', 'duration': 192.128, 'highlights': ['The ng new command creates an initial skeleton of the angular application with end-to-end tests and project files at the root level, requiring npm installation, angular CLI, and routing setup.', 'The ng serve command serves the application through the development server on localhost, opening the default welcome page of the angular application on port 4200.', 'Customization options include adding angular routing and choosing the type of style sheet, such as CSS, during the project creation process.']}, {'end': 12643.534, 'start': 12452.461, 'title': 'Angular files and folders overview', 'summary': 'Provides an overview of the key files and folders in an angular application, including main.ts, index.html, app module, app component, app routing module, and their respective roles and functionalities, demonstrating the process of creating and modifying these files.', 'duration': 191.073, 'highlights': ['The main.ts file contains the code required to bootstrap the Angular application. It is the file required to start off the Angular application.', 'The index.html file feeds the default page of a website and automatically adds CSS and JavaScript files. It serves as the default page of a website and automatically includes CSS and JavaScript files.', 'The app module.ts file defines a root module named the app module, declaring components and assembling the application initially. It defines the root module and declares components, instructing Angular on how to assemble the application.', "The app component.ts file defines the logic for the application's root component and its associated HTML template. It defines the logic for the application's root component and its associated HTML template.", 'The app routing module.ts file is created for applications with routing and is essential for managing routes within the app. It is created for applications with routing and is essential for managing routes within the app.']}], 'duration': 1222.145, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU11421389.jpg', 'highlights': ['The website components demonstrate the usage of bootstrap and angular to create a FIFA website, showcasing various features such as navigation, multimedia integration, and interactive elements.', 'Bootstrap is an open-source framework used to create responsive websites, offering readily available layouts, components, and utilities.', 'The process of embedding bootstrap into angular is outlined, covering the use of CDN to deliver CSS and JavaScript to an angular application, offering flexibility in implementation.', 'Bootstrap successfully embedded into the Angular application, using NPM to install bootstrap, jquery, and popper.js, and specifying paths in the angular.json file for CSS and JavaScript.', 'The user is redirected to the home page if the entered path is not exact, ensuring smooth navigation and user experience.', 'The addition of carousel images from the Bootstrap official website enhances the visual appeal and user experience of the project, providing a more dynamic and engaging interface.', 'The demonstration of incorporating embedded videos from the Bootstrap official website showcases the process of integrating multimedia elements to enhance content presentation and user engagement.', 'By leveraging the router link property, seamless redirection to different components within the project is facilitated, optimizing navigation and accessibility for users.', 'The ng new command creates an initial skeleton of the angular application with end-to-end tests and project files at the root level, requiring npm installation, angular CLI, and routing setup.', 'The ng serve command serves the application through the development server on localhost, opening the default welcome page of the angular application on port 4200.', 'The main.ts file contains the code required to bootstrap the Angular application. It is the file required to start off the Angular application.', 'The index.html file feeds the default page of a website and automatically adds CSS and JavaScript files. It serves as the default page of a website and automatically includes CSS and JavaScript files.', 'The app module.ts file defines a root module named the app module, declaring components and assembling the application initially. It defines the root module and declares components, instructing Angular on how to assemble the application.', "The app component.ts file defines the logic for the application's root component and its associated HTML template. It defines the logic for the application's root component and its associated HTML template.", 'The app routing module.ts file is created for applications with routing and is essential for managing routes within the app. It is created for applications with routing and is essential for managing routes within the app.']}, {'end': 14765.443, 'segs': [{'end': 12673.203, 'src': 'embed', 'start': 12644.575, 'weight': 0, 'content': [{'end': 12648.399, 'text': "So in this project, I'm not going to concentrate on the HTML or the CSS part.", 'start': 12644.575, 'duration': 3.824}, {'end': 12654.004, 'text': 'All I want you guys to get familiar is with the building blocks of angular and how to add them in your project.', 'start': 12649.059, 'duration': 4.945}, {'end': 12659.959, 'text': 'Now before we move on towards that, let me just tell you guys how an angular application actually works.', 'start': 12654.818, 'duration': 5.141}, {'end': 12663.36, 'text': "So for that, I'll just open this angular.json file.", 'start': 12660.76, 'duration': 2.6}, {'end': 12668.282, 'text': 'So the execution of an angular application starts from the angular.json file.', 'start': 12663.98, 'duration': 4.302}, {'end': 12673.203, 'text': 'This file is used to define all the standards and parts for your angular project.', 'start': 12668.982, 'duration': 4.221}], 'summary': 'Focus on angular building blocks, execution starts from angular.json defining project standards.', 'duration': 28.628, 'max_score': 12644.575, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU12644575.jpg'}, {'end': 12937.058, 'src': 'embed', 'start': 12910.254, 'weight': 2, 'content': [{'end': 12917, 'text': 'Imports are used to import the browser module in order to attain the browser services such as Dom sanitization rendering Etc.', 'start': 12910.254, 'duration': 6.746}, {'end': 12921.544, 'text': 'Providers are nothing but the service providers, which we shall be discussing later on,', 'start': 12917.581, 'duration': 3.963}, {'end': 12927.429, 'text': "and bootstrap is the root component created by angular and it's inserted in the index.html host web page.", 'start': 12921.544, 'duration': 5.885}, {'end': 12933.495, 'text': 'So, as you can see over here, app component is present both in the declarations and in bootstrap.', 'start': 12928.19, 'duration': 5.305}, {'end': 12937.058, 'text': 'now, this is because this is the only component that is present in this application.', 'start': 12933.495, 'duration': 3.563}], 'summary': 'Angular uses imports to access browser services, providers for service providers, and bootstrap as the root component.', 'duration': 26.804, 'max_score': 12910.254, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU12910254.jpg'}, {'end': 13036.326, 'src': 'embed', 'start': 13007.495, 'weight': 5, 'content': [{'end': 13013.978, 'text': "As I've already mentioned earlier, all angular applications have at least one component, which is the root component.", 'start': 13007.495, 'duration': 6.483}, {'end': 13019.16, 'text': 'this root component connects the component hierarchy with the page document object module or the Dom.', 'start': 13013.978, 'duration': 5.182}, {'end': 13026.477, 'text': 'All components define classes that have applications data and logic and they are also associated with HTML template.', 'start': 13020.012, 'duration': 6.465}, {'end': 13030.321, 'text': 'This HTML template defines a view that is to be displayed.', 'start': 13027.258, 'duration': 3.063}, {'end': 13036.326, 'text': 'Therefore, components are basically used to control the views of an MVC architecture.', 'start': 13031.001, 'duration': 5.325}], 'summary': 'Angular applications have at least one root component connecting the component hierarchy to the dom, controlling views in an mvc architecture.', 'duration': 28.831, 'max_score': 13007.495, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU13007495.jpg'}, {'end': 13264.496, 'src': 'heatmap', 'start': 13031.001, 'weight': 1, 'content': [{'end': 13036.326, 'text': 'Therefore, components are basically used to control the views of an MVC architecture.', 'start': 13031.001, 'duration': 5.325}, {'end': 13046.194, 'text': 'the at-the-rate component decorator that you see on the screen will tell angular that the class immediately below is a component and provides the templates and the related component specific metadata.', 'start': 13036.326, 'duration': 9.868}, {'end': 13055.087, 'text': 'Angular components are the most basic user interface for your application and they always are associated with the template and our subset of directives.', 'start': 13047.06, 'duration': 8.027}, {'end': 13058.29, 'text': 'The components logic is defined inside a class.', 'start': 13055.928, 'duration': 2.362}, {'end': 13062.234, 'text': 'This basically determines how it supports the view.', 'start': 13059.171, 'duration': 3.063}, {'end': 13068.219, 'text': 'components are created, updated and deleted by angular as you proceed within your application.', 'start': 13062.234, 'duration': 5.985}, {'end': 13073.324, 'text': 'your application can take action at any moment in its life cycle through the optional life cycle hooks.', 'start': 13068.219, 'duration': 5.105}, {'end': 13079.747, 'text': 'Lifecycle hooks provide visibility into key life moments and the ability to act when they occur.', 'start': 13074.244, 'duration': 5.503}, {'end': 13086.95, 'text': "Therefore lifecycle hooks allow you to control components runtime behavior and they are called only and only when they're defined.", 'start': 13080.547, 'duration': 6.403}, {'end': 13092.132, 'text': "So now let's get back to our command prompt and see how you can add components to your projects.", 'start': 13088.091, 'duration': 4.041}, {'end': 13095.914, 'text': "What I'm going to do is just return the control to the command prompt.", 'start': 13093.133, 'duration': 2.781}, {'end': 13099.416, 'text': 'Okay Now, let me just clear the screen.', 'start': 13098.095, 'duration': 1.321}, {'end': 13104.274, 'text': 'So to create a new component you can make use of the ng generate component command.', 'start': 13100.191, 'duration': 4.083}, {'end': 13110.978, 'text': "So what I'm going to do is just type in ng generate and since I want to generate a component.", 'start': 13104.914, 'duration': 6.064}, {'end': 13111.978, 'text': "I'll just say component.", 'start': 13110.998, 'duration': 0.98}, {'end': 13117.262, 'text': 'Now you can give any name to your component.', 'start': 13115.421, 'duration': 1.841}, {'end': 13120.884, 'text': "I'll just call this component as home and I'll hit enter.", 'start': 13118.142, 'duration': 2.742}, {'end': 13130.532, 'text': 'So as you can see over here, this has created a new component with four files.', 'start': 13126.909, 'duration': 3.623}, {'end': 13133.994, 'text': 'That is, the component.ts file or the TypeScript file.', 'start': 13130.712, 'duration': 3.282}, {'end': 13138.778, 'text': 'the component.spec.ts file, which is used to perform end-to-end testing.', 'start': 13133.994, 'duration': 4.784}, {'end': 13146.364, 'text': 'the component.html file that will render the required HTML or the view for that page and the component specific CSS file.', 'start': 13138.778, 'duration': 7.586}, {'end': 13153.409, 'text': "So now let's get back to our Visual Studio and over here, you'll be able to see the component that you've just added.", 'start': 13147.405, 'duration': 6.004}, {'end': 13156.572, 'text': "So I added a home component and it's just present over here.", 'start': 13153.429, 'duration': 3.143}, {'end': 13161.258, 'text': "Now once you've added a new component, you'll have to remember to get back and add it.", 'start': 13157.176, 'duration': 4.082}, {'end': 13165.681, 'text': 'So, as you can see over here, the home component has already been added now.', 'start': 13162.059, 'duration': 3.622}, {'end': 13170.343, 'text': 'this is because I have added an extension, which is the auto import extension.', 'start': 13165.681, 'duration': 4.662}, {'end': 13172.385, 'text': 'in case even you want to insert this extension.', 'start': 13170.343, 'duration': 2.042}, {'end': 13177.027, 'text': 'All you have to do is go to these extensions over here and just type in auto import.', 'start': 13172.925, 'duration': 4.102}, {'end': 13184.472, 'text': "So as you can see over here the version that I'm using is 1.5.3.", 'start': 13179.809, 'duration': 4.663}, {'end': 13189.696, 'text': 'Once you add this you will not have to manually come here and import the components that you add to your application.', 'start': 13184.472, 'duration': 5.224}, {'end': 13198.464, 'text': 'So now get back to app component dot HTML file and specify the component selector of here in my case.', 'start': 13191.478, 'duration': 6.986}, {'end': 13199.885, 'text': 'The name of the component is home.', 'start': 13198.524, 'duration': 1.361}, {'end': 13202.867, 'text': "So I'll just say app hyphen home.", 'start': 13200.545, 'duration': 2.322}, {'end': 13208.251, 'text': "And I'll save this now, let's get back to our development server.", 'start': 13204.949, 'duration': 3.302}, {'end': 13211.174, 'text': "I'll have to run the ng serve command again.", 'start': 13209.492, 'duration': 1.682}, {'end': 13227.611, 'text': 'So as you can see over here our application says that homeworks home is the name of my component and this is the default output.', 'start': 13220.407, 'duration': 7.204}, {'end': 13235.356, 'text': 'So, as you can see over here, within the view of this component, I have a simple line saying homeworks,', 'start': 13229.392, 'duration': 5.964}, {'end': 13237.797, 'text': 'and this is what we just saw on the development server.', 'start': 13235.356, 'duration': 2.441}, {'end': 13242.64, 'text': "What I'm going to do now is get back to the home component dot DS file and over here.", 'start': 13238.577, 'duration': 4.063}, {'end': 13244.581, 'text': "I'll make a slight modification.", 'start': 13243, 'duration': 1.581}, {'end': 13250.89, 'text': "So before I make any changes to this file, what I'm going to do is add in a new file within this folder.", 'start': 13246.428, 'duration': 4.462}, {'end': 13264.496, 'text': "And I'll just call it as home.ts do not forget the dot TS extension because I'll be typing in typescript code within this over here.", 'start': 13255.032, 'duration': 9.464}], 'summary': 'Angular components control views in mvc architecture, using ng generate component to create and add components, with optional auto import extension for convenience.', 'duration': 233.495, 'max_score': 13031.001, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU13031001.jpg'}, {'end': 13570.159, 'src': 'embed', 'start': 13545.448, 'weight': 9, 'content': [{'end': 13553.515, 'text': "The user is referring to angular's router will allow the user to navigate from one component to the other as the user selects the various components.", 'start': 13545.448, 'duration': 8.067}, {'end': 13560.942, 'text': 'It can be done either by entering the URL directly in the address bar or by clicking on the links given in the application.', 'start': 13554.356, 'duration': 6.586}, {'end': 13564.405, 'text': 'Our application is already set up to use the angular router.', 'start': 13561.582, 'duration': 2.823}, {'end': 13570.159, 'text': 'So to specify the route that is where the user has to be directed.', 'start': 13566.738, 'duration': 3.421}], 'summary': 'Angular router enables navigation between components via url or links.', 'duration': 24.711, 'max_score': 13545.448, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU13545448.jpg'}, {'end': 13984.257, 'src': 'embed', 'start': 13948.066, 'weight': 7, 'content': [{'end': 13952.767, 'text': "And instead of CSS this time it's going to be the JavaScript folder or the JS folder.", 'start': 13948.066, 'duration': 4.701}, {'end': 13959.969, 'text': "Now what I'm going to do is just save this.", 'start': 13958.089, 'duration': 1.88}, {'end': 13964.731, 'text': "Okay So what I'm going to do now is get back to the index.html file.", 'start': 13961.39, 'duration': 3.341}, {'end': 13971.313, 'text': "And from here, I'll delete the bootstrap CDN links.", 'start': 13968.532, 'duration': 2.781}, {'end': 13973.71, 'text': 'and the jQuery CDN links.', 'start': 13972.389, 'duration': 1.321}, {'end': 13984.257, 'text': "I'll save this and I'll get back to my development server.", 'start': 13981.836, 'duration': 2.421}], 'summary': 'Switched from css to javascript folder, removed bootstrap and jquery cdn links.', 'duration': 36.191, 'max_score': 13948.066, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU13948066.jpg'}, {'end': 14198.933, 'src': 'embed', 'start': 14168.388, 'weight': 6, 'content': [{'end': 14172.511, 'text': 'Now this service component will be used for all the other components present in my project.', 'start': 14168.388, 'duration': 4.123}, {'end': 14183.62, 'text': "So what I'm going to do over here is create two functions one which will display all the students that are present in my list and the second that is going to help students enroll for the course.", 'start': 14173.311, 'duration': 10.309}, {'end': 14192.848, 'text': "Let me just specify a public access pacifier in case you're not aware of any of these you can still refer to the angular tutorial video by Edureka.", 'start': 14184.401, 'duration': 8.447}, {'end': 14198.933, 'text': "So public the name of the method will be get and I'll just call it students.", 'start': 14193.869, 'duration': 5.064}], 'summary': 'Service component to display students and enroll them in the course.', 'duration': 30.545, 'max_score': 14168.388, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU14168388.jpg'}, {'end': 14249.663, 'src': 'embed', 'start': 14212.985, 'weight': 4, 'content': [{'end': 14224.888, 'text': 'Sorry I forgot to specify the curly braces ID name description and email.', 'start': 14212.985, 'duration': 11.903}, {'end': 14232.474, 'text': "So within the body of this function, I'll just specify one return function that is return.", 'start': 14228.072, 'duration': 4.402}, {'end': 14235.436, 'text': 'This dot students.', 'start': 14234.535, 'duration': 0.901}, {'end': 14243.1, 'text': 'This function will help me retrieve all the students that are present in my dummy data next up.', 'start': 14238.057, 'duration': 5.043}, {'end': 14244.32, 'text': "I'll create another function.", 'start': 14243.14, 'duration': 1.18}, {'end': 14249.663, 'text': 'And the name of this function will be create student.', 'start': 14247.022, 'duration': 2.641}], 'summary': 'Function to retrieve all students and create new ones.', 'duration': 36.678, 'max_score': 14212.985, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU14212985.jpg'}], 'start': 12644.575, 'title': 'Angular development fundamentals', 'summary': 'Covers angular basics, component creation, services, routing, bootstrap and jquery integration, and website development, emphasizing module significance and component control, with practical examples and implementation details.', 'chapters': [{'end': 13086.95, 'start': 12644.575, 'title': 'Angular basics and building blocks', 'summary': 'Explains the execution flow of an angular application, the significance of angular modules, and the role of components in controlling the views and logic of an application, emphasizing the importance of declarations and lifecycle hooks.', 'duration': 442.375, 'highlights': ['Angular application execution starts from the angular.json file, then moves to the main.ts file, app module, and app component, providing a clear understanding of the execution flow. The execution flow of an Angular application is explained, starting from the angular.json file, then moving to the main.ts file, app module, and app component, providing a clear understanding of the execution flow.', "Angular modules allow separation of functionality into different parts, enabling independent changes and minimizing code size through optional importing. Angular modules allow separation of functionality into different parts, enabling independent changes and minimizing code size through optional importing, which contributes to Angular's popularity.", 'The declarations array in ng module class informs Angular about the components belonging to that module, emphasizing the necessity of declaring every component in exactly one ng module class to avoid errors. The declarations array in ng module class informs Angular about the components belonging to that module, emphasizing the necessity of declaring every component in exactly one ng module class to avoid errors.', 'Angular components, associated with HTML templates and directives, control the views and logic of an application, and utilize optional lifecycle hooks to provide visibility into key life moments and control runtime behavior. Angular components, associated with HTML templates and directives, control the views and logic of an application, and utilize optional lifecycle hooks to provide visibility into key life moments and control runtime behavior.']}, {'end': 13398.366, 'start': 13088.091, 'title': 'Adding components in angular', 'summary': 'Demonstrates how to create and add a new component in angular using the ng generate component command, including the creation of necessary files and the usage of auto import extension, and how to make modifications to the component files, such as adding a new typescript file, and utilizing interpolation binding feature with angular pipes for display value transformations.', 'duration': 310.275, 'highlights': ['Creating and Adding a New Component The chapter explains the process of creating and adding a new component in Angular using the ng generate component command, which creates a new component with four files: component.ts, component.spec.ts for end-to-end testing, component.html for rendering HTML, and component-specific CSS file.', 'Usage of Auto Import Extension It demonstrates the usage of the auto import extension, eliminating the manual process of importing components to the application and streamlining the development process.', 'Modifying Component Files It illustrates the process of making modifications to the component files, such as adding a new TypeScript file within the folder, creating an export class with a property, and utilizing the interpolation binding feature with angular pipes for display value transformations.']}, {'end': 13603.33, 'start': 13398.406, 'title': 'Angular services and routing', 'summary': 'Covers the concept of services in angular, including how to create and inject them into components, along with an introduction to routing and its implementation in angular applications.', 'duration': 204.924, 'highlights': ['Services in Angular are used to encapsulate values, functions, or features required by an application. The chapter explains the purpose of services in Angular, highlighting their role in encapsulating values, functions, or features required by an application.', "Creation and injection of services in Angular is demonstrated using the angular CLI, emphasizing the use of 'ng generate service' command. The process of creating and injecting services in Angular using the angular CLI is demonstrated, showcasing the usage of the 'ng generate service' command.", 'Introduction to routing in Angular, including its role in displaying application information in multiple pages and enabling navigation between components. An introduction to routing in Angular is provided, explaining its function in displaying application information in multiple pages and enabling navigation between components.']}, {'end': 14036.406, 'start': 13604.31, 'title': 'Adding bootstrap and jquery to angular', 'summary': 'Covers the process of adding bootstrap and jquery to an angular project, including integrating them using cdn as well as installing them via npm, updating the package.json file, and angular.json file, and verifying their functionality within the project.', 'duration': 432.096, 'highlights': ['Integrating Bootstrap and jQuery using CDN by copying the provided links and adding them to the index.html file, resulting in visual changes in the project. Visual changes in the project after integrating Bootstrap and jQuery.', 'Installing Bootstrap and jQuery using npm command, updating the package.json file, and specifying the paths in the angular.json file for global loading, which results in successful installation and functionality within the project. Successful installation of Bootstrap and jQuery after updating package.json and angular.json files.']}, {'end': 14385.532, 'start': 14037.526, 'title': 'Angular website development', 'summary': 'Outlines the development of an angular website with dummy data, featuring components such as home, header, student list, and enroll, along with the creation of functions to display and enroll students, and the addition of components using the ng generate command.', 'duration': 348.006, 'highlights': ['Creation of Angular website with dummy data The transcript details the creation of an Angular website with dummy data, including components such as home, header, student list, and enroll.', 'Functions to display and enroll students The chapter explains the creation of functions to display all students and to help students enroll for the course, featuring the retrieval of student data and the addition of new students.', "Addition of components using ng generate command The transcript mentions the addition of components to the project using the 'ng generate' command, including the creation of components for student list, student create, and header."]}, {'end': 14765.443, 'start': 14386.292, 'title': 'Web development component implementation', 'summary': 'Describes the implementation of web components including header, home, student list, and enroll components, utilizing bootstrap for styling and angular for functionality, resulting in a fully functional web application for managing student data.', 'duration': 379.151, 'highlights': ['Implementation of header component including navigation and alignment The speaker specifies the inclusion of home, student list, and enroll components in the header, selects right-aligned Bootstrap navbar, and explains the redirection functionality, resulting in improved user navigation.', 'Creation of home page with Bootstrap jumbotron and responsive image The speaker explains the creation of a home page with a Bootstrap jumbotron, responsive image, and important content blocks, resulting in a visually appealing and informative landing page.', 'Development of student list component and retrieval of student data The speaker demonstrates the creation of the student list component, defines variables for student and selected student, and retrieves and displays student data, enhancing the functionality of the web application.', 'Preparation of student create component for managing student data The speaker prepares the student create component by creating an array for student data, importing the service class, and modifying the views, ensuring the capability to manage and display student information.']}], 'duration': 2120.868, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU12644575.jpg', 'highlights': ['Angular modules allow separation of functionality into different parts, enabling independent changes and minimizing code size through optional importing.', 'Angular components, associated with HTML templates and directives, control the views and logic of an application, and utilize optional lifecycle hooks to provide visibility into key life moments and control runtime behavior.', 'The chapter explains the process of creating and adding a new component in Angular using the ng generate component command, which creates a new component with four files: component.ts, component.spec.ts for end-to-end testing, component.html for rendering HTML, and component-specific CSS file.', 'Services in Angular are used to encapsulate values, functions, or features required by an application.', 'Introduction to routing in Angular, including its role in displaying application information in multiple pages and enabling navigation between components.', 'Visual changes in the project after integrating Bootstrap and jQuery.', 'Creation of Angular website with dummy data including components such as home, header, student list, and enroll.', 'Functions to display and enroll students, featuring the retrieval of student data and the addition of new students.', 'Implementation of header component including navigation and alignment, and creation of home page with Bootstrap jumbotron and responsive image.', 'Development of student list component and retrieval of student data, and preparation of student create component for managing student data.']}, {'end': 15725.577, 'segs': [{'end': 14872.284, 'src': 'embed', 'start': 14845.9, 'weight': 9, 'content': [{'end': 14852.565, 'text': 'So everybody what is our goal? We have to deliver a product with all the features without any bugs quality product.', 'start': 14845.9, 'duration': 6.665}, {'end': 14861.176, 'text': 'So to do that, what we were doing is that first developers develop the code and QA engineers comes and they will start testing the application.', 'start': 14853.191, 'duration': 7.985}, {'end': 14863.818, 'text': 'They will make sure that no errors are there.', 'start': 14861.817, 'duration': 2.001}, {'end': 14867.18, 'text': "If there are any issues bug, they'll create a bug.", 'start': 14864.318, 'duration': 2.862}, {'end': 14868.861, 'text': 'They will assign it back to the developer.', 'start': 14867.22, 'duration': 1.641}, {'end': 14872.284, 'text': 'This is how it does, right? We fix it and send it to the product.', 'start': 14869.302, 'duration': 2.982}], 'summary': 'Deliver a bug-free, quality product by testing and fixing any issues found in the application.', 'duration': 26.384, 'max_score': 14845.9, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU14845900.jpg'}, {'end': 15174.451, 'src': 'embed', 'start': 15148.803, 'weight': 1, 'content': [{'end': 15155.805, 'text': 'So because you have a tie tie modes and all everything popular tools to perform unit testing on angular application is Jasmine.', 'start': 15148.803, 'duration': 7.002}, {'end': 15165.325, 'text': 'So if you want to come up with a unit testing in angular application, you have a different frameworks but Jasmine is a very popular framework.', 'start': 15156.326, 'duration': 8.999}, {'end': 15174.451, 'text': 'What is Jasmine does angular itself is a framework on top of that you are using another framework to test your application unit test code.', 'start': 15165.985, 'duration': 8.466}], 'summary': 'Jasmine is a popular framework for unit testing in angular applications.', 'duration': 25.648, 'max_score': 15148.803, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU15148803.jpg'}, {'end': 15247.75, 'src': 'embed', 'start': 15216.098, 'weight': 8, 'content': [{'end': 15218.959, 'text': 'that functionality also can be automated.', 'start': 15216.098, 'duration': 2.861}, {'end': 15221.755, 'text': 'that is called functional testing enough.', 'start': 15219.534, 'duration': 2.221}, {'end': 15230.7, 'text': 'you can use any number of external objects or a systems like database, UI security and other application layers.', 'start': 15221.755, 'duration': 8.945}, {'end': 15233.002, 'text': 'you can talk to database also.', 'start': 15230.7, 'duration': 2.302}, {'end': 15241.426, 'text': 'you can talk to any other external systems also which are being used in your application takes longer time to execute than unit test cases,', 'start': 15233.002, 'duration': 8.424}, {'end': 15247.75, 'text': 'because unit test cases maybe you can mock it, but whereas functional testing it needs to be interacted with the real-time scenarios.', 'start': 15241.426, 'duration': 6.324}], 'summary': 'Functional testing involves interacting with real-time scenarios and external systems, taking longer than unit test cases.', 'duration': 31.652, 'max_score': 15216.098, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU15216098.jpg'}, {'end': 15284.885, 'src': 'embed', 'start': 15259.875, 'weight': 0, 'content': [{'end': 15265.636, 'text': 'Functional testing means mostly will be running before you deploy to production or a QA environment maybe from your end.', 'start': 15259.875, 'duration': 5.761}, {'end': 15272.538, 'text': 'Example, when user enters username, password and clicks a send button or a login button, that user will be logged in.', 'start': 15266.276, 'duration': 6.262}, {'end': 15280.824, 'text': 'We can easily see that this functional group will comprise of many unit tests one for validating username, one for handling a button click,', 'start': 15272.878, 'duration': 7.946}, {'end': 15282.624, 'text': 'whatever example I give.', 'start': 15280.824, 'duration': 1.8}, {'end': 15284.885, 'text': 'so integration testing.', 'start': 15282.624, 'duration': 2.261}], 'summary': 'Functional testing ensures proper user login through unit and integration tests.', 'duration': 25.01, 'max_score': 15259.875, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU15259875.jpg'}, {'end': 15729.059, 'src': 'embed', 'start': 15701.772, 'weight': 2, 'content': [{'end': 15704.515, 'text': 'without forms, i cannot do data bindings.', 'start': 15701.772, 'duration': 2.743}, {'end': 15707.827, 'text': 'router Without routers, I cannot implement a routing.', 'start': 15704.515, 'duration': 3.312}, {'end': 15713.77, 'text': 'Even though if you implement and this dependency is being not available in the project, it will fail.', 'start': 15708.507, 'duration': 5.263}, {'end': 15722.435, 'text': 'RxJS libraries, zones, whatever data binding concepts or data state management related, all those things will not work.', 'start': 15714.511, 'duration': 7.924}, {'end': 15725.577, 'text': 'Compiler, common libraries, all these things.', 'start': 15723.016, 'duration': 2.561}, {'end': 15729.059, 'text': 'So you need these must mandatorily in the project.', 'start': 15726.218, 'duration': 2.841}], 'summary': 'Key dependencies like forms, routers, rxjs libraries, and compilers are crucial for data binding and routing, without which the project will fail.', 'duration': 27.287, 'max_score': 15701.772, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU15701772.jpg'}], 'start': 14771.548, 'title': 'Software testing and angular testing', 'summary': 'Delves into the importance of software testing for delivering bug-free, quality products and reducing costs. it also discusses unit testing, functional testing, and integration testing, as well as the use of jasmine and protactor for testing angular applications, emphasizing functional and end-to-end testing, and comparing their benefits.', 'chapters': [{'end': 15148.402, 'start': 14771.548, 'title': 'Software testing overview', 'summary': 'Discusses the importance of software testing, emphasizing the need to deliver bug-free, quality products and reduce costs, as well as the types and benefits of unit testing, functional testing, and integration testing.', 'duration': 376.854, 'highlights': ['Software testing is a process to evaluate the functionality of a software application with an intent to find whether the developer software met the specified requirements or not and to produce a bug-free, quality product. Software testing is crucial for evaluating software functionality and ensuring the production of bug-free, quality products.', 'Delivering a bug-free quality product is the goal, and identifying bugs in the early stage can significantly reduce the cost of bug-fixing. The primary goal is to deliver bug-free quality products, and early bug identification reduces bug-fixing costs.', 'Types of testing include unit testing, functional testing, and integration testing, each serving specific purposes such as testing small pieces of code, automated functional testing, and ensuring the proper functionality of the application in different environments. The chapter covers the three types of testing: unit testing, functional testing, and integration testing, each serving distinct purposes in testing software applications.']}, {'end': 15465.803, 'start': 15148.803, 'title': 'Angular testing: jasmine and end-to-end tests', 'summary': 'Discusses the popular unit testing framework jasmine for testing angular applications, emphasizing the importance of functional testing and end-to-end testing, and comparing the benefits of jasmine and protector for end-to-end testing in angular.', 'duration': 317, 'highlights': ['Jasmine is a popular framework for unit testing in Angular applications. Jasmine is widely used for performing unit testing in Angular applications, emphasizing its popularity and relevance in the context of Angular testing.', 'Functional testing is crucial for testing application functionality and is slower than unit testing. Functional testing involves testing application functionality and interacting with real-time scenarios, taking longer to execute than unit testing and representing major releases.', 'End-to-end testing simulates user actions and behavior in the application. End-to-end testing simulates user actions and behavior, ensuring that the application behaves as expected, and it should not run unit testing scripts during this process.', 'Protector is a wrapper for Selenium used for end-to-end testing in Angular applications. Protector is highlighted as a wrapper for Selenium, providing advantages over Selenium for end-to-end testing in Angular applications.']}, {'end': 15725.577, 'start': 15465.803, 'title': 'Angular protactor and selenium testing', 'summary': "Discusses the differences between protactor and selenium in testing angular applications, highlighting protactor's ability to access angular model data and support for all browsers, while also explaining the role of karma as a task runner for testing javascript code with or without frameworks.", 'duration': 259.774, 'highlights': ['Protactor can access the model of Angular data bindings and supports all browsers Protactor can access the model of Angular data bindings, allowing it to interact with component properties and objects, and it supports testing in all browsers.', 'Karma serves as a task runner for testing JavaScript code with or without frameworks Karma is a task runner used for testing JavaScript code, whether written with or without frameworks, and it facilitates the running of test cases, ensuring proper application functionality across multiple browsers.', 'Jasmine and Mocha are testing frameworks for JavaScript code Jasmine and Mocha serve as testing frameworks for JavaScript code, with Jasmine being a behavior-driven development framework and Mocha specifically used for testing JavaScript-based applications.']}], 'duration': 954.029, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU14771548.jpg', 'highlights': ['Software testing is crucial for evaluating software functionality and ensuring the production of bug-free, quality products.', 'Delivering a bug-free quality product is the goal, and identifying bugs in the early stage can significantly reduce the cost of bug-fixing.', 'The chapter covers the three types of testing: unit testing, functional testing, and integration testing, each serving distinct purposes in testing software applications.', 'Jasmine is widely used for performing unit testing in Angular applications, emphasizing its popularity and relevance in the context of Angular testing.', 'Functional testing involves testing application functionality and interacting with real-time scenarios, taking longer to execute than unit testing and representing major releases.', 'End-to-end testing simulates user actions and behavior, ensuring that the application behaves as expected, and it should not run unit testing scripts during this process.', 'Protactor is highlighted as a wrapper for Selenium, providing advantages over Selenium for end-to-end testing in Angular applications.', 'Protactor can access the model of Angular data bindings, allowing it to interact with component properties and objects, and it supports testing in all browsers.', 'Karma is a task runner used for testing JavaScript code, whether written with or without frameworks, and it facilitates the running of test cases, ensuring proper application functionality across multiple browsers.', 'Jasmine and Mocha serve as testing frameworks for JavaScript code, with Jasmine being a behavior-driven development framework and Mocha specifically used for testing JavaScript-based applications.']}, {'end': 17154.914, 'segs': [{'end': 16819.062, 'src': 'embed', 'start': 16794.59, 'weight': 0, 'content': [{'end': 16800.913, 'text': 'So in this testing module, you are going to tell which component to be declarations colon.', 'start': 16794.59, 'duration': 6.323}, {'end': 16804.074, 'text': 'This is what happening for every time.', 'start': 16802.553, 'duration': 1.521}, {'end': 16812.217, 'text': "Now, what are you going to test every time it I'm going to say now coming to test case my component is available.", 'start': 16804.514, 'duration': 7.703}, {'end': 16819.062, 'text': 'What is my goal? I have to make sure my component is instantiated properly or not.', 'start': 16812.718, 'duration': 6.344}], 'summary': 'Testing module: ensuring proper instantiation of components.', 'duration': 24.472, 'max_score': 16794.59, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU16794590.jpg'}, {'end': 16999.022, 'src': 'embed', 'start': 16970.404, 'weight': 6, 'content': [{'end': 16975.205, 'text': 'now go and modify the value of component test to unit testing demo.', 'start': 16970.404, 'duration': 4.801}, {'end': 16977.445, 'text': 'now, automatically it is getting compiled.', 'start': 16975.205, 'duration': 2.24}, {'end': 16980.848, 'text': 'one test case fail, which one fail?', 'start': 16978.226, 'duration': 2.622}, {'end': 16985.992, 'text': 'if you observe, i am expecting unit testing demo to equal to unit testing.', 'start': 16980.848, 'duration': 5.144}, {'end': 16990.576, 'text': "unit testing demo is equal to unit testing, never so that's why it failed.", 'start': 16985.992, 'duration': 4.584}, {'end': 16993.838, 'text': 'so that means, based on this, it is going to fail.', 'start': 16990.576, 'duration': 3.262}, {'end': 16999.022, 'text': 'same way, spec file it should create render title in a h1 tag.', 'start': 16993.838, 'duration': 5.184}], 'summary': 'One test case failed in unit testing demo, causing the compilation to fail.', 'duration': 28.618, 'max_score': 16970.404, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU16970404.jpg'}, {'end': 17051.219, 'src': 'embed', 'start': 17022.476, 'weight': 9, 'content': [{'end': 17026.199, 'text': 'if there are multiple h1s, you are in school, then you have to put id.', 'start': 17022.476, 'duration': 3.723}, {'end': 17029.4, 'text': 'which query selector you want to use that text content?', 'start': 17026.199, 'duration': 3.201}, {'end': 17030.601, 'text': 'i am getting it.', 'start': 17029.4, 'duration': 1.201}, {'end': 17032.642, 'text': 'welcome to unit testing.', 'start': 17030.601, 'duration': 2.041}, {'end': 17035.224, 'text': 'the h1 contains data binding.', 'start': 17032.642, 'duration': 2.582}, {'end': 17037.025, 'text': 'it says two test cases failed.', 'start': 17035.224, 'duration': 1.801}, {'end': 17039.17, 'text': 'Why to test cases fail?', 'start': 17037.509, 'duration': 1.661}, {'end': 17041.212, 'text': 'because the below test case also fail.', 'start': 17039.17, 'duration': 2.042}, {'end': 17047.516, 'text': 'What is the below test case H1 dot text content H1 has a welcome to unit testing.', 'start': 17041.572, 'duration': 5.944}, {'end': 17051.219, 'text': 'This also did not match earlier when I modified to unit testing demo.', 'start': 17048.016, 'duration': 3.203}], 'summary': 'Discussion on unit testing with 2 failed test cases and modification of text content for h1.', 'duration': 28.743, 'max_score': 17022.476, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU17022476.jpg'}, {'end': 17140.841, 'src': 'embed', 'start': 17111.496, 'weight': 2, 'content': [{'end': 17117.319, 'text': 'you are passing something and you are expecting that to be matching with that, to be the method space, space,', 'start': 17111.496, 'duration': 5.823}, {'end': 17120.841, 'text': 'that expected value of the test before each, after each.', 'start': 17117.319, 'duration': 3.522}, {'end': 17127.75, 'text': "Let's assume you're going to create a database connection or you're going to install some object and you want to destroy that.", 'start': 17121.385, 'duration': 6.365}, {'end': 17129.212, 'text': 'After each you can use it.', 'start': 17127.93, 'duration': 1.282}, {'end': 17131.373, 'text': 'These are the methods which will be using it.', 'start': 17129.712, 'duration': 1.661}, {'end': 17140.841, 'text': 'Same continuation evaluation methods to be, to equal, to match, to be, to contains, to be less than, to be greater than, not equal to.', 'start': 17131.714, 'duration': 9.127}], 'summary': 'Discussion includes methods like to equal, to match, to contain, to be less than, and not equal to.', 'duration': 29.345, 'max_score': 17111.496, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU17111496.jpg'}], 'start': 15726.218, 'title': 'Angular unit testing and dependencies', 'summary': 'Covers mandatory angular development dependencies such as jasmine, karma, typescript, and protractor, along with insights into unit testing with jasmine for angular, and the process of setting up and running unit test cases for an angular application, emphasizing the importance of proper test coverage.', 'chapters': [{'end': 15864.605, 'start': 15726.218, 'title': 'Angular development dependencies overview', 'summary': 'Discusses the mandatory development dependencies for an angular project, including jasmine, karma, typescript, ts link, protractor, istanbul, chrome launcher, and their respective purposes, along with the significance of jasmine and karma in the default angular setup.', 'duration': 138.387, 'highlights': ['Jasmine is a framework used for unit testing, provided by default in Angular setup Jasmine is a default framework for unit testing in Angular setup, eliminating the need for separate installation.', 'Karma serves as a task runner for configuring unit testing with Jasmine framework Karma is utilized for configuring unit testing with the Jasmine framework, aiding in the setup of Angular applications.', 'TypeScript, TS link, Protractor, Istanbul, and Chrome launcher are essential development dependencies for Angular projects TypeScript, TS link, Protractor, Istanbul, and Chrome launcher are crucial development dependencies required for Angular projects.']}, {'end': 16262.492, 'start': 15864.605, 'title': 'Unit testing with jasmine and angular', 'summary': 'Provides insights into creating test suites, test cases, and using jasmine methods for unit testing in angular, along with configuring and running unit test coverage using angular command line.', 'duration': 397.887, 'highlights': ['The chapter explains the process of creating test suites and test cases for a Facebook application, such as login and product-related suites, and the corresponding test scenarios like valid username, password, login, register user, add product, place order, and query products.', 'The transcript elaborates on the usage of Jasmine methods like describe, it, before each, and after each for grouping test cases, writing test case logic, and assertions, providing a way to test applications.', 'The speaker demonstrates the process of configuring and running unit test coverage using Angular command line, showing the steps for triggering ng test, understanding package.json file, and the internal working of npm start and ng serve commands.', 'The chapter provides insights into the configuration files such as angular.json, src/test.ts, polyfills, tsconfig.spec.json, karma configuration, and their roles in setting up and running unit test coverage for an Angular application using Jasmine.']}, {'end': 16559.643, 'start': 16262.572, 'title': 'Angular unit testing overview', 'summary': 'Explains the process of setting up and running unit test cases for an angular application, including the use of browser modules and dynamic testing modules, as well as the importance of testing component code coverage and behaviors.', 'duration': 297.071, 'highlights': ['The process of setting up and running unit test cases for an Angular application involves bootstrapping the application with main modules and utilizing browser modules and dynamic testing modules. This process includes bootstrapping the application with main modules, utilizing browser modules and dynamic testing modules.', 'Testing component code coverage and behaviors involves verifying the creation of the application component instance, accessing component properties and methods, and validating specific scenarios such as database record retrieval and login page success or failure. Testing component code coverage and behaviors involves verifying the creation of the application component instance, accessing component properties and methods, and validating specific scenarios such as database record retrieval and login page success or failure.', 'The importance of the test.js file in the SRC directory is emphasized, as it contains crucial information for running the application in a browser and identifying Angular syntaxes. The test.js file in the SRC directory holds crucial information for running the application in a browser and identifying Angular syntaxes.']}, {'end': 17154.914, 'start': 16560.223, 'title': 'Unit testing in angular', 'summary': 'Discusses unit testing in angular, covering the process of rendering the title in a h1 tag, validating component instantiation, and accessing html elements in unit test cases using jasmine framework. it emphasizes the importance of proper unit test coverage to ensure code quality.', 'duration': 594.691, 'highlights': ['The chapter emphasizes the importance of proper unit test coverage to ensure code quality. Importance of proper unit test coverage for code quality.', 'It covers the process of rendering the title in a h1 tag and validating component instantiation in unit test cases. Process of rendering the title in a h1 tag and validating component instantiation.', 'The chapter discusses the process of accessing HTML elements in unit test cases using the Jasmine framework. Process of accessing HTML elements in unit test cases using Jasmine framework.']}], 'duration': 1428.696, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU15726218.jpg', 'highlights': ['Jasmine is a default framework for unit testing in Angular setup, eliminating the need for separate installation.', 'Karma is utilized for configuring unit testing with the Jasmine framework, aiding in the setup of Angular applications.', 'TypeScript, TS link, Protractor, Istanbul, and Chrome launcher are crucial development dependencies required for Angular projects.', 'The chapter explains the process of creating test suites and test cases for a Facebook application, such as login and product-related suites, and the corresponding test scenarios like valid username, password, login, register user, add product, place order, and query products.', 'The speaker demonstrates the process of configuring and running unit test coverage using Angular command line, showing the steps for triggering ng test, understanding package.json file, and the internal working of npm start and ng serve commands.', 'The chapter provides insights into the configuration files such as angular.json, src/test.ts, polyfills, tsconfig.spec.json, karma configuration, and their roles in setting up and running unit test coverage for an Angular application using Jasmine.', 'Testing component code coverage and behaviors involves verifying the creation of the application component instance, accessing component properties and methods, and validating specific scenarios such as database record retrieval and login page success or failure.', 'The test.js file in the SRC directory holds crucial information for running the application in a browser and identifying Angular syntaxes.', 'The chapter emphasizes the importance of proper unit test coverage for code quality.', 'Process of rendering the title in a h1 tag and validating component instantiation.', 'Process of accessing HTML elements in unit test cases using Jasmine framework.']}, {'end': 18039.581, 'segs': [{'end': 17245.973, 'src': 'embed', 'start': 17220.919, 'weight': 3, 'content': [{'end': 17227.303, 'text': 'He has to enter the username, password, admin at gmail and click a button and verify whether the login successful or not.', 'start': 17220.919, 'duration': 6.384}, {'end': 17233.824, 'text': "So how do I automate this process so that I don't need to hire a QA engineer or a test engineer?", 'start': 17227.659, 'duration': 6.165}, {'end': 17239.988, 'text': 'So to do that automation purpose, we have a concept called Selenium or Protactor.', 'start': 17234.184, 'duration': 5.804}, {'end': 17241.71, 'text': 'So NG E2E.', 'start': 17240.289, 'duration': 1.421}, {'end': 17243.871, 'text': 'I would say NG end-to-end testing.', 'start': 17242.13, 'duration': 1.741}, {'end': 17245.973, 'text': 'See, the browser opened, it closed.', 'start': 17244.151, 'duration': 1.822}], 'summary': 'Automate login process using selenium or protactor for ng e2e testing.', 'duration': 25.054, 'max_score': 17220.919, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU17220919.jpg'}, {'end': 17516.37, 'src': 'embed', 'start': 17483.46, 'weight': 1, 'content': [{'end': 17487.742, 'text': "I'm not entering anything login success and it will close the test case executed successfully.", 'start': 17483.46, 'duration': 4.282}, {'end': 17495.867, 'text': "Did I do anything? I have automated that it's like a Robo is doing it now go to the code the code package.json file.", 'start': 17488.223, 'duration': 7.644}, {'end': 17503.987, 'text': "What is the script in to end when I say ng e to e It started triggering something which we don't know as of now.", 'start': 17496.208, 'duration': 7.779}, {'end': 17507.388, 'text': 'We already have protect and install for development purpose.', 'start': 17504.287, 'duration': 3.101}, {'end': 17516.37, 'text': "Even you don't need to say npm install hyphen G but as a practice I made it now go to Protector configuration file in this Protector else.", 'start': 17507.848, 'duration': 8.522}], 'summary': 'Successful execution of test case without manual input, triggering unanticipated process with npm install protection.', 'duration': 32.91, 'max_score': 17483.46, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU17483460.jpg'}, {'end': 17632.469, 'src': 'embed', 'start': 17605.109, 'weight': 4, 'content': [{'end': 17611.471, 'text': 'What is that component go to my code app component app.module.ts I have a main app component.', 'start': 17605.109, 'duration': 6.362}, {'end': 17617.392, 'text': 'I have a login component what my login component will do and it has a forms module imported.', 'start': 17611.931, 'duration': 5.461}, {'end': 17622.043, 'text': 'So now you have a login component login component is a root component for you.', 'start': 17617.881, 'duration': 4.162}, {'end': 17632.469, 'text': 'Now go to login component at HTML what login component has it has only HTML code one form input username and a data model binding ng model.', 'start': 17622.544, 'duration': 9.925}], 'summary': 'The app consists of app and login components, with the login component containing a form with a username input and data model binding.', 'duration': 27.36, 'max_score': 17605.109, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU17605109.jpg'}, {'end': 17923.643, 'src': 'embed', 'start': 17897.168, 'weight': 0, 'content': [{'end': 17901.049, 'text': 'come back, so that means I will add one more input field.', 'start': 17897.168, 'duration': 3.881}, {'end': 17903.049, 'text': 'then you will get an idea how to do that.', 'start': 17901.049, 'duration': 2}, {'end': 17909.61, 'text': 'so one more input field if you want to add it here, do some input field name text.', 'start': 17903.049, 'duration': 6.561}, {'end': 17911.411, 'text': 'now go to the application.', 'start': 17909.61, 'duration': 1.801}, {'end': 17916.291, 'text': 'here. once do login right, I would say by dot name.', 'start': 17911.411, 'duration': 4.88}, {'end': 17919.052, 'text': 'you can use ID also by dot name, first name.', 'start': 17916.291, 'duration': 2.761}, {'end': 17923.643, 'text': 'If you want to enter the data, you have to use element which is given by Protactor.', 'start': 17919.682, 'duration': 3.961}], 'summary': 'The transcript discusses adding an additional input field and using protractor for data entry.', 'duration': 26.475, 'max_score': 17897.168, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU17897168.jpg'}], 'start': 17154.914, 'title': 'Automating angular application testing', 'summary': 'Covers the importance of protractor for automating functional testing, the installation and configuration steps, and the automation of an angular login component, emphasizing the benefits of automation and the use of protractor for end-to-end testing.', 'chapters': [{'end': 17604.589, 'start': 17154.914, 'title': 'Automating application testing with protractor', 'summary': 'Discusses the importance of protractor for automating functional testing, the installation process, and the configuration steps to set up protractor for end-to-end testing of an angular application, while highlighting the benefits of automation and the role of protractor in simulating user actions.', 'duration': 449.675, 'highlights': ['Protractor is a testing library that allows you to test application workflows, simulating user actions, without the need to perform them manually. Protractor enables the automation of testing application workflows without manual intervention, demonstrating the efficiency and time-saving benefits of automation.', 'Installing Protractor requires npm install -g protractor globally, and the webdriver manager is essential for interacting with web elements for testing applications in Chrome, Firefox, and IE. The installation process involves globally installing Protractor through npm and updating the webdriver manager, enabling testing application interactions across different browsers.', 'The Protractor configuration file specifies the use of Jasmine as a framework, with a default timeout interval of 30 seconds, and ensures the application is running before initiating end-to-end testing. The configuration file dictates the use of Jasmine as the framework, sets a default timeout interval, and emphasizes the necessity for the application to be running before commencing end-to-end testing.']}, {'end': 18039.581, 'start': 17605.109, 'title': 'Angular component automation', 'summary': 'Covers the creation and automation of an angular login component, including the use of ng model for data binding, and the implementation of protractor for end-to-end testing, with a focus on element identification and interaction.', 'duration': 434.472, 'highlights': ['The login component utilizes ng model for data binding, enabling bidirectional updates between the model and UI, facilitating the input of username and password. The ng model is used to ensure that modifications to the username model are reflected in the UI, and vice versa, allowing for seamless interaction with the input fields.', 'The login process involves the method validate login, which updates the status variable to indicate a successful login message, triggering a change in the UI. Upon clicking the login button, the validate login method is called, updating the status variable to reflect a successful login message, thus altering the UI accordingly.', 'Protractor is employed for end-to-end testing, utilizing browser interactions and element identification, such as accessing input fields and clicking buttons. The chapter demonstrates the usage of Protractor for end-to-end testing, including browser interactions, accessing input fields through element identification, and clicking buttons.']}], 'duration': 884.667, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU17154914.jpg', 'highlights': ['Protractor enables the automation of testing application workflows without manual intervention, demonstrating the efficiency and time-saving benefits of automation.', 'The installation process involves globally installing Protractor through npm and updating the webdriver manager, enabling testing application interactions across different browsers.', 'The configuration file dictates the use of Jasmine as the framework, sets a default timeout interval, and emphasizes the necessity for the application to be running before commencing end-to-end testing.', 'The ng model is used to ensure that modifications to the username model are reflected in the UI, and vice versa, allowing for seamless interaction with the input fields.', 'Upon clicking the login button, the validate login method is called, updating the status variable to reflect a successful login message, thus altering the UI accordingly.', 'The chapter demonstrates the usage of Protractor for end-to-end testing, including browser interactions, accessing input fields through element identification, and clicking buttons.']}, {'end': 19101.55, 'segs': [{'end': 18274.376, 'src': 'embed', 'start': 18246.257, 'weight': 0, 'content': [{'end': 18250.761, 'text': 'It will interact with the master and response will be same KC loader KC manager.', 'start': 18246.257, 'duration': 4.504}, {'end': 18253.944, 'text': 'Now how to configure nginx.', 'start': 18251.342, 'duration': 2.602}, {'end': 18259.269, 'text': "you have to use firewalls, all these things, but I don't have all this setup with me.", 'start': 18253.944, 'duration': 5.325}, {'end': 18266.975, 'text': 'go to this location, configure all those things, deploy your application and do that deploying application using docker image.', 'start': 18259.269, 'duration': 7.706}, {'end': 18268.997, 'text': 'Why do we need to use a docker?', 'start': 18267.736, 'duration': 1.261}, {'end': 18270.838, 'text': 'What is the containerization?', 'start': 18269.497, 'duration': 1.341}, {'end': 18271.419, 'text': 'we will talk about?', 'start': 18270.838, 'duration': 0.581}, {'end': 18274.376, 'text': 'Problems before containers.', 'start': 18271.994, 'duration': 2.382}], 'summary': 'Interact with master for kc loader, configure nginx, deploy app with docker, discuss containerization and problems before containers.', 'duration': 28.119, 'max_score': 18246.257, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU18246257.jpg'}, {'end': 18340.081, 'src': 'embed', 'start': 18308.592, 'weight': 1, 'content': [{'end': 18315.998, 'text': 'you have to coordinate with the infrastructure team to make sure all the required dependencies are available in that particular server or not,', 'start': 18308.592, 'duration': 7.406}, {'end': 18318.46, 'text': 'version number matching or those things.', 'start': 18315.998, 'duration': 2.462}, {'end': 18321.162, 'text': 'maybe you will be testing your application on a Windows box.', 'start': 18318.46, 'duration': 2.702}, {'end': 18325.826, 'text': 'Suddenly you will move your application to test environment which is running in a Linux box.', 'start': 18321.683, 'duration': 4.143}, {'end': 18329.989, 'text': 'So there are some issues with the version that is what they are talking about.', 'start': 18326.506, 'duration': 3.483}, {'end': 18340.081, 'text': 'My application is working in my laptop but not in testing or production environment because of the runtime drift configuration drift or dependencies drift.', 'start': 18330.598, 'duration': 9.483}], 'summary': 'Coordinate with infrastructure team for dependencies, version matching, and environment issues to avoid configuration drift.', 'duration': 31.489, 'max_score': 18308.592, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU18308592.jpg'}, {'end': 18369.339, 'src': 'embed', 'start': 18345.102, 'weight': 2, 'content': [{'end': 18354.525, 'text': 'it may not be suitable for Linux or production environment because production servers might be running on a Windows 7 or Windows 2000 application server,', 'start': 18345.102, 'duration': 9.423}, {'end': 18355.265, 'text': 'whatever it could be.', 'start': 18354.525, 'duration': 0.74}, {'end': 18364.697, 'text': 'So my laptop has version number 5.4 and test environment has latest version of software or of angular or whatever it may be.', 'start': 18355.854, 'duration': 8.843}, {'end': 18367.819, 'text': 'production has old version for on-premise.', 'start': 18364.697, 'duration': 3.122}, {'end': 18369.339, 'text': 'We have version 6.', 'start': 18367.999, 'duration': 1.34}], 'summary': 'Test environment has the latest angular version, while production uses an older version for on-premise deployment.', 'duration': 24.237, 'max_score': 18345.102, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU18345102.jpg'}], 'start': 18040.101, 'title': 'Web development and server optimization', 'summary': 'Covers adding a button in the login component, deploying the application on a production server using nginx, load balancing for improved server performance, nginx architecture with event-driven, non-blocking approach, and the concept of containerization using docker for portable and efficient applications.', 'chapters': [{'end': 18090.76, 'start': 18040.101, 'title': 'Adding button in login component', 'summary': 'Covers the addition of a button in the login component and the deployment of the application on a production server using engine ix, an open source software that significantly reduces page load time and provides http server capabilities for reverse proxying, caching, and load balancing.', 'duration': 50.659, 'highlights': ['Engine ix is a web server software that significantly reduces page load time, provides HTTP server capabilities, and is mainly used for reverse proxying, caching, and load balancing.', 'The deployment of the application on a production server using engine ix is discussed, detailing its operational benefits for handling multiple requests.', 'The addition of a button in the login component is mentioned as a part of the application development process.']}, {'end': 18369.339, 'start': 18090.76, 'title': 'Load balancing and nginx architecture', 'summary': 'Discusses the concept of load balancing for improving server performance by distributing the load across multiple servers and the architecture of nginx, which uses an event-driven, non-blocking approach for handling requests and follows a master-slave model for scalability and performance optimization.', 'duration': 278.579, 'highlights': ['Nginx uses event-driven, non-blocking architecture and follows a master-slave model for scalability Nginx utilizes an event-driven, non-blocking architecture and master-slave model to handle requests, ensuring scalability and performance optimization.', 'Load balancing is used to distribute the load across multiple servers for improved performance Load balancing is instrumental in distributing the load across multiple servers, thus enhancing performance and stability.', 'Runtime and configuration drift can cause application issues when moving from development to testing or production environments Issues related to runtime and configuration drift can arise when transitioning an application from development to testing or production environments, impacting its functionality.', 'Dependencies and versioning mismatches can lead to application issues in different environments Mismatched dependencies and versioning between environments can result in application functionality issues, necessitating coordination with the infrastructure team.']}, {'end': 19101.55, 'start': 18369.339, 'title': 'Containerization and docker basics', 'summary': 'Explains the concept of containerization and the use of docker for creating portable and efficient applications, highlighting benefits such as resource efficiency, portability, and ease of deployment, with key points including the process of creating a docker image and running an application in a docker container.', 'duration': 732.211, 'highlights': ['Docker provides a containerization solution that packages the application along with its dependencies into a single unit, ensuring reliable execution across different environments, eliminating the need to carry multiple operating systems and reducing resource usage compared to virtual machines. Containerization with Docker ensures reliable application execution across different environments, eliminating the need to carry multiple operating systems and reducing resource usage compared to virtual machines.', 'Docker allows developers to package applications with all the necessary requirements and dependencies, ensuring seamless operation in various environments such as development, testing, and production. Developers can use Docker to package applications with all requirements and dependencies, ensuring seamless operation in various environments such as development, testing, and production.', 'The process of creating a Docker image involves using a Dockerfile to specify instructions for running the application in a container, followed by building the image and running the application in a Docker container, providing portability and efficient deployment. Creating a Docker image involves using a Dockerfile to specify instructions for running the application in a container, followed by building the image and running the application in a Docker container, providing portability and efficient deployment.']}], 'duration': 1061.449, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU18040101.jpg', 'highlights': ['Nginx uses event-driven, non-blocking architecture and follows a master-slave model for scalability Nginx utilizes an event-driven, non-blocking architecture and master-slave model to handle requests, ensuring scalability and performance optimization.', 'Load balancing is used to distribute the load across multiple servers for improved performance Load balancing is instrumental in distributing the load across multiple servers, thus enhancing performance and stability.', 'Docker provides a containerization solution that packages the application along with its dependencies into a single unit, ensuring reliable execution across different environments, eliminating the need to carry multiple operating systems and reducing resource usage compared to virtual machines. Containerization with Docker ensures reliable application execution across different environments, eliminating the need to carry multiple operating systems and reducing resource usage compared to virtual machines.']}, {'end': 20425.946, 'segs': [{'end': 19339.692, 'src': 'embed', 'start': 19310.521, 'weight': 3, 'content': [{'end': 19316.423, 'text': 'Virtual Dom is also a node tree that lists out elements and their attributes as objects.', 'start': 19310.521, 'duration': 5.902}, {'end': 19320.145, 'text': 'reacts render function creates a node tree out of the react components.', 'start': 19316.423, 'duration': 3.722}, {'end': 19330.208, 'text': 'Then it updates this tree in response to the mutations in the data model caused by various actions done either by the user or by the system.', 'start': 19320.805, 'duration': 9.403}, {'end': 19333.33, 'text': 'virtual Dom is not browser-specific and it is lightweight.', 'start': 19330.208, 'duration': 3.122}, {'end': 19339.692, 'text': 'It is provided in react package for free and eliminates the issues of slow performance of real Dom.', 'start': 19334.07, 'duration': 5.622}], 'summary': "React's virtual dom is lightweight, not browser-specific, and improves performance by updating node tree in response to data mutations.", 'duration': 29.171, 'max_score': 19310.521, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU19310521.jpg'}, {'end': 19401.721, 'src': 'embed', 'start': 19357.284, 'weight': 0, 'content': [{'end': 19364.786, 'text': 'property binding of angular will allow you to pass data from the component class and set the value to give an element at the user end.', 'start': 19357.284, 'duration': 7.502}, {'end': 19368.267, 'text': 'property binding also allows you to control elements property.', 'start': 19364.786, 'duration': 3.481}, {'end': 19372.719, 'text': 'Two-way data binding is a very important feature of angular.', 'start': 19369.016, 'duration': 3.703}, {'end': 19379.966, 'text': 'with this, angular allows you to make changes from the views to the models and from the models to the views react,', 'start': 19372.719, 'duration': 7.247}, {'end': 19383.268, 'text': 'unlike angular allows one-way data binding here.', 'start': 19379.966, 'duration': 3.302}, {'end': 19388.453, 'text': 'The UI elements can be changed only after changing the model state the developers.', 'start': 19383.609, 'duration': 4.844}, {'end': 19392.937, 'text': 'However, cannot alter the UI elements without updating the corresponding models.', 'start': 19388.533, 'duration': 4.404}, {'end': 19400.12, 'text': 'A great advantage of using the one-way data binding is that, throughout the application, the data flows in a single direction,', 'start': 19393.718, 'duration': 6.402}, {'end': 19401.721, 'text': 'which gives you better control over it.', 'start': 19400.12, 'duration': 1.601}], 'summary': "Angular's property binding enables passing data and controlling elements; two-way binding facilitates bidirectional changes for better control.", 'duration': 44.437, 'max_score': 19357.284, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU19357284.jpg'}, {'end': 20172.837, 'src': 'embed', 'start': 20081.153, 'weight': 1, 'content': [{'end': 20088.278, 'text': 'Now, if they have good Creatability and technical decision-making, it would again come in handy while creating great projects like angular.', 'start': 20081.153, 'duration': 7.125}, {'end': 20097.586, 'text': 'Now, if they have good research on any given product, that will make a complex task to break down and work on it.', 'start': 20089.147, 'duration': 8.439}, {'end': 20108.739, 'text': 'Now, if they have good coding capability and writing great codes that will help in unit testing of an application in angular.', 'start': 20098.47, 'duration': 10.269}, {'end': 20115.846, 'text': 'and if they have good coding capability for lightweight and well optimized and high performance programming skills,', 'start': 20108.739, 'duration': 7.107}, {'end': 20120.25, 'text': 'that will also be a great responsibility for an angular developer.', 'start': 20115.846, 'duration': 4.404}, {'end': 20129.193, 'text': "Now here I've considered some of the job descriptions according to a website enlisted for each of the company here.", 'start': 20120.99, 'duration': 8.203}, {'end': 20130.634, 'text': "I've considered IBM.", 'start': 20129.233, 'duration': 1.401}, {'end': 20140.698, 'text': "Well, IBM has actually posted requirement for angular developer and the main programming languages that they're looking for is JavaScript and typescript,", 'start': 20131.074, 'duration': 9.624}, {'end': 20147.321, 'text': "as I've discussed earlier, and they also require a person who has good knowledge on angular 6 and above.", 'start': 20140.698, 'duration': 6.623}, {'end': 20152.664, 'text': 'HTML and CSS in any related frameworks is also helping.', 'start': 20147.901, 'duration': 4.763}, {'end': 20160.709, 'text': 'as you can see, every company basically asked for angular, JavaScript, HTML and CSS in main scale.', 'start': 20152.664, 'duration': 8.045}, {'end': 20168.454, 'text': 'Now, this is another company called Siemens where they have posted a requirement for front-end developer in angular again.', 'start': 20161.53, 'duration': 6.924}, {'end': 20172.837, 'text': 'Their requirement is angular 2 plus JavaScript HTML and CSS.', 'start': 20168.514, 'duration': 4.323}], 'summary': 'Angular developers need good creatability, technical decision-making, research skills, and coding capability for javascript, typescript, html, and css.', 'duration': 91.684, 'max_score': 20081.153, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU20081153.jpg'}], 'start': 19101.55, 'title': 'Angular vs react: a comparative analysis', 'summary': 'Delves into the comparison between angular and react, including their development history, architecture, latest versions, major websites built on each, their impact on performance and user experience, differences in data binding, features, speed, productivity, deployment, learning curve, market trend, and community support, along with opportunities and earnings for angular developers, roles and responsibilities, and job market statistics.', 'chapters': [{'end': 19267.484, 'start': 19101.55, 'title': 'Angular vs react: a comparison', 'summary': 'Discusses the differences between angular and react, including their development history, architecture, latest versions, major websites built on each, and their licensing, highlighting the popularity and usage of these frameworks in major applications and websites.', 'duration': 165.934, 'highlights': ['React is used in popular applications such as Instagram, WhatsApp, and Airbnb. Popular applications like Instagram, WhatsApp, and Airbnb are built on React, showcasing its widespread usage and popularity.', 'Angular is utilized in major websites like YouTube, PayPal, Walmart, and Gmail. Angular is employed in significant websites such as YouTube, PayPal, Walmart, and Gmail, indicating its extensive use in prominent online platforms.', 'The latest version of Angular, Angular 9, was released on 7th February 2020, with a core feature being Angular IV. Angular 9, released on 7th February 2020, introduced Angular IV as a core feature, demonstrating the continuous development and innovation within the Angular framework.', "React's latest major version is React version 16, focusing on server-side rendering for websites. The latest major version of React, React version 16, emphasizes server-side rendering for websites, illustrating the evolving capabilities of the React framework.", 'Both Angular 9 and React 16 are licensed under the MIT license, known for its minimal software redistribution requirements. Angular 9 and React 16 are both licensed under the MIT license, which is recognized for its minimal software redistribution requirements, ensuring the accessibility and openness of these frameworks.']}, {'end': 19482.607, 'start': 19267.484, 'title': 'Angular 9 vs react 16', 'summary': 'Compares the use of real dom and virtual dom in angular and react, highlighting the impact on performance and user experience, along with the differences in data binding and the latest features of angular 9 and react 16.', 'duration': 215.123, 'highlights': ["Angular uses real DOM while React uses virtual DOM, impacting performance and user experience, especially in handling large data requests on the same page. The real DOM updates the entire tree structure for HTML tags, affecting performance with large data requests. On the other hand, React's virtual DOM offers better performance and user experience, as it updates components attached to a node tree, providing comfort in navigation within a website.", "Virtual DOM in React is lightweight, not browser-specific, and eliminates the slow performance issues of real DOM. React's virtual DOM is lightweight, not browser-specific, and resolves the slow performance issues of real DOM, provided for free in the React package, making it a better alternative.", 'Angular offers two-way data binding, event binding, and property binding, while React allows only one-way data binding. Angular provides two-way data binding, event binding, and property binding, allowing changes from views to models and vice versa. In contrast, React supports one-way data binding, providing better control and flexibility over data flow.', 'Latest features of Angular 9 include default compilation with Ivy, AOT compiler, and TypeScript 3.7 compatibility, while React 16 introduces concurrent mode and suspense for improved user experiences. Angular 9 introduces default compilation with Ivy, AOT compiler, and TypeScript 3.7 compatibility, enhancing performance and type checking. On the other hand, React 16 brings concurrent mode and suspense, enabling faster app binding and elegant loading sequences for improved user experiences.']}, {'end': 19798.108, 'start': 19483.327, 'title': 'React vs angular: a comparative analysis', 'summary': 'Discusses the features, speed, productivity, deployment, learning curve, market trend, and community support of react and angular, highlighting that react has a smaller learning curve, while angular has an edge in the job market with over 12,000 job opportunities in india and over 30,000 in the u.s.', 'duration': 314.781, 'highlights': ['Job Opportunities There are over 12,000 job opportunities in India and over 30,000 in the U.S. for Angular developers, indicating a high demand for Angular skills in the job market.', 'Community Support According to the 2019 stack overflow survey, React is the most loved and supported framework by developers, while Angular also has good community support, showcasing a close competition in terms of developer preference.', 'Learning Curve React has a relatively small library and fewer concepts to learn compared to Angular, making it easier for those who want to learn web development quickly and have smaller project requirements.', "Deployment React's lighter size makes it easier to deploy applications, often using node.js, while Angular has become easier to deploy thanks to Angular Firebase, which has officially added support for Firebase and Angular apps.", 'Speed and Productivity Angular has an edge over React in terms of speed and productivity deployment, especially with the drastic reduction in app size and enhanced development experience facilitated by the Angular CLI.']}, {'end': 20032.44, 'start': 19798.809, 'title': 'Angular developer opportunities and earnings', 'summary': "Discusses the opportunities and earnings for angular developers, stating that in india, an average angular developer can earn up to 5 lakh per annum with basic knowledge and up to 8.5 lakh per annum with advanced knowledge, while in the us, one can earn up to $100,000 with basic knowledge and over $150,000 with advanced knowledge. it also highlights the top companies hiring angular developers and provides an overview of angular's features and compatibility.", 'duration': 233.631, 'highlights': ['In India, an average angular developer can earn up to 5 lakh per annum with basic knowledge and up to 8.5 lakh per annum with advanced knowledge. This showcases the earning potential for angular developers, providing quantifiable data.', 'In the US, one can earn up to $100,000 with basic knowledge and over $150,000 with advanced knowledge. This highlights the potential earnings for angular developers in the US, providing quantifiable data.', 'Top companies such as IBM, Accenture, and Infosys are hiring angular developers. This emphasizes the demand for angular developers in reputable companies, providing specific examples.', 'Angular is widely used in well-known multinational companies like Google, Facebook, and PayPal. This underscores the popularity and usage of Angular in major multinational companies, providing specific examples.', "Angular is a typescript-based free and open source web application framework. This provides an overview of Angular's foundation and technology, giving insight into its framework."]}, {'end': 20425.946, 'start': 20033.681, 'title': 'Angular developer roles & responsibilities', 'summary': 'Discusses the roles and responsibilities of an angular developer, including primary responsibilities, required skills, and a roadmap for becoming an angular developer, with emphasis on javascript, typescript, html, css, and knowledge of angular versions 2 and above, as well as the importance of self-learning and community engagement.', 'duration': 392.265, 'highlights': ['The primary responsibility of an angular developer is to work on client-side applications, providing a full featured UI service for web applications and websites. Angular developers are responsible for designing modules and components and combining them to create functional programs, using the latest trends and technologies to design minimalist, modern web applications.', 'Technical skills required for an angular developer include knowledge of TypeScript, HTML, CSS, cross-browser compatibility, rest APIs, rest services, Ajax, and document object module manipulation techniques. Angular developers are expected to have good coding capability and writing great codes for unit testing of applications, and lightweight, well-optimized, and high-performance programming skills.', 'The roadmap for becoming an angular developer involves learning JavaScript, TypeScript, and self-teaching angular, while also engaging with social media groups and communities to stay updated on the latest technologies. Becoming an angular developer requires a strong foundation in JavaScript, learning TypeScript, and self-teaching angular, along with staying updated on the latest technologies through social media groups and communities.']}], 'duration': 1324.396, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU19101550.jpg', 'highlights': ['React is used in popular applications such as Instagram, WhatsApp, and Airbnb.', 'Angular is utilized in major websites like YouTube, PayPal, Walmart, and Gmail.', 'The latest version of Angular, Angular 9, was released on 7th February 2020, with a core feature being Angular IV.', "React's latest major version is React version 16, focusing on server-side rendering for websites.", 'Both Angular 9 and React 16 are licensed under the MIT license, known for its minimal software redistribution requirements.', "React's virtual DOM is lightweight, not browser-specific, and eliminates the slow performance issues of real DOM.", 'Angular offers two-way data binding, event binding, and property binding, while React allows only one-way data binding.', 'Latest features of Angular 9 include default compilation with Ivy, AOT compiler, and TypeScript 3.7 compatibility, while React 16 introduces concurrent mode and suspense for improved user experiences.', 'There are over 12,000 job opportunities in India and over 30,000 in the U.S. for Angular developers, indicating a high demand for Angular skills in the job market.', 'React is the most loved and supported framework by developers, while Angular also has good community support, showcasing a close competition in terms of developer preference.', 'React has a relatively small library and fewer concepts to learn compared to Angular, making it easier for those who want to learn web development quickly and have smaller project requirements.', 'In India, an average angular developer can earn up to 5 lakh per annum with basic knowledge and up to 8.5 lakh per annum with advanced knowledge.', 'In the US, one can earn up to $100,000 with basic knowledge and over $150,000 with advanced knowledge.', 'Top companies such as IBM, Accenture, and Infosys are hiring angular developers.', 'The primary responsibility of an angular developer is to work on client-side applications, providing a full featured UI service for web applications and websites.', 'Technical skills required for an angular developer include knowledge of TypeScript, HTML, CSS, cross-browser compatibility, rest APIs, rest services, Ajax, and document object module manipulation techniques.', 'The roadmap for becoming an angular developer involves learning JavaScript, TypeScript, and self-teaching angular, while also engaging with social media groups and communities to stay updated on the latest technologies.']}, {'end': 21657.656, 'segs': [{'end': 20831.311, 'src': 'embed', 'start': 20802.755, 'weight': 2, 'content': [{'end': 20812.342, 'text': 'data binding is one of the most powerful and important features that allow you to define the communication between the component and document object model.', 'start': 20802.755, 'duration': 9.587}, {'end': 20826.608, 'text': 'It basically specifies process of defining interactive applications without having to worry about pushing and pulling data between your view or template and even component in angular.', 'start': 20813.28, 'duration': 13.328}, {'end': 20831.311, 'text': 'There are four forms of data binding string interpolation.', 'start': 20826.848, 'duration': 4.463}], 'summary': 'Data binding in angular enables defining communication between components and dom, with four forms including string interpolation.', 'duration': 28.556, 'max_score': 20802.755, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU20802755.jpg'}, {'end': 20900.007, 'src': 'embed', 'start': 20861.509, 'weight': 4, 'content': [{'end': 20864.93, 'text': 'One root scope can contain more than one child scopes.', 'start': 20861.509, 'duration': 3.421}, {'end': 20873.593, 'text': 'Here, each has its own scope, thus the variables set by its view controller will remain hidden to other controllers.', 'start': 20865.47, 'duration': 8.123}, {'end': 20883.016, 'text': 'Now the scope hierarchy generally looks like root scope continued by other scope controllers and the n number of controllers.', 'start': 20874.393, 'duration': 8.623}, {'end': 20887.658, 'text': 'The second we have what are angular modules.', 'start': 20884.056, 'duration': 3.602}, {'end': 20900.007, 'text': 'All the angular applications are either modular or angular which means angular applications follow a modularity system known as ngModules.', 'start': 20888.459, 'duration': 11.548}], 'summary': 'Root scope can have multiple child scopes with hidden variables. angular applications are modular with ngmodules.', 'duration': 38.498, 'max_score': 20861.509, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU20861509.jpg'}, {'end': 20967.808, 'src': 'embed', 'start': 20935.643, 'weight': 0, 'content': [{'end': 20946.052, 'text': 'The third question is what is subscribing in Angular? In Angular subscribe function is basically a method on the observable type.', 'start': 20935.643, 'duration': 10.409}, {'end': 20959.363, 'text': 'The observable type is a utility that asynchronously or synchronously streams data to a variety of components or services that have subscribed to the observable.', 'start': 20946.712, 'duration': 12.651}, {'end': 20965.847, 'text': 'Subscribe takes three methods as parameters which has each as functions.', 'start': 20960.063, 'duration': 5.784}, {'end': 20967.808, 'text': 'First function is next.', 'start': 20966.507, 'duration': 1.301}], 'summary': 'In angular, the subscribe function on the observable type streams data to subscribed components or services.', 'duration': 32.165, 'max_score': 20935.643, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU20935643.jpg'}, {'end': 21581.222, 'src': 'embed', 'start': 21557.384, 'weight': 3, 'content': [{'end': 21566.75, 'text': 'when it comes to automatic, it is done by adding the ng-app directive to the root of the application, typically on the tag or tag,', 'start': 21557.384, 'duration': 9.366}, {'end': 21571.613, 'text': 'if you want to add angular bootstrap in your application automatically.', 'start': 21566.75, 'duration': 4.863}, {'end': 21581.222, 'text': 'When angular finds ng app director, it loads the module associated with it and then compiles to Dom manual bootstrapping.', 'start': 21572.193, 'duration': 9.029}], 'summary': 'Angular automates by adding ng-app directive, loading associated module, and compiling to dom.', 'duration': 23.838, 'max_score': 21557.384, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU21557384.jpg'}], 'start': 20426.647, 'title': 'Angular development', 'summary': 'Covers angular versioning, roadmap variability, blog content, certification details, subscriptions, filters, dependency injection, compilation, services creation, rest api, interview questions, and various angular features.', 'chapters': [{'end': 20477.551, 'start': 20426.647, 'title': 'Angular versioning roadmap', 'summary': 'Outlines the process of creating an angular version, including the use of semantic versioning, release schedules, and the incorporation of breaking changes in major versions, while highlighting the variability of the roadmap across organizations.', 'duration': 50.904, 'highlights': ['The process of creating an Angular version involves following a release schedule based on semantic versioning, where features are added in the next minor version and breaking changes are included in the next major version.', 'The roadmap for creating an Angular version varies across organizations and is influenced by the specific organizational skills and project roadmap.', 'The release schedule for creating an Angular version follows the principles of semantic versioning, with features being added in the next minor version and breaking changes being incorporated in the next major version.']}, {'end': 20934.678, 'start': 20478.516, 'title': 'Angular blog & certification', 'summary': 'Discusses the comprehensive blog by edureka on angular, covering faqs, certification details, and key concepts like angular usage, cli, features, differences between versions, and intermediate level interview questions.', 'duration': 456.162, 'highlights': ["Edureka's blog on Angular covers FAQs and comprehensive content for developers. The blog has all the frequently asked questions by any particular Angular developers and is aimed to help both beginners and established developers.", 'Description of Angular and its main usage for single-page applications. Angular is described as a TypeScript-based framework for building scalable web applications and is mainly used for single-page application development.', 'Explanation of Angular CLI and its importance for creating Angular applications. Angular CLI is a command line tool that enables the addition of various components, directives, and services, and it is mandatory for creating Angular applications.', 'Overview of the features of Angular 11 and the advantages of Angular. The updated features of Angular 11 include faster builds, improved logging and reporting, automatic font inlining, and component test harness, while the advantages of Angular include two-way data binding, MVC architecture, support for restful services, and more.', 'Detailed explanation of the differences between Angular 10 and Angular 11. The differences include TypeScript versions, browser configuration, builds, and linting versions.', 'Explanation of data binding and its forms, including string interpolation, property binding, event binding, and two-way data binding. Data binding is described as the process of defining interactive applications without worrying about pushing and pulling data, and it includes forms such as string interpolation, property binding, event binding, and two-way data binding.', 'Explanation of scope hierarchy and the concept of Angular modules. The scope hierarchy in Angular is organized into a hierarchy and contains root and child scopes, while Angular applications follow a modularity system known as ngModules, holding a cohesive block of code dedicated to an application domain.']}, {'end': 21190.796, 'start': 20935.643, 'title': 'Angular subscriptions, filters, dependency injection, and compilation', 'summary': 'Discusses subscribing in angular, types of filters, dependency injection, one-way and two-way binding, transpiling, testing tools for angular applications, and the differences between jit and aot compilation.', 'duration': 255.153, 'highlights': ['Subscribing in Angular The subscribe function in Angular is a method on the observable type and takes three methods as parameters: next, error, and complete.', 'Types of Filters in Angular Angular supports various filters like currency, date, filter, JSON, limit, lowercase, number, order by, and uppercase for formatting and manipulating data.', 'Dependency Injection in Angular Dependency injection in Angular allows passing objects as dependencies rather than hard coding them within the component, enabling easier object creation and consumption logic separation.', 'One-way and Two-way Binding in Angular In one-way binding, the view does not update automatically with data model changes, while in two-way binding, the view is updated implicitly as the data model changes.', 'Transpiling in Angular Transpiling in Angular refers to the process of converting source code, typically from TypeScript to JavaScript, and occurs internally.', 'Tools for Testing Angular Applications Tools like Karma, Angular mocks, Mocha, Browsify, and Sion are used for testing Angular applications.', 'Differences Between JIT and AOT Compilation In just-in-time compilation, the application compiles inside the browser during runtime, while in ahead-of-time compilation, the application compiles during the build time.']}, {'end': 21657.656, 'start': 21191.596, 'title': 'Angular services & advanced interview questions', 'summary': 'Covers creating services in angular, rest api, angular cookies, ng-app directive, property binding, global apis, eager and lazy loading, constants, bootstrapping, and hiding html elements in angular.', 'duration': 466.06, 'highlights': ['The chapter covers creating services in Angular, with three ways to create a service - factory service and provider, and advanced level interview questions.', 'Explains REST in Angular, where it stands for Representational State Transfer, and how it functions as an API for HTML requests.', 'Describes setting, getting, and clearing cookies in Angular, utilizing the ng cookies module and methods like put, get, and remove.', 'Explains the ng-app directive in Angular, its purpose in defining an Angular application, and its usage for auto bootstrap.', 'Details the process of inserting an embedded view from a prepared template reference, a common question in advanced level interviews.', 'Explains property binding in Angular 11, its significance, and how it enables one-way data binding for passing down values from a component to its template.', 'Discusses Angular global APIs, including functions for comparing, iterating, and converting objects, such as angular lowercase, uppercase, and is string.', 'Details eager and lazy loading in Angular, highlighting their use cases, methods of implementation, and their impact on application performance.', 'Explains constants in Angular, their role in defining global data, and their creation and injection using the constant keyword and dependency.', 'Defines bootstrapping in Angular as the process of initializing or starting the application, covering both automatic and manual bootstrapping.', 'Explains how to hide an HTML element with a button click in Angular using the ng-hide directive in conjunction with the controller, providing a view into the HTML file and controller into the TypeScript file of the component.']}], 'duration': 1231.009, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ati-oip_HcU/pics/Ati-oip_HcU20426647.jpg', 'highlights': ['The release schedule for creating an Angular version follows the principles of semantic versioning, with features being added in the next minor version and breaking changes being incorporated in the next major version.', 'Angular CLI is a command line tool that enables the addition of various components, directives, and services, and it is mandatory for creating Angular applications.', 'The updated features of Angular 11 include faster builds, improved logging and reporting, automatic font inlining, and component test harness, while the advantages of Angular include two-way data binding, MVC architecture, support for restful services, and more.', 'Dependency injection in Angular allows passing objects as dependencies rather than hard coding them within the component, enabling easier object creation and consumption logic separation.', 'In just-in-time compilation, the application compiles inside the browser during runtime, while in ahead-of-time compilation, the application compiles during the build time.', 'The chapter covers creating services in Angular, with three ways to create a service - factory service and provider, and advanced level interview questions.', 'Explains REST in Angular, where it stands for Representational State Transfer, and how it functions as an API for HTML requests.', 'Details eager and lazy loading in Angular, highlighting their use cases, methods of implementation, and their impact on application performance.', 'Defines bootstrapping in Angular as the process of initializing or starting the application, covering both automatic and manual bootstrapping.']}], 'highlights': ['The demand for frontend developers with knowledge about Angular is high because of the high scalability of the framework.', 'Angular is a popular JavaScript framework, with Angular 4 being the most widely used version, according to a 2018 survey where 36.9% of engineers used AngularJS or Angular 2 for user interface creation.', 'Angular CLI is used for generating component services, et cetera, and even complete projects quickly and efficiently, while AngularJS does not use command line interface.', 'Angular CLI reduces the application size of angular, offering an enhanced development experience and clean coding feature of typescript.', 'Angular Materials aid in designing applications attractively with unique styles and shapes, enhancing user experience and accessibility.', "A template is a snippet of HTML guiding Angular's rendering of a component.", 'Reactive forms allow easier testing and scalability compared to template-driven forms.', "Routing is essential for partitioning an application's UI using URLs in every front-end framework.", 'Covers one-way data binding, interpolation, property binding, event binding, forms, directives, dependency injection, and services in angular, demonstrating various concepts and their implementations with examples and use cases.', 'Demonstration of adding, updating, and deleting records in the application, with a walkthrough of the functionality and verification of the operations in MongoDB.', 'The website components demonstrate the usage of bootstrap and angular to create a FIFA website, showcasing various features such as navigation, multimedia integration, and interactive elements.', 'Software testing is crucial for evaluating software functionality and ensuring the production of bug-free, quality products.', 'Jasmine is a default framework for unit testing in Angular setup, eliminating the need for separate installation.', 'Nginx uses event-driven, non-blocking architecture and follows a master-slave model for scalability Nginx utilizes an event-driven, non-blocking architecture and master-slave model to handle requests, ensuring scalability and performance optimization.', 'React is used in popular applications such as Instagram, WhatsApp, and Airbnb.', 'The release schedule for creating an Angular version follows the principles of semantic versioning, with features being added in the next minor version and breaking changes being incorporated in the next major version.']}