MEAN project with Angular 4 (and 5) - Creating a CMS

Learn tools overview for the MEAN CMS by creating a new MongoDB database and pages collection using Visual Studio Code and Compass, with folders for Node API and Angular.

Create a new Angular app, drag the folder into Visual Studio Code, run npm install, then serve to see a welcome page at localhost.

Install jquery and bootstrap in the MEAN project, add bootstrap CSS and jquery script references to the Angular CLI, and verify the compile and browser readiness.

Create a navigation bar by generating a navbar component in the components folder, integrate it into the app component, and set up initial hardcoded links for the CMS.

Create the node api project folder, install express, mongoose, and body-parser, configure a database connection, and run a nodemon server on port 3000 for the mean cms.

Set up a pages system in a mean stack app by creating a page model with mongoose, wiring a pages router, and adding home, about, and services pages.

Define and export the pages model, set up a get /pages route, query all pages with find({}), handle errors, and return the results as JSON.

Create an Angular page service to manage pages with a BehaviorSubject and observable, updating shared page data across components and the menu in real time.

This lecture explains configuring Angular routes for a CMS, creating a page component, and adding getPages method to the page service to fetch pages from localhost:3000/pages using map and subscribe.

Build a dynamic navbar for a MEAN CMS using Angular 4/5, wiring a page service, subscribing to pages observable, and linking to page slugs except home.

Enable the router outlet to display the component content on the homepage. Adjust the layout with container-fluid, row, and col-12 classes, and ensure changes save as you navigate.

Load the page body from a service and display the correct page using the slug in the pages component. Navigate home if the page does not exist.

Add a dynamic page title using a title service for each page. Convert the page slug into a readable title by replacing underscores with spaces and capitalizing words.

Create a user model with a username and password using a user schema, and build corresponding routes and a users collection to enable user management in the CMS.

Create the user service file for the CMS, configure the necessary imports, and implement two post methods: register and login, that send user data to /register and /log.

Build a register component in a mean stack app, wire a service, create a username and password form with required and minimum length validation, and auto-disable submit until valid.

Implement a register form that validates input, disables the submit button until valid, calls the user service to register, and shows a timed user exists alert before routing to login.

Implement the register method in the MEAN CMS app, wiring a POST /register from frontend to API, validating unique usernames and saving new users before redirecting to login.

Learn to build a login component by reusing the register form, show invalid credentials and registration messages, and persist user state with local storage while routing to home.

Implement the login flow by updating the post login method, using local storage to track the user, and redirecting logged-in users from the logon page to the home page.

Enhance the navigation bar and logo functionality in CMS project, displaying logged-in user name and logout option, while showing register and login links when not authenticated via local storage.

Create and manage admin pages area in an Angular cms, display pages via page service in a table with edit and delete links, and guard access via local storage checks.

Create and customize an admin navbar by generating a new component, conditionally displaying admin numbers based on local storage, and adjusting the layout with the space class.

Add and wire a new page component in the admin area, update the module, and configure the template, while noting a log out bug and production mode behavior in Angular.

Add a new page in the CMS by implementing a form with title and content fields, including title validation, placeholders, and navigation back to admin pages.

Add a new page by posting title and content to pages/{page}, handle success and error messages, and refresh the page list via the page service to update the menu.

This lecture shows implementing an ad page in a mean CMS, generating a slug from the title, checking for existing page, and saving with title, slug, content, and temporary sidebar.

Integrate a third-party rich text editor into an Angular page, bind its content to the form field, and extract the value for submission, with an admin check.

Create an admin add-page component, wire it into routes, and implement a get page method to fetch a page by id via the pages/page/{id} route, with admin redirect behavior.

Continue building edit page by loading the page via route parameters, binding title and content with two-way data binding, and saving updates through the page service with a success message.

Implement the post-edit page route and connect it to the page service. Load the page by id, then update the title, slug, and content, and save changes.

Implement edit page method and edit page component, using content and two error messages for existence checks. Ensure correct id/slug on save and plan bug fix for the next video.

Implement delete page functionality in a mean admin panel by wiring a delete call to the page service, confirming, and updating the UI on success or error.

Debug and fix the same slug bug in a MEAN CMS project by validating the slug against the ID and updating page logic across services and home.

Create a sidebar component and a sidebar service, wire them into routes, and set up API endpoints to manage a single sidebar document in a MEAN CMS.

Implement get and post API methods to fetch and save a sidebar in an Angular 4/5 CMS, wire routes, and verify localhost paths.

Implement the main sidebar in a MEAN Angular CMS by creating the sidebar component and service, enabling a post with success messages and router integration.

Add a sidebar option when creating pages in the content management system; implement a sidebar field and yes/no toggle, and update routes and page logic to reflect the selection.

Add a sidebar option to the edit page in the CMS by introducing a boolean sidebar property in the page component and toggling the sidebar based on its value.

Update the page sidebar flag in the database when editing pages and use the page and sidebar services to conditionally display the sidebar based on that flag via the API.

Update a MEAN app to Angular 5 by replacing HttpModule with HttpClient, creating a client module, updating services and components, and adding a models sidebar interface to support CMS functionality.

Discover bonus material and special offers by visiting my website, where you can buy any course for ten dollars and access great deals and the best prices.