Todo List Tutorial
Primary version
Primary version
  • Welcome to the ngGirls tutorial!
  • Workshop: Todo List
    • πŸ‘€About
    • #0: πŸ’ƒ Introduction
    • #1: βŒ› Installations
      • a. StackBlitz instructions
    • #2: πŸ…° Angular kicks in
    • #3: πŸ“ Component
    • #4: ✏ A new component
      • a. StackBlitz instructions
    • #5: πŸ’Ό Class
    • #6: πŸ“₯ Property binding
    • #7: πŸ“€Event binding
    • #8: πŸ“Ž Element ref - #
      • a. About
      • b. Explore
      • c. Resources
    • #9: πŸ“‹ The To Do list
    • #10: βž• New component: todo-item
    • #11: β›“ Interface
      • a. StackBlitz instructions
    • #12: πŸ“ŒAdd items
    • #13: 🚧 Refactor App Component
    • #14: πŸ’… Adding Style
    • #15: πŸ”‹ Creating a Service
    • #16: 🎁 Add Items Using the Service
    • #17: πŸ’ΎLocal storage
    • #18: πŸ—‘ Remove item
    • #19: πŸ”˜ Adding a checkbox
    • #21: πŸ’ͺ Enrich the todo-item component
    • Appendix 1: Git and GitHub
    • Appendix 2: πŸ›° Deploying your app
      • Deploy to Azure Static Web Apps
      • Deploy to GitHub Pages
        • a. StackBlitz instructions
    • Appendix 3: Tutorial Extensions
    • Appendix 4: Generating a new project
    • Troubleshooting
      • Installation
  • More Workshops
    • Second workshops - CRUD and HTTP
      • #1 MongoDB
      • #2 Local server
      • #3 http in diagrams
      • #4 POST
      • #5 GET
      • #6 DELETE and PUT
    • Gallery with Rx.js
      • #0: Init photo gallery
      • #1: Observable
      • #2: More interaction! Upload photos
      • #3: Merging Observables
      • #4: Filtering by category
      • #5: Adding photos to category
    • Forms
      • #1: Template-driven forms
      • #2: Reactive forms
      • #3: Form builder
    • NgRx
      • #1: Actions and reducers
      • #2: Store Devtools
      • #3: Implementing actions in app
      • #4: Selectors
    • RxJS
      • Operators
      • Play time!
    • Blog Editor
      • #1 βš™οΈConfiguring firebase
      • #2 πŸ’…Add Angular Material
      • #3 πŸ’…Add Bootstrap
      • #4 🧭Add Navigation
      • #5 ✏️Add Editor
      • #6 βš™οΈConnect Database
      • #6 πŸ’…Add Feed
      • #7 ✏️Edit Post
      • #9 πŸš€Deploy
      • #10 ✏ ️Next Steps
Powered by GitBook
On this page
  • Create an account on MongoDB Atlas and create your cluster
  • Create a collection and database
  • Get connection string needed to connect to the database
  1. More Workshops
  2. Second workshops - CRUD and HTTP

#1 MongoDB

PreviousSecond workshops - CRUD and HTTPNext#2 Local server

Last updated 5 years ago

MongoDB is the database we will use with the Todo List app. We will use a free service that provides a cloud hosted MongoDB called MongoDB Atlas.

Create an account on MongoDB Atlas and create your cluster

In MongoDB Atlas we first need to create a cluster to house the database. We .

We'll also summarize the main steps below: 1. Create an account on . 1. When prompted, select the Starter Clusters to create a free MongoDB instance. 1. Choose all the default options on the Create a Starter Cluster page and select Create Cluster. It may take up to 15 minutes to prepare the cluster. 1. Once you see information about Cluster0 in SANDBOX, your cluster is ready.

Create a collection and database

We .

We'll also summarize the main steps below: 1. In the Cluster0 panel, press the COLLECTIONS button. 1. Then select Add my own data when asked. 1. In the Create Database dialog, type "todo-list" as the DATABASE NAME and "todo-list-items" as the COLLECTION NAME. Press Create.

In order for the server to work without editing, you must use the names "todo-list" for the database name and "todo-list-items" for the collection name.

You created a database! You're almost there! ✨

Get connection string needed to connect to the database

Now that we have a database, we need the connection information for the server to communicate with the database. We will now get the connection string. We .

We'll also summarize the main steps below: 1. Return to the Clusters page by selecting Clusters in the navigation list on the left side of the page. 1. Press the Connect button to bring up a dialog to Connect to Cluster0. 1. Press the green Add Your Current IP Address button, then press Add IP Address button. 1. You may need to create a MongoDB User. Follow the instructions to add a username and password and press Create MongoDB User button. Press the Choose a connection method button. 1. When prompted to choose a connection method, select Connect Your Application. You now see your connection string. Press the Copy button to save a copy to your computer's clipboard and paste it where you can edit it. 1. Replace the <password> part with your password for the MongoDB user.

Your connection string is ready to use.

prepared a video that walks you through this process
MongoDB Atlas
prepared a video that walks you through this process
prepared a video that walks you through this process