title
MEAN Stack Application Tutorial | Build a MEAN Application From Scratch | MEAN Stack App | Edureka

description
🔥 Full Stack Web Development Training (Use Code "𝐘𝐎𝐔𝐓𝐔𝐁𝐄𝟐𝟎"): https://www.edureka.co/masters-program/full-stack-developer-training This Edureka "MEAN Stack Application" tutorial (Angular Tutorial Blog: https://goo.gl/vcWhkG) will help you to create a Full Stack MEAN Application from scratch. Each section of code has been explained to provide a better understanding. You will learn about following technologies while going through this video: 1) Angular 2) Node.js 3) Express 4) MongoDB ---------------- JavaScript Certification Training ----------------- 🔵 Edureka Angular Training: http://bit.ly/38mi3sw 🔵 Edureka ReactJS Training: http://bit.ly/2DVP6Wz 🔵 Edureka NodeJS Training: http://bit.ly/35ehwXX 🔵 Edureka Web Development Training: https://bit.ly/3zCqNr3 🔵 Edureka Full Stack Training: http://bit.ly/2YveVpL 🔵 Edureka Python Django Training: http://bit.ly/2RAk6Do 🔥 Full-Stack Web Development Internship Program: http://bit.ly/fs-internship Subscribe to our channel to get video updates. Hit the subscribe button above. Check our complete Node.js playlist here: https://goo.gl/mEkHWw How it Works? 1. This is a 4 Week Instructor led Online Course, 20 hours of assignment and 20 hours of project work 2. We have a 24x7 One-on-One LIVE Technical Support to help you with any problems you might face or any clarifications you may require during the course. 3. At the end of the training you will have to work on a project, based on which we will provide you a Grade and a Verifiable Certificate! - - - - - - - - - - - - - - About The Course Our Node.js Training Certification course is a platform that enables the participants to build high performance, event-driven, real-time and scalable networking applications just by using JavaScript. Mastering Node.js will train you to build networking and web based applications that are far more superior and efficient than applications built in other languages. After the completion of the Mastering Node.js course at Edureka, you will be able to: 1. Understand Node.js and what makes it so popular 2. Build applications using Express Framework 3. Master the use of Node Package Manager (NPM) 4. Deploy applications to Heroku 5. Work with different template engines e.g. EJS, Jade and Handlebars 6. Create Web Applications with Express using MongoDB 7. Learn how to use hosted MongoDB provided by MongoLab 8. Hash passwords using bcrypt, handle authentication and logout functionality 9. Deploy Express and MongoDB application to Heroku 10. Set a custom domain for your Heroku deployed applications by purchasing custom domain from GoDadddy 11. Build realtime chat application using Socket IO 12. Learn how to use build systems e.g. Grunt and Gulp 13. Test Your code using Mocha and Chai 14. Get started with Hapi and Meteor and understand when to use one over other - - - - - - - - - - - - - - Who should go for this Course? This course is designed for professionals who aspire to be application developers and gain expertise in building real-time, highly-scalable applications in Node.js. The following professionals can go for this course : 1. Web Developers 2. Project Managers 3. Software Architects 4. Testing Professionals - - - - - - - - - - - - - - Why learn Node.js? Node.js uses JavaScript - a language known to millions of developers worldwide - thus giving it a much lower learning curve even for complete beginners. Using Node.js you can build simple Command Line programs or complex enterprise level web applications with equal ease. Node.js is an event-driven, server-side, asynchronous development platform with lightning speed execution. Node.js helps you to code the most complex functionalities in just a few lines of code. For more information, please write back to us at sales@edureka.co or call us at IND: 9606058406 / US: 18338555775 (toll free). Facebook: https://www.facebook.com/edurekaIN/ Twitter: https://twitter.com/edurekain LinkedIn: https://www.linkedin.com/company/edureka Customer Review: Subbu Mamidi, Microsoft, says: I never saw this much professionalism in top 5 clients I worked in US in the last 15 years. Excellent course structure and the instructor was very good and prompt.

detail
{'title': 'MEAN Stack Application Tutorial | Build a MEAN Application From Scratch | MEAN Stack App | Edureka', 'heatmap': [{'end': 1177.629, 'start': 1117.987, 'weight': 0.718}, {'end': 1609.11, 'start': 1510.303, 'weight': 0.991}, {'end': 2495.614, 'start': 2436.84, 'weight': 0.887}, {'end': 3898.862, 'start': 3745.69, 'weight': 0.746}], 'summary': 'This mean stack application tutorial covers building, overview of technologies, installing mongodb, setting up node.js project, server routes and database, node.js apis, angular 2 app development, creating contact component and service, and provides a comprehensive mean application overview with 24/7 support.', 'chapters': [{'end': 100.757, 'segs': [{'end': 70.015, 'src': 'embed', 'start': 40.163, 'weight': 0, 'content': [{'end': 44.706, 'text': 'Meanstack refers to a collection of JavaScript based technologies used to develop web application.', 'start': 40.163, 'duration': 4.543}, {'end': 49.73, 'text': 'So from client to server to database everything will be based on JavaScript.', 'start': 45.307, 'duration': 4.423}, {'end': 57.155, 'text': 'If you see the diagram which shows a simple client server architecture that will be following in our main application.', 'start': 50.97, 'duration': 6.185}, {'end': 62.098, 'text': 'If you see there you will find Angular 2 that will be using for our client-side development.', 'start': 58.335, 'duration': 3.763}, {'end': 70.015, 'text': "Then we'll be using Express, which is based on Node.js for our server-side development, and at last we'll be using MongoDB as our database.", 'start': 63.112, 'duration': 6.903}], 'summary': 'Mean stack uses javascript for client, server, and database. angular 2 for client-side, express for server-side (node.js based), and mongodb for database.', 'duration': 29.852, 'max_score': 40.163, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wtIvu085uU0/pics/wtIvu085uU040163.jpg'}], 'start': 0.249, 'title': 'Building mean stack application', 'summary': 'Explores the construction of a mean stack application, incorporating mongodb, express, angular 2, and node.js, encompassing crud operations and architecture, focusing on javascript-based technologies and mongodb as an open-source, schema-less, nosql database system.', 'chapters': [{'end': 100.757, 'start': 0.249, 'title': 'Building mean stack application', 'summary': 'Explores building a mean stack application, consisting of mongodb, express, angular 2, and node.js, covering crud operations and the architecture, with a focus on javascript-based technologies and mongodb as an open-source, schema-less, nosql database system.', 'duration': 100.508, 'highlights': ['MEAN stack application refers to a collection of JavaScript-based technologies, including MongoDB, Express, Angular 2, and Node.js, enabling the development of web applications entirely in JavaScript. MEAN stack application encompasses MongoDB, Express, Angular 2, and Node.js, allowing the complete development of web applications in JavaScript.', 'MongoDB is an open-source, schema-less, NoSQL database system, utilizing collections and documents, with a document consisting of key-value pairs, akin to a table in DBMS. MongoDB, an open-source, schema-less, NoSQL database system, operates with collections and documents, where documents are key-value pairs similar to tables in DBMS.', 'The architecture of the MEAN application involves Angular 2 for client-side development, Express, based on Node.js, for server-side development, and MongoDB as the database. The MEAN application architecture includes Angular 2 for client-side, Express for server-side (Node.js-based), and MongoDB as the database.']}], 'duration': 100.508, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wtIvu085uU0/pics/wtIvu085uU0249.jpg', 'highlights': ['MEAN stack application encompasses MongoDB, Express, Angular 2, and Node.js, allowing the complete development of web applications in JavaScript.', 'MongoDB, an open-source, schema-less, NoSQL database system, operates with collections and documents, where documents are key-value pairs similar to tables in DBMS.', 'The MEAN application architecture includes Angular 2 for client-side, Express for server-side (Node.js-based), and MongoDB as the database.']}, {'end': 326.833, 'segs': [{'end': 128.461, 'src': 'embed', 'start': 101.398, 'weight': 2, 'content': [{'end': 107.603, 'text': 'MongoDB saves data in binary JSON format, which makes it easier to pass data between client and server.', 'start': 101.398, 'duration': 6.205}, {'end': 112.788, 'text': 'Now let us talk about Express, which is our next framework in our list.', 'start': 108.664, 'duration': 4.124}, {'end': 115.01, 'text': 'So I have a quick question coming here.', 'start': 113.669, 'duration': 1.341}, {'end': 123.157, 'text': 'which other database can we use with Express? Okay, man, since we are building a mean stack app, that is why we are going with MongoDB.', 'start': 115.791, 'duration': 7.366}, {'end': 128.461, 'text': 'But yeah, of course, you can go ahead with other database as well and integrate with your Express framework.', 'start': 123.738, 'duration': 4.723}], 'summary': 'Mongodb uses binary json for data transfer. express can be used with other databases in mean stack app.', 'duration': 27.063, 'max_score': 101.398, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wtIvu085uU0/pics/wtIvu085uU0101398.jpg'}, {'end': 174.484, 'src': 'embed', 'start': 146.561, 'weight': 1, 'content': [{'end': 151.544, 'text': 'You can go ahead with Cassandra, which is also a NoSQL database, and go ahead with MySQL.', 'start': 146.561, 'duration': 4.983}, {'end': 153.305, 'text': 'We are working on MongoDB right now.', 'start': 151.784, 'duration': 1.521}, {'end': 157.788, 'text': 'You can go ahead with SQLite, which is also used in Android apps.', 'start': 153.886, 'duration': 3.902}, {'end': 161.33, 'text': 'So these are the database that you can work with your express framework.', 'start': 158.489, 'duration': 2.841}, {'end': 163.832, 'text': 'So I hope your doubt is clear, Mike.', 'start': 162.171, 'duration': 1.661}, {'end': 166.654, 'text': "Okay, so let's get back to our topic.", 'start': 164.853, 'duration': 1.801}, {'end': 168.922, 'text': 'So next in our list is Express.', 'start': 167.481, 'duration': 1.441}, {'end': 174.484, 'text': 'So Express is a lightweight framework used to build web application based on node.js.', 'start': 169.462, 'duration': 5.022}], 'summary': 'Options for databases include cassandra, mysql, mongodb, and sqlite. express is a lightweight framework for web applications based on node.js.', 'duration': 27.923, 'max_score': 146.561, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wtIvu085uU0/pics/wtIvu085uU0146561.jpg'}, {'end': 313.091, 'src': 'embed', 'start': 283.905, 'weight': 0, 'content': [{'end': 285.485, 'text': 'So now let us talk about CRUD operation.', 'start': 283.905, 'duration': 1.58}, {'end': 289.646, 'text': 'CRUD is an acronym that stands for Create, Read, Update and Delete.', 'start': 286.305, 'duration': 3.341}, {'end': 294.487, 'text': 'So basically these four operations will be performed on our database.', 'start': 290.286, 'duration': 4.201}, {'end': 299.528, 'text': "So we'll be using POST method for inserting new data into our database.", 'start': 295.227, 'duration': 4.301}, {'end': 302.869, 'text': "We'll be using GET for retrieving data from our database.", 'start': 300.388, 'duration': 2.481}, {'end': 307.35, 'text': "We'll be using PUT for modifying or updating any data that is there in our database.", 'start': 303.489, 'duration': 3.861}, {'end': 313.091, 'text': "And at last we'll be using DELETE method for deleting resources or deleting any data that is there in our database.", 'start': 308.01, 'duration': 5.081}], 'summary': 'Crud operations include create, read, update, and delete, using post, get, put, and delete methods.', 'duration': 29.186, 'max_score': 283.905, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wtIvu085uU0/pics/wtIvu085uU0283905.jpg'}], 'start': 101.398, 'title': 'Meanstack technologies overview', 'summary': 'Introduces meanstack app development technologies: mongodb, express, angular 2, and node.js, explaining functionalities, database integrations, and emphasizing crud operations and restful apis.', 'chapters': [{'end': 326.833, 'start': 101.398, 'title': 'Meanstack technologies overview', 'summary': 'Introduces the technologies of meanstack app development, including mongodb, express, angular 2, and node.js, and explains their functionalities and integrations with databases, highlighting the use of crud operations and restful apis.', 'duration': 225.435, 'highlights': ['Express framework can be integrated with various databases such as Cassandra, MySQL, and SQLite, in addition to MongoDB.', 'Angular 2 is a popular JavaScript framework with TypeScript support for object-oriented web development, enabling the creation of applications for both mobile and desktop.', 'Node.js utilizes an event-driven architecture with a single thread mechanism for processing events, making the server highly optimized and scalable.', 'CRUD operations including Create, Read, Update, and Delete will be implemented using restful APIs for database interaction in the MeanStack application.']}], 'duration': 225.435, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wtIvu085uU0/pics/wtIvu085uU0101398.jpg', 'highlights': ['CRUD operations will be implemented using restful APIs for database interaction in the MeanStack application.', 'Angular 2 is a popular JavaScript framework with TypeScript support for object-oriented web development, enabling the creation of applications for both mobile and desktop.', 'Express framework can be integrated with various databases such as Cassandra, MySQL, and SQLite, in addition to MongoDB.', 'Node.js utilizes an event-driven architecture with a single thread mechanism for processing events, making the server highly optimized and scalable.']}, {'end': 645.506, 'segs': [{'end': 368.613, 'src': 'embed', 'start': 327.134, 'weight': 0, 'content': [{'end': 331.757, 'text': 'Before that, we need to install MongoDB and node.js locally into our system.', 'start': 327.134, 'duration': 4.623}, {'end': 333.859, 'text': 'So let us go ahead and do that.', 'start': 332.678, 'duration': 1.181}, {'end': 341.225, 'text': 'So for installing node.js, you need to visit this website called nodejs.org, go to the download section.', 'start': 334.82, 'duration': 6.405}, {'end': 346.509, 'text': 'then according to your operating system, choose the correct installer and download it.', 'start': 342.108, 'duration': 4.401}, {'end': 348.869, 'text': "So I'm gonna go ahead with Windows.", 'start': 347.429, 'duration': 1.44}, {'end': 355.731, 'text': 'So basically installing Node.js or MongoDB in your system is pretty easy.', 'start': 350.39, 'duration': 5.341}, {'end': 364.712, 'text': 'You just have to go through setup, click a bunch of next buttons and specify your location where you want to install it, or go with the default,', 'start': 355.971, 'duration': 8.741}, {'end': 365.232, 'text': "and that's it.", 'start': 364.712, 'duration': 0.52}, {'end': 368.613, 'text': "So my download is complete, I'm gonna uninstall.", 'start': 366.313, 'duration': 2.3}], 'summary': 'Installing mongodb and node.js locally is an easy process, involving visiting nodejs.org, choosing the correct installer, and clicking through setup.', 'duration': 41.479, 'max_score': 327.134, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wtIvu085uU0/pics/wtIvu085uU0327134.jpg'}, {'end': 430.87, 'src': 'embed', 'start': 400.222, 'weight': 1, 'content': [{'end': 406.928, 'text': 'So once your installation is completed, click the finish button and open the node.js command prompt.', 'start': 400.222, 'duration': 6.706}, {'end': 414.534, 'text': "So basically we'll be using this command prompt, node.js command prompt, to build our entire project.", 'start': 407.668, 'duration': 6.866}, {'end': 416.956, 'text': "So let's check out the node version.", 'start': 415.255, 'duration': 1.701}, {'end': 422.341, 'text': 'Then you can go ahead and check out the npm version.', 'start': 419.419, 'duration': 2.922}, {'end': 430.87, 'text': 'Npm stands for node package manager, which is there for managing your dependencies and their versions.', 'start': 423.702, 'duration': 7.168}], 'summary': 'After installation, use node.js command prompt to check node and npm versions for managing dependencies.', 'duration': 30.648, 'max_score': 400.222, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wtIvu085uU0/pics/wtIvu085uU0400222.jpg'}], 'start': 327.134, 'title': 'Installing mongodb and managing dependencies', 'summary': 'Discusses installing mongodb and node.js locally, visiting nodejs.org, choosing the correct installer, and using the node.js command prompt. it also covers installing mongodb on windows, downloading a 148 mb msi file, specifying the installation path, creating directories for database data, and running the mongodb service on port 27017.', 'chapters': [{'end': 430.87, 'start': 327.134, 'title': 'Installing mongodb and node.js locally', 'summary': 'Discusses the steps to install mongodb and node.js locally, including visiting the website nodejs.org, choosing the correct installer, going through the setup process, and using the node.js command prompt for project building and version checking.', 'duration': 103.736, 'highlights': ['The chapter discusses the steps to install MongoDB and Node.js locally, including visiting the website nodejs.org, choosing the correct installer, and going through the setup process. Installing Node.js or MongoDB is straightforward, involving visiting the website nodejs.org, choosing the correct installer, and going through the setup process.', 'The chapter emphasizes the use of the node.js command prompt for project building and version checking. The use of the node.js command prompt for project building and version checking is emphasized.', 'The chapter mentions the use of npm, which stands for node package manager, for managing dependencies and their versions. The chapter mentions the use of npm for managing dependencies and their versions.']}, {'end': 645.506, 'start': 431.851, 'title': 'Installing mongodb and managing dependencies with ntm', 'summary': 'Discusses the installation of mongodb on windows, including downloading a 148 mb msi file, specifying the installation path, and creating directories for database data, as well as running the mongodb service on port 27017.', 'duration': 213.655, 'highlights': ['Downloading a 148 MB MSI file for MongoDB installation The speaker mentions downloading a 148 MB MSI file for MongoDB installation.', 'Specifying the installation path and creating directories for database data The process involves specifying the installation path and creating directories for database data to be residing.', 'Running the MongoDB service on port 27017 The chapter explains the process of running the MongoDB service on port 27017 for making connections and performing data operations.']}], 'duration': 318.372, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wtIvu085uU0/pics/wtIvu085uU0327134.jpg', 'highlights': ['Installing Node.js or MongoDB is straightforward, involving visiting the website nodejs.org, choosing the correct installer, and going through the setup process.', 'The use of the node.js command prompt for project building and version checking is emphasized.', 'The chapter mentions the use of npm for managing dependencies and their versions.', 'Downloading a 148 MB MSI file for MongoDB installation The speaker mentions downloading a 148 MB MSI file for MongoDB installation.', 'Specifying the installation path and creating directories for database data The process involves specifying the installation path and creating directories for database data to be residing.', 'Running the MongoDB service on port 27017 The chapter explains the process of running the MongoDB service on port 27017 for making connections and performing data operations.']}, {'end': 1083.036, 'segs': [{'end': 770.182, 'src': 'embed', 'start': 695.799, 'weight': 0, 'content': [{'end': 707.403, 'text': "Now I'm gonna use npm init command to build my project as well as create package.json file which will contain all my dependencies and their version.", 'start': 695.799, 'duration': 11.604}, {'end': 712.225, 'text': 'So you go ahead and put npm init.', 'start': 709.104, 'duration': 3.121}, {'end': 721.928, 'text': "It will ask you your project name, version, description of the project that you're building.", 'start': 713.285, 'duration': 8.643}, {'end': 725.8, 'text': 'simple main application.', 'start': 724.699, 'duration': 1.101}, {'end': 731.503, 'text': 'Entry point is a file from where your server-side execution will start.', 'start': 727.321, 'duration': 4.182}, {'end': 734.145, 'text': "So let's name it as app.js.", 'start': 732.464, 'duration': 1.681}, {'end': 736.646, 'text': 'You can go ahead with index.js as well.', 'start': 734.625, 'duration': 2.021}, {'end': 744.251, 'text': "I always use app.js, so it's up to you to name, whatever you want to name that file, you can do that.", 'start': 738.888, 'duration': 5.363}, {'end': 749.414, 'text': 'You can put your name as author.', 'start': 747.173, 'duration': 2.241}, {'end': 751.916, 'text': "I'm gonna put mine right now.", 'start': 750.835, 'duration': 1.081}, {'end': 758.876, 'text': "So let's open this folder or project.", 'start': 755.834, 'duration': 3.042}, {'end': 764.119, 'text': 'Okay, I have already opened in my VS Code.', 'start': 760.477, 'duration': 3.642}, {'end': 767.981, 'text': "So I'm gonna use VS Code as an editor.", 'start': 764.599, 'duration': 3.382}, {'end': 770.182, 'text': 'You can use any editor of your choice.', 'start': 768.021, 'duration': 2.161}], 'summary': 'Using npm init to create package.json with project details and dependencies.', 'duration': 74.383, 'max_score': 695.799, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wtIvu085uU0/pics/wtIvu085uU0695799.jpg'}], 'start': 645.506, 'title': 'Setting up mongodb, node.js project, npm dependencies, and server-side entry point', 'summary': 'Covers setting up mongodb and creating a node.js project, using npm to install and manage dependencies, emphasizing the installation of express module, and setting up server-side dependencies and entry point file app.js.', 'chapters': [{'end': 770.182, 'start': 645.506, 'title': 'Setting up mongodb and creating a node.js project', 'summary': 'Covers setting up mongodb on the default port and creating a node.js project by initializing a package.json file with npm init, specifying project details and using vs code as an editor.', 'duration': 124.676, 'highlights': ['Setting up MongoDB on the default port The chapter explains the process of setting up MongoDB on the default port.', 'Creating a Node.js project by initializing a package.json file with npm init The chapter demonstrates creating a Node.js project by initializing a package.json file using npm init.', 'Specifying project details and using VS Code as an editor The chapter emphasizes specifying project details and using VS Code as an editor for the project.']}, {'end': 839.69, 'start': 771.002, 'title': 'Using npm to install and manage dependencies', 'summary': 'Explains how to use npm to install and manage dependencies in a project, emphasizing the installation of the express module using the npm install command, followed by the --save flag to update the package.json file with the installed module.', 'duration': 68.688, 'highlights': ['Using npm install command to install the Express module with the --save flag updates the package.json file with the installed module, such as Express version 4.1.5.20.', 'The package.json file contains project information, including dependencies, and can be updated by using npm install command followed by the name of the module and the --save flag.']}, {'end': 1083.036, 'start': 840.11, 'title': 'Setting up server-side dependencies and entry point', 'summary': 'Covers setting up server-side dependencies by sending source code and package.json file, installing multiple dependencies using a single command, and defining the entry point file app.js for server-side execution.', 'duration': 242.926, 'highlights': ['Setting up server-side dependencies involves sending the source code and package.json file, enabling the installation of multiple dependencies using a single command, and installing modules like mongoose, body parser, and cores for server functionality.', 'The entry point file app.js is crucial for server-side execution, where modules like express, mongoose, body parser, cores, and path are required, and the server is bound to a specific port for successful connection.']}], 'duration': 437.53, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wtIvu085uU0/pics/wtIvu085uU0645506.jpg', 'highlights': ['Setting up server-side dependencies involves sending the source code and package.json file, enabling the installation of multiple dependencies using a single command, and installing modules like mongoose, body parser, and cores for server functionality.', 'Using npm install command to install the Express module with the --save flag updates the package.json file with the installed module, such as Express version 4.1.5.20.', 'Creating a Node.js project by initializing a package.json file with npm init The chapter demonstrates creating a Node.js project by initializing a package.json file using npm init.']}, {'end': 2098.652, 'segs': [{'end': 1117.081, 'src': 'embed', 'start': 1083.036, 'weight': 4, 'content': [{'end': 1089.85, 'text': 'then we need to specify our server what it needs to render for that home page route.', 'start': 1083.036, 'duration': 6.814}, {'end': 1102.615, 'text': "We'll write testing server because we're gonna later on create all our routes in a separate file called route.js or something like that,", 'start': 1094.712, 'duration': 7.903}, {'end': 1109.518, 'text': "so that all our routes are in particular file and it's not in our app.js file.", 'start': 1102.615, 'duration': 6.903}, {'end': 1117.081, 'text': 'For creating route, you need to use get method, for example.', 'start': 1113.319, 'duration': 3.762}], 'summary': 'Create separate route file for all routes to avoid clutter in app.js.', 'duration': 34.045, 'max_score': 1083.036, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wtIvu085uU0/pics/wtIvu085uU01083036.jpg'}, {'end': 1177.629, 'src': 'heatmap', 'start': 1117.987, 'weight': 0.718, 'content': [{'end': 1122.089, 'text': "This is how I'm defining a route, and the route is for my home page.", 'start': 1117.987, 'duration': 4.102}, {'end': 1123.289, 'text': "that's why I'm using slash.", 'start': 1122.089, 'duration': 1.2}, {'end': 1133.113, 'text': 'The next argument is request response res.send.', 'start': 1123.729, 'duration': 9.384}, {'end': 1142.417, 'text': "Now let's go ahead and run our server.", 'start': 1140.596, 'duration': 1.821}, {'end': 1148.49, 'text': 'For that, you need to execute node space your entry point file name.', 'start': 1144.178, 'duration': 4.312}, {'end': 1152.954, 'text': 'So our server has been started.', 'start': 1151.353, 'duration': 1.601}, {'end': 1154.676, 'text': "Let's go ahead and check that.", 'start': 1152.974, 'duration': 1.702}, {'end': 1157.098, 'text': 'So we have a foobar.', 'start': 1156.157, 'duration': 0.941}, {'end': 1158.74, 'text': "So everything's running fine now.", 'start': 1157.318, 'duration': 1.422}, {'end': 1164.605, 'text': 'So remember I told you that I want all my routes to be in a particular folder.', 'start': 1159.961, 'duration': 4.644}, {'end': 1168.609, 'text': "So I'm gonna create a folder called routes.", 'start': 1165.406, 'duration': 3.203}, {'end': 1177.629, 'text': "Or We can simply put it in our file because it's a simple application, so we'll do that.", 'start': 1172.012, 'duration': 5.617}], 'summary': 'Creating a route for the home page using slash, starting the server with node, and organizing routes in a folder.', 'duration': 59.642, 'max_score': 1117.987, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wtIvu085uU0/pics/wtIvu085uU01117987.jpg'}, {'end': 1428.929, 'src': 'embed', 'start': 1342.108, 'weight': 0, 'content': [{'end': 1354.355, 'text': "So for that I'm gonna create a folder called public and inside that I'm gonna create my file index.stml,", 'start': 1342.108, 'duration': 12.247}, {'end': 1357.036, 'text': 'which will be rendered by our frontend application.', 'start': 1354.355, 'duration': 2.681}, {'end': 1363.54, 'text': 'So static files.', 'start': 1361.899, 'duration': 1.641}, {'end': 1382.467, 'text': "Path.join Basically, I'm defining the path here.", 'start': 1375.646, 'duration': 6.821}, {'end': 1392.329, 'text': 'You can directly go and specify the path of this folder public folder or you can use underscore, underscore DIR name,', 'start': 1382.627, 'duration': 9.702}, {'end': 1397.09, 'text': 'which will point to your current directory and you wanna join it with public.', 'start': 1392.329, 'duration': 4.761}, {'end': 1403.171, 'text': 'So guys, we are done here.', 'start': 1402.191, 'duration': 0.98}, {'end': 1404.751, 'text': "Now let's create some route.", 'start': 1403.531, 'duration': 1.22}, {'end': 1407.715, 'text': 'So we need to bring express.', 'start': 1406.394, 'duration': 1.321}, {'end': 1424.226, 'text': 'You can use const or var, whatever you want, but in general we use const because the value of express is not gonna change.', 'start': 1417.241, 'duration': 6.985}, {'end': 1428.929, 'text': 'I mean the value of variable express is not gonna change in our code.', 'start': 1425.306, 'duration': 3.623}], 'summary': "Creating a 'public' folder with 'index.stml' file rendered by frontend application, defining path and using const for express.", 'duration': 86.821, 'max_score': 1342.108, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wtIvu085uU0/pics/wtIvu085uU01342108.jpg'}, {'end': 1609.11, 'src': 'heatmap', 'start': 1510.303, 'weight': 0.991, 'content': [{'end': 1513.624, 'text': 'So whenever there is a change, it will restart your server on its own.', 'start': 1510.303, 'duration': 3.321}, {'end': 1515.745, 'text': "So we're gonna do that.", 'start': 1514.945, 'duration': 0.8}, {'end': 1540.355, 'text': 'Now you go ahead with nodemon command to start your server.', 'start': 1535.951, 'duration': 4.404}, {'end': 1543.097, 'text': 'So we are getting an error.', 'start': 1541.616, 'duration': 1.481}, {'end': 1548.382, 'text': 'So while you are creating a route, you need to export your router as well.', 'start': 1543.798, 'duration': 4.584}, {'end': 1563.146, 'text': 'So basically what it does.', 'start': 1561.986, 'duration': 1.16}, {'end': 1572.308, 'text': 'it goes to your package.json file and where it finds the nodemon that our main entry point file is app.js.', 'start': 1563.146, 'duration': 9.162}, {'end': 1577.309, 'text': 'and finally, it start the server using this very particular file.', 'start': 1572.308, 'duration': 5.001}, {'end': 1589.231, 'text': 'So if you see over here, the same command that we used to execute for starting our server, nodeapp.js has been used by nodemon.', 'start': 1579.609, 'duration': 9.622}, {'end': 1598.267, 'text': 'Now if I go ahead with slash API slash contacts, see, we can have the data.', 'start': 1590.484, 'duration': 7.783}, {'end': 1600.867, 'text': "So now what we're gonna do?", 'start': 1598.767, 'duration': 2.1}, {'end': 1609.11, 'text': "we're gonna connect to our database and then here we're gonna write our logic for retrieving data from our database,", 'start': 1600.867, 'duration': 8.243}], 'summary': 'Nodemon automatically restarts server, exports router for route creation, connects to database for data retrieval.', 'duration': 98.807, 'max_score': 1510.303, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wtIvu085uU0/pics/wtIvu085uU01510303.jpg'}, {'end': 2098.652, 'src': 'embed', 'start': 2046.659, 'weight': 3, 'content': [{'end': 2053.061, 'text': 'If error, we need to know that what is the error that we are having.', 'start': 2046.659, 'duration': 6.402}, {'end': 2063.803, 'text': 'Print some message as well.', 'start': 2062.563, 'duration': 1.24}, {'end': 2070.605, 'text': 'Error data page connection error.', 'start': 2065.884, 'duration': 4.721}, {'end': 2076.641, 'text': "Yeah, we don't need this.", 'start': 2075.719, 'duration': 0.922}, {'end': 2085.025, 'text': "So it's done.", 'start': 2084.426, 'duration': 0.599}, {'end': 2091.63, 'text': 'I think now we can check out if we have made the successful connection or not, yeah.', 'start': 2087.206, 'duration': 4.424}, {'end': 2098.652, 'text': 'So we have been connected to our database at port 27017.', 'start': 2092.231, 'duration': 6.421}], 'summary': 'Successfully connected to database at port 27017.', 'duration': 51.993, 'max_score': 2046.659, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wtIvu085uU0/pics/wtIvu085uU02046659.jpg'}], 'start': 1083.036, 'title': 'Setting up server routes, routes and middleware, and server and database for contact management', 'summary': "Covers setting up server routes, creating separate route files, using 'get' method, setting up routes for data operations, adding middleware like cors and body parser, and setting up server and database for contact management using nodemon, mongoose, and mongodb.", 'chapters': [{'end': 1158.74, 'start': 1083.036, 'title': 'Setting up server routes', 'summary': "Discusses setting up server routes by creating separate route files for all the routes and using the 'get' method to define routes, with a demonstration of starting the server and checking the functionality.", 'duration': 75.704, 'highlights': ['The chapter emphasizes creating separate route files for all the routes, such as route.js, to organize the code effectively and keep it out of the app.js file.', "Demonstrates the use of the 'get' method to define routes, with a specific example of setting up a route for the home page using the 'slash' notation.", "Provides guidance on starting the server using the 'node' command followed by the entry point file name and checking the server functionality."]}, {'end': 1474.477, 'start': 1159.961, 'title': 'Setting up routes and middleware for data operations', 'summary': 'Outlines setting up routes for directing specific paths to route.js file, defining logic for handling api calls, adding middleware like cors and body parser, and organizing static files in a public folder for frontend rendering.', 'duration': 314.516, 'highlights': ['Setting up routes to direct specific paths to route.js file The speaker wants to direct all paths preceding with slash contact, slash API, or slash ABCD to the route.js file, where the logic for handling these routes is defined.', 'Defining logic for handling API calls in route.js file The speaker mentions defining logic for specific API calls, such as adding a contact, in the route.js file to perform data operations.', 'Adding middleware like CORS and body parser The chapter emphasizes the need to incorporate middleware like CORS and body parser to parse JSON data and perform data operations.', 'Organizing static files in a public folder for frontend rendering The speaker instructs the creation of a public folder to house static files, including an index.stml file for frontend rendering, demonstrating the importance of organizing static files for frontend application usage.']}, {'end': 2098.652, 'start': 1476.118, 'title': 'Setting up server and database for contact management', 'summary': 'Explains how to set up a server using nodemon to continuously watch for changes in the server-side code, and how to create a schema for contact management using mongoose for mongodb, while also demonstrating the connection to the mongodb database.', 'duration': 622.534, 'highlights': ['Setting up server using nodemon Explains the process of using nodemon to continuously watch for changes in the server-side code, automatically restarting the server upon any changes.', 'Creating schema for contact management with mongoose Details the creation of a schema for contact management, including fields for first name, last name, and contact number, using mongoose for MongoDB.', 'Connecting to MongoDB database Demonstrates the connection to the MongoDB database using mongoose.connect function with the URL and port number, along with handling successful and error connections.']}], 'duration': 1015.616, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wtIvu085uU0/pics/wtIvu085uU01083036.jpg', 'highlights': ["Demonstrates the use of the 'get' method to define routes, with a specific example of setting up a route for the home page using the 'slash' notation.", 'Setting up routes to direct specific paths to route.js file The speaker wants to direct all paths preceding with slash contact, slash API, or slash ABCD to the route.js file, where the logic for handling these routes is defined.', 'Adding middleware like CORS and body parser The chapter emphasizes the need to incorporate middleware like CORS and body parser to parse JSON data and perform data operations.', 'Setting up server using nodemon Explains the process of using nodemon to continuously watch for changes in the server-side code, automatically restarting the server upon any changes.', 'Creating schema for contact management with mongoose Details the creation of a schema for contact management, including fields for first name, last name, and contact number, using mongoose for MongoDB.']}, {'end': 2631.391, 'segs': [{'end': 2631.391, 'src': 'heatmap', 'start': 2436.84, 'weight': 0, 'content': [{'end': 2438.561, 'text': 'We have no error or no issues.', 'start': 2436.84, 'duration': 1.721}, {'end': 2440.562, 'text': 'Now for checking our APIs.', 'start': 2439.061, 'duration': 1.501}, {'end': 2450.139, 'text': "we're gonna use Postman, which is a Chrome extension which you can add to your web browser Chrome browser and go ahead and check your APIs.", 'start': 2441.255, 'duration': 8.884}, {'end': 2458.062, 'text': 'You wanna go with Postman, Chrome.', 'start': 2455.561, 'duration': 2.501}, {'end': 2466.086, 'text': 'Here you will get an option for adding it to your browser or to your Chrome.', 'start': 2461.004, 'duration': 5.082}, {'end': 2471.699, 'text': 'Now, first of all, we need to insert some data so that we can fetch it.', 'start': 2468.797, 'duration': 2.902}, {'end': 2474.34, 'text': 'So, you know, go ahead with our post method.', 'start': 2471.779, 'duration': 2.561}, {'end': 2481.265, 'text': 'Then we want our header as content type to be JSON.', 'start': 2475.821, 'duration': 5.444}, {'end': 2484.867, 'text': 'Then we need to send raw data.', 'start': 2483.406, 'duration': 1.461}, {'end': 2495.614, 'text': 'First name, Bruce.', 'start': 2488.83, 'duration': 6.784}, {'end': 2519.197, 'text': 'last name way, then phone number.', 'start': 2498.627, 'duration': 20.57}, {'end': 2524.019, 'text': "okay, i'm gonna go ahead with string, but yeah, let's add some random number here.", 'start': 2519.197, 'duration': 4.822}, {'end': 2533.763, 'text': "now we have to enter the url or the URL of the API that you're gonna make the call to, so that it can be directed to that particular post method.", 'start': 2524.019, 'duration': 9.744}, {'end': 2544.527, 'text': "So we're gonna go ahead with localhost 3000 slash API slash contact.", 'start': 2534.403, 'duration': 10.124}, {'end': 2547.708, 'text': 'So contact added successfully.', 'start': 2545.968, 'duration': 1.74}, {'end': 2551.89, 'text': "Let's add some more contact, Peter.", 'start': 2548.969, 'duration': 2.921}, {'end': 2566.589, 'text': 'Now let us retrieve the contacts that we have already added into our database.', 'start': 2561.547, 'duration': 5.042}, {'end': 2571.69, 'text': "For that we'll be using API slash contact.", 'start': 2569.169, 'duration': 2.521}, {'end': 2574.831, 'text': 'So we have these two contact.', 'start': 2572.19, 'duration': 2.641}, {'end': 2577.552, 'text': "So that's what I was talking about.", 'start': 2575.711, 'duration': 1.841}, {'end': 2583.234, 'text': "You can see over here we haven't added any ID field while inserting our contact.", 'start': 2577.812, 'duration': 5.422}, {'end': 2590.556, 'text': 'So this is automatically generated by MongoDB and this is what we are referring to in our delete method.', 'start': 2583.714, 'duration': 6.842}, {'end': 2596.866, 'text': "So what we're gonna do is copy this very particular ID.", 'start': 2592.765, 'duration': 4.101}, {'end': 2601.367, 'text': "Now we're gonna issue a delete command.", 'start': 2598.686, 'duration': 2.681}, {'end': 2615.771, 'text': 'So now our method will fetch this very particular ID from our URL and it will refer to that very particular document or that very particular contact and delete it.', 'start': 2603.328, 'duration': 12.443}, {'end': 2618.231, 'text': 'So the contact has been deleted.', 'start': 2616.791, 'duration': 1.44}, {'end': 2620.992, 'text': "Now let's check that.", 'start': 2618.251, 'duration': 2.741}, {'end': 2623.847, 'text': 'We are having issues here.', 'start': 2622.366, 'duration': 1.481}, {'end': 2628.089, 'text': 'So we can see that our Peter Parker has been deleted.', 'start': 2625.007, 'duration': 3.082}, {'end': 2630.61, 'text': 'So this is how you can check your APIs.', 'start': 2629.03, 'duration': 1.58}, {'end': 2631.391, 'text': "Now what we're gonna do.", 'start': 2630.65, 'duration': 0.741}], 'summary': 'Demonstration of using postman to add, retrieve, and delete contacts via api.', 'duration': 162.594, 'max_score': 2436.84, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wtIvu085uU0/pics/wtIvu085uU02436840.jpg'}], 'start': 2098.652, 'title': 'Node.js contact apis', 'summary': 'Covers creating apis in node.js for retrieving, adding, and deleting contacts, emphasizing the use of callback functions, json data format, and provides guidance on using postman to test the apis.', 'chapters': [{'end': 2431.096, 'start': 2098.652, 'title': 'Creating contact apis in node.js', 'summary': 'Covers the process of creating apis for retrieving, adding, and deleting contacts from a database in node.js, utilizing methods like find, save, and remove, and emphasizing the use of callback functions and json data format.', 'duration': 332.444, 'highlights': ['The process involves creating APIs for retrieving, adding, and deleting contacts from a database in Node.js, emphasizing the use of callback functions and JSON data format.', 'The retrieval of contacts involves using the find method and sending the contact list back to the client in JSON format.', 'The addition of a new contact to the database is achieved by creating an object with the contact details and using the save method, with error handling for success or failure.', 'The deletion of a contact from the database is done using the unique ID assigned by MongoDB and the remove method, with error handling for success or failure.']}, {'end': 2631.391, 'start': 2431.176, 'title': 'Using postman to test apis', 'summary': 'Explains how to use postman to test apis by adding, retrieving, and deleting contacts, showcasing the process and results of each action.', 'duration': 200.215, 'highlights': ['Using Postman, a Chrome extension, to test APIs by adding contacts with specific data and retrieving/deleting them, demonstrating the process and outcomes.', 'Demonstrating the automatic generation of an ID field by MongoDB when adding contacts, and how the ID is utilized in the delete method.', 'Explaining the process of issuing a delete command to delete a specific contact using the fetched ID from the URL and verifying the deletion.']}], 'duration': 532.739, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wtIvu085uU0/pics/wtIvu085uU02098652.jpg', 'highlights': ['Creating APIs for retrieving, adding, and deleting contacts in Node.js with callback functions and JSON data format.', 'Retrieving contacts using the find method and sending the contact list back in JSON format.', 'Adding a new contact to the database by creating an object with contact details and using the save method.', 'Deletion of a contact from the database using the unique ID assigned by MongoDB and the remove method.', 'Using Postman to test APIs by adding contacts with specific data and retrieving/deleting them.', 'Automatic generation of an ID field by MongoDB when adding contacts and its utilization in the delete method.', 'Issuing a delete command to delete a specific contact using the fetched ID from the URL and verifying the deletion.']}, {'end': 3028.111, 'segs': [{'end': 2798.872, 'src': 'embed', 'start': 2772.327, 'weight': 3, 'content': [{'end': 2785.988, 'text': "So you will have a basic component called as app.component and you will have a basic model app.module where you will be specifying all the modules which you're gonna use across the application,", 'start': 2772.327, 'duration': 13.661}, {'end': 2788.469, 'text': 'as well as your components and services.', 'start': 2785.988, 'duration': 2.481}, {'end': 2796.111, 'text': "Then we'll have index.html, which is the file that will be rendered in the first place to your web browser,", 'start': 2789.489, 'duration': 6.622}, {'end': 2798.872, 'text': 'so which we have specified in our public folder.', 'start': 2796.111, 'duration': 2.761}], 'summary': 'The application structure includes app.component, app.module, and index.html for rendering.', 'duration': 26.545, 'max_score': 2772.327, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wtIvu085uU0/pics/wtIvu085uU02772327.jpg'}, {'end': 2900.774, 'src': 'embed', 'start': 2872.178, 'weight': 0, 'content': [{'end': 2877.203, 'text': 'So this is a selector or tag which will load our app.component over there.', 'start': 2872.178, 'duration': 5.025}, {'end': 2883.649, 'text': 'So basically we will have app.component or app component class to be rendered in the first place.', 'start': 2877.363, 'duration': 6.286}, {'end': 2887.053, 'text': 'So here you can see we have app-root as selector.', 'start': 2884.33, 'duration': 2.723}, {'end': 2895.992, 'text': 'So for building an Angular 2 application, we use TypeScript as language, which is based on object-oriented features.', 'start': 2887.87, 'duration': 8.122}, {'end': 2900.774, 'text': "So here you can see that it's a TypeScript class called as AppComponent.", 'start': 2896.532, 'duration': 4.242}], 'summary': 'Using typescript, the angular 2 app loads appcomponent as the first class.', 'duration': 28.596, 'max_score': 2872.178, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wtIvu085uU0/pics/wtIvu085uU02872178.jpg'}], 'start': 2631.391, 'title': 'Angular 2 application development', 'summary': 'Covers creating a client-side application using angular 2, including installation of angular cli, setting up a new angular project, and generating necessary files and modules. additionally, it explains the process of creating an angular 2 application component using typescript, component decorator, template url, and css for styling, along with the automatic recompilation feature for code changes.', 'chapters': [{'end': 2842.461, 'start': 2631.391, 'title': 'Creating angular client-side application', 'summary': 'Introduces the process of creating a client-side application using angular 2, including installing angular cli, creating a new angular project, and the files and modules generated by the ng new command.', 'duration': 211.07, 'highlights': ['Installing Angular CLI by using npm install @angular/cli Angular CLI provides boilerplate and necessary files for running a client-side Angular application.', 'Creating a new Angular project using ng new client The ng new command generates basic components, modules, and files such as app.component, app.module, index.html, and package.json.', "Overview of files generated by ng new command, including app.component, app.module, index.html, and package.json The generated files include a basic component, a module for specifying modules, components, and services, the main HTML file rendered in the web browser, and the project's package configuration."]}, {'end': 3028.111, 'start': 2843.161, 'title': 'Angular 2 application component creation', 'summary': 'Explains the process of creating an angular 2 application component, using typescript, component decorator, template url, and css for styling, and highlights the automatic recompilation feature for changes in the source code.', 'duration': 184.95, 'highlights': ['The chapter details the creation of an Angular 2 application component, including the use of TypeScript as the language, the component decorator, and the template URL for the component, emphasizing its object-oriented features.', "It explains the one-way data binding and interpolation in the app.component template, showcasing the dynamic update of the displayed value from 'app works' to 'welcome'.", 'The chapter highlights the automatic recompilation feature of Angular-side applications, which continuously watches for changes in the source code and re-renders or restarts the whole application each time, eliminating the need to manually restart the application for changes.', 'It mentions the use of npm start or ng serve command to run the Angular 2 application, demonstrating the practical process of starting the application.']}], 'duration': 396.72, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wtIvu085uU0/pics/wtIvu085uU02631391.jpg', 'highlights': ['Installing Angular CLI by using npm install @angular/cli Angular CLI provides boilerplate and necessary files for running a client-side Angular application.', 'Creating a new Angular project using ng new client The ng new command generates basic components, modules, and files such as app.component, app.module, index.html, and package.json.', 'The chapter details the creation of an Angular 2 application component, including the use of TypeScript as the language, the component decorator, and the template URL for the component, emphasizing its object-oriented features.', 'The chapter highlights the automatic recompilation feature of Angular-side applications, which continuously watches for changes in the source code and re-renders or restarts the whole application each time, eliminating the need to manually restart the application for changes.']}, {'end': 3885.775, 'segs': [{'end': 3125.078, 'src': 'embed', 'start': 3098.111, 'weight': 2, 'content': [{'end': 3103.695, 'text': 'So there will be a field here called as providers and we will add the service that we will be creating now.', 'start': 3098.111, 'duration': 5.584}, {'end': 3113.371, 'text': "So we have contact.service.ts or contact service class where we'll be writing our business logic or our data retrieving or data operation logic.", 'start': 3104.495, 'duration': 8.876}, {'end': 3121.136, 'text': "Then we'll have a contacts component where we'll be creating our template and all the logic behind that.", 'start': 3113.751, 'duration': 7.385}, {'end': 3125.078, 'text': "So we'll start with creating our service so that we can retrieve the data first.", 'start': 3121.316, 'duration': 3.762}], 'summary': 'Creating a service to retrieve data for the providers field.', 'duration': 26.967, 'max_score': 3098.111, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wtIvu085uU0/pics/wtIvu085uU03098111.jpg'}, {'end': 3554.087, 'src': 'embed', 'start': 3463.677, 'weight': 5, 'content': [{'end': 3470.632, 'text': "And then, I'm gonna pass the new contact, then the headers.", 'start': 3463.677, 'duration': 6.955}, {'end': 3480.863, 'text': "We'll map it, response as json.", 'start': 3470.652, 'duration': 10.211}, {'end': 3488.911, 'text': 'Now we need a delete method.', 'start': 3487.77, 'duration': 1.141}, {'end': 3504.292, 'text': "Remember I told you that for deleting a contact we'll be using ID so as to refer that very particular contact in our database.", 'start': 3497.128, 'duration': 7.164}, {'end': 3506.753, 'text': 'So we need ID as our parameter.', 'start': 3504.772, 'duration': 1.981}, {'end': 3536.223, 'text': "then I'm gonna append or concatenate the ID.", 'start': 3533.942, 'duration': 2.281}, {'end': 3554.087, 'text': 'So we have our service ready.', 'start': 3552.587, 'duration': 1.5}], 'summary': 'Developed a service with methods for passing, mapping, and deleting contacts using id as a parameter.', 'duration': 90.41, 'max_score': 3463.677, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wtIvu085uU0/pics/wtIvu085uU03463677.jpg'}, {'end': 3649.162, 'src': 'embed', 'start': 3579.663, 'weight': 0, 'content': [{'end': 3582.944, 'text': "So we'll go to our contacts.component.ts.", 'start': 3579.663, 'duration': 3.281}, {'end': 3590.907, 'text': 'Private contact.', 'start': 3589.206, 'duration': 1.701}, {'end': 3594.895, 'text': 'Yeah, but we need to import it first.', 'start': 3593.234, 'duration': 1.661}, {'end': 3608.244, 'text': 'So we have contact service from dot dot slash contact.', 'start': 3599.278, 'duration': 8.966}, {'end': 3619.913, 'text': 'Yeah, so now we need our contact class or schema.', 'start': 3612.628, 'duration': 7.285}, {'end': 3640.233, 'text': "That's it.", 'start': 3639.833, 'duration': 0.4}, {'end': 3649.162, 'text': "Now we're gonna initialize our contact service or we want an instance of that very contact service class so that we can use the method that we have defined there?", 'start': 3640.994, 'duration': 8.168}], 'summary': 'Initializing contact service from contact.component.ts.', 'duration': 69.499, 'max_score': 3579.663, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wtIvu085uU0/pics/wtIvu085uU03579663.jpg'}, {'end': 3716.49, 'src': 'embed', 'start': 3688.092, 'weight': 4, 'content': [{'end': 3699.075, 'text': "So we'll be putting our retrieving data logic inside ngOnInit method which will be initiated once your component is being loaded into your browser.", 'start': 3688.092, 'duration': 10.983}, {'end': 3706.261, 'text': 'So every time you load your component, it will automatically call this very particular method to retrieve all the data.', 'start': 3699.495, 'duration': 6.766}, {'end': 3716.49, 'text': "So we'll be having this dot contact service and we wanna use getContact method so you can see over here that we have three methods.", 'start': 3707.302, 'duration': 9.188}], 'summary': 'Ngoninit method retrieves data every time component is loaded.', 'duration': 28.398, 'max_score': 3688.092, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wtIvu085uU0/pics/wtIvu085uU03688092.jpg'}, {'end': 3786.89, 'src': 'embed', 'start': 3739.627, 'weight': 3, 'content': [{'end': 3744.769, 'text': "Now, it's showing an error because I haven't made any variable for contacts, so let's go ahead and do that.", 'start': 3739.627, 'duration': 5.142}, {'end': 3753.026, 'text': 'So it will be, contacts of type contact, and it will be an error.', 'start': 3745.69, 'duration': 7.336}, {'end': 3757.327, 'text': 'Yeah, so we have done that.', 'start': 3755.107, 'duration': 2.22}, {'end': 3761.128, 'text': "Let's create some more variables that we'll be needing later on.", 'start': 3757.647, 'duration': 3.481}, {'end': 3781.589, 'text': 'We need one, then we need first name, type string, then last name, then phone number.', 'start': 3761.168, 'duration': 20.421}, {'end': 3786.89, 'text': "That's it guys.", 'start': 3786.29, 'duration': 0.6}], 'summary': 'Creating variables for contacts of type contact, first name, last name, and phone number.', 'duration': 47.263, 'max_score': 3739.627, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wtIvu085uU0/pics/wtIvu085uU03739627.jpg'}, {'end': 3885.775, 'src': 'embed', 'start': 3858.411, 'weight': 1, 'content': [{'end': 3867.956, 'text': "Then these are the styles that's available which you can use so I'll go ahead with something superhero.", 'start': 3858.411, 'duration': 9.545}, {'end': 3876.81, 'text': 'So you can go ahead and click the download and copy this very thing and put it into your HTML or index.html file.', 'start': 3867.996, 'duration': 8.814}, {'end': 3885.775, 'text': "So we'll go there, we'll copy this very thing and paste it here,", 'start': 3876.87, 'duration': 8.905}], 'summary': 'Available superhero styles for download and use in html files.', 'duration': 27.364, 'max_score': 3858.411, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wtIvu085uU0/pics/wtIvu085uU03858411.jpg'}], 'start': 3028.993, 'title': 'Creating contact component and service', 'summary': 'Covers the process of creating a contact component and service using ng-generate, emphasizing the separation of business logic into a service and the need to provide the service in the component decorator. it also covers defining service methods for retrieving, adding, and deleting contacts, and injecting the service into the component to retrieve and display contact data.', 'chapters': [{'end': 3097.03, 'start': 3028.993, 'title': 'Creating contact component and service', 'summary': 'Covers the process of creating a contact component and service using ng-generate, emphasizing the separation of business logic into a service and the need to provide the service in the component decorator.', 'duration': 68.037, 'highlights': ['Emphasizing the separation of business logic into a service The chapter emphasizes the importance of separating business logic or data operation logic into a separate file, referred to as a service, for better organization and management of the code.', "Using ng-generate for generating component or services The process involves utilizing ng-generate to create a component named 'contact' and a corresponding service, following good practice guidelines for efficient code organization and maintenance.", 'Providing the service in the component decorator The need to provide the service in the component decorator is highlighted, ensuring that the services are available and accessible when required within the component.']}, {'end': 3885.775, 'start': 3098.111, 'title': 'Creating contact service and component', 'summary': 'Covers the creation of a contact service and component in angular, including defining the service methods for retrieving, adding, and deleting contacts, and injecting the service into the component to retrieve and display contact data.', 'duration': 787.664, 'highlights': ['Defining the methods for retrieving, adding, and deleting contacts in the contact service. The chapter explains the creation of methods such as getContacts, addContact, and deleteContact within the contact service for retrieving, adding, and deleting contacts, respectively.', 'Injecting the contact service into the component and using the getContacts method to retrieve and display contact data. It describes the process of injecting the contact service into the component using dependency injection and using the getContacts method to retrieve contact data, which is then displayed in the component.', 'Setting up the template to display the retrieved contact data. The chapter covers setting up the template in the contacts.component.html file to display the retrieved contact data, including referencing the bootstrap stylesheet and incorporating a chosen style.']}], 'duration': 856.782, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wtIvu085uU0/pics/wtIvu085uU03028993.jpg', 'highlights': ["Using ng-generate for generating component or services The process involves utilizing ng-generate to create a component named 'contact' and a corresponding service, following good practice guidelines for efficient code organization and maintenance.", 'Emphasizing the separation of business logic into a service The chapter emphasizes the importance of separating business logic or data operation logic into a separate file, referred to as a service, for better organization and management of the code.', 'Defining the methods for retrieving, adding, and deleting contacts in the contact service. The chapter explains the creation of methods such as getContacts, addContact, and deleteContact within the contact service for retrieving, adding, and deleting contacts, respectively.', 'Injecting the contact service into the component and using the getContacts method to retrieve and display contact data. It describes the process of injecting the contact service into the component using dependency injection and using the getContacts method to retrieve contact data, which is then displayed in the component.', 'Providing the service in the component decorator The need to provide the service in the component decorator is highlighted, ensuring that the services are available and accessible when required within the component.', 'Setting up the template to display the retrieved contact data. The chapter covers setting up the template in the contacts.component.html file to display the retrieved contact data, including referencing the bootstrap stylesheet and incorporating a chosen style.']}, {'end': 4866.832, 'segs': [{'end': 3929.89, 'src': 'embed', 'start': 3885.775, 'weight': 3, 'content': [{'end': 3898.862, 'text': "and then we need to write stylesheet and we'll remove this very particular field and we'll copy it here in our href so that it can refer to it.", 'start': 3885.775, 'duration': 13.087}, {'end': 3903.538, 'text': "So it's done.", 'start': 3903.058, 'duration': 0.48}, {'end': 3907.64, 'text': 'Now we can go to our component.', 'start': 3905.459, 'duration': 2.181}, {'end': 3913.503, 'text': 'And here what we want is, we want to iterate over our list.', 'start': 3908.721, 'duration': 4.782}, {'end': 3918.985, 'text': 'So for that we will be using something called as ng4, which is a structural directive.', 'start': 3913.583, 'duration': 5.402}, {'end': 3922.026, 'text': 'So div asterisk ng4.', 'start': 3919.665, 'duration': 2.361}, {'end': 3929.89, 'text': "Let's contact our contacts.", 'start': 3926.928, 'duration': 2.962}], 'summary': 'Styling and handling iteration using ng4 for contact list.', 'duration': 44.115, 'max_score': 3885.775, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wtIvu085uU0/pics/wtIvu085uU03885775.jpg'}, {'end': 4097.397, 'src': 'embed', 'start': 3969.238, 'weight': 0, 'content': [{'end': 3978.886, 'text': 'So now again we will be using that very interpolation or one way data binding to display our contact dot first name.', 'start': 3969.238, 'duration': 9.648}, {'end': 3986.632, 'text': 'Then we need similar columns for our last name and phone number.', 'start': 3981.007, 'duration': 5.625}, {'end': 4001.877, 'text': "So it's done.", 'start': 4001.397, 'duration': 0.48}, {'end': 4007.341, 'text': "So let's check out our.", 'start': 4003.598, 'duration': 3.743}, {'end': 4011.624, 'text': 'Yeah, so we can see over here that our list is being generated.', 'start': 4007.341, 'duration': 4.283}, {'end': 4015.486, 'text': "We'll put some more styles so that it will look good in the end.", 'start': 4012.384, 'duration': 3.102}, {'end': 4018.988, 'text': "So what we'll do right now is we'll add a delete button.", 'start': 4015.806, 'duration': 3.182}, {'end': 4021.33, 'text': 'Using that, we can delete any contact.', 'start': 4019.549, 'duration': 1.781}, {'end': 4023.391, 'text': "So we'll go ahead and do that.", 'start': 4022.05, 'duration': 1.341}, {'end': 4026.593, 'text': "So for that, I'll be copying this very thing again.", 'start': 4023.731, 'duration': 2.862}, {'end': 4029.555, 'text': 'And I need my.', 'start': 4027.273, 'duration': 2.282}, {'end': 4034.989, 'text': 'put type to be a button.', 'start': 4030.908, 'duration': 4.081}, {'end': 4052.354, 'text': "Then click, which we'll call a method called speed contact, which we haven't created yet, but we'll do it soon.", 'start': 4043.452, 'duration': 8.902}, {'end': 4059.837, 'text': "Now, what we want is, we'll be referring to that very particular contact using ID, as I told you earlier.", 'start': 4053.175, 'duration': 6.662}, {'end': 4069.902, 'text': 'So the value should be delete.', 'start': 4064.619, 'duration': 5.283}, {'end': 4079.188, 'text': "And we'll be using a class called button danger.", 'start': 4073.385, 'duration': 5.803}, {'end': 4084.371, 'text': "So it's done.", 'start': 4083.811, 'duration': 0.56}, {'end': 4086.933, 'text': 'So we have this very particular thing over here.', 'start': 4084.772, 'duration': 2.161}, {'end': 4093.814, 'text': "Now what we need is we'll add few breaks so that we are iterating over the list.", 'start': 4088.01, 'duration': 5.804}, {'end': 4097.397, 'text': "So yeah, we'll do it later on these stylings.", 'start': 4094.095, 'duration': 3.302}], 'summary': 'Using interpolation, added display for contact details. added delete button functionality and styling.', 'duration': 128.159, 'max_score': 3969.238, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wtIvu085uU0/pics/wtIvu085uU03969238.jpg'}, {'end': 4740.65, 'src': 'embed', 'start': 4697.01, 'weight': 2, 'content': [{'end': 4710.898, 'text': "So what we can do to fix it is we can copy this very particular thing over here and we're gonna put it inside our add contact to be called just after we have pushed the contact.", 'start': 4697.01, 'duration': 13.888}, {'end': 4729.219, 'text': 'So now if we go ahead and do that, then yeah, you can see where, okay, we should add some so that it looks good or presentable over here.', 'start': 4711.919, 'duration': 17.3}, {'end': 4731.702, 'text': "So we're gonna do that here.", 'start': 4729.399, 'duration': 2.303}, {'end': 4740.65, 'text': 'So this is so far now.', 'start': 4738.768, 'duration': 1.882}], 'summary': 'Fixing a particular issue by adding code after pushing the contact.', 'duration': 43.64, 'max_score': 4697.01, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wtIvu085uU0/pics/wtIvu085uU04697010.jpg'}], 'start': 3885.775, 'title': 'Mean application overview', 'summary': 'Provides an overview of creating a mean application, covering server-side coding, middleware usage, route creation, database schema, client-side component creation, and service integration, with 24/7 support available for queries.', 'chapters': [{'end': 4015.486, 'start': 3885.775, 'title': 'Angular component iteration', 'summary': 'Explains the process of iterating over a list of contacts in an angular component using ngfor structural directive, displaying the first name, last name, and phone number for each contact.', 'duration': 129.711, 'highlights': ["The chapter demonstrates the use of ngFor structural directive to iterate over a list of contacts, enabling the display of each contact's information as a list.", 'It explains the implementation of one-way data binding to display the first name, last name, and phone number for each contact in the list.', 'The process involves writing a stylesheet, using ngFor to iterate over the contacts, and applying one-way data binding to display the contact information.']}, {'end': 4362.287, 'start': 4015.806, 'title': 'Adding delete and add contact method', 'summary': 'Explains the process of adding a delete button to delete a contact, including creating a delete method and an add contact method to add new contacts, with details on using ids and iterating over contacts.', 'duration': 346.481, 'highlights': ['The process involves adding a delete button to delete any contact, creating a delete method to call the service and remove the contact from the list, and adding an add contact method to create and add new contacts to the list.', 'The delete method involves calling the contact service to delete the contact using its ID and then removing it from the contact area if the delete operation was successful.', 'The add contact method includes creating a new contact and pushing it into the contact array, with details on handling errors related to contact details.']}, {'end': 4740.65, 'start': 4362.307, 'title': 'Creating add contact form', 'summary': 'Explains the process of creating an add contact form, including adding three fields for name, last name, and phone number, implementing two-way data binding using ngmodel, and resolving the issue of needing to reload the data after adding a contact.', 'duration': 378.343, 'highlights': ['The chapter explains the process of creating an add contact form, including adding three fields for name, last name, and phone number.', 'The implementation of two-way data binding using ngModel is emphasized, ensuring that changes in the form are reflected in the contact list.', 'The issue of needing to reload the data after adding a contact is addressed by incorporating the method for retrieving contacts to be called just after pushing the contact.']}, {'end': 4866.832, 'start': 4740.71, 'title': 'Creating mean application overview', 'summary': 'Provides an overview of creating a mean (mongodb, express, angular, node.js) application, including server-side coding, middleware usage, route creation, database schema, client-side component creation, and service integration, with 24/7 support available for queries.', 'duration': 126.122, 'highlights': ['24/7 support available for queries Support team available 24/7 for addressing queries and providing assistance.', 'Overview of creating a MEAN application Walkthrough of the process, including server-side coding, middleware usage, route creation, database schema, client-side component creation, and service integration.', 'Encouragement for interaction and feedback Encouragement for likes, comments, and queries, with a promise of prompt responses.']}], 'duration': 981.057, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wtIvu085uU0/pics/wtIvu085uU03885775.jpg', 'highlights': ['Overview of creating a MEAN application Walkthrough of the process, including server-side coding, middleware usage, route creation, database schema, client-side component creation, and service integration.', '24/7 support available for queries Support team available 24/7 for addressing queries and providing assistance.', 'The process involves adding a delete button to delete any contact, creating a delete method to call the service and remove the contact from the list, and adding an add contact method to create and add new contacts to the list.', "The chapter demonstrates the use of ngFor structural directive to iterate over a list of contacts, enabling the display of each contact's information as a list.", 'The process involves writing a stylesheet, using ngFor to iterate over the contacts, and applying one-way data binding to display the contact information.', 'The chapter explains the process of creating an add contact form, including adding three fields for name, last name, and phone number.', 'Encouragement for interaction and feedback Encouragement for likes, comments, and queries, with a promise of prompt responses.', 'The implementation of two-way data binding using ngModel is emphasized, ensuring that changes in the form are reflected in the contact list.', 'The issue of needing to reload the data after adding a contact is addressed by incorporating the method for retrieving contacts to be called just after pushing the contact.']}], 'highlights': ['MEAN stack application encompasses MongoDB, Express, Angular 2, and Node.js, allowing the complete development of web applications in JavaScript.', 'CRUD operations will be implemented using restful APIs for database interaction in the MeanStack application.', 'Installing Node.js or MongoDB is straightforward, involving visiting the website nodejs.org, choosing the correct installer, and going through the setup process.', 'Setting up server-side dependencies involves sending the source code and package.json file, enabling the installation of multiple dependencies using a single command, and installing modules like mongoose, body parser, and cores for server functionality.', "Demonstrates the use of the 'get' method to define routes, with a specific example of setting up a route for the home page using the 'slash' notation.", 'Creating APIs for retrieving, adding, and deleting contacts in Node.js with callback functions and JSON data format.', 'Installing Angular CLI by using npm install @angular/cli Angular CLI provides boilerplate and necessary files for running a client-side Angular application.', "Using ng-generate for generating component or services The process involves utilizing ng-generate to create a component named 'contact' and a corresponding service, following good practice guidelines for efficient code organization and maintenance.", 'Overview of creating a MEAN application Walkthrough of the process, including server-side coding, middleware usage, route creation, database schema, client-side component creation, and service integration.', '24/7 support available for queries Support team available 24/7 for addressing queries and providing assistance.']}