title
Angular 4 Tutorial For Beginners | Angular 4 - What's New | Angular Training | Edureka

description
( Angular Certification Training - https://www.edureka.co/angular-training ) This Edureka "Angular Tutorial" on Angular 4 (Angular Tutorial Blog: https://goo.gl/vcWhkG) will help you to learn about different Angular 4 components and its features. Angular 4 is a framework to develop highly scalable, fast, and testable web client-side applications. Below are the topics covered in this tutorial: 1) Webpage and DOM 2) JavaScript and jQuery 3) Why Angular? 4) What is SPA? 5) Angular 4 Introduction 6) Angular 4 Features 7) Angular 4 Installation 8) Basic Building Blocks of Angular 4 9) Angular 4 Architecture 10) Demo on Angular 4 Subscribe to our channel to get video updates. Hit the subscribe button above. Check our complete Angular playlist here: https://goo.gl/09KsDC How it Works? 1. This is a 4 Week Instructor led Online Course, 20 hours of assignment and 20 hours of project work 2. We have a 24x7 One-on-One LIVE Technical Support to help you with any problems you might face or any clarifications you may require during the course. 3. At the end of the training you will have to work on a project, based on which we will provide you a Grade and a Verifiable Certificate! - - - - - - - - - - - - - - About the Course Angular 4 certification training at Edureka makes you an expert in concepts such as SPA (Single Page Application), DOM manipulations, DOM events, Dependency Injection (DI), REST API communication, Async supporting libraries, and external libraries such as JQuery and Bootstrap. After completing this course, students should be able to : 1) Describe Client Side MVC, SPA, and Typescript 2) Discuss and Apply various application designs, testing practices, and related development tools DI 3) List different ways of development using alternate APIs and use them as per use cases 4) Explain XHR communication, Form manipulation, and REST API communication 5) State Async supporting libraries/features like Promises, Observable 6) Describe Internationalization/Localization, and External libraries like JQuery, Bootstrap, incorporation 7) Explore Upgrading from 1.X AngularJS Application, and Multi-Device/Cross-Platform application 8) Illustrate how to use Node.JS, MongoDB (MEAN Stack) to create simple functioning RESTful APIs yourself. 9) Work on a real-life Project, implementing an Electronic Voting System to learn 10) Create-Read-Update-Delete concepts and derive Business Insights. 11) A working code base implemented for a real-life project using MEAN stack to learn integration of different frontend requirements into a single project - Shopping Cart 12) Working code bases implemented for a real-life project using Firebase - Grocery List Management / Employee Management. - - - - - - - - - - - - - - Who should go for this Course? Angular Certification Course at Edureka is designed for professionals who want to learn modern client-side design and development techniques and wish to apply it on large web applications such as Cloud ERP, CRM, among others. This course is ideal for : 1) UI Developers and Technical Leads 2) Developers upgrading from AngularJS 1.x or above 3) Freshers and aspiring UI (JavaScript) developers 4) Full Stack Developers 5) QAs, Architects, and Technical Project Managers - - - - - - - - - - - - - - Why learn Angular? Angular is a JavaScript framework which is used to create scalable, enterprise, and performant client side web applications. It provides an ecosystem for development of client side web applications. The ecosystem for development may include external tools or libraries as well. The ecosystem process includes project bootstrapping, development operations/tools, testing, and build support. One of the best features of Angular framework is that it is quite flexible when it comes to usage of external libraries apart from the scalability it provides. With Angular framework adoption being high, performance management of the application is community driven indirectly driving better job opportunities. Please write back to us at sales@edureka.co or call us at +91 88808 62004 for more information. Facebook: https://www.facebook.com/edurekaIN/ Twitter: https://twitter.com/edurekain LinkedIn: https://www.linkedin.com/company/edureka Customer Review: Namrata Sharma, Lead Engineer says: “Learning with Edureka was a wonderful experience, they made strong root of "Angular" by providing understanding of basics. Assignment & Quiz after the completion of each module really helped to gain confidence on the same technology. Support ticket system of Edureka helped a lot by giving fast reply in each query related with technology.”

detail
{'title': "Angular 4 Tutorial For Beginners | Angular 4 - What's New | Angular Training | Edureka", 'heatmap': [{'end': 3326.087, 'start': 3258.543, 'weight': 1}], 'summary': 'This angular 4 tutorial provides a comprehensive introduction to angular, covering dom manipulation, evolution of single page applications, angular project setup, typescript basics, angular building blocks, data binding, services, directives, and project overview.', 'chapters': [{'end': 244.725, 'segs': [{'end': 93.519, 'src': 'embed', 'start': 63.636, 'weight': 0, 'content': [{'end': 68.299, 'text': "and then we'll look at an introduction of Angular with its features and installation.", 'start': 63.636, 'duration': 4.663}, {'end': 73.902, 'text': "After that, we'll cover basic building blocks of Angular and then look at the Angular architecture.", 'start': 68.859, 'duration': 5.043}, {'end': 81.251, 'text': 'Great, so web page and a DOM is something we all are aware of.', 'start': 76.087, 'duration': 5.164}, {'end': 91.358, 'text': "If you're not, it's a single, simple page where you can define data or some tags to display that in the UI.", 'start': 81.451, 'duration': 9.907}, {'end': 93.519, 'text': 'And the UI is going to be your browser.', 'start': 91.898, 'duration': 1.621}], 'summary': 'Introduction to angular, covering its features, installation, building blocks, and architecture.', 'duration': 29.883, 'max_score': 63.636, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-xlmXE7bJU/pics/r-xlmXE7bJU63636.jpg'}, {'end': 164.284, 'src': 'embed', 'start': 138.093, 'weight': 1, 'content': [{'end': 144.175, 'text': 'And then came Angular, which changed the scenario in which you do DOM manipulation, not just DOM manipulation.', 'start': 138.093, 'duration': 6.082}, {'end': 149.677, 'text': 'Actually, it changed the way in which you create applications of web.', 'start': 144.596, 'duration': 5.081}, {'end': 156.84, 'text': 'And, taking that into consideration, what basically DOM manipulation is you go ahead, take the DOM structure,', 'start': 150.058, 'duration': 6.782}, {'end': 159.741, 'text': 'the DOM tree that we created for an HTML page.', 'start': 156.84, 'duration': 2.901}, {'end': 161.282, 'text': 'make some changes to it.', 'start': 160.041, 'duration': 1.241}, {'end': 164.284, 'text': 'go ahead, put that back in the browser.', 'start': 161.282, 'duration': 3.002}], 'summary': 'Angular revolutionized web app development with enhanced dom manipulation capabilities.', 'duration': 26.191, 'max_score': 138.093, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-xlmXE7bJU/pics/r-xlmXE7bJU138093.jpg'}, {'end': 222.884, 'src': 'embed', 'start': 181.315, 'weight': 2, 'content': [{'end': 189.122, 'text': 'At this particular point of time, we are going to focus on JavaScript and jQuery for DOM manipulation and they do DOM manipulation pretty well.', 'start': 181.315, 'duration': 7.807}, {'end': 194.767, 'text': 'For very simple page applications, very simple applications or very simple pages.', 'start': 189.662, 'duration': 5.105}, {'end': 199.711, 'text': 'JavaScript is going to be the best that you can do, because in maybe one line or two line,', 'start': 194.767, 'duration': 4.944}, {'end': 205.876, 'text': 'you can do the basic change that you need and you can get away with what is going to be your requirement.', 'start': 199.711, 'duration': 6.165}, {'end': 212.819, 'text': 'But in case you want some extended features, like adding a class, roaming a class, looking at a class list et cetera,', 'start': 205.976, 'duration': 6.843}, {'end': 215.201, 'text': 'doing some scaled DOM manipulation.', 'start': 212.819, 'duration': 2.382}, {'end': 222.884, 'text': 'jQuery is a suggested library and in that particular scenario you would definitely want to have a look at jQuery as well,', 'start': 215.201, 'duration': 7.683}], 'summary': 'Javascript is best for simple dom manipulation, jquery for extended features.', 'duration': 41.569, 'max_score': 181.315, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-xlmXE7bJU/pics/r-xlmXE7bJU181315.jpg'}], 'start': 0.109, 'title': 'Angular and dom manipulation', 'summary': 'Provides an introduction to angular, covering its features, installation, and basics, as well as discussing the evolution of dom manipulation from pure javascript to libraries like jquery and angular, emphasizing the importance of dom manipulation in web application development.', 'chapters': [{'end': 118.24, 'start': 0.109, 'title': 'Angular introduction and basics', 'summary': 'Covers an introduction to angular, including its features, installation, and basics, such as web page and dom manipulation, and the creation of a single-page application.', 'duration': 118.131, 'highlights': ["The session covers an introduction to Angular, its features, installation, and basics like web page and DOM manipulation. The session intends to cover most sections of Angular in quite some pace, including aspects of JavaScript, single page application, Angular's fit into it, and a quick demonstration of getting started with Angular and its basic building blocks.", 'Explanation of web page and DOM manipulation and the creation of a single-page application. The session focuses on the basics of web page and DOM manipulation, including creating a DOM tree from HTML tags and how a single page application works.']}, {'end': 244.725, 'start': 118.24, 'title': 'Understanding dom manipulation', 'summary': 'Discusses the evolution of dom manipulation from pure javascript to the introduction of libraries like jquery and angular, emphasizing the importance of dom manipulation in web application development and the suitability of javascript and jquery for simple and extended dom manipulations.', 'duration': 126.485, 'highlights': ['The introduction of Angular changed the way in which web applications are created, including DOM manipulation, with significant impact on the development scenario.', 'jQuery is suggested for extended DOM manipulation, offering features like adding or removing classes, and working with class lists, providing more complexity and flexibility compared to basic JavaScript for simple page applications.', 'JavaScript is suitable for basic DOM manipulation, allowing for quick and simple changes in maybe one or two lines of code.', 'UI can be the simplest or the most complex form of view, never tested, not created with maintainability in mind, and often abused.']}], 'duration': 244.616, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-xlmXE7bJU/pics/r-xlmXE7bJU109.jpg', 'highlights': ['Introduction to Angular covers its features, installation, and basics like web page and DOM manipulation.', 'Angular changed the way web applications are created, including DOM manipulation, with significant impact on development.', 'jQuery offers extended DOM manipulation features like adding or removing classes, providing more complexity and flexibility compared to basic JavaScript.', 'JavaScript is suitable for basic DOM manipulation, allowing for quick and simple changes in maybe one or two lines of code.']}, {'end': 1215.565, 'segs': [{'end': 267.973, 'src': 'embed', 'start': 245.498, 'weight': 0, 'content': [{'end': 255.985, 'text': 'but things changed when single page applications or single page application frameworks like Angular started coming in and making a change in which we actually do DOM manipulation.', 'start': 245.498, 'duration': 10.487}, {'end': 261.629, 'text': 'We actually show the view or we actually change one particular view state to another.', 'start': 256.345, 'duration': 5.284}, {'end': 267.973, 'text': 'So a lot of changes started happening and during that change, change actually became very simplistic.', 'start': 261.909, 'duration': 6.064}], 'summary': 'Single page applications simplified dom manipulation and view state changes, making the process more simplistic.', 'duration': 22.475, 'max_score': 245.498, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-xlmXE7bJU/pics/r-xlmXE7bJU245498.jpg'}, {'end': 350.767, 'src': 'embed', 'start': 321.689, 'weight': 1, 'content': [{'end': 324.031, 'text': "That's exactly what we are here for.", 'start': 321.689, 'duration': 2.342}, {'end': 326.202, 'text': 'So what does jQuery do?', 'start': 324.861, 'duration': 1.341}, {'end': 328.024, 'text': 'DOM manipulation yes.', 'start': 326.623, 'duration': 1.401}, {'end': 329.585, 'text': 'animation support yes.', 'start': 328.024, 'duration': 1.561}, {'end': 338.794, 'text': 'AJAX and JSON to get data yes, but it does not work pretty much in a scaled manner with REST APIs, does not have routing,', 'start': 329.585, 'duration': 9.209}, {'end': 345.42, 'text': 'does not have a lot of form validation APIs and it definitely does not provide you two-way binding,', 'start': 338.794, 'duration': 6.626}, {'end': 350.767, 'text': 'or something that we call as property or value binding to HTML.', 'start': 345.42, 'duration': 5.347}], 'summary': 'Jquery provides dom manipulation, animation, and ajax/json support, but lacks scalability with rest apis, routing, form validation apis, and two-way binding to html.', 'duration': 29.078, 'max_score': 321.689, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-xlmXE7bJU/pics/r-xlmXE7bJU321689.jpg'}, {'end': 491.591, 'src': 'embed', 'start': 462.676, 'weight': 2, 'content': [{'end': 466.956, 'text': 'Angular is going to create a page for you which is not going to reload,', 'start': 462.676, 'duration': 4.28}, {'end': 473.998, 'text': 'which is going to save you a lot of network as well as server resources which can be used for something else,', 'start': 466.956, 'duration': 7.042}, {'end': 478.758, 'text': 'and it is running in the client side after being served from the server.', 'start': 473.998, 'duration': 4.76}, {'end': 481.439, 'text': 'What was the traditional way of?', 'start': 479.519, 'duration': 1.92}, {'end': 487.9, 'text': 'the traditional way of getting a particular page was making a request, getting the whole page from the client,', 'start': 481.439, 'duration': 6.461}, {'end': 491.591, 'text': 'making a request again and getting a whole page again from the client.', 'start': 488.467, 'duration': 3.124}], 'summary': 'Angular creates non-reloading pages, saving network and server resources, and runs on the client side after being served from the server.', 'duration': 28.915, 'max_score': 462.676, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-xlmXE7bJU/pics/r-xlmXE7bJU462676.jpg'}, {'end': 537.58, 'src': 'embed', 'start': 507.141, 'weight': 3, 'content': [{'end': 514.706, 'text': 'But in this particular case where you are working with a single page application, you serve your HTML, JS, and CSS files once.', 'start': 507.141, 'duration': 7.565}, {'end': 524.473, 'text': 'Second, you actually make AJAX-like requests or XHR requests in the form of JSON to send data or to get data.', 'start': 515.226, 'duration': 9.247}, {'end': 526.274, 'text': 'And going forward.', 'start': 524.893, 'duration': 1.381}, {'end': 537.58, 'text': 'it will always do requests only with JSON as well as XML type of request, but most often than not JSON is preferred because of low footprint.', 'start': 526.274, 'duration': 11.306}], 'summary': 'Single page apps serve html, js, and css once. use json for data requests, with xml as an alternative.', 'duration': 30.439, 'max_score': 507.141, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-xlmXE7bJU/pics/r-xlmXE7bJU507141.jpg'}, {'end': 576.956, 'src': 'embed', 'start': 557.987, 'weight': 4, 'content': [{'end': 573.154, 'text': 'Angular 4 has been rewritten by Google to make it compatible with future bleeding edge technologies of JavaScript and was created with a lot of issues in mind that were prevalent with Angular 1.x applications.', 'start': 557.987, 'duration': 15.167}, {'end': 576.956, 'text': 'And something that was needed for the future,', 'start': 573.795, 'duration': 3.161}], 'summary': 'Angular 4 rewritten by google for compatibility with future javascript technologies and addressing issues from angular 1.x.', 'duration': 18.969, 'max_score': 557.987, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-xlmXE7bJU/pics/r-xlmXE7bJU557987.jpg'}], 'start': 245.498, 'title': 'Evolution of single page applications', 'summary': 'Discusses the evolution of single page applications, emphasizing the impact of frameworks like angular, and comparing javascript, jquery, and angular in terms of simplification, maintainability, testability, dom manipulation, animation support, ajax and json data retrieval, scaling with rest apis, routing, form validation apis, and two-way binding.', 'chapters': [{'end': 350.767, 'start': 245.498, 'title': 'Evolution of single page applications', 'summary': 'Discusses the evolution of single page applications and the impact of frameworks like angular, highlighting the simplification, maintainability, and testability brought about by the changes, as well as the comparison between javascript, jquery, and angular in terms of dom manipulation, animation support, ajax and json data retrieval, scaling with rest apis, routing, form validation apis, and two-way binding.', 'duration': 105.269, 'highlights': ['The simplification, maintainability, and testability brought about by the changes in single page application frameworks like Angular, compared to traditional JavaScript and jQuery, are key points emphasized in the chapter.', 'The comparison between JavaScript, jQuery, and Angular in terms of DOM manipulation, animation support, AJAX and JSON data retrieval, scaling with REST APIs, routing, form validation APIs, and two-way binding provides a comprehensive understanding of the differences and capabilities of these technologies.', 'Frameworks like Angular have simplified and made the process of DOM manipulation more maintainable and testable, contributing to the evolution of single page applications.', 'JavaScript and jQuery are capable of DOM manipulation, animation support, and AJAX and JSON data retrieval, but lack scalability with REST APIs, routing, form validation APIs, and two-way binding capabilities provided by Angular.']}, {'end': 537.58, 'start': 351.227, 'title': 'Benefits of single page applications', 'summary': "Explains the benefits of single page applications, such as saving network resources, server processing, and internet bandwidth, and maximizing client resources, with a focus on angular's role in creating efficient web pages.", 'duration': 186.353, 'highlights': ['Single page application avoids reloading static CSS and JS files, saving resources and improving speed. Avoiding the reloading of static CSS and JS files in single page applications enhances speed and saves resources.', 'Single page applications save network resources and server processing by not reloading static files. By not reloading static files, single page applications save network resources and reduce the server processing needed for serving static content.', 'Client resources are maximized in single page applications, enabling efficient processing of view changes and interactions. Single page applications maximize client resources for processing view changes and interactions, leading to efficient usage of client resources.', 'Angular creates a non-reloading page, saving network and server resources, and runs in the client side after being served from the server. Angular creates non-reloading pages, saving network and server resources, and operates in the client side after being served from the server.', 'Single page applications use AJAX-like requests or XHR requests in the form of JSON to send and receive data, reducing internet bandwidth usage. Single page applications utilize AJAX-like requests or XHR requests in the form of JSON, reducing internet bandwidth usage for data transfer.']}, {'end': 1215.565, 'start': 538.4, 'title': 'Angular framework overview', 'summary': 'Provides an overview of angular framework, highlighting its evolution from angular 1 to angular 4, its features including support for es6 and typescript, modularity, and performance, as well as the setup process using angular cli and node.js.', 'duration': 677.165, 'highlights': ['Angular framework overview from Angular 1 to Angular 4, its features, and evolution Angular has evolved from Angular 1 to Angular 4, rewritten by Google to be compatible with future JavaScript technologies, offering features like modular design, support for ES6 and TypeScript, and a focus on speed and performance.', 'Support for ES6 and TypeScript, and their impact on application development Angular supports ES6 and TypeScript, introducing modular design patterns and static typing for efficient application development and error detection.', 'Modularity and support for mobile applications Angular is highly modular, supporting file-based modularity using libraries like SystemJS or CommonJS, and provides support for mobile and tablet applications.', 'Setup process using Angular CLI and Node.js The setup process for Angular development involves using Angular CLI, a comprehensive command-line tool, and Node.js for providing tooling and environment for development.']}], 'duration': 970.067, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-xlmXE7bJU/pics/r-xlmXE7bJU245498.jpg', 'highlights': ['Frameworks like Angular have simplified and made the process of DOM manipulation more maintainable and testable, contributing to the evolution of single page applications.', 'The comparison between JavaScript, jQuery, and Angular in terms of DOM manipulation, animation support, AJAX and JSON data retrieval, scaling with REST APIs, routing, form validation APIs, and two-way binding provides a comprehensive understanding of the differences and capabilities of these technologies.', 'Angular creates non-reloading pages, saving network and server resources, and operates in the client side after being served from the server.', 'Single page applications utilize AJAX-like requests or XHR requests in the form of JSON, reducing internet bandwidth usage for data transfer.', 'Angular has evolved from Angular 1 to Angular 4, rewritten by Google to be compatible with future JavaScript technologies, offering features like modular design, support for ES6 and TypeScript, and a focus on speed and performance.']}, {'end': 1822.955, 'segs': [{'end': 1255.965, 'src': 'embed', 'start': 1215.786, 'weight': 0, 'content': [{'end': 1221.108, 'text': "It'll create a folder named demo, then it'll create a project within that particular demo folder.", 'start': 1215.786, 'duration': 5.322}, {'end': 1225.388, 'text': 'So let me just hit enter and get the setup started.', 'start': 1221.926, 'duration': 3.462}, {'end': 1235.093, 'text': 'Once the setup starts, we will go ahead and start understanding what are the other requirements and needs for Angular development,', 'start': 1225.968, 'duration': 9.125}, {'end': 1237.695, 'text': "and we'll go step by step understanding each of them.", 'start': 1235.093, 'duration': 2.602}, {'end': 1243.398, 'text': "So the setup has started, let it set up that particular project, we'll understand some more things.", 'start': 1238.335, 'duration': 5.063}, {'end': 1254.544, 'text': 'So what is TypeScript? TypeScript is the language that we are going to work with TypeScript is the one that ng-cli provides you by default.', 'start': 1244.299, 'duration': 10.245}, {'end': 1255.965, 'text': 'Most often than not,', 'start': 1255.064, 'duration': 0.901}], 'summary': 'Creating demo folder, setting up angular project, exploring typescript', 'duration': 40.179, 'max_score': 1215.786, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-xlmXE7bJU/pics/r-xlmXE7bJU1215786.jpg'}, {'end': 1337.071, 'src': 'embed', 'start': 1312.955, 'weight': 3, 'content': [{'end': 1321.341, 'text': 'A good idea of basic data types with null and undefined is definitely an advantage.', 'start': 1312.955, 'duration': 8.386}, {'end': 1327.105, 'text': 'The second thing that you might really want to know is array and array manipulation.', 'start': 1321.901, 'duration': 5.204}, {'end': 1332.328, 'text': 'This is something that you really want to understand.', 'start': 1328.886, 'duration': 3.442}, {'end': 1337.071, 'text': 'And the third is object and object manipulation.', 'start': 1332.768, 'duration': 4.303}], 'summary': 'Understanding basic data types, arrays, and objects is important for programming.', 'duration': 24.116, 'max_score': 1312.955, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-xlmXE7bJU/pics/r-xlmXE7bJU1312955.jpg'}, {'end': 1465.536, 'src': 'embed', 'start': 1437.241, 'weight': 4, 'content': [{'end': 1439.241, 'text': 'TypeScript as well, one.', 'start': 1437.241, 'duration': 2}, {'end': 1447.124, 'text': 'Second is since it is a superset of JavaScript and you use some features of TypeScript,', 'start': 1440.062, 'duration': 7.062}, {'end': 1453.526, 'text': 'you will be able to do something called as transpile TypeScript into JavaScript.', 'start': 1447.124, 'duration': 6.402}, {'end': 1462.393, 'text': 'That is something that is provided as a first thing that you would be able to transpile TypeScript files into pure JavaScript.', 'start': 1454.687, 'duration': 7.706}, {'end': 1465.536, 'text': 'And you should be able to run JavaScript from the browser.', 'start': 1462.814, 'duration': 2.722}], 'summary': 'Typescript, a superset of javascript, allows transpiling typescript into javascript for browser execution.', 'duration': 28.295, 'max_score': 1437.241, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-xlmXE7bJU/pics/r-xlmXE7bJU1437241.jpg'}, {'end': 1520.626, 'src': 'embed', 'start': 1497.301, 'weight': 2, 'content': [{'end': 1504.506, 'text': 'It talks about types, it talks about classes, functions, generic enums, et cetera, everything that is possible within TypeScript.', 'start': 1497.301, 'duration': 7.205}, {'end': 1507.548, 'text': "What I'm going to do is quickly.", 'start': 1505.326, 'duration': 2.222}, {'end': 1508.548, 'text': 'in a minute or two,', 'start': 1507.548, 'duration': 1}, {'end': 1515.813, 'text': "I'm going to introduce you to different features of TypeScript very basic features of TypeScript so that you understand what code we are writing here.", 'start': 1508.548, 'duration': 7.265}, {'end': 1520.626, 'text': 'TypeScript is modular, which means that every file is going to be a module.', 'start': 1516.684, 'duration': 3.942}], 'summary': 'Introduction to basic features of typescript including types, classes, functions, and modular structure.', 'duration': 23.325, 'max_score': 1497.301, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-xlmXE7bJU/pics/r-xlmXE7bJU1497301.jpg'}], 'start': 1215.786, 'title': 'Angular project setup and typescript basics', 'summary': 'Covers the setup of an angular project, introduces typescript as the default language, emphasizes step-by-step understanding, explains typescript basics, core features, advantages, and recommends essential knowledge areas for angular development.', 'chapters': [{'end': 1255.965, 'start': 1215.786, 'title': 'Angular project setup and typescript introduction', 'summary': 'Covers the setup of an angular project and introduces typescript as the default language provided by ng-cli, while emphasizing the step-by-step understanding of the requirements for angular development.', 'duration': 40.179, 'highlights': ['The setup has started, allowing for understanding of the requirements and needs for Angular development, and will proceed step by step (2)', 'Introducing TypeScript as the default language provided by ng-cli for Angular development (1)']}, {'end': 1822.955, 'start': 1255.965, 'title': 'Typescript basics and angular development', 'summary': 'Explains the basics of typescript, including its core features and advantages, such as being a superset of javascript, providing type options, and modularity, and recommends essential knowledge areas for angular development.', 'duration': 566.99, 'highlights': ['TypeScript is a superset of JavaScript and allows transpilation into JavaScript, providing type options, modularity, and access to classes and interfaces. TypeScript is a superset of JavaScript, allowing transpilation into JavaScript, providing type options, modularity, and access to classes and interfaces, making it easier to work with and ensuring maintainability, and testability.', 'Key knowledge areas for Angular development include understanding basic data types, array manipulation, object manipulation, and optional knowledge of design patterns such as Singleton, Factory, and constructor patterns. Key knowledge areas for Angular development include understanding basic data types, array manipulation, and object manipulation, with optional knowledge of design patterns such as Singleton, Factory, and constructor patterns, aiding in a smoother adaptation to Angular development.', 'Recommendation to learn TypeScript basics, including types, classes, functions, generic enums, and interfaces, to understand and utilize its features effectively. The recommendation to learn TypeScript basics, including types, classes, functions, generic enums, and interfaces, provides a comprehensive understanding and effective utilization of its features.']}], 'duration': 607.169, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-xlmXE7bJU/pics/r-xlmXE7bJU1215786.jpg', 'highlights': ['Introducing TypeScript as the default language provided by ng-cli for Angular development (1)', 'The setup has started, allowing for understanding of the requirements and needs for Angular development, and will proceed step by step (2)', 'Recommendation to learn TypeScript basics, including types, classes, functions, generic enums, and interfaces, to understand and utilize its features effectively.', 'Key knowledge areas for Angular development include understanding basic data types, array manipulation, and object manipulation, with optional knowledge of design patterns such as Singleton, Factory, and constructor patterns, aiding in a smoother adaptation to Angular development.', 'TypeScript is a superset of JavaScript, allowing transpilation into JavaScript, providing type options, modularity, and access to classes and interfaces, making it easier to work with and ensuring maintainability, and testability.']}, {'end': 2288.977, 'segs': [{'end': 1881.296, 'src': 'embed', 'start': 1823.911, 'weight': 1, 'content': [{'end': 1836.118, 'text': 'Apart from that, you also have an opportunity to create a different class which extends the previous class,', 'start': 1823.911, 'duration': 12.207}, {'end': 1844.703, 'text': 'and if you want to instantiate the parent class, you can actually go ahead and do a super.', 'start': 1836.118, 'duration': 8.585}, {'end': 1850.866, 'text': 'It should implement the parent class and you should be able to use the parent class also,', 'start': 1845.523, 'duration': 5.343}, {'end': 1855.397, 'text': 'and you can access the parent class variables if they are public.', 'start': 1850.866, 'duration': 4.531}, {'end': 1860.62, 'text': 'So this was TypeScript basics in a GFE.', 'start': 1856.738, 'duration': 3.882}, {'end': 1866.664, 'text': 'If you want to have a look at advanced types, if you want to have a look at enums, definitely have a look at it.', 'start': 1861.161, 'duration': 5.503}, {'end': 1870.766, 'text': 'If you want to have a look at namespaces, which we did not cover right now, have a look at it.', 'start': 1867.324, 'duration': 3.442}, {'end': 1873.448, 'text': 'Decorators and mixins is something that we did not cover.', 'start': 1871.207, 'duration': 2.241}, {'end': 1877.974, 'text': 'This is something that you really want to work with.', 'start': 1875.492, 'duration': 2.482}, {'end': 1881.296, 'text': 'Great, so that was basic support TypeScript.', 'start': 1878.534, 'duration': 2.762}], 'summary': 'Typescript basics covered in a gfe, including inheritance, instantiation, and access to parent class variables.', 'duration': 57.385, 'max_score': 1823.911, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-xlmXE7bJU/pics/r-xlmXE7bJU1823911.jpg'}, {'end': 1931.324, 'src': 'embed', 'start': 1901.49, 'weight': 7, 'content': [{'end': 1905.692, 'text': 'This is actually your Angular CLI startup project,', 'start': 1901.49, 'duration': 4.202}, {'end': 1915.815, 'text': 'where CLI.json has the set of all commands and metadata that is required for Angular CLI to manage this particular project,', 'start': 1905.692, 'duration': 10.123}, {'end': 1921.917, 'text': 'run this particular project, test this particular project, as well as build this particular project or link this particular project.', 'start': 1915.815, 'duration': 6.102}, {'end': 1931.324, 'text': 'You have karma.conf.js, which will help you with unit testing, protractor.conf.js, which will help you with end-to-end testing,', 'start': 1923.359, 'duration': 7.965}], 'summary': 'The angular cli startup project includes cli.json with commands and metadata, karma.conf.js for unit testing, and protractor.conf.js for end-to-end testing.', 'duration': 29.834, 'max_score': 1901.49, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-xlmXE7bJU/pics/r-xlmXE7bJU1901490.jpg'}, {'end': 1992.288, 'src': 'embed', 'start': 1955.036, 'weight': 0, 'content': [{'end': 1960.66, 'text': 'And if you want, you can actually specify two more pointers out here.', 'start': 1955.036, 'duration': 5.624}, {'end': 1971.549, 'text': 'The pointers that normally are provided are no implicit any and supposit implicit any index headers.', 'start': 1961.181, 'duration': 10.368}, {'end': 1984.663, 'text': 'Now remember these two if put, if you put no implicit any as true and suppress implicit index errors as true, you will be forced to use types.', 'start': 1972.455, 'duration': 12.208}, {'end': 1992.288, 'text': "But if you don't put that, you can actually do ES6 kind of coding with TypeScript.", 'start': 1985.784, 'duration': 6.504}], 'summary': "Enabling 'no implicit any' and 'suppress implicit index errors' in typescript forces the use of types, otherwise es6 coding can be done.", 'duration': 37.252, 'max_score': 1955.036, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-xlmXE7bJU/pics/r-xlmXE7bJU1955036.jpg'}, {'end': 2046.907, 'src': 'embed', 'start': 2015.22, 'weight': 6, 'content': [{'end': 2019.863, 'text': 'The name of the project that has been created for us is demo.', 'start': 2015.22, 'duration': 4.643}, {'end': 2025.189, 'text': 'So it has all the dependencies and it has all the development dependencies.', 'start': 2020.706, 'duration': 4.483}, {'end': 2027.69, 'text': 'Dependencies and development dependencies are different.', 'start': 2025.329, 'duration': 2.361}, {'end': 2029.832, 'text': 'Dependencies are needed for production.', 'start': 2028.151, 'duration': 1.681}, {'end': 2037.797, 'text': 'Development dependencies are not needed for production and they are needed only for development environment or for development.', 'start': 2030.232, 'duration': 7.565}, {'end': 2046.907, 'text': 'So that is the one that keeps track of your project dependencies and development dependencies, and this is exactly what NPM manages.', 'start': 2038.519, 'duration': 8.388}], 'summary': "The 'demo' project includes dependencies and development dependencies managed by npm.", 'duration': 31.687, 'max_score': 2015.22, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-xlmXE7bJU/pics/r-xlmXE7bJU2015220.jpg'}, {'end': 2116.35, 'src': 'embed', 'start': 2090.136, 'weight': 4, 'content': [{'end': 2100.262, 'text': 'which means that Angular revolves around the concept of creating your own custom components and creating an application that uses these components.', 'start': 2090.136, 'duration': 10.126}, {'end': 2109.048, 'text': 'The whole idea is, when you create reusable components which are independent and isolated, you will be able to create scalable applications,', 'start': 2100.843, 'duration': 8.205}, {'end': 2111.349, 'text': 'maintainable applications and testable applications.', 'start': 2109.048, 'duration': 2.301}, {'end': 2116.35, 'text': 'Whole application resides within your app root.', 'start': 2113.188, 'duration': 3.162}], 'summary': 'Angular emphasizes creating reusable, independent components for scalable, maintainable, and testable applications.', 'duration': 26.214, 'max_score': 2090.136, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-xlmXE7bJU/pics/r-xlmXE7bJU2090136.jpg'}, {'end': 2240.409, 'src': 'embed', 'start': 2215.803, 'weight': 3, 'content': [{'end': 2226.166, 'text': 'It should open up your browser and, in case you make a change in your application, it will also go ahead and refresh your browser,', 'start': 2215.803, 'duration': 10.363}, {'end': 2231.067, 'text': 'recompile your TypeScript files to JavaScript, build it again and put it into a browser.', 'start': 2226.166, 'duration': 4.901}, {'end': 2232.527, 'text': "That's what it basically does.", 'start': 2231.127, 'duration': 1.4}, {'end': 2240.409, 'text': "So it's in the process of building optimization, and now we should have our application running in localhost.", 'start': 2233.307, 'duration': 7.102}], 'summary': 'Tool automates browser refresh, typescript to javascript compilation, and application build for localhost.', 'duration': 24.606, 'max_score': 2215.803, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-xlmXE7bJU/pics/r-xlmXE7bJU2215803.jpg'}, {'end': 2291.959, 'src': 'embed', 'start': 2264.263, 'weight': 5, 'content': [{'end': 2269.085, 'text': "I'm going to keep the server open so that we can work with the demonstrations further as well.", 'start': 2264.263, 'duration': 4.822}, {'end': 2273.248, 'text': 'So, one hard dependency, node.js needs to be installed.', 'start': 2269.546, 'duration': 3.702}, {'end': 2275.969, 'text': 'Second hard dependency, ds needs to be installed.', 'start': 2273.568, 'duration': 2.401}, {'end': 2281.833, 'text': 'Once you have these two installed, you will be able to install Angular CLI.', 'start': 2276.489, 'duration': 5.344}, {'end': 2288.977, 'text': 'Once you do set up Angular CLI, you will be able to create a new project with ng new project name.', 'start': 2282.013, 'duration': 6.964}, {'end': 2291.959, 'text': 'There are a few building blocks of Angular.', 'start': 2290.078, 'duration': 1.881}], 'summary': 'Server kept open for further work, hard dependencies: node.js and ds, angular cli to be installed for project creation.', 'duration': 27.696, 'max_score': 2264.263, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-xlmXE7bJU/pics/r-xlmXE7bJU2264263.jpg'}], 'start': 1823.911, 'title': 'Typescript basics, angular cli overview, and project setup', 'summary': 'Covers typescript basics like class extensions, inheritance, advanced types, enums, namespaces, decorators, and mixins, along with an overview of angular cli startup project including cli.json, karma.conf.js, protractor.conf.js, and tsconfig with es5 target and modularity options. it also explains the project setup process using angular cli, including creating a project, managing dependencies, understanding project structure, and running the application with ng serve, requiring node.js and ds as hard dependencies, and setting up angular cli to create a new project with ng new project name.', 'chapters': [{'end': 1992.288, 'start': 1823.911, 'title': 'Typescript basics and angular cli overview', 'summary': 'Covers typescript basics including class extensions and inheritance, advanced types, enums, namespaces, decorators, and mixins, and provides an overview of an angular cli startup project including cli.json, karma.conf.js, protractor.conf.js, and tsconfig with es5 target and modularity options.', 'duration': 168.377, 'highlights': ['The chapter covers TypeScript basics including class extensions and inheritance, advanced types, enums, namespaces, decorators, and mixins, and provides an overview of an Angular CLI startup project including CLI.json, karma.conf.js, protractor.conf.js, and tsconfig with ES5 target and modularity options.', 'The Angular CLI startup project includes CLI.json with commands and metadata, karma.conf.js for unit testing, protractor.conf.js for end-to-end testing, and tsconfig for specifying JavaScript version and modularity.', 'The TypeScript code can be converted into ES5 code using tsconfig with target set as ES5, and additional options such as no implicit any and suppress implicit index errors can be specified to enforce type usage.', 'Class extensions and inheritance in TypeScript allow creating a different class that extends the previous class, enabling the use of parent class methods and variables if public.', 'The chapter also suggests exploring advanced TypeScript features such as enums, namespaces, decorators, and mixins for advanced development needs.']}, {'end': 2288.977, 'start': 1992.808, 'title': 'Angular cli and project setup', 'summary': 'Explains the setup process using angular cli, including creating a project, managing dependencies, understanding project structure, and running the application with ng serve, requiring node.js and ds as hard dependencies, and setting up angular cli to create a new project with ng new project name.', 'duration': 296.169, 'highlights': ['Angular CLI manages project dependencies and development dependencies, differentiating their usage for production and development environments. The chapter explains the distinction between project dependencies and development dependencies, emphasizing their roles for production and development environments.', 'Creating reusable and scalable applications in Angular revolves around the concept of creating independent and isolated web components. The chapter emphasizes the core concept of Angular, which involves creating independent and isolated web components to build scalable and maintainable applications.', 'The process of running the application with ng serve includes starting a development server, automatic refresh on changes, TypeScript to JavaScript compilation, and application build optimization. The chapter details the steps involved in running an Angular application with ng serve, covering the functionalities such as starting a development server, automatic browser refresh, TypeScript to JavaScript compilation, and application build optimization.', 'Node.js and ds are essential hard dependencies required for setting up Angular CLI and creating a new project. The chapter highlights the hard dependencies, node.js, and ds, essential for setting up Angular CLI and creating a new project.']}], 'duration': 465.066, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-xlmXE7bJU/pics/r-xlmXE7bJU1823911.jpg', 'highlights': ['The TypeScript code can be converted into ES5 code using tsconfig with target set as ES5, and additional options such as no implicit any and suppress implicit index errors can be specified to enforce type usage.', 'Class extensions and inheritance in TypeScript allow creating a different class that extends the previous class, enabling the use of parent class methods and variables if public.', 'The chapter also suggests exploring advanced TypeScript features such as enums, namespaces, decorators, and mixins for advanced development needs.', 'The process of running the application with ng serve includes starting a development server, automatic refresh on changes, TypeScript to JavaScript compilation, and application build optimization.', 'Creating reusable and scalable applications in Angular revolves around the concept of creating independent and isolated web components. The chapter emphasizes the core concept of Angular, which involves creating independent and isolated web components to build scalable and maintainable applications.', 'Node.js and ds are essential hard dependencies required for setting up Angular CLI and creating a new project.', 'Angular CLI manages project dependencies and development dependencies, differentiating their usage for production and development environments. The chapter explains the distinction between project dependencies and development dependencies, emphasizing their roles for production and development environments.', 'The Angular CLI startup project includes CLI.json with commands and metadata, karma.conf.js for unit testing, protractor.conf.js for end-to-end testing, and tsconfig for specifying JavaScript version and modularity.']}, {'end': 3247.777, 'segs': [{'end': 2324.189, 'src': 'embed', 'start': 2290.078, 'weight': 1, 'content': [{'end': 2291.959, 'text': 'There are a few building blocks of Angular.', 'start': 2290.078, 'duration': 1.881}, {'end': 2297.362, 'text': 'Modular, so models are going to be there based on components.', 'start': 2293.18, 'duration': 4.182}, {'end': 2299.604, 'text': 'So component is one building block.', 'start': 2298.103, 'duration': 1.501}, {'end': 2302.646, 'text': 'Component will have the functionality.', 'start': 2300.064, 'duration': 2.582}, {'end': 2307.741, 'text': 'The functionality needs to be associated to DOM.', 'start': 2303.479, 'duration': 4.262}, {'end': 2309.622, 'text': "So that's the reason template is there.", 'start': 2308.061, 'duration': 1.561}, {'end': 2315.425, 'text': 'And the template and the functionality of component is going to be joined with something called as metadata.', 'start': 2310.022, 'duration': 5.403}, {'end': 2324.189, 'text': 'So you will have a component annotation that will take a metadata and it will join your component class as well as your template,', 'start': 2315.865, 'duration': 8.324}], 'summary': 'Angular has modular building blocks including components and templates, joined by metadata.', 'duration': 34.111, 'max_score': 2290.078, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-xlmXE7bJU/pics/r-xlmXE7bJU2290078.jpg'}, {'end': 2444.578, 'src': 'embed', 'start': 2337.692, 'weight': 0, 'content': [{'end': 2341.694, 'text': "We'll have a look at that so that we understand binding in a much better fashion.", 'start': 2337.692, 'duration': 4.002}, {'end': 2350.758, 'text': 'Basically data binding will provide you association of component functions as well as component models to the template and other way around as well.', 'start': 2342.134, 'duration': 8.624}, {'end': 2355.421, 'text': 'It also takes care of change detection, it takes care of updating the views, et cetera.', 'start': 2350.918, 'duration': 4.503}, {'end': 2360.303, 'text': 'services. because you have a modular structure, it makes sense to go ahead,', 'start': 2356.181, 'duration': 4.122}, {'end': 2366.727, 'text': 'keep dependencies and manage dependencies from one place and inject them only when it is needed.', 'start': 2360.303, 'duration': 6.424}, {'end': 2374.711, 'text': 'services are dependencies which can be injected when needed and they are mostly kept as singletons.', 'start': 2366.727, 'duration': 7.984}, {'end': 2381.114, 'text': 'there are something called as directives and pipes which help you manage Dom manipulation.', 'start': 2374.711, 'duration': 6.403}, {'end': 2386.404, 'text': 'great, so what is a NG module and what is an angular model?', 'start': 2381.114, 'duration': 5.29}, {'end': 2391.238, 'text': 'in the first place, angular module is not a the file-based modularity.', 'start': 2386.404, 'duration': 4.834}, {'end': 2394.78, 'text': "ts is one single module, but that's one single file.", 'start': 2391.758, 'duration': 3.022}, {'end': 2396.962, 'text': 'So it is not file-based modularity.', 'start': 2395.341, 'duration': 1.621}, {'end': 2408.77, 'text': 'Angle module is something that encompasses all these file modules, combines all of the functionalities provided by components, directives, pipes,', 'start': 2397.282, 'duration': 11.488}, {'end': 2416.015, 'text': 'services, et cetera, to create one single functionality chunk that works cohesively.', 'start': 2408.77, 'duration': 7.245}, {'end': 2421.431, 'text': 'And will have a cohesive block of functionality.', 'start': 2417.336, 'duration': 4.095}, {'end': 2428.14, 'text': 'That is the one that will have your application portlet or your application entirely.', 'start': 2422.412, 'duration': 5.728}, {'end': 2438.954, 'text': 'Each Angular app has at least one root module, and encapsulation of different similar functionality is going to be there as well,', 'start': 2429.306, 'duration': 9.648}, {'end': 2444.578, 'text': 'as you also will need to understand that each module will be encapsulated by itself.', 'start': 2438.954, 'duration': 5.624}], 'summary': 'Data binding associates component functions and models to templates, manages dependencies, and encapsulates functionality in angular modules.', 'duration': 106.886, 'max_score': 2337.692, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-xlmXE7bJU/pics/r-xlmXE7bJU2337692.jpg'}], 'start': 2290.078, 'title': 'Angular building blocks and module basics', 'summary': 'Explores the fundamental building blocks of angular, including components, templates, data binding, services, directives, pipes, and modules, focusing on encapsulation, modular structure, module creation, metadata, reusable components, annotation process, and angular cli usage.', 'chapters': [{'end': 2464.293, 'start': 2290.078, 'title': 'Angular building blocks and modules', 'summary': 'Explains the building blocks of angular, including components, templates, data binding, services, directives, pipes, and modules, emphasizing the encapsulation and modular structure of angular.', 'duration': 174.215, 'highlights': ['Angular module encompasses all file modules and functionalities to create a cohesive functionality chunk. Angular module combines all functionalities provided by components, directives, pipes, services, etc., creating a cohesive functionality chunk.', 'Components in Angular are the building blocks with associated functionality and are joined with metadata, including templates and data binding. Components in Angular are the building blocks with associated functionality, joined with metadata, templates, and data binding.', 'Services in Angular are kept as singletons, providing dependencies that can be injected when needed. Services in Angular are kept as singletons, providing dependencies that can be injected when needed.', 'Angular modules encapsulate similar functionalities and each app has at least one root module. Angular modules encapsulate similar functionalities, and each app has at least one root module.', 'Data binding in Angular provides association of component functions and models to the template and takes care of change detection and updating the views. Data binding in Angular provides association of component functions and models to the template, along with change detection and updating the views.']}, {'end': 2867.716, 'start': 2464.293, 'title': 'Angular module and component basics', 'summary': 'Discusses angular module creation using ng-module and the role of metadata in declaring components, directives, and pipes, along with the purpose of creating reusable components and the annotation process for defining a component.', 'duration': 403.423, 'highlights': ['Angular module creation using ng-module with metadata Explains the process of creating an Angular module using ng-module and metadata to declare components, dependencies, and root component.', 'Role of metadata in declaring components, directives, and pipes Discusses the use of metadata to inform Angular about the root module, dependencies, components, pipes, services, and the bootstrapping process.', 'Purpose of creating reusable components Emphasizes the concept of creating separate components for different functionalities to promote reusability and efficiency in application development.', "Annotation process for defining a component Describes the annotation or decorator as the mechanism for joining the class and template, where metadata specifies the component's behavior, creation, and change detection."]}, {'end': 3247.777, 'start': 2868.316, 'title': 'Angular components and directives', 'summary': "Explains the process of creating and working with components in angular, emphasizing the use of angular cli to generate and manage components, along with the benefits of angular's directives and binding functionalities.", 'duration': 379.461, 'highlights': ['The chapter explains the process of creating and working with components in Angular, emphasizing the use of Angular CLI to generate and manage components. The speaker demonstrates the use of Angular CLI to generate a component, showcasing the automatic creation and updating of app.module, simplifying the process of creating and declaring components.', "The chapter highlights the benefits of Angular's directives and binding functionalities, allowing for efficient DOM manipulation and data binding. The speaker illustrates the use of ng-for directive for looping through and displaying list items, along with demonstrating the binding of variables and the printing of values within HTML using Angular's binding functionalities.", 'The chapter mentions the time-saving benefits of using Angular, such as automatic recompiling and restarting, reducing the need for manual refreshing and recompiling. The speaker emphasizes the time-saving benefits of using Angular, stating that it eliminates the need for manual browser refreshing and recompiling, thus reducing the mundane tasks by at least 20%.']}], 'duration': 957.699, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-xlmXE7bJU/pics/r-xlmXE7bJU2290078.jpg', 'highlights': ['Angular modules encapsulate similar functionalities and each app has at least one root module.', 'Components in Angular are the building blocks with associated functionality, joined with metadata, templates, and data binding.', 'Services in Angular are kept as singletons, providing dependencies that can be injected when needed.', 'Data binding in Angular provides association of component functions and models to the template, along with change detection and updating the views.', 'Angular module encompasses all file modules and functionalities to create a cohesive functionality chunk.']}, {'end': 3968.174, 'segs': [{'end': 3329.978, 'src': 'heatmap', 'start': 3258.543, 'weight': 0, 'content': [{'end': 3270.07, 'text': 'And approot needs to bootstrap this component, or it needs to bootstrap this component somewhere, wherever it is in the path of approot instantiation.', 'start': 3258.543, 'duration': 11.527}, {'end': 3278.367, 'text': 'The only way I can think of right now, because we only have one particular component, which is a root component,', 'start': 3270.882, 'duration': 7.485}, {'end': 3281.229, 'text': 'and there are no other components associated.', 'start': 3278.367, 'duration': 2.862}, {'end': 3289.274, 'text': 'I might as well go to app component and say HR, and I will go ahead declare my component here.', 'start': 3281.229, 'duration': 8.045}, {'end': 3296.939, 'text': 'Now if I look, it will actually repeat the sections of the for loop and will actually put the title as well there.', 'start': 3289.774, 'duration': 7.165}, {'end': 3302.959, 'text': 'So Angular is very powerful and you did not need a lot of code to do any of these things.', 'start': 3297.577, 'duration': 5.382}, {'end': 3305, 'text': 'This is a very simple application.', 'start': 3303.579, 'duration': 1.421}, {'end': 3310.882, 'text': 'Maybe it might be overdue if you use Angular for just this particular page.', 'start': 3305.62, 'duration': 5.262}, {'end': 3318.924, 'text': 'But what about applications where you really need to work across with huge amounts of code for the client application?', 'start': 3311.362, 'duration': 7.562}, {'end': 3326.087, 'text': "That's exactly where Angular is going to come handy, because Angular is going to help you create codes that are going to be scalable.", 'start': 3319.685, 'duration': 6.402}, {'end': 3329.978, 'text': "Let's come back and understand what all we did right now.", 'start': 3326.837, 'duration': 3.141}], 'summary': 'Angular makes coding efficient for scalable applications, demonstrated through a simple example.', 'duration': 82.001, 'max_score': 3258.543, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-xlmXE7bJU/pics/r-xlmXE7bJU3258543.jpg'}, {'end': 3659.309, 'src': 'embed', 'start': 3636.38, 'weight': 4, 'content': [{'end': 3643.802, 'text': 'So, as soon as a particular event is triggered, you can trigger a particular function and do some particular action or any kind of data change,', 'start': 3636.38, 'duration': 7.422}, {'end': 3646.423, 'text': 'or maybe make an XHR request on click of a button.', 'start': 3643.802, 'duration': 2.621}, {'end': 3650.625, 'text': 'That exactly is what we will quickly look at right now.', 'start': 3647.244, 'duration': 3.381}, {'end': 3652.967, 'text': 'So we looked at property binding.', 'start': 3651.326, 'duration': 1.641}, {'end': 3656.968, 'text': "Let's also quickly look at an event binding out here.", 'start': 3653.067, 'duration': 3.901}, {'end': 3659.309, 'text': "So I'm going to close this particular section.", 'start': 3657.509, 'duration': 1.8}], 'summary': 'Learn to trigger functions and actions on specific events using event binding.', 'duration': 22.929, 'max_score': 3636.38, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-xlmXE7bJU/pics/r-xlmXE7bJU3636380.jpg'}, {'end': 3901.778, 'src': 'embed', 'start': 3875.219, 'weight': 1, 'content': [{'end': 3880.062, 'text': 'All right, in this particular section, we will be looking at services very specifically.', 'start': 3875.219, 'duration': 4.843}, {'end': 3886.747, 'text': 'Services are nothing but a very simple dependency object that Angular helps you create,', 'start': 3880.303, 'duration': 6.444}, {'end': 3894.353, 'text': 'where you can use that to either do some kind of activity by putting business logic or presentation logic,', 'start': 3886.747, 'duration': 7.606}, {'end': 3901.778, 'text': 'or putting common functionalities or any kind of functionality like maybe authentication or logging.', 'start': 3894.353, 'duration': 7.425}], 'summary': 'Angular helps create services for business logic, presentation, and functionality.', 'duration': 26.559, 'max_score': 3875.219, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-xlmXE7bJU/pics/r-xlmXE7bJU3875219.jpg'}], 'start': 3247.977, 'title': 'Angular bootstrapping and data binding', 'summary': 'Discusses angular bootstrapping, emphasizing its scalability and ease of use for handling large code. it also covers data binding in angular, including interpolation, property binding, event binding, and the role of services for business logic, data sharing, and common functionalities.', 'chapters': [{'end': 3329.978, 'start': 3247.977, 'title': 'Angular bootstrapping and scalability', 'summary': 'Discusses the bootstrapping of components in angular, highlighting the scalability and ease of use of the framework, showcasing how it can handle large amounts of code with minimal effort and how it is beneficial for creating scalable code.', 'duration': 82.001, 'highlights': ['Angular is beneficial for creating scalable code, making it handy for applications with huge amounts of code for the client application.', 'The framework is powerful and requires minimal code to accomplish tasks, as demonstrated by the simplicity of the application discussed.', 'Bootstrapping a single component, such as approot, showcases the ease of use and efficiency of Angular in handling component instantiation.']}, {'end': 3968.174, 'start': 3330.858, 'title': 'Angular data binding and services', 'summary': 'Explains data binding in angular, including interpolation, property binding, and event binding, along with the role of metadata and component annotation. it also covers the importance of services in angular, emphasizing their use for business logic, data sharing, and common functionalities.', 'duration': 637.316, 'highlights': ['The chapter explains data binding in Angular, including interpolation, property binding, and event binding. It covers how to bind JavaScript variables to HTML, types of metadata available, and the ways to bind component classes with templates, emphasizing the role of component annotation in creating bindings.', 'The importance of services in Angular is highlighted, emphasizing their use for business logic, data sharing, and common functionalities. Services in Angular act as dependency objects for creating and accessing business logic, common functionality, and configuration data, often implemented as singletons for data sharing and business logic.']}], 'duration': 720.197, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-xlmXE7bJU/pics/r-xlmXE7bJU3247977.jpg', 'highlights': ['Angular is beneficial for creating scalable code, making it handy for applications with huge amounts of code for the client application.', 'The importance of services in Angular is highlighted, emphasizing their use for business logic, data sharing, and common functionalities.', 'Bootstrapping a single component, such as approot, showcases the ease of use and efficiency of Angular in handling component instantiation.', 'The framework is powerful and requires minimal code to accomplish tasks, as demonstrated by the simplicity of the application discussed.', 'The chapter explains data binding in Angular, including interpolation, property binding, and event binding.']}, {'end': 4382.196, 'segs': [{'end': 4017.13, 'src': 'embed', 'start': 3968.72, 'weight': 0, 'content': [{'end': 3975.662, 'text': "So preferably in case of such scenarios where you're sharing data, you would definitely need a singleton.", 'start': 3968.72, 'duration': 6.942}, {'end': 3979.544, 'text': 'And that exactly is what services do.', 'start': 3976.363, 'duration': 3.181}, {'end': 3988.187, 'text': 'Services is a broad category encompassing any value, any data, any object, function or feature that your application needs,', 'start': 3980.144, 'duration': 8.043}, {'end': 3995.332, 'text': 'and they are injected into your components services directives as a dependency.', 'start': 3988.727, 'duration': 6.605}, {'end': 3999.335, 'text': 'This particular process is generally termed as dependency injection,', 'start': 3995.752, 'duration': 3.583}, {'end': 4007.781, 'text': 'and the purpose of dependency injection is nothing but to resolve a particular dependency or create and then resolve a particular dependency,', 'start': 3999.335, 'duration': 8.446}, {'end': 4009.863, 'text': 'depending on whether the object is there or not.', 'start': 4007.781, 'duration': 2.082}, {'end': 4011.846, 'text': 'into your dependent objects.', 'start': 4010.345, 'duration': 1.501}, {'end': 4017.13, 'text': 'The dependent objects might be, like I said, directives, components, or services themselves.', 'start': 4012.246, 'duration': 4.884}], 'summary': 'Services are crucial for dependency injection of data, functions, and features into components, ensuring resolution of dependencies.', 'duration': 48.41, 'max_score': 3968.72, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-xlmXE7bJU/pics/r-xlmXE7bJU3968720.jpg'}, {'end': 4085.597, 'src': 'embed', 'start': 4034.501, 'weight': 1, 'content': [{'end': 4042.667, 'text': 'Angular makes it insanely easy for you by just using iterate, injectable, annotation, and it will be created as a singleton.', 'start': 4034.501, 'duration': 8.166}, {'end': 4046.109, 'text': 'So that is going to be what a service is.', 'start': 4043.067, 'duration': 3.042}, {'end': 4052.693, 'text': 'Like I said, injectable is the annotation that helps you with creating a singleton service.', 'start': 4046.569, 'duration': 6.124}, {'end': 4056.336, 'text': "So let's quickly go ahead and create a singleton service.", 'start': 4053.534, 'duration': 2.802}, {'end': 4069.044, 'text': "I'm going to stop the server and I'm going to say ng generate service and I'm going to give the path from the app folder all right?", 'start': 4056.516, 'duration': 12.528}, {'end': 4074.274, 'text': 'So from the app folder I am going to have.', 'start': 4069.372, 'duration': 4.902}, {'end': 4076.154, 'text': "maybe let's have a service folder.", 'start': 4074.274, 'duration': 1.88}, {'end': 4085.597, 'text': 'So services slash movies list slash movies list.', 'start': 4076.874, 'duration': 8.723}], 'summary': 'Angular makes it easy to create a singleton service using annotations and generate command.', 'duration': 51.096, 'max_score': 4034.501, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-xlmXE7bJU/pics/r-xlmXE7bJU4034501.jpg'}, {'end': 4162.6, 'src': 'embed', 'start': 4133.319, 'weight': 4, 'content': [{'end': 4139.104, 'text': 'The reason why it has done so is because if you provide the service in the component level,', 'start': 4133.319, 'duration': 5.785}, {'end': 4144.551, 'text': 'It will be available for the component and the company tree below, and if you provide it at the module level,', 'start': 4139.104, 'duration': 5.447}, {'end': 4146.453, 'text': 'It will be available for the whole application.', 'start': 4144.551, 'duration': 1.902}, {'end': 4152.974, 'text': 'Irrespective of whether you are providing it at the component level or at the module level,', 'start': 4147.17, 'duration': 5.804}, {'end': 4156.776, 'text': 'you still have to import that particular object and do a dependency injection.', 'start': 4152.974, 'duration': 3.802}, {'end': 4162.6, 'text': "So let's quickly look at how to go ahead and work across with services so that it can be declared.", 'start': 4157.276, 'duration': 5.324}], 'summary': 'Services can be provided at component or module level, requiring import and dependency injection.', 'duration': 29.281, 'max_score': 4133.319, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-xlmXE7bJU/pics/r-xlmXE7bJU4133319.jpg'}], 'start': 3968.72, 'title': 'Singleton and creating angular services', 'summary': 'Covers the concept of singleton services in angular, emphasizing their role in dependency injection and the ease of creation using @injectable annotation. it also explains creating and using services, including providing at component and module levels, performing dependency injection, and utilizing across components.', 'chapters': [{'end': 4056.336, 'start': 3968.72, 'title': 'Singleton services in angular', 'summary': 'Explains the concept of services in angular, highlighting their role as singletons and the use of dependency injection, and the ease of creating singleton services using the @injectable annotation.', 'duration': 87.616, 'highlights': ['Services encompass any value, data, object, function, or feature needed by the application and are injected into components, directives, and other services as dependencies.', 'Dependency injection is the process of resolving or creating and then resolving dependencies of dependent objects, such as directives, components, or other services.', 'Angular makes it easy to create singleton services using the @Injectable annotation, ensuring that the service is created as a singleton for efficient data sharing and management.']}, {'end': 4382.196, 'start': 4056.516, 'title': 'Creating and using services in angular', 'summary': 'Explains how to create and use services in angular, including providing services at the component and module levels, performing dependency injection, and utilizing services across components.', 'duration': 325.68, 'highlights': ["Creating a service using ng generate service command The process of creating a service in Angular is demonstrated, with the use of the 'ng generate service' command to create a service within a specific folder structure.", 'Providing services at component and module levels The concept of providing services at different levels, such as the component and module levels, is explained, with the impact on the availability of the service within the application.', 'Performing dependency injection for services The process of performing dependency injection for services is described, including importing the service and using it for dependency injection within components.']}], 'duration': 413.476, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-xlmXE7bJU/pics/r-xlmXE7bJU3968720.jpg', 'highlights': ['Services encompass any value, data, object, function, or feature needed by the application and are injected into components, directives, and other services as dependencies.', 'Angular makes it easy to create singleton services using the @Injectable annotation, ensuring that the service is created as a singleton for efficient data sharing and management.', 'Dependency injection is the process of resolving or creating and then resolving dependencies of dependent objects, such as directives, components, or other services.', "Creating a service using ng generate service command The process of creating a service in Angular is demonstrated, with the use of the 'ng generate service' command to create a service within a specific folder structure.", 'Providing services at component and module levels The concept of providing services at different levels, such as the component and module levels, is explained, with the impact on the availability of the service within the application.', 'Performing dependency injection for services The process of performing dependency injection for services is described, including importing the service and using it for dependency injection within components.']}, {'end': 5527.429, 'segs': [{'end': 4489.791, 'src': 'embed', 'start': 4422.348, 'weight': 0, 'content': [{'end': 4423.669, 'text': 'et cetera, whatever you want to do.', 'start': 4422.348, 'duration': 1.321}, {'end': 4430.853, 'text': 'And even if you inject it in another component, the same list is going to be available to you in that particular scenario.', 'start': 4424.269, 'duration': 6.584}, {'end': 4435.016, 'text': 'If you make a change, the change will also be reflected in that particular component.', 'start': 4431.234, 'duration': 3.782}, {'end': 4440.417, 'text': 'So that is something that is going to be there and that is something very nice about services.', 'start': 4435.476, 'duration': 4.941}, {'end': 4448.94, 'text': 'Great, so we quickly saw that you can actually work across with services and service.', 'start': 4441.378, 'duration': 7.562}, {'end': 4454.281, 'text': 'it basically creates an instance of a class and then injects it as a dependency.', 'start': 4448.94, 'duration': 5.341}, {'end': 4461.083, 'text': 'If it is already available, it is going to resolve that already created object and then it is going to do a dependency injection.', 'start': 4454.761, 'duration': 6.322}, {'end': 4467.906, 'text': 'It is used to provide services to a component and uses dependency injection process.', 'start': 4462.065, 'duration': 5.841}, {'end': 4477.568, 'text': 'Dependency injection process is taken care of by a library which is there within Angular dependency injection library which takes care of this particular purpose.', 'start': 4468.406, 'duration': 9.162}, {'end': 4485.81, 'text': 'Great, so we looked at how to do an injection and we also looked at how to retrieve data from our section.', 'start': 4478.429, 'duration': 7.381}, {'end': 4489.791, 'text': "The next section I'm going to talk about is called as directives.", 'start': 4486.29, 'duration': 3.501}], 'summary': 'Services allow sharing data across components in angular.', 'duration': 67.443, 'max_score': 4422.348, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-xlmXE7bJU/pics/r-xlmXE7bJU4422348.jpg'}, {'end': 4763.822, 'src': 'embed', 'start': 4739.98, 'weight': 3, 'content': [{'end': 4748.627, 'text': 'if you notice this particular code, We have already seen a structural directive ng-if, ng-for, which basically change the structure of the DOM,', 'start': 4739.98, 'duration': 8.647}, {'end': 4753.072, 'text': 'whether taking it out from the DOM, putting it into the DOM or repeating sections.', 'start': 4748.627, 'duration': 4.445}, {'end': 4756.935, 'text': 'So that exactly is structural directives.', 'start': 4753.592, 'duration': 3.343}, {'end': 4763.822, 'text': 'And let us also quickly look at a very simple attribute directive that we can create on our own.', 'start': 4757.816, 'duration': 6.006}], 'summary': 'Structural directives like ng-if, ng-for change dom structure; attribute directives can be created.', 'duration': 23.842, 'max_score': 4739.98, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-xlmXE7bJU/pics/r-xlmXE7bJU4739980.jpg'}, {'end': 5413.92, 'src': 'embed', 'start': 5385.792, 'weight': 4, 'content': [{'end': 5396.418, 'text': 'but absolutely great to demonstrate the use case of how you can use NGCLI along with working with Angular and getting your Angular up and running.', 'start': 5385.792, 'duration': 10.626}, {'end': 5400.06, 'text': 'Great, so that was about Angular.', 'start': 5397.098, 'duration': 2.962}, {'end': 5403.762, 'text': 'We went ahead and looked at what is Angular.', 'start': 5400.54, 'duration': 3.222}, {'end': 5406.063, 'text': 'We went ahead and looked at what is TypeScript.', 'start': 5403.802, 'duration': 2.261}, {'end': 5412.147, 'text': 'We did a quick start with an NGCLI and we went ahead, created a particular project.', 'start': 5406.644, 'duration': 5.503}, {'end': 5413.92, 'text': 'Along the whole course.', 'start': 5412.839, 'duration': 1.081}], 'summary': 'Demonstrated ngcli for angular, including typescript, quick start, and project creation.', 'duration': 28.128, 'max_score': 5385.792, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-xlmXE7bJU/pics/r-xlmXE7bJU5385792.jpg'}], 'start': 4383.237, 'title': 'Angular functionality and project overview', 'summary': 'Discusses the functionality of services and directives in angular, including their ability to create and inject class instances, overview of attribute directives, and an introduction to angular project overview with ngcli and firebase integration.', 'chapters': [{'end': 4467.906, 'start': 4383.237, 'title': 'Working with services in angular', 'summary': 'Discusses the functionality of services in angular, highlighting their ability to create and inject class instances for providing services to components, ensuring the availability of the same list across different components, and reflecting changes made in one component to others. it also emphasizes the role of dependency injection in resolving and utilizing previously created objects.', 'duration': 84.669, 'highlights': ['Services allow for the creation and injection of class instances, providing services to components, and using the dependency injection process. (Relevance: 5)', 'The same list is available across different components, and changes made in one component are reflected in others. (Relevance: 4)', 'The injection of a service into another component ensures the availability of the same list in that scenario. (Relevance: 3)', 'Changes made to the service will also be reflected in the component it is injected into. (Relevance: 2)', 'Services create an instance of a class and inject it as a dependency, resolving already created objects through the dependency injection process. (Relevance: 1)']}, {'end': 4825.812, 'start': 4468.406, 'title': 'Angular directives overview', 'summary': 'Covers the overview of directives in angular, including dependency injection, structural directives, attribute directives like ngmodel, and creating custom attribute directives, highlighting their functionality and purpose.', 'duration': 357.406, 'highlights': ['Dependency injection process is taken care of by a library within Angular dependency injection library. The Angular dependency injection library manages the dependency injection process.', 'Components are also a kind of directives but they are directives with a template. Components are a type of directives that include a template.', "Structural directives add and remove DOM elements or change DOM layout or structure, exemplified by ng-if and ng-for. Structural directives manipulate the DOM's structure, demonstrated by examples like ng-if and ng-for.", 'Attribute directives, like ngModel, provide simple behavior to a particular tag or element. Attribute directives, such as ngModel, offer straightforward functionality to specific elements.', 'Creating a custom attribute directive that changes the text to bold when hovered over demonstrates the use case of attribute directives. The process of creating a custom attribute directive to change text to bold upon hovering illustrates the use of attribute directives.']}, {'end': 5148.503, 'start': 4826.092, 'title': 'Angular attribute directives and architecture', 'summary': 'Introduces attribute directives, demonstrating the use of host listener and element ref to capture events and manipulate elements, alongside an overview of the angular architecture, highlighting the components, modules, services, values, and functions within a simple structure.', 'duration': 322.411, 'highlights': ['The chapter demonstrates the use of host listener and element ref to capture events and manipulate elements. The host listener is used to listen to the host or parent events, allowing the capture of specific actions, while the element ref provides the reference of the element the directive is applied to.', 'Introduction to Angular architecture, outlining the components, modules, services, values, and functions within a simple structure. The Angular architecture consists of components, modules, services, values, and functions, with modules declared in imports, components in declarations, and services in providers, allowing for separate or combined implementation of these elements.', 'Overview of property binding from JavaScript to the template and vice versa, as well as the function and purpose of directives within the Angular architecture. Property binding facilitates the linkage between JavaScript and template for changes, while directives provide simple functionality with metadata, guiding instantiation and functionality.']}, {'end': 5527.429, 'start': 5149.011, 'title': 'Angular project overview', 'summary': 'Provides an overview of an angular project, demonstrating the use of ngcli, working with firebase to fetch and display movie details, creating components such as navbar, movie search, and movie details, and using router outlet to navigate between components, while also emphasizing the speed and performance benefits of the application.', 'duration': 378.418, 'highlights': ['The chapter provides an overview of an Angular project, demonstrating the use of NGCLI. Covers the basic structure and components of an Angular project using NGCLI for efficient development.', 'Working with Firebase to fetch and display movie details, creating components such as navbar, movie search, and movie details. Utilizing Firebase to retrieve movie details and implementing components for navigation, movie searching, and displaying movie details.', 'Using router outlet to navigate between components, emphasizing the speed and performance benefits of the application. Utilizing router outlet for seamless navigation between components and highlighting the speed and performance benefits of the application.']}], 'duration': 1144.192, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-xlmXE7bJU/pics/r-xlmXE7bJU4383237.jpg', 'highlights': ['Services allow for the creation and injection of class instances, providing services to components, and using the dependency injection process. (Relevance: 5)', 'The same list is available across different components, and changes made in one component are reflected in others. (Relevance: 4)', 'Dependency injection process is taken care of by a library within Angular dependency injection library. The Angular dependency injection library manages the dependency injection process.', "Structural directives add and remove DOM elements or change DOM layout or structure, exemplified by ng-if and ng-for. Structural directives manipulate the DOM's structure, demonstrated by examples like ng-if and ng-for.", 'The chapter provides an overview of an Angular project, demonstrating the use of NGCLI. Covers the basic structure and components of an Angular project using NGCLI for efficient development.']}], 'highlights': ['Angular has evolved from Angular 1 to Angular 4, rewritten by Google to be compatible with future JavaScript technologies, offering features like modular design, support for ES6 and TypeScript, and a focus on speed and performance.', 'The comparison between JavaScript, jQuery, and Angular in terms of DOM manipulation, animation support, AJAX and JSON data retrieval, scaling with REST APIs, routing, form validation APIs, and two-way binding provides a comprehensive understanding of the differences and capabilities of these technologies.', 'The setup has started, allowing for understanding of the requirements and needs for Angular development, and will proceed step by step.', 'The TypeScript code can be converted into ES5 code using tsconfig with target set as ES5, and additional options such as no implicit any and suppress implicit index errors can be specified to enforce type usage.', 'Creating reusable and scalable applications in Angular revolves around the concept of creating independent and isolated web components. The chapter emphasizes the core concept of Angular, which involves creating independent and isolated web components to build scalable and maintainable applications.', 'Angular modules encapsulate similar functionalities and each app has at least one root module.', 'Services in Angular are kept as singletons, providing dependencies that can be injected when needed.', 'Angular is beneficial for creating scalable code, making it handy for applications with huge amounts of code for the client application.', 'Services encompass any value, data, object, function, or feature needed by the application and are injected into components, directives, and other services as dependencies.', 'The same list is available across different components, and changes made in one component are reflected in others.']}