title
Angular Tutorial for Beginners: Learn Angular & TypeScript

description
Angular tutorial for beginners: Learn Angular & TypeScript from scratch. 🙏 Enjoyed this video? Please vote for me as the Top Programming Guru: https://bit.ly/2G7tf2s 🔥 Get my complete Angular course (60% OFF - LIMITED TIME): https://bit.ly/367j4nB This Angular tutorial teaches you the fundamentals of Angular and TypeScript. SUBSCRIBE FOR MORE VIDEOS! https://www.youtube.com/channel/UCWv7vMbMWH4-V0ZXdmDpPBA?sub_confirmation=1 TABLE OF CONTENT 00:00 Introduction 02:54 What is Angular? 04:54 Architecture of Angular Apps 08:41 Setting Up the Development Environment 11:25 Your First Angular App 13:50 Structure of Angular Projects 20:43 Webpack 23:57 Angular Version History 27:31 Course Structure 31:55 TypeScript Fundamentals 32:34 What is TypeScript? 34:58 Your First TypeScript Program 37:57 Declaring Variables 42:46 Types 48:29 Type Assertions 51:15 Arrow Functions 52:59 Interfaces 56:54 Classes 01:01:22 Objects 01:05:31 Constructors 01:08:22 Access Modifiers 01:11:18 Access Modifiers in Constructor Parameters 01:12:58 Properties 01:18:15 Modules 01:23:22 Angular Fundamentals 01:23:41 Building Blocks of Angular Apps 01:27:22 Creating Components 01:37:00 Generating Components Using Angular CLI 01:41:40 Templates 01:44:08 Directives 01:47:34 Services 01:52:02 Dependency Injection 01:59:22 Generating Services Using Angular CLI 02:01:32 Exercise STAY IN TOUCH https://www.facebook.com/programmingwithmosh/ https://twitter.com/moshhamedani

detail
{'title': 'Angular Tutorial for Beginners: Learn Angular & TypeScript', 'heatmap': [{'end': 811.069, 'start': 661.679, 'weight': 1}], 'summary': 'Tutorial covers angular e-commerce app demo, typescript fundamentals, modularity, and angular components, emphasizing real-time data synchronization, front end development setup, and transitioning from angularjs to angular 2 and 4, with a focus on building a real e-commerce application.', 'chapters': [{'end': 483.324, 'segs': [{'end': 58.748, 'src': 'embed', 'start': 3.732, 'weight': 0, 'content': [{'end': 7.734, 'text': "Hi, my name is Mosh Hamadani, and I'm going to be your instructor over the next few hours.", 'start': 3.732, 'duration': 4.002}, {'end': 12.957, 'text': "In this course, you're going to learn everything about Angular, from the basic to the advanced topics,", 'start': 8.154, 'duration': 4.803}, {'end': 21.402, 'text': 'and you will build and deploy a real e-commerce application using Angular Firebase and the new awesome Bootstrap 4..', 'start': 12.957, 'duration': 8.445}, {'end': 23.944, 'text': 'Let me show you a demo of this application real quick.', 'start': 21.402, 'duration': 2.542}, {'end': 34.689, 'text': "We're gonna build an e-commerce application for an imaginary organic shop.", 'start': 29.445, 'duration': 5.244}, {'end': 38.272, 'text': 'So here on the homepage, we have master detail.', 'start': 35.65, 'duration': 2.622}, {'end': 44.056, 'text': 'We can select a category and see all the products in that category.', 'start': 39.373, 'duration': 4.683}, {'end': 56.326, 'text': 'We can add a product to our shopping cart, change the quantity, and the number of items in the shopping cart gets updated in real time.', 'start': 45.738, 'duration': 10.588}, {'end': 58.748, 'text': "And here's our shopping cart.", 'start': 57.727, 'duration': 1.021}], 'summary': 'Learn angular, build e-commerce app using angular firebase, bootstrap 4.', 'duration': 55.016, 'max_score': 3.732, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko3732.jpg'}, {'end': 139.486, 'src': 'embed', 'start': 85.419, 'weight': 1, 'content': [{'end': 90.561, 'text': 'So all the data we show to the user is in sync everywhere in the application.', 'start': 85.419, 'duration': 5.142}, {'end': 93.682, 'text': 'And this is the beauty of a real-time application.', 'start': 91.181, 'duration': 2.501}, {'end': 103.044, 'text': "Now let's check out Here we have a shipping form and the summary of all the products in our shopping cart.", 'start': 95.163, 'duration': 7.881}, {'end': 110.469, 'text': 'And again, this summary gets updated as soon as I make a change to our shopping cart in another tab.', 'start': 103.945, 'duration': 6.524}, {'end': 115.012, 'text': 'Once we place this order, it will be visible to our admins.', 'start': 111.77, 'duration': 3.242}, {'end': 121.096, 'text': "So I'm an admin user and I have this menu here, manage orders.", 'start': 116.053, 'duration': 5.043}, {'end': 125.099, 'text': 'Here we can see all the orders in the application.', 'start': 122.197, 'duration': 2.902}, {'end': 128.457, 'text': 'Other users will not see this page here.', 'start': 126.215, 'duration': 2.242}, {'end': 132.46, 'text': 'So here we have authentication and authorization.', 'start': 129.198, 'duration': 3.262}, {'end': 135.843, 'text': 'As an admin, I can also manage the products.', 'start': 133.481, 'duration': 2.362}, {'end': 139.486, 'text': 'So here we have all the CRUD operations.', 'start': 137.024, 'duration': 2.462}], 'summary': 'Real-time application keeps user data in sync, updates summary instantly, and provides admin visibility and control.', 'duration': 54.067, 'max_score': 85.419, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko85419.jpg'}, {'end': 269.253, 'src': 'embed', 'start': 239.992, 'weight': 4, 'content': [{'end': 245.456, 'text': 'Plus, a lot of applications built with vanilla JavaScript or jQuery are hard to test.', 'start': 239.992, 'duration': 5.464}, {'end': 253.882, 'text': "And that's why over the past few years, various frameworks have been built and evolved to make web application development easier.", 'start': 246.097, 'duration': 7.785}, {'end': 256.543, 'text': 'Angular is an example of such frameworks.', 'start': 254.703, 'duration': 1.84}, {'end': 263.47, 'text': 'It gives our applications a clean and loosely coupled structure that is easy to understand and easy to maintain.', 'start': 257.225, 'duration': 6.245}, {'end': 269.253, 'text': 'It also brings in a lot of utility code that we can reuse in various applications,', 'start': 264.25, 'duration': 5.003}], 'summary': 'Frameworks like angular make web app development easier and provide reusable utility code.', 'duration': 29.261, 'max_score': 239.992, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko239992.jpg'}, {'end': 338.4, 'src': 'embed', 'start': 308.064, 'weight': 5, 'content': [{'end': 316.329, 'text': 'The front end, also called the client, is the part that runs in a web browser, and this is what the user sees and interacts with.', 'start': 308.064, 'duration': 8.265}, {'end': 322.252, 'text': 'so it essentially includes the user interface or ui of an application.', 'start': 317.23, 'duration': 5.022}, {'end': 328.355, 'text': 'we use html, css, typescript and angular to build the front end.', 'start': 322.252, 'duration': 6.103}, {'end': 338.4, 'text': 'the backend sits on a web server or multiple web servers in the cloud and is responsible for storing the data and doing any kind of processing.', 'start': 328.355, 'duration': 10.045}], 'summary': 'Front end uses html, css, typescript, and angular for user interface, while backend stores data and processes it on web servers.', 'duration': 30.336, 'max_score': 308.064, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko308064.jpg'}, {'end': 457.77, 'src': 'embed', 'start': 433.34, 'weight': 6, 'content': [{'end': 444.064, 'text': 'on the back end, we have one or more databases and apis that make the data available to the clients for a large application around a complex domain.', 'start': 433.34, 'duration': 10.724}, {'end': 453.248, 'text': 'this is where we implement the business logic of the application, like calculating the tax and shipping cost based on various parameters.', 'start': 444.064, 'duration': 9.184}, {'end': 457.77, 'text': 'the front end or the client, on the other hand, is all about the presentation.', 'start': 453.248, 'duration': 4.522}], 'summary': 'Back end handles databases and apis for large app, front end focuses on presentation.', 'duration': 24.43, 'max_score': 433.34, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko433340.jpg'}], 'start': 3.732, 'title': 'Angular e-commerce app demo and application basics', 'summary': 'Introduces an angular course with a focus on building and deploying a real e-commerce application, demonstrating real-time data synchronization, and including features such as master detail, shopping cart functionality, and admin user privileges. it also covers the basics of angular, its benefits, role in structuring and testing complex web applications, architecture, and the distinction between front end and back end components.', 'chapters': [{'end': 139.486, 'start': 3.732, 'title': 'Angular e-commerce app demo', 'summary': 'Introduces an angular course with a focus on building and deploying a real e-commerce application, demonstrating real-time data synchronization, and including features such as master detail, shopping cart functionality, and admin user privileges.', 'duration': 135.754, 'highlights': ['The course covers everything about Angular, from basic to advanced topics, and includes building and deploying a real e-commerce application using Angular Firebase and Bootstrap 4, with a demo of the application provided (relevance score: 5)', 'The e-commerce application features real-time data synchronization, allowing immediate updates to the shopping cart across different tabs without page refresh, demonstrating the beauty of real-time applications (relevance score: 4)', 'The demo showcases features such as master detail, product selection by category, shopping cart functionality with real-time updates of quantity and total price, a shipping form, and admin user privileges for managing orders and products (relevance score: 3)', 'Admin users have access to features such as managing orders and products, including authentication and authorization functionalities, while regular users do not have access to certain pages (relevance score: 2)']}, {'end': 483.324, 'start': 140.828, 'title': 'Angular application basics', 'summary': 'Introduces angular and its benefits, explaining its role in structuring and testing complex web applications, the architecture of angular applications, and the distinction between front end and back end components.', 'duration': 342.496, 'highlights': ['Angular provides a clean and loosely coupled structure that is easy to understand and maintain, making applications more testable.', 'The front end of a web application, built using HTML, CSS, TypeScript, and Angular, is responsible for the user interface and interaction.', 'The back end of an application, responsible for storing data and processing, communicates with the front end through HTTP services or APIs.']}], 'duration': 479.592, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko3732.jpg', 'highlights': ['The course covers everything about Angular, from basic to advanced topics, and includes building and deploying a real e-commerce application using Angular Firebase and Bootstrap 4, with a demo of the application provided (relevance score: 5)', 'The e-commerce application features real-time data synchronization, allowing immediate updates to the shopping cart across different tabs without page refresh, demonstrating the beauty of real-time applications (relevance score: 4)', 'The demo showcases features such as master detail, product selection by category, shopping cart functionality with real-time updates of quantity and total price, a shipping form, and admin user privileges for managing orders and products (relevance score: 3)', 'Admin users have access to features such as managing orders and products, including authentication and authorization functionalities, while regular users do not have access to certain pages (relevance score: 2)', 'Angular provides a clean and loosely coupled structure that is easy to understand and maintain, making applications more testable.', 'The front end of a web application, built using HTML, CSS, TypeScript, and Angular, is responsible for the user interface and interaction.', 'The back end of an application, responsible for storing data and processing, communicates with the front end through HTTP services or APIs']}, {'end': 1411.634, 'segs': [{'end': 610.099, 'src': 'embed', 'start': 583.537, 'weight': 0, 'content': [{'end': 587.72, 'text': "So you can see on my machine, I'm running node version 6.10.", 'start': 583.537, 'duration': 4.183}, {'end': 593.445, 'text': 'The minimum version required for building Angular applications is version 6.9.', 'start': 587.72, 'duration': 5.725}, {'end': 601.711, 'text': "Once you have node, then we're going to use a tool called node package manager or NPM to install third party libraries.", 'start': 593.445, 'duration': 8.266}, {'end': 610.099, 'text': "one of those libraries we're going to install in this lecture is angular cli, which stands for command line interface.", 'start': 602.572, 'duration': 7.527}], 'summary': 'Node version 6.10 used, minimum version for angular is 6.9.', 'duration': 26.562, 'max_score': 583.537, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko583537.jpg'}, {'end': 811.069, 'src': 'heatmap', 'start': 661.679, 'weight': 1, 'content': [{'end': 668.304, 'text': 'Now to ensure that the installation was successful, we can type ng dash dash version.', 'start': 661.679, 'duration': 6.625}, {'end': 673.908, 'text': "So you can see I'm running Angular CLI version 1.1.", 'start': 669.725, 'duration': 4.183}, {'end': 677.671, 'text': '0 and below that you can see the version of Node on my machine.', 'start': 673.908, 'duration': 3.763}, {'end': 687.509, 'text': "Once again, it's 6.10.", 'start': 677.871, 'duration': 9.638}, {'end': 691.851, 'text': 'So with Angular CLI in place, now we can create a new Angular project.', 'start': 687.509, 'duration': 4.342}, {'end': 698.974, 'text': "So we type ng new, and let's call this project hello-world.", 'start': 692.711, 'duration': 6.263}, {'end': 708.698, 'text': "So this generates a bunch of files and folders, and then it's going to use NPM to download the third party libraries.", 'start': 701.535, 'duration': 7.163}, {'end': 712.82, 'text': 'All right, our project is successfully created.', 'start': 710.259, 'duration': 2.561}, {'end': 715.681, 'text': 'Now to start coding, we need a code editor.', 'start': 713.3, 'duration': 2.381}, {'end': 721.459, 'text': "The editor I'm going to use in this course is Visual Studio Code or VS Code.", 'start': 716.994, 'duration': 4.465}, {'end': 728.926, 'text': "It's a beautiful cross-platform lightweight editor that you can download at code.visualstudio.com.", 'start': 722.079, 'duration': 6.847}, {'end': 733.15, 'text': "If you don't like this editor, feel free to use any editors that you prefer.", 'start': 729.467, 'duration': 3.683}, {'end': 736.694, 'text': 'You can use Sublime, you can use Atom, or any other editors.', 'start': 733.591, 'duration': 3.103}, {'end': 743.659, 'text': "Now, if you're going to use VS Code, I want you to add it to the path so you can easily open it from the terminal.", 'start': 738.035, 'duration': 5.624}, {'end': 749.583, 'text': "So here, if you're using Mac, press Shift, Command and P.", 'start': 744.379, 'duration': 5.204}, {'end': 754.486, 'text': "Or if you're using Windows, press Shift, Control and P.", 'start': 749.583, 'duration': 4.903}, {'end': 756.788, 'text': 'This opens up the command palette.', 'start': 754.486, 'duration': 2.302}, {'end': 758.889, 'text': 'Now here type code.', 'start': 757.509, 'duration': 1.38}, {'end': 760.771, 'text': 'Look at this command here.', 'start': 759.91, 'duration': 0.861}, {'end': 763.773, 'text': 'Install code command in path.', 'start': 761.511, 'duration': 2.262}, {'end': 768.226, 'text': 'With this, we can go to the terminal.', 'start': 766.564, 'duration': 1.662}, {'end': 774.274, 'text': 'In the folder where we created a new project, hello world, simply type code period.', 'start': 768.827, 'duration': 5.447}, {'end': 778.864, 'text': 'So this opens up VS Code pointing to the current folder.', 'start': 775.683, 'duration': 3.181}, {'end': 781.225, 'text': "Now in the next lecture, we're going to look at this structure.", 'start': 779.385, 'duration': 1.84}, {'end': 783.767, 'text': "You're going to learn what files and folders we have here.", 'start': 781.245, 'duration': 2.522}, {'end': 787.888, 'text': "But before we get there, let's make sure that this application works.", 'start': 784.487, 'duration': 3.401}, {'end': 794.451, 'text': 'So back in the terminal, once again, we use Angular CLI to load our application in a web server.', 'start': 788.869, 'duration': 5.582}, {'end': 798.273, 'text': 'So we type ng space serve.', 'start': 795.172, 'duration': 3.101}, {'end': 811.069, 'text': 'So now we have a live development server listening on local host port 4, 200 and Angular CLI also compiled our application.', 'start': 801.823, 'duration': 9.246}], 'summary': "Successful installation of angular cli version 1.1.0 and node version 6.10. project 'hello-world' created. coding in vs code. application served on localhost:4200.", 'duration': 149.39, 'max_score': 661.679, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko661679.jpg'}, {'end': 728.926, 'src': 'embed', 'start': 701.535, 'weight': 2, 'content': [{'end': 708.698, 'text': "So this generates a bunch of files and folders, and then it's going to use NPM to download the third party libraries.", 'start': 701.535, 'duration': 7.163}, {'end': 712.82, 'text': 'All right, our project is successfully created.', 'start': 710.259, 'duration': 2.561}, {'end': 715.681, 'text': 'Now to start coding, we need a code editor.', 'start': 713.3, 'duration': 2.381}, {'end': 721.459, 'text': "The editor I'm going to use in this course is Visual Studio Code or VS Code.", 'start': 716.994, 'duration': 4.465}, {'end': 728.926, 'text': "It's a beautiful cross-platform lightweight editor that you can download at code.visualstudio.com.", 'start': 722.079, 'duration': 6.847}], 'summary': 'Project created with npm; code in vs code.', 'duration': 27.391, 'max_score': 701.535, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko701535.jpg'}, {'end': 811.069, 'src': 'embed', 'start': 781.245, 'weight': 1, 'content': [{'end': 783.767, 'text': "You're going to learn what files and folders we have here.", 'start': 781.245, 'duration': 2.522}, {'end': 787.888, 'text': "But before we get there, let's make sure that this application works.", 'start': 784.487, 'duration': 3.401}, {'end': 794.451, 'text': 'So back in the terminal, once again, we use Angular CLI to load our application in a web server.', 'start': 788.869, 'duration': 5.582}, {'end': 798.273, 'text': 'So we type ng space serve.', 'start': 795.172, 'duration': 3.101}, {'end': 811.069, 'text': 'So now we have a live development server listening on local host port 4, 200 and Angular CLI also compiled our application.', 'start': 801.823, 'duration': 9.246}], 'summary': 'Learning about files and folders, ensuring application works, using angular cli to load application, live server on localhost:4200', 'duration': 29.824, 'max_score': 781.245, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko781245.jpg'}, {'end': 943.438, 'src': 'embed', 'start': 881.39, 'weight': 4, 'content': [{'end': 888.978, 'text': 'So when we compile our application, parts of this third party libraries are put in a bundle and deployed with our application.', 'start': 881.39, 'duration': 7.588}, {'end': 893.442, 'text': "So we're not going to deploy this node modules folder to a server.", 'start': 889.799, 'duration': 3.643}, {'end': 895.224, 'text': "You're going to see this later in the course.", 'start': 893.462, 'duration': 1.762}, {'end': 902.724, 'text': 'Below that we have the source folder, and this is where we have the actual source code of our application.', 'start': 896.601, 'duration': 6.123}, {'end': 910.047, 'text': 'So we have this app folder here, and inside this folder we have a module and a component.', 'start': 903.604, 'duration': 6.443}, {'end': 914.168, 'text': 'So every application has at least one module and one component.', 'start': 910.807, 'duration': 3.361}, {'end': 917.67, 'text': "You're going to get familiar with these components and modules very soon.", 'start': 914.749, 'duration': 2.921}, {'end': 925.252, 'text': 'Below that we have this assets folder where you store the static assets of our application.', 'start': 918.51, 'duration': 6.742}, {'end': 931.274, 'text': 'So if you have any image files and it takes files, any icons, all of these go here.', 'start': 925.252, 'duration': 6.022}, {'end': 938.796, 'text': 'Below that we have this environments folder and this is where we store configuration settings for different environments.', 'start': 931.274, 'duration': 7.522}, {'end': 943.438, 'text': 'So we have one file for the production environment and the other for the development environment.', 'start': 938.796, 'duration': 4.642}], 'summary': 'Application structure includes third-party bundles, source code, assets, and environment configurations for production and development.', 'duration': 62.048, 'max_score': 881.39, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko881390.jpg'}, {'end': 1137.179, 'src': 'embed', 'start': 1104.342, 'weight': 7, 'content': [{'end': 1106.243, 'text': 'Now below that we have an important file.', 'start': 1104.342, 'duration': 1.901}, {'end': 1112.076, 'text': 'package.json Now this is a standard file that every node project has.', 'start': 1107.551, 'duration': 4.525}, {'end': 1121.345, 'text': 'Apart from a bunch of basic settings here, like the name and version of your application, we have this setting here dependencies,', 'start': 1112.977, 'duration': 8.368}, {'end': 1125.309, 'text': 'which determines the libraries that your application is dependent upon.', 'start': 1121.345, 'duration': 3.964}, {'end': 1131.114, 'text': 'so here you can see we have nine references to angular libraries.', 'start': 1126.13, 'duration': 4.984}, {'end': 1137.179, 'text': 'all these libraries start with at angular and after that we have the name of the library.', 'start': 1131.114, 'duration': 6.065}], 'summary': 'The package.json file for the node project lists nine angular libraries as dependencies.', 'duration': 32.837, 'max_score': 1104.342, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko1104342.jpg'}, {'end': 1226.805, 'src': 'embed', 'start': 1198.203, 'weight': 8, 'content': [{'end': 1202.346, 'text': 'so your typescript compiler looks at these settings and, based on these settings,', 'start': 1198.203, 'duration': 4.143}, {'end': 1207.111, 'text': 'is going to compile your typescript code into javascript that browsers can understand.', 'start': 1202.346, 'duration': 4.765}, {'end': 1210.533, 'text': "Again, for the most part, you don't have to change any of this here.", 'start': 1207.811, 'duration': 2.722}, {'end': 1217.498, 'text': 'Just be aware that if, in the future, in a complex project, you need to change your TypeScript compiler settings,', 'start': 1211.034, 'duration': 6.464}, {'end': 1219.62, 'text': 'this is where you need to apply your changes.', 'start': 1217.498, 'duration': 2.122}, {'end': 1226.805, 'text': 'And finally, we have tslint.json, which includes a number of settings for tslint.', 'start': 1220.661, 'duration': 6.144}], 'summary': 'Typescript compiler settings compile code to javascript for browsers. tslint.json contains settings for tslint.', 'duration': 28.602, 'max_score': 1198.203, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko1198203.jpg'}, {'end': 1304.203, 'src': 'embed', 'start': 1270.973, 'weight': 3, 'content': [{'end': 1271.734, 'text': 'Now save the file.', 'start': 1270.973, 'duration': 0.761}, {'end': 1277.283, 'text': 'Back in the terminal, look at this message, Webpack compiling.', 'start': 1273.24, 'duration': 4.043}, {'end': 1282.667, 'text': 'So Angular CLI uses a tool called Webpack, which is a build automation tool.', 'start': 1277.903, 'duration': 4.764}, {'end': 1290.052, 'text': 'It gets all our scripts and style sheets, combines them, puts them in a bundle, and then minifies that bundle.', 'start': 1283.387, 'duration': 6.665}, {'end': 1291.393, 'text': 'And this is for optimization.', 'start': 1290.232, 'duration': 1.161}, {'end': 1297.059, 'text': 'So here you can see we have a few bundles like polyfills, which includes all the scripts,', 'start': 1292.657, 'duration': 4.402}, {'end': 1304.203, 'text': 'to fill the gap between the version of JavaScript that Angular needs and the version of JavaScript supported by most browsers out there.', 'start': 1297.059, 'duration': 7.144}], 'summary': 'Angular cli utilizes webpack to optimize and bundle scripts and styles for better performance, creating bundles like polyfills to bridge javascript version gaps.', 'duration': 33.23, 'max_score': 1270.973, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko1270973.jpg'}, {'end': 1382.135, 'src': 'embed', 'start': 1358.611, 'weight': 9, 'content': [{'end': 1366.252, 'text': 'Now, if you go back to the browser, look, without me even refreshing this page, now we have the new title, welcome to Angular app.', 'start': 1358.611, 'duration': 7.641}, {'end': 1372.153, 'text': 'So this is a feature of Webpack called hot module replacement or hot module reloading.', 'start': 1367.012, 'duration': 5.141}, {'end': 1377.294, 'text': 'So whenever one of the source files is modified, Webpack automatically refreshes your browser.', 'start': 1372.693, 'duration': 4.601}, {'end': 1382.135, 'text': "Now let's right click on this page and go to view page source.", 'start': 1378.474, 'duration': 3.661}], 'summary': "Webpack's hot module replacement automatically refreshes browser upon source file modification.", 'duration': 23.524, 'max_score': 1358.611, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko1358611.jpg'}], 'start': 484.457, 'title': 'Angular frontend development', 'summary': 'Covers setting up the development environment and creating the first angular project, including installing node, using npm to install angular cli, setting up visual studio code, and running the application on a local server. it also explains the structure of an angular application, including the purpose of key folders and files like index.html and main.ts, and the basic structure of an angular project, including the role of key files such as package.json and tsconfig, the role of webpack, and the benefits of hot module replacement.', 'chapters': [{'end': 862.562, 'start': 484.457, 'title': 'Angular frontend development', 'summary': 'Focuses on setting up the development environment and creating the first angular project, including installing node, using npm to install angular cli, creating a new angular project, setting up visual studio code, and running the application on a local server.', 'duration': 378.105, 'highlights': ['The chapter focuses on setting up the development environment and creating the first Angular project', 'Installing Node and using NPM to install Angular CLI', 'Creating a new Angular project and setting up Visual Studio Code', 'Running the application on a local server']}, {'end': 1032.366, 'start': 862.962, 'title': 'Angular application structure', 'summary': 'Explains the structure of an angular application, including the purpose of node modules, source folder, assets folder, environments folder, and the main files like index.html and main.ts.', 'duration': 169.404, 'highlights': ['The node modules folder stores third-party libraries that are deployed with the application, while the source folder contains the actual source code of the application.', 'The assets folder is used to store static assets such as image files and icon files.', 'The environments folder stores configuration settings for different environments, with separate files for production and development environments.', 'The main.ts file is the starting point of the Angular application and is responsible for bootstrapping the main module of the application.', 'The polyfills file imports scripts required for running Angular and fills the gap between the features of JavaScript that Angular needs and the features supported by current browsers.']}, {'end': 1411.634, 'start': 1033.107, 'title': 'Angular project structure', 'summary': 'Covers the basic structure of an angular project, including the purpose of key files such as package.json and tsconfig, the role of webpack in bundling and minifying code, and the benefits of hot module replacement for automatic browser refresh.', 'duration': 378.527, 'highlights': ['Webpack compiles and minifies scripts and style sheets into bundles for optimization', 'Explanation of package.json and its dependencies and dev dependencies', 'Role of tsconfig in setting TypeScript compiler settings', "Functionality of Webpack's hot module replacement for automatic browser refresh", 'Webpack automatically injects bundles into index.html at runtime']}], 'duration': 927.177, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko484457.jpg', 'highlights': ['Installing Node and using NPM to install Angular CLI', 'Running the application on a local server', 'Creating a new Angular project and setting up Visual Studio Code', 'Webpack compiles and minifies scripts and style sheets into bundles for optimization', 'The node modules folder stores third-party libraries that are deployed with the application', 'The assets folder is used to store static assets such as image files and icon files', 'The environments folder stores configuration settings for different environments', 'Explanation of package.json and its dependencies and dev dependencies', 'Role of tsconfig in setting TypeScript compiler settings', "Functionality of Webpack's hot module replacement for automatic browser refresh"]}, {'end': 1911.805, 'segs': [{'end': 1495.128, 'src': 'embed', 'start': 1463.087, 'weight': 3, 'content': [{'end': 1467.45, 'text': "But the framework was not designed with the needs of today's applications in mind.", 'start': 1463.087, 'duration': 4.363}, {'end': 1469.992, 'text': 'Plus, it was overly complex.', 'start': 1468.19, 'duration': 1.802}, {'end': 1474.996, 'text': 'So Angular team decided to rewrite the original framework using TypeScript.', 'start': 1470.632, 'duration': 4.364}, {'end': 1479.759, 'text': 'And as a result, Angular 2 came out in mid 2016.', 'start': 1475.716, 'duration': 4.043}, {'end': 1487.925, 'text': 'This new version is entirely different from Angular 1 to the extent that you can think of it as a completely different framework.', 'start': 1479.759, 'duration': 8.166}, {'end': 1495.128, 'text': 'Now. this made a lot of developers unhappy because they had a lot of applications built with Angular 1,', 'start': 1488.746, 'duration': 6.382}], 'summary': 'Angular 2, released in mid-2016, was a complete rewrite using typescript, making it significantly different from angular 1, causing dissatisfaction among developers with existing angular 1 applications.', 'duration': 32.041, 'max_score': 1463.087, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko1463087.jpg'}, {'end': 1608.603, 'src': 'embed', 'start': 1580.645, 'weight': 4, 'content': [{'end': 1587.81, 'text': 'So in a sense, Angular 4 is not a major upgrade to Angular 2, and you can think of it as Angular 2.4, as simple as that.', 'start': 1580.645, 'duration': 7.165}, {'end': 1593.073, 'text': 'Now, after all this confusion in the community about Angular versions,', 'start': 1588.67, 'duration': 4.403}, {'end': 1597.896, 'text': 'the team decided to drop the version suffix and simply call the framework Angular.', 'start': 1593.073, 'duration': 4.823}, {'end': 1600.698, 'text': 'So now we have two kinds of Angular.', 'start': 1598.676, 'duration': 2.022}, {'end': 1608.603, 'text': "We have AngularJS, which is the first generation of Angular written in JavaScript, and it's going to die sooner or later.", 'start': 1601.298, 'duration': 7.305}], 'summary': 'Angular 4 is not a major upgrade to angular 2, leading to the decision to drop version suffix and simply call the framework angular.', 'duration': 27.958, 'max_score': 1580.645, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko1580645.jpg'}, {'end': 1677.999, 'src': 'embed', 'start': 1647.031, 'weight': 1, 'content': [{'end': 1649.392, 'text': 'So this is all about Angular version history.', 'start': 1647.031, 'duration': 2.361}, {'end': 1660.541, 'text': 'Alright. now let me quickly give you an overview of how I have structured this course and how you can get the most out of it in the shortest possible time.', 'start': 1651.894, 'duration': 8.647}, {'end': 1667.97, 'text': 'So in this course, we have three parts, essentials, advanced topics, and the final project.', 'start': 1661.584, 'duration': 6.386}, {'end': 1674.276, 'text': "We're gonna start the essential part with an introduction to TypeScript and object-oriented programming.", 'start': 1668.711, 'duration': 5.565}, {'end': 1677.999, 'text': 'This will prepare you to build Angular applications.', 'start': 1674.957, 'duration': 3.042}], 'summary': 'The course covers angular version history and three parts: essentials, advanced topics, and the final project, focusing on typescript and object-oriented programming for building angular applications.', 'duration': 30.968, 'max_score': 1647.031, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko1647031.jpg'}, {'end': 1740.506, 'src': 'embed', 'start': 1715.445, 'weight': 2, 'content': [{'end': 1724.711, 'text': 'So in this part of the course, I will cover animations, Angular material, Redux architecture, unit testing, and integration testing.', 'start': 1715.445, 'duration': 9.266}, {'end': 1732.819, 'text': "and over the last part we'll build that e-commerce application that i showed you at the beginning of the course.", 'start': 1725.792, 'duration': 7.027}, {'end': 1740.506, 'text': "this part also includes a few sections, and in each section we'll build one module of functionality in this application.", 'start': 1732.819, 'duration': 7.687}], 'summary': 'Covering animations, angular material, redux architecture, unit testing, and integration testing. building an e-commerce application with multiple modules.', 'duration': 25.061, 'max_score': 1715.445, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko1715445.jpg'}, {'end': 1920.515, 'src': 'embed', 'start': 1895.444, 'weight': 0, 'content': [{'end': 1901.186, 'text': "from the basic to the advanced topics, all in one course, so you don't have to jump from one tutorial to another.", 'start': 1895.444, 'duration': 5.742}, {'end': 1907.076, 'text': "In case you're interested, you can get this course with a big discount using the link in the video description.", 'start': 1901.846, 'duration': 5.23}, {'end': 1908.859, 'text': "And if not, that's perfectly fine.", 'start': 1907.416, 'duration': 1.443}, {'end': 1911.805, 'text': 'Continue watching as the next section is coming up.', 'start': 1909.3, 'duration': 2.505}, {'end': 1920.515, 'text': 'In order to build applications with Angular, you need to be comfortable with TypeScript.', 'start': 1915.911, 'duration': 4.604}], 'summary': 'One course covers basic to advanced angular topics, with a big discount available.', 'duration': 25.071, 'max_score': 1895.444, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko1895444.jpg'}], 'start': 1413.513, 'title': 'Angular course essentials and transition', 'summary': 'Covers the transition from angularjs to angular 2 and 4, outlines the course structure, essentials including typescript, angular fundamentals, advanced topics, and a final e-commerce project.', 'chapters': [{'end': 1714.665, 'start': 1413.513, 'title': 'Angular version history and course structure', 'summary': 'Explains the transition from angularjs to angular 2 and 4, clarifies the versioning confusion, and outlines the course structure covering typescript, angular fundamentals, advanced topics, and a final project.', 'duration': 301.152, 'highlights': ['AngularJS was introduced in 2010 and gained popularity, leading to the development of Angular 2 in mid-2016, which was a complete rewrite of the original framework using TypeScript.', 'Angular 4 was not a major upgrade from Angular 2, but a version alignment to avoid confusion, essentially making it Angular 2.4.', 'The course is structured into three parts: essentials, advanced topics, and a final project covering TypeScript, Angular fundamentals, and real-time applications with Firebase.']}, {'end': 1911.805, 'start': 1715.445, 'title': 'Angular course: essentials and final project', 'summary': 'Covers animations, angular material, redux architecture, unit testing, and integration testing, culminating in building an e-commerce application. it emphasizes essential sections for a streamlined learning experience and encourages delving into specific topics based on individual needs.', 'duration': 196.36, 'highlights': ['The chapter covers animations, Angular material, Redux architecture, unit testing, and integration testing, and culminates in building an e-commerce application.', 'Emphasizes essential sections for a streamlined learning experience and encourages delving into specific topics based on individual needs.', 'The course offers almost 30 hours of high-quality content covering basic to advanced topics in one comprehensive course, providing a seamless learning experience.']}], 'duration': 498.292, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko1413513.jpg', 'highlights': ['The course offers almost 30 hours of high-quality content covering basic to advanced topics in one comprehensive course, providing a seamless learning experience.', 'The course is structured into three parts: essentials, advanced topics, and a final project covering TypeScript, Angular fundamentals, and real-time applications with Firebase.', 'The chapter covers animations, Angular material, Redux architecture, unit testing, and integration testing, and culminates in building an e-commerce application.', 'AngularJS was introduced in 2010 and gained popularity, leading to the development of Angular 2 in mid-2016, which was a complete rewrite of the original framework using TypeScript.', 'Angular 4 was not a major upgrade from Angular 2, but a version alignment to avoid confusion, essentially making it Angular 2.4.']}, {'end': 2856.598, 'segs': [{'end': 2040.86, 'src': 'embed', 'start': 2003.63, 'weight': 0, 'content': [{'end': 2009.396, 'text': 'TypeScript also brings quite a few object oriented features that we have missed in JavaScript for a long time.', 'start': 2003.63, 'duration': 5.766}, {'end': 2019.505, 'text': 'We have the concept of classes, interfaces, constructors, access modifiers like public and private, fields, properties, generics, and so on.', 'start': 2009.836, 'duration': 9.669}, {'end': 2021.227, 'text': "You're going to learn about this in this section.", 'start': 2019.826, 'duration': 1.401}, {'end': 2029.433, 'text': 'Now another benefit of using TypeScript is that with TypeScript we can catch errors at compile time instead of at runtime.', 'start': 2022.368, 'duration': 7.065}, {'end': 2032.455, 'text': 'But of course, not all kinds of errors, but a lot of errors.', 'start': 2029.773, 'duration': 2.682}, {'end': 2037.518, 'text': 'So there is a compilation step involved and when we compile our TypeScript code,', 'start': 2033.175, 'duration': 4.343}, {'end': 2040.86, 'text': 'we can catch these errors and fix them before deploying our application.', 'start': 2037.518, 'duration': 3.342}], 'summary': 'Typescript introduces object-oriented features, catching errors at compile time, reducing runtime errors.', 'duration': 37.23, 'max_score': 2003.63, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko2003630.jpg'}, {'end': 2097.374, 'src': 'embed', 'start': 2064.755, 'weight': 2, 'content': [{'end': 2066.237, 'text': 'now the browsers out there.', 'start': 2064.755, 'duration': 1.482}, {'end': 2071.801, 'text': "they don't understand typescript and it's very unlikely that they're going to support it in the future.", 'start': 2066.237, 'duration': 5.564}, {'end': 2078.366, 'text': 'so we need to compile or more accurately, transpile our typescript code into javascript.', 'start': 2071.801, 'duration': 6.565}, {'end': 2080.967, 'text': 'so this is part of building our application.', 'start': 2078.366, 'duration': 2.601}, {'end': 2088.494, 'text': 'whenever we build our application, typescript compiler kicks in and it transpiles our typescript code into javascript,', 'start': 2080.967, 'duration': 7.527}, {'end': 2090.135, 'text': 'code that browsers can understand.', 'start': 2088.494, 'duration': 1.641}, {'end': 2092.681, 'text': "Now that's enough introduction.", 'start': 2091.076, 'duration': 1.605}, {'end': 2097.374, 'text': "next I'm going to show you how to install TypeScript and write your first TypeScript program.", 'start': 2092.681, 'duration': 4.693}], 'summary': "Browsers don't support typescript, so we transpile it to javascript for them to understand.", 'duration': 32.619, 'max_score': 2064.755, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko2064755.jpg'}, {'end': 2469.821, 'src': 'embed', 'start': 2433.897, 'weight': 3, 'content': [{'end': 2437.48, 'text': "Now let's see what happens when we declare this variable using the let keyword.", 'start': 2433.897, 'duration': 3.583}, {'end': 2439.222, 'text': 'So let.', 'start': 2438.641, 'duration': 0.581}, {'end': 2445.848, 'text': 'Now look, we immediately got a red underline here, which indicates a compilation error.', 'start': 2441.226, 'duration': 4.622}, {'end': 2448.049, 'text': 'And this is one of the beauties of TypeScript.', 'start': 2446.008, 'duration': 2.041}, {'end': 2455.113, 'text': "When you're writing TypeScript code, you can catch these errors at compile time, before you run your application, before you deploy it.", 'start': 2448.81, 'duration': 6.303}, {'end': 2457.194, 'text': "Now let's hover our mouse here.", 'start': 2455.853, 'duration': 1.341}, {'end': 2460.115, 'text': 'So this is the error, cannot find name I.', 'start': 2458.254, 'duration': 1.861}, {'end': 2469.821, 'text': 'so now i is scoped to the nearest block instead of nearest function, and this is the proper way to declare variables,', 'start': 2461.656, 'duration': 8.165}], 'summary': "Using 'let' in typescript catches compilation errors, improving code reliability.", 'duration': 35.924, 'max_score': 2433.897, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko2433897.jpg'}, {'end': 2560.967, 'src': 'embed', 'start': 2537.796, 'weight': 4, 'content': [{'end': 2546.362, 'text': 'So what I want to clarify here is that TypeScript compiler reports these errors, but still generates valid JavaScript code.', 'start': 2537.796, 'duration': 8.566}, {'end': 2549.243, 'text': "So here's the takeaway for this lecture.", 'start': 2547.642, 'duration': 1.601}, {'end': 2553.604, 'text': 'From now on, anywhere we want to declare a variable, we use the let keyword.', 'start': 2549.723, 'duration': 3.881}, {'end': 2560.967, 'text': 'Once again, this does not stop the compilation step, but at least we can catch the issues earlier during the compile time.', 'start': 2554.265, 'duration': 6.702}], 'summary': "Typescript compiler reports errors, but still generates valid javascript code. use 'let' for variable declaration to catch issues earlier during compile time.", 'duration': 23.171, 'max_score': 2537.796, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko2537796.jpg'}], 'start': 1915.911, 'title': 'Typescript fundamentals, transpilation, and variable types', 'summary': 'Introduces typescript fundamentals, including type annotations, object-oriented principles, and benefits. it covers transpilation, variable declarations, and basics, emphasizing types like number, boolean, and enums. it highlights benefits such as error detection and intellisense.', 'chapters': [{'end': 2205.76, 'start': 1915.911, 'title': 'Typescript fundamentals', 'summary': 'Introduces the fundamentals of typescript, including type annotations, object-oriented programming principles, and the benefits of using typescript, such as catching errors at compile time and accessing great tools. it also covers the process of installing typescript and writing the first typescript program.', 'duration': 289.849, 'highlights': ['TypeScript brings several object-oriented features such as classes, interfaces, constructors, access modifiers, properties, and generics, providing a good understanding of these concepts.', 'TypeScript allows catching errors at compile time instead of at runtime, making applications more predictable and easier to debug.', 'The process of installing TypeScript globally and writing the first TypeScript program is demonstrated, showcasing the practical aspects of working with TypeScript.']}, {'end': 2514.761, 'start': 2205.82, 'title': 'Typescript transpilation and variable declarations', 'summary': 'Covers the process of transpiling typescript code to javascript, the role of typescript compiler in angular app development, and the differences between var and let keyword with es5 and es6, highlighting the benefits of let keyword in preventing scope issues and compile-time error detection.', 'duration': 308.941, 'highlights': ['The TypeScript compiler transpiles TypeScript code to JavaScript, which is also handled automatically by Angular CLI when running an Angular app with ng serve, thus eliminating the need for manual compilation. (relevance: 5)', 'The let keyword in TypeScript prevents scope issues by scoping variables to the nearest block, as opposed to the var keyword which scopes variables to the nearest function, as demonstrated through a code example. (relevance: 4)', 'ECMAScript 6 (ES6) introduced the let keyword, which was not available in ECMAScript 5 (ES5), and TypeScript provides compile-time error detection for such issues, offering a smoother development experience. (relevance: 3)']}, {'end': 2856.598, 'start': 2514.761, 'title': 'Typescript basics and variable types', 'summary': "Covers the basics of typescript, including the use of 'let' keyword for variable declaration, the importance of type annotations for catching issues during compilation, and the different types in typescript such as number, boolean, string, any, arrays, and enums. it also emphasizes the benefits of typescript in providing intellisense for enum values.", 'duration': 341.837, 'highlights': ["The importance of using 'let' keyword for variable declaration in TypeScript to catch issues earlier during the compile time and prevent runtime errors, as opposed to JavaScript where the type of variables can be changed on the fly.", "The significance of type annotations in TypeScript for variables whose values are not known ahead of time, to avoid using 'any' type and catch compilation errors, demonstrated through examples with number, boolean, string, and arrays.", 'The introduction of enum type in TypeScript for defining a group of related constants, providing the benefit of IntelliSense for completing code and automatically assigning values to enum elements, contributing to improved code maintainability and readability.']}], 'duration': 940.687, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko1915911.jpg', 'highlights': ['TypeScript brings object-oriented features like classes, interfaces, constructors, access modifiers, properties, and generics. (relevance: 5)', 'TypeScript allows catching errors at compile time, making applications more predictable and easier to debug. (relevance: 4)', 'TypeScript compiler transpiles code to JavaScript, eliminating the need for manual compilation. (relevance: 3)', 'The let keyword in TypeScript prevents scope issues by scoping variables to the nearest block. (relevance: 2)', "TypeScript emphasizes the importance of using 'let' keyword for variable declaration to catch issues earlier during compile time. (relevance: 1)"]}, {'end': 3410.878, 'segs': [{'end': 2934.732, 'src': 'embed', 'start': 2884.744, 'weight': 0, 'content': [{'end': 2886.325, 'text': 'So typescript compiler main.ts.', 'start': 2884.744, 'duration': 1.581}, {'end': 2891.009, 'text': 'Look at this piece of code here.', 'start': 2889.909, 'duration': 1.1}, {'end': 2895.271, 'text': 'This is how we can implement the concept of enums in JavaScript.', 'start': 2891.329, 'duration': 3.942}, {'end': 2897.071, 'text': "You can see it's very complicated.", 'start': 2895.631, 'duration': 1.44}, {'end': 2901.993, 'text': 'Now compare this with how we declared an enum here.', 'start': 2897.972, 'duration': 4.021}, {'end': 2903.214, 'text': "It's much cleaner.", 'start': 2902.473, 'duration': 0.741}, {'end': 2907.275, 'text': "So the more you work with TypeScript, the more you're going to love this language.", 'start': 2904.194, 'duration': 3.081}, {'end': 2914.605, 'text': "In this lecture, I'm going to show you the concept of type assertions in TypeScript.", 'start': 2910.103, 'duration': 4.502}, {'end': 2920.707, 'text': "So I'm going to start by declaring a variable like message and setting it to a string.", 'start': 2915.485, 'duration': 5.222}, {'end': 2924.228, 'text': 'Now here we can type message.', 'start': 2921.647, 'duration': 2.581}, {'end': 2926.809, 'text': 'And look, we get this beautiful IntelliSense.', 'start': 2924.928, 'duration': 1.881}, {'end': 2931.37, 'text': 'And in this tool tip, we can see all the things we can do with a string.', 'start': 2927.529, 'duration': 3.841}, {'end': 2934.732, 'text': 'So all these items with this purple icons are functions.', 'start': 2931.851, 'duration': 2.881}], 'summary': 'Typescript simplifies enum declarations, enhances code readability, and provides intellisense for efficient development.', 'duration': 49.988, 'max_score': 2884.744, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko2884744.jpg'}, {'end': 3089.031, 'src': 'embed', 'start': 3059.322, 'weight': 1, 'content': [{'end': 3063.705, 'text': 'This type assertion does not change the type of this variable at runtime.', 'start': 3059.322, 'duration': 4.383}, {'end': 3067.167, 'text': "In fact, it's not going to restructure that object in memory.", 'start': 3063.985, 'duration': 3.182}, {'end': 3074.032, 'text': "It's purely a way to tell TypeScript compiler about the type of a variable so we can access the IntelliSense.", 'start': 3067.708, 'duration': 6.324}, {'end': 3084.228, 'text': 'another concept you need to know when using typescript to build angular applications is the concept of arrow functions.', 'start': 3077.023, 'duration': 7.205}, {'end': 3089.031, 'text': 'so in javascript we can declare a function like this let log.', 'start': 3084.228, 'duration': 4.803}], 'summary': 'Type assertion in typescript provides type information for intellisense without changing the variable type at runtime. understanding arrow functions is crucial for building angular applications in typescript.', 'duration': 29.709, 'max_score': 3059.322, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko3059322.jpg'}, {'end': 3368.987, 'src': 'embed', 'start': 3334.759, 'weight': 2, 'content': [{'end': 3337.921, 'text': "We don't want to repeat this object literal in multiple places.", 'start': 3334.759, 'duration': 3.162}, {'end': 3341.965, 'text': 'So in those cases, a better approach is to use an interface.', 'start': 3338.802, 'duration': 3.163}, {'end': 3348.33, 'text': 'If you have worked with object oriented program languages like C sharp and Java, you know the concept of interfaces.', 'start': 3342.765, 'duration': 5.565}, {'end': 3350.391, 'text': 'You have the same concept in TypeScript.', 'start': 3348.79, 'duration': 1.601}, {'end': 3353.914, 'text': 'Now if you have never worked with interfaces, let me show you how they work.', 'start': 3351.132, 'duration': 2.782}, {'end': 3368.987, 'text': "So on the top I define an interface, and I'm going to call this point curly braces, then I add x as a number, and y as a number.", 'start': 3354.675, 'duration': 14.312}], 'summary': 'Use interfaces in typescript to avoid repeating object literals.', 'duration': 34.228, 'max_score': 3334.759, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko3334759.jpg'}], 'start': 2857.398, 'title': 'Type assertions, arrow functions, and interfaces in typescript', 'summary': 'Covers type assertions, arrow functions, and interfaces in typescript, emphasizing explicit variable typing, arrow function usage, interface creation, and promoting code reusability and maintainability.', 'chapters': [{'end': 3058.862, 'start': 2857.398, 'title': 'Type assertions in typescript', 'summary': 'Explains the concept of type assertions in typescript, demonstrating how to explicitly set variable types and use intellisense, with a comparison of implementation complexity in javascript and the benefits of using typescript.', 'duration': 201.464, 'highlights': ['The chapter explains the concept of type assertions in TypeScript, demonstrating how to explicitly set variable types and use IntelliSense.', "Shows a comparison of implementing enums in JavaScript versus TypeScript, highlighting the simplicity and cleanliness of TypeScript's implementation.", 'Demonstrates the potential issues with default typing in TypeScript, such as losing IntelliSense, and how to resolve them using type assertions.']}, {'end': 3234.495, 'start': 3059.322, 'title': 'Type assertion and arrow functions in typescript', 'summary': 'Explains type assertion and arrow functions in typescript, emphasizing the use of arrow functions and the importance of avoiding functions with too many parameters, illustrated with examples from javascript and typescript.', 'duration': 175.173, 'highlights': ['Type assertion in TypeScript', 'Arrow functions in TypeScript', 'Avoiding functions with too many parameters']}, {'end': 3410.878, 'start': 3234.975, 'title': 'Using interfaces in typescript', 'summary': 'Explains the use of interfaces in typescript for creating custom object types, demonstrating how to define and implement interfaces, and highlighting the benefits of using interfaces over inline annotation, ultimately promoting code reusability and maintainability.', 'duration': 175.903, 'highlights': ['The chapter explains the use of interfaces in TypeScript for creating custom object types.', 'The chapter demonstrates how to define and implement interfaces, promoting code reusability and maintainability.', 'The chapter highlights the benefits of using interfaces over inline annotation.']}], 'duration': 553.48, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko2857398.jpg', 'highlights': ['Demonstrates the potential issues with default typing in TypeScript, such as losing IntelliSense, and how to resolve them using type assertions.', 'Covers type assertions, arrow functions, and interfaces in typescript, emphasizing explicit variable typing, arrow function usage, interface creation, and promoting code reusability and maintainability.', 'The chapter demonstrates how to define and implement interfaces, promoting code reusability and maintainability.', "Shows a comparison of implementing enums in JavaScript versus TypeScript, highlighting the simplicity and cleanliness of TypeScript's implementation.", 'The chapter explains the concept of type assertions in TypeScript, demonstrating how to explicitly set variable types and use IntelliSense.']}, {'end': 4644.136, 'segs': [{'end': 3456.74, 'src': 'embed', 'start': 3414.198, 'weight': 0, 'content': [{'end': 3419.4, 'text': 'So in the last lecture, we used an interface to define the shape of a point object.', 'start': 3414.198, 'duration': 5.202}, {'end': 3422.161, 'text': 'But there is a problem with this implementation.', 'start': 3420.14, 'duration': 2.021}, {'end': 3427.544, 'text': 'In object oriented programming languages, we have this concept called cohesion.', 'start': 3423.222, 'duration': 4.322}, {'end': 3432.366, 'text': 'Which basically means things that are related should be part of one unit.', 'start': 3428.184, 'duration': 4.182}, {'end': 3433.966, 'text': 'They should go together.', 'start': 3432.826, 'duration': 1.14}, {'end': 3435.767, 'text': 'This is what we call cohesion.', 'start': 3434.486, 'duration': 1.281}, {'end': 3441.81, 'text': 'Now back to this example, On the top, we have used an interface to define the shape of a point object.', 'start': 3436.307, 'duration': 5.503}, {'end': 3445.313, 'text': 'And below that, we have a standalone function.', 'start': 3442.331, 'duration': 2.982}, {'end': 3449.215, 'text': 'And this is where we have violated the cohesion principle.', 'start': 3446.073, 'duration': 3.142}, {'end': 3454.919, 'text': 'So the concept of drawing a point is highly related to the structure of a point.', 'start': 3449.836, 'duration': 5.083}, {'end': 3456.74, 'text': 'It should not be a separate function.', 'start': 3455.499, 'duration': 1.241}], 'summary': 'Using an interface for defining the shape of a point, but violating cohesion with a standalone function for drawing the point.', 'duration': 42.542, 'max_score': 3414.198, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko3414198.jpg'}, {'end': 3511.994, 'src': 'embed', 'start': 3481.294, 'weight': 2, 'content': [{'end': 3485.656, 'text': 'We have two functions hanging in the air separate from the point object.', 'start': 3481.294, 'duration': 4.362}, {'end': 3490.54, 'text': 'Since these concepts are highly related, they should be part of one unit.', 'start': 3487.017, 'duration': 3.523}, {'end': 3494.843, 'text': 'In object-oriented languages, we call that unit a class.', 'start': 3491.381, 'duration': 3.462}, {'end': 3500.608, 'text': 'So a class groups properties and functions that are highly related.', 'start': 3495.704, 'duration': 4.904}, {'end': 3511.994, 'text': 'Now in this implementation, unfortunately, we cannot move these two functions inside our interface because interfaces are purely for declarations.', 'start': 3501.826, 'duration': 10.168}], 'summary': 'Functions and properties grouped in a class for better organization and cohesion.', 'duration': 30.7, 'max_score': 3481.294, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko3481294.jpg'}, {'end': 3832.474, 'src': 'embed', 'start': 3804.979, 'weight': 3, 'content': [{'end': 3815.14, 'text': 'How do we do that? Well, here where we declare the point object or the point variable, we initialize it using the new operator.', 'start': 3804.979, 'duration': 10.161}, {'end': 3818.142, 'text': 'So this object is a new point.', 'start': 3816.061, 'duration': 2.081}, {'end': 3821.665, 'text': 'And here we add parentheses.', 'start': 3820.144, 'duration': 1.521}, {'end': 3823.066, 'text': 'This is the syntax.', 'start': 3822.286, 'duration': 0.78}, {'end': 3827.29, 'text': 'Now you can see that we have repeated this point here twice.', 'start': 3823.907, 'duration': 3.383}, {'end': 3832.474, 'text': 'So we can make this code a little bit cleaner by removing this type annotation.', 'start': 3827.97, 'duration': 4.504}], 'summary': 'Initializing point object with new operator, cleaning up code by removing type annotation.', 'duration': 27.495, 'max_score': 3804.979, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko3804979.jpg'}, {'end': 4260.518, 'src': 'embed', 'start': 4235.779, 'weight': 4, 'content': [{'end': 4242.673, 'text': 'so this is why we use access modifiers to control access to certain members of a class from the outside.', 'start': 4235.779, 'duration': 6.894}, {'end': 4246.561, 'text': 'you can apply these access modifiers on fields, properties and methods.', 'start': 4242.673, 'duration': 3.888}, {'end': 4253.373, 'text': "Now, by default, if you don't set an access modifier, it's assumed to be public.", 'start': 4247.95, 'duration': 5.423}, {'end': 4256.215, 'text': 'So here the draw method as you know is public.', 'start': 4253.994, 'duration': 2.221}, {'end': 4260.518, 'text': 'I can also add the public keyword here, but this is redundant.', 'start': 4256.875, 'duration': 3.643}], 'summary': 'Using access modifiers to control class member access; default is public.', 'duration': 24.739, 'max_score': 4235.779, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko4235779.jpg'}, {'end': 4519.519, 'src': 'embed', 'start': 4495.761, 'weight': 1, 'content': [{'end': 4503.987, 'text': 'So in TypeScript and in a lot of object-oriented programming languages, we have a concept called property, which is exactly for this very use case.', 'start': 4495.761, 'duration': 8.226}, {'end': 4507.65, 'text': 'So, look at how I can define a property here.', 'start': 4504.948, 'duration': 2.702}, {'end': 4516.016, 'text': 'We start with a keyword, which is get or set, and then the name of the property, which is in this case x,', 'start': 4508.531, 'duration': 7.485}, {'end': 4519.519, 'text': "and after that we're going to have parentheses, just like a method, okay?", 'start': 4516.016, 'duration': 3.503}], 'summary': 'In typescript, properties are defined using get or set keywords, like x with parentheses.', 'duration': 23.758, 'max_score': 4495.761, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko4495761.jpg'}], 'start': 3414.198, 'title': 'Object-oriented programming in typescript', 'summary': 'Discusses the concept of cohesion, its implementation in typescript, classes, constructors, properties, and methods. it emphasizes the transition from interface to class, encapsulation, optional parameters, access modifiers, and getter and setter methods.', 'chapters': [{'end': 3500.608, 'start': 3414.198, 'title': 'Cohesion in object-oriented programming', 'summary': 'Discusses the concept of cohesion in object-oriented programming, highlighting the violation of cohesion principle in defining shape and functions for a point object, and emphasizes the need to group related properties and functions within a class.', 'duration': 86.41, 'highlights': ['The violation of the cohesion principle is highlighted through the separation of the function for drawing a point from the structure of a point, and the creation of a standalone function for calculating the distance between two points, indicating the need for grouping related properties and functions within a class.', 'The concept of cohesion in object-oriented programming is explained as the principle that related things should be part of one unit, emphasizing the grouping of highly related properties and functions within a class.', 'The need to adhere to the cohesion principle in object-oriented languages is emphasized, particularly in grouping related properties and functions within a class to avoid violations of the cohesion principle.']}, {'end': 3886.304, 'start': 3501.826, 'title': 'Implementing cohesion principle in typescript', 'summary': "Discusses the implementation of the cohesion principle in typescript, emphasizing the transition from interface to class, the encapsulation of properties and methods within a class, and the instantiation of a custom type object using the 'new' operator.", 'duration': 384.478, 'highlights': ['The chapter discusses the transition from interface to class, emphasizing the encapsulation of properties and methods within a class.', "The instantiation of a custom type object using the 'new' operator is explained, demonstrating the allocation of memory to the object.", 'The importance of encapsulating properties and methods within a class, and the inference capability of the TypeScript compiler are highlighted.']}, {'end': 4356.706, 'start': 3886.544, 'title': 'Typescript: classes and constructors', 'summary': "Covers the usage of classes and constructors in typescript, discussing the difference between a class and an object, the concept of constructors, making parameters optional, implementing access modifiers to control member access, and using typescript's feature of generating fields from constructor parameters.", 'duration': 470.162, 'highlights': ['The difference between a class and an object', 'Implementing access modifiers to control member access', "TypeScript's feature of generating fields from constructor parameters"]}, {'end': 4644.136, 'start': 4357.507, 'title': 'Working with properties and methods', 'summary': 'Explains the concept of properties in typescript, demonstrating how to define and use getter and setter methods to access and manipulate private fields, providing a cleaner syntax and basic validation.', 'duration': 286.629, 'highlights': ['The chapter explains the concept of properties in TypeScript, demonstrating how to define and use getter and setter methods to access and manipulate private fields, providing a cleaner syntax and basic validation.', 'The implementation introduces a method to read the coordinate of a point object, allowing access to private members within the class while restricting access from the outside.', 'The chapter also illustrates the use of properties to offer read-only access to private fields or to provide the consumer of classes the ability to set values with basic validation.']}], 'duration': 1229.938, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko3414198.jpg', 'highlights': ['The need to adhere to the cohesion principle in object-oriented languages is emphasized, particularly in grouping related properties and functions within a class to avoid violations of the cohesion principle.', 'The chapter explains the concept of properties in TypeScript, demonstrating how to define and use getter and setter methods to access and manipulate private fields, providing a cleaner syntax and basic validation.', 'The chapter discusses the transition from interface to class, emphasizing the encapsulation of properties and methods within a class.', "The instantiation of a custom type object using the 'new' operator is explained, demonstrating the allocation of memory to the object.", 'Implementing access modifiers to control member access', 'The violation of the cohesion principle is highlighted through the separation of the function for drawing a point from the structure of a point, and the creation of a standalone function for calculating the distance between two points, indicating the need for grouping related properties and functions within a class.']}, {'end': 5213.312, 'segs': [{'end': 4940.363, 'src': 'embed', 'start': 4915.263, 'weight': 3, 'content': [{'end': 4920.445, 'text': 'For example, one of the libraries is at Angular slash core.', 'start': 4915.263, 'duration': 5.182}, {'end': 4923.414, 'text': "Okay, so here's the lesson.", 'start': 4921.593, 'duration': 1.821}, {'end': 4927.516, 'text': 'In TypeScript, we divide our program into multiple files.', 'start': 4924.154, 'duration': 3.362}, {'end': 4931.258, 'text': 'In each file, we export one or more types.', 'start': 4928.196, 'duration': 3.062}, {'end': 4936.581, 'text': 'These types can be classes, functions, simple variables, or objects.', 'start': 4931.798, 'duration': 4.783}, {'end': 4940.363, 'text': 'And wherever we need to use these types, we need to import them first.', 'start': 4937.101, 'duration': 3.262}], 'summary': 'In typescript, programs are divided into multiple files where types like classes and functions are exported and imported.', 'duration': 25.1, 'max_score': 4915.263, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko4915263.jpg'}, {'end': 5150.059, 'src': 'embed', 'start': 5106.235, 'weight': 0, 'content': [{'end': 5113.884, 'text': 'which allows us to work on smaller and more maintainable pieces that can also be reused in different places.', 'start': 5106.235, 'duration': 7.649}, {'end': 5122.413, 'text': 'so, once again, a component encapsulates the data, the html markup and the logic for view, which is an area of the screen that the user sees.', 'start': 5113.884, 'duration': 8.529}, {'end': 5129.916, 'text': 'every application has at least one component, which we call app component or root component.', 'start': 5123.434, 'duration': 6.482}, {'end': 5137.158, 'text': 'a real world angular app is essentially a tree of components, starting from the app component or the root component.', 'start': 5129.916, 'duration': 7.242}, {'end': 5141.579, 'text': 'now in angular we also have another concept called modules.', 'start': 5137.158, 'duration': 4.421}, {'end': 5145.26, 'text': 'a module is a container for a group of related components.', 'start': 5141.579, 'duration': 3.681}, {'end': 5150.059, 'text': 'Every Angular app has at least one module, which we call app module.', 'start': 5145.996, 'duration': 4.063}], 'summary': 'Angular promotes component-based architecture, with every app having at least one app component and module.', 'duration': 43.824, 'max_score': 5106.235, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko5106235.jpg'}], 'start': 4644.716, 'title': 'Typescript and angular modularity', 'summary': 'Covers typescript modularity, including renaming properties, moving class definition to a new file, exporting and importing classes between files, and the concept of modules in typescript and angular. it also covers the fundamentals of building applications with angular, emphasizing the component-based architecture and the encapsulation of data, html markup, and logic for views. by the end, learners will gain a basic understanding of angular building blocks, such as components, templates, directives, and services.', 'chapters': [{'end': 4962.401, 'start': 4644.716, 'title': 'Typescript modularity', 'summary': 'Discusses typescript modularity, including renaming properties, moving class definition to a new file, exporting and importing classes between files, and the concept of modules in typescript and angular.', 'duration': 317.685, 'highlights': ['In TypeScript, we divide our program into multiple files and export one or more types in each file.', 'We need to import types first before using them in TypeScript.', 'Angular modules are about organizing the application into smaller functional areas.']}, {'end': 5213.312, 'start': 4962.401, 'title': 'Angular modules and components', 'summary': 'Covers the fundamentals of building applications with angular, including the concept of modules and components, emphasizing the component-based architecture and the encapsulation of data, html markup, and logic for views. by the end, learners will gain a basic understanding of angular building blocks, such as components, templates, directives, and services.', 'duration': 250.911, 'highlights': ['Angular apps are essentially a tree of components, starting from the app component or the root component.', 'Modules in Angular serve as containers for groups of related components, and as the application grows, it may be beneficial to break the module into smaller, more maintainable modules.', 'Components encapsulate data, HTML markup, and logic for views, promoting a component-based architecture that allows for smaller, more maintainable pieces that can be reused in different places.']}], 'duration': 568.596, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko4644716.jpg', 'highlights': ['Angular apps are essentially a tree of components, starting from the app component or the root component.', 'Components encapsulate data, HTML markup, and logic for views, promoting a component-based architecture that allows for smaller, more maintainable pieces that can be reused in different places.', 'Modules in Angular serve as containers for groups of related components, and as the application grows, it may be beneficial to break the module into smaller, more maintainable modules.', 'In TypeScript, we divide our program into multiple files and export one or more types in each file.', 'We need to import types first before using them in TypeScript.', 'Angular modules are about organizing the application into smaller functional areas.']}, {'end': 6306.829, 'segs': [{'end': 5260.136, 'src': 'embed', 'start': 5213.972, 'weight': 2, 'content': [{'end': 5219.294, 'text': "So if you're building a simple application, we have only one module, which we call the app module.", 'start': 5213.972, 'duration': 5.322}, {'end': 5225.876, 'text': 'But as our application grows in functionality, we may need to break that module into smaller modules,', 'start': 5219.974, 'duration': 5.902}, {'end': 5230.397, 'text': 'with each module responsible for a specific area of our application.', 'start': 5225.876, 'duration': 4.521}, {'end': 5233.818, 'text': 'In that module, we have a bunch of related components.', 'start': 5231.217, 'duration': 2.601}, {'end': 5236.74, 'text': 'okay. so this is the big picture.', 'start': 5234.258, 'duration': 2.482}, {'end': 5243.404, 'text': 'as we go through this course, you will learn about these building blocks in more detail.', 'start': 5236.74, 'duration': 6.664}, {'end': 5246.327, 'text': "all right now let's see these components in action.", 'start': 5243.404, 'duration': 2.923}, {'end': 5250.77, 'text': 'there are basically three steps you need to follow in order to use a component.', 'start': 5246.327, 'duration': 4.443}, {'end': 5252.771, 'text': 'first, you need to create a component.', 'start': 5250.77, 'duration': 2.001}, {'end': 5255.893, 'text': 'second, you need to register that component in a module.', 'start': 5252.771, 'duration': 3.122}, {'end': 5260.136, 'text': 'and third, you need to add an element in your html markup.', 'start': 5255.893, 'duration': 4.243}], 'summary': 'As the application grows, modules and components become essential, with three key steps to using a component.', 'duration': 46.164, 'max_score': 5213.972, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko5213972.jpg'}, {'end': 5380.239, 'src': 'embed', 'start': 5347.806, 'weight': 1, 'content': [{'end': 5352.511, 'text': 'And also by convention, we use the suffix component in the name of the class.', 'start': 5347.806, 'duration': 4.705}, {'end': 5355.194, 'text': "So, here's our class.", 'start': 5353.672, 'duration': 1.522}, {'end': 5359.018, 'text': 'In order for Angular to see this class, first we need to export it.', 'start': 5355.935, 'duration': 3.083}, {'end': 5362.794, 'text': 'Now so far we have only a plain TypeScript class.', 'start': 5360.333, 'duration': 2.461}, {'end': 5364.134, 'text': 'This is not a component.', 'start': 5362.974, 'duration': 1.16}, {'end': 5370.256, 'text': 'In order to convert this to a component, we need to add some metadata to it that Angular understands.', 'start': 5364.994, 'duration': 5.262}, {'end': 5373.057, 'text': 'We use a decorator to achieve this.', 'start': 5370.896, 'duration': 2.161}, {'end': 5380.239, 'text': 'In Angular we have a decorator called component that we can attach to a class to make the class a component.', 'start': 5373.837, 'duration': 6.402}], 'summary': 'Angular class converted to component using metadata and decorator.', 'duration': 32.433, 'max_score': 5347.806, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko5347806.jpg'}, {'end': 5455.435, 'src': 'embed', 'start': 5422.33, 'weight': 6, 'content': [{'end': 5427.391, 'text': 'And in this object, we add one or more properties to tell Angular how this component works.', 'start': 5422.33, 'duration': 5.061}, {'end': 5432.132, 'text': 'For example, one property that we use quite often is selector.', 'start': 5428.231, 'duration': 3.901}, {'end': 5433.852, 'text': 'So selector.', 'start': 5433.152, 'duration': 0.7}, {'end': 5437.313, 'text': 'And we set this to a CSS selector.', 'start': 5435.353, 'duration': 1.96}, {'end': 5444.895, 'text': 'So in CSS, if I want to reference an element like this, I use a selector like this.', 'start': 5437.753, 'duration': 7.142}, {'end': 5455.435, 'text': 'If I want to reference an element like a div that has a class called courses, My selector would be dot courses, right?', 'start': 5445.935, 'duration': 9.5}], 'summary': 'Angular components use properties like selector to specify css selectors for elements.', 'duration': 33.105, 'max_score': 5422.33, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko5422330.jpg'}, {'end': 5538.482, 'src': 'embed', 'start': 5496.545, 'weight': 3, 'content': [{'end': 5505.008, 'text': "now, the second property we add here is template, and that's the html markup we want to be rendered for this component.", 'start': 5496.545, 'duration': 8.463}, {'end': 5507.608, 'text': 'now. here i want to render something very simple.', 'start': 5505.008, 'duration': 2.6}, {'end': 5512.808, 'text': "so let's just add an h2 element and call these courses.", 'start': 5507.608, 'duration': 5.2}, {'end': 5517.07, 'text': 'In a real world application, our templates can be several lines of code.', 'start': 5513.748, 'duration': 3.322}, {'end': 5522.292, 'text': "In that case, we can put them in a separate file and I'm going to show you how that works later in the course.", 'start': 5517.65, 'duration': 4.642}, {'end': 5526.572, 'text': 'So this is a basic component in Angular.', 'start': 5523.069, 'duration': 3.503}, {'end': 5527.633, 'text': 'That was the first step.', 'start': 5526.752, 'duration': 0.881}, {'end': 5531.956, 'text': 'The second step is to register this component in a module.', 'start': 5528.453, 'duration': 3.503}, {'end': 5537.041, 'text': 'Now currently our application has only one module, which we call app module.', 'start': 5532.717, 'duration': 4.324}, {'end': 5538.482, 'text': 'Let me show you where that is.', 'start': 5537.461, 'duration': 1.021}], 'summary': 'The transcript discusses adding a template to a component in angular and registering the component in a module.', 'duration': 41.937, 'max_score': 5496.545, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko5496545.jpg'}, {'end': 6026.461, 'src': 'embed', 'start': 6001.622, 'weight': 0, 'content': [{'end': 6010.591, 'text': 'an HTML file for storing the template, a spec file, which is for writing unit tests for this component and, finally, a TypeScript file,', 'start': 6001.622, 'duration': 8.969}, {'end': 6012.072, 'text': 'which is the actual component itself.', 'start': 6010.591, 'duration': 1.481}, {'end': 6020.357, 'text': 'now what is interesting here is that it also updated app.module and registered this new component.', 'start': 6012.913, 'duration': 7.444}, {'end': 6026.461, 'text': "let's have a look so we can close this terminal window using the same shortcut, which is control and back tick.", 'start': 6020.357, 'duration': 6.104}], 'summary': 'Component consists of html, spec, and typescript files, updated app.module, and terminal shortcut control+back tick.', 'duration': 24.839, 'max_score': 6001.622, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko6001622.jpg'}, {'end': 6271.811, 'src': 'embed', 'start': 6234.496, 'weight': 7, 'content': [{'end': 6234.896, 'text': 'There you go.', 'start': 6234.496, 'duration': 0.4}, {'end': 6236.296, 'text': 'List of courses.', 'start': 6235.616, 'duration': 0.68}, {'end': 6242.997, 'text': 'So this special syntax here, we call it string interpolation.', 'start': 6238.416, 'duration': 4.581}, {'end': 6247.118, 'text': "In the next lecture, I'm going to show you how to render a list of courses here.", 'start': 6243.657, 'duration': 3.461}, {'end': 6251.92, 'text': "All right, now let's take this example to the next level.", 'start': 6249.659, 'duration': 2.261}, {'end': 6257.363, 'text': 'Instead of displaying a simple title field, we want to display the list of courses.', 'start': 6252.721, 'duration': 4.642}, {'end': 6260.965, 'text': 'So first we need a field to hold the list of courses.', 'start': 6258.224, 'duration': 2.741}, {'end': 6271.811, 'text': 'So courses, we set this to an array with three items, course one, course two, and course three.', 'start': 6261.746, 'duration': 10.065}], 'summary': 'Introducing string interpolation and rendering a list of courses in next lecture.', 'duration': 37.315, 'max_score': 6234.496, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko6234496.jpg'}, {'end': 6319.689, 'src': 'embed', 'start': 6284.717, 'weight': 8, 'content': [{'end': 6291.337, 'text': 'How should we do that? First we need to change this single quote to the back tick character.', 'start': 6284.717, 'duration': 6.62}, {'end': 6293.599, 'text': 'So delete back tick.', 'start': 6291.738, 'duration': 1.861}, {'end': 6297.722, 'text': 'Back tick is the character before number one on your keyboard.', 'start': 6294.44, 'duration': 3.282}, {'end': 6299.383, 'text': 'Let me change this as well.', 'start': 6298.342, 'duration': 1.041}, {'end': 6306.829, 'text': 'Now the benefit of using the back tick is that we can break up this template into multiple lines and make it more readable.', 'start': 6300.284, 'duration': 6.545}, {'end': 6319.689, 'text': 'So I want to put this h2 here and below that I want to add a ul and a bunch of list item elements like this.', 'start': 6307.609, 'duration': 12.08}], 'summary': 'Change single quote to back tick for better readability.', 'duration': 34.972, 'max_score': 6284.717, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko6284717.jpg'}], 'start': 5213.972, 'title': 'Angular components', 'summary': "Introduces breaking an application module into smaller modules, explains three steps to use a component, demonstrates creating a component in angular, and emphasizes naming conventions and decorators. it also covers defining properties like selector and template, registering the component in a module, the use of decorators and module properties, the role of component selectors in rendering templates, creating and using custom elements, and showcasing angular cli's ability to streamline component generation and registration.", 'chapters': [{'end': 5421.43, 'start': 5213.972, 'title': 'Angular components overview', 'summary': 'Introduces the concept of breaking a simple application module into smaller modules, explains the three steps to use a component, and demonstrates how to create a component in angular, emphasizing naming conventions and decorators.', 'duration': 207.458, 'highlights': ['The chapter introduces the concept of breaking a simple application module into smaller modules', 'Explains the three steps to use a component', 'Demonstrates how to create a component in Angular, emphasizing naming conventions and decorators']}, {'end': 5661.785, 'start': 5422.33, 'title': 'Angular component basics', 'summary': 'Explains the basics of creating an angular component, including defining properties like selector and template, registering the component in a module, and the use of decorators and module properties.', 'duration': 239.455, 'highlights': ['The chapter explains the basics of creating an Angular component', "Explains the property 'selector' and its usage", "Describes the property 'template' for defining HTML markup", 'Registers the component in a module']}, {'end': 6306.829, 'start': 5661.785, 'title': 'Angular component selector and template', 'summary': "Explains the role of component selectors in rendering templates, demonstrates creating and using custom elements, and showcases angular cli's ability to streamline component generation and registration, emphasizing the benefits and simplicity of the process, and highlighting the usage of string interpolation and data binding in the template.", 'duration': 645.044, 'highlights': ["Angular CLI's ability to generate a component and automatically update app.module, streamlining the component creation process", 'Demonstration of using string interpolation to dynamically render the title field in the template', 'Explanation of using back ticks for multi-line templates to improve readability']}], 'duration': 1092.857, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko5213972.jpg', 'highlights': ["Angular CLI's ability to generate a component and update app.module (3)", 'Demonstrates creating a component in Angular with naming conventions and decorators (1)', 'Explains the three steps to use a component (1)', "Describes the property 'template' for defining HTML markup (2)", 'Registers the component in a module (2)', 'Introduces breaking an application module into smaller modules (1)', "Explains the property 'selector' and its usage (2)", 'Demonstration of using string interpolation to dynamically render the title field in the template (3)', 'Explanation of using back ticks for multi-line templates to improve readability (3)', 'Covers defining properties like selector and template (1)']}, {'end': 7359.836, 'segs': [{'end': 6946.216, 'src': 'embed', 'start': 6914.03, 'weight': 1, 'content': [{'end': 6919.994, 'text': "The second benefit of this implementation is that when we're going to unit test this courses component,", 'start': 6914.03, 'duration': 5.964}, {'end': 6924.136, 'text': 'instead of supplying an actual courses service to this constructor,', 'start': 6919.994, 'duration': 4.142}, {'end': 6930.579, 'text': "we can create a fake implementation of this service that doesn't use that HTTP service on the backend.", 'start': 6924.136, 'duration': 6.443}, {'end': 6936.162, 'text': 'In other words, we have decoupled our courses component from courses service.', 'start': 6931.16, 'duration': 5.002}, {'end': 6937.523, 'text': "So here's the lesson.", 'start': 6936.742, 'duration': 0.781}, {'end': 6946.216, 'text': 'When you use the new operator like this inside a class, you have tightly coupled your class to that implementation.', 'start': 6938.163, 'duration': 8.053}], 'summary': 'Decoupling the courses component from the courses service by creating a fake implementation for unit testing.', 'duration': 32.186, 'max_score': 6914.03, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko6914030.jpg'}, {'end': 7003.018, 'src': 'embed', 'start': 6958.188, 'weight': 0, 'content': [{'end': 6964.415, 'text': 'We need to instruct Angular to create an instance of courses service and pass it to our courses component.', 'start': 6958.188, 'duration': 6.227}, {'end': 6969.159, 'text': 'this concept is called dependency injection.', 'start': 6965.316, 'duration': 3.843}, {'end': 6975.943, 'text': 'so we should instruct angular to inject the dependencies of this component into its constructor.', 'start': 6969.159, 'duration': 6.784}, {'end': 6976.824, 'text': 'as simple as that.', 'start': 6975.943, 'duration': 0.881}, {'end': 6978.645, 'text': "that's dependency injection.", 'start': 6976.824, 'duration': 1.821}, {'end': 6983.588, 'text': "a lot of people think dependency injection is so complicated, but it's really a 25 term for a 5 cent concept.", 'start': 6978.645, 'duration': 4.943}, {'end': 6992.813, 'text': 'so dependency injection means injecting or providing the dependencies of a class into its constructor.', 'start': 6986.15, 'duration': 6.663}, {'end': 6997.496, 'text': 'now angular has a dependency injection framework built into it.', 'start': 6992.813, 'duration': 4.683}, {'end': 7003.018, 'text': "so when it's going to create an instance of a component it can inject the dependencies.", 'start': 6997.496, 'duration': 5.522}], 'summary': 'Angular uses dependency injection to provide component dependencies, simplifying complex concepts into a 5 cent idea.', 'duration': 44.83, 'max_score': 6958.188, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko6958188.jpg'}, {'end': 7123.842, 'src': 'embed', 'start': 7098.882, 'weight': 2, 'content': [{'end': 7108.407, 'text': 'when you register a dependency as a provider in a module, angular will create a single instance of that class for that entire module.', 'start': 7098.882, 'duration': 9.525}, {'end': 7114.771, 'text': 'so imagine, in this module we have 100 components and 50 of these components need the courses service.', 'start': 7108.407, 'duration': 6.364}, {'end': 7123.842, 'text': "In the memory we're gonna have only a single instance of course of service and Angular will pass the same instance to all these components.", 'start': 7115.635, 'duration': 8.207}], 'summary': 'Angular creates a single instance of a registered class for the entire module, reducing memory usage and ensuring consistent data across components.', 'duration': 24.96, 'max_score': 7098.882, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko7098882.jpg'}, {'end': 7291.601, 'src': 'embed', 'start': 7266.678, 'weight': 4, 'content': [{'end': 7272.981, 'text': 'which means angular should be able to inject dependencies of this class into its constructor.', 'start': 7266.678, 'duration': 6.303}, {'end': 7279.165, 'text': "now we didn't use this decorator when defining components, Because when we use the component decorator,", 'start': 7272.981, 'duration': 6.184}, {'end': 7283.471, 'text': 'that decorator internally includes this injectable decorator.', 'start': 7279.165, 'duration': 4.306}, {'end': 7285.734, 'text': "So that's all about injectable.", 'start': 7284.232, 'duration': 1.502}, {'end': 7291.601, 'text': 'And by the way, note that this decorator function is defined in angular slash core library.', 'start': 7286.094, 'duration': 5.507}], 'summary': 'Angular injectable decorator simplifies dependency injection for components and is defined in the angular core library.', 'duration': 24.923, 'max_score': 7266.678, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko7266678.jpg'}], 'start': 6307.609, 'title': 'Angular concepts', 'summary': 'Covers angular directives for dom manipulation, services for decoupling components, and the importance of decoupling for unit testing, reusability, and maintenance. it also discusses dependency injection in angular, including registering dependencies in a module and utilizing angular cli for generating services, aiming to inspire enrollment in the complete angular course.', 'chapters': [{'end': 6957.448, 'start': 6307.609, 'title': 'Angular directives and services', 'summary': 'Discusses the use of directives in angular to manipulate the dom and the concept of services for decoupling components, highlighting the need for decoupling to enable unit testing, reusability, and maintenance in real-world applications.', 'duration': 649.839, 'highlights': ['The chapter discusses the use of directives in Angular to manipulate the DOM and the concept of services for decoupling components.', 'Highlighting the need for decoupling to enable unit testing, reusability, and maintenance in real-world applications.']}, {'end': 7359.836, 'start': 6958.188, 'title': 'Dependency injection in angular', 'summary': 'Explains the concept of dependency injection in angular, including the process of registering dependencies in a module and demonstrates the use of angular cli to generate a service and handle injectable classes, ultimately encouraging enrollment in the complete angular course.', 'duration': 401.648, 'highlights': ['Dependency injection means injecting or providing the dependencies of a class into its constructor, and Angular has a built-in dependency injection framework.', 'Registering a dependency as a provider in a module results in Angular creating a single instance of that class for the entire module, following the singleton pattern.', 'Angular CLI can be used to generate a service, and the injectable decorator function indicates that a class is an injectable class and allows Angular to inject dependencies into its constructor.']}], 'duration': 1052.227, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/k5E2AVpwsko/pics/k5E2AVpwsko6307609.jpg', 'highlights': ['The chapter discusses the use of directives in Angular to manipulate the DOM and the concept of services for decoupling components.', 'Highlighting the need for decoupling to enable unit testing, reusability, and maintenance in real-world applications.', 'Registering a dependency as a provider in a module results in Angular creating a single instance of that class for the entire module, following the singleton pattern.', 'Dependency injection means injecting or providing the dependencies of a class into its constructor, and Angular has a built-in dependency injection framework.', 'Angular CLI can be used to generate a service, and the injectable decorator function indicates that a class is an injectable class and allows Angular to inject dependencies into its constructor.']}], 'highlights': ['The course covers everything about Angular, from basic to advanced topics, and includes building and deploying a real e-commerce application using Angular Firebase and Bootstrap 4, with a demo of the application provided (relevance score: 5)', 'TypeScript brings object-oriented features like classes, interfaces, constructors, access modifiers, properties, and generics. (relevance: 5)', 'The e-commerce application features real-time data synchronization, allowing immediate updates to the shopping cart across different tabs without page refresh, demonstrating the beauty of real-time applications (relevance score: 4)', 'TypeScript allows catching errors at compile time, making applications more predictable and easier to debug. (relevance score: 4)', 'The demo showcases features such as master detail, product selection by category, shopping cart functionality with real-time updates of quantity and total price, a shipping form, and admin user privileges for managing orders and products (relevance score: 3)', 'Demonstration of using string interpolation to dynamically render the title field in the template (relevance score: 3)', 'Explanation of using back ticks for multi-line templates to improve readability (relevance score: 3)', 'The course offers almost 30 hours of high-quality content covering basic to advanced topics in one comprehensive course, providing a seamless learning experience. (relevance score: 3)', 'The need to adhere to the cohesion principle in object-oriented languages is emphasized, particularly in grouping related properties and functions within a class to avoid violations of the cohesion principle. (relevance score: 2)', 'Admin users have access to features such as managing orders and products, including authentication and authorization functionalities, while regular users do not have access to certain pages (relevance score: 2)', 'The let keyword in TypeScript prevents scope issues by scoping variables to the nearest block. (relevance: 2)', 'Registers the component in a module (relevance score: 2)', "Explains the property 'template' for defining HTML markup (relevance score: 2)", "Describes the property 'selector' and its usage (relevance score: 2)", "Angular CLI's ability to generate a component and update app.module (relevance score: 2)", 'The chapter covers animations, Angular material, Redux architecture, unit testing, and integration testing, and culminates in building an e-commerce application. (relevance score: 1)', 'AngularJS was introduced in 2010 and gained popularity, leading to the development of Angular 2 in mid-2016, which was a complete rewrite of the original framework using TypeScript. (relevance score: 1)', 'The chapter explains the concept of properties in TypeScript, demonstrating how to define and use getter and setter methods to access and manipulate private fields, providing a cleaner syntax and basic validation. (relevance score: 1)', 'The chapter discusses the transition from interface to class, emphasizing the encapsulation of properties and methods within a class. (relevance score: 1)', "The instantiation of a custom type object using the 'new' operator is explained, demonstrating the allocation of memory to the object. (relevance score: 1)", 'Angular apps are essentially a tree of components, starting from the app component or the root component. (relevance score: 1)', 'Components encapsulate data, HTML markup, and logic for views, promoting a component-based architecture that allows for smaller, more maintainable pieces that can be reused in different places. (relevance score: 1)', 'Modules in Angular serve as containers for groups of related components, and as the application grows, it may be beneficial to break the module into smaller, more maintainable modules. (relevance score: 1)', 'In TypeScript, we divide our program into multiple files and export one or more types in each file. (relevance score: 1)', 'The chapter discusses the use of directives in Angular to manipulate the DOM and the concept of services for decoupling components. (relevance score: 1)', 'Registering a dependency as a provider in a module results in Angular creating a single instance of that class for the entire module, following the singleton pattern. (relevance score: 1)']}