Angular 8 Real World WebApp Development w/ Node.js & MariaDB

Explore building the basics of the client app in Angular, covering routes, components, styling with CSS, and services, with notes on Node and Angular versions.

Check your Node.js and Angular versions, install Angular CLI 7.3.6, create a new energy blog app with routing and CSS, and run ng serve --open to verify the app.

Initialize a local repository and commit changes to manage source control. Generate core blog components—navigation bar, article list, and footer—and wire routing to display the home page content.

Set up article list and about routes in Angular, update the navigation with routerLink, and switch views using the router outlet for seamless page transitions.

Center the blog header and navigation, style the body with margins and a max-width of 800px, and apply a clean font family while refining link colors and hover states.

Create an article class for blog posts with id, title, key, date, content, description, and a featured image. Populate mock articles and show them in the article list component.

Display and style the article list by rendering each article as a card with an image, title, date, and teaser, then refine CSS for layout, borders, and typography.

Add an article service to fetch articles as an observable and replace direct access in the article list component, wiring mock data and preparing a single-article view.

Create an article component and implement router links to article keys, configure routes to load articles via activated route parameters, and extend an article service to fetch mock articles.

Get a single article from the ArticleService by key using an observable. Filter the articles array to the first match and provide user feedback for not found cases.

Create a 404 not found page by adding a not-found component, configuring a wildcard route, and redirecting unknown URLs to the home page with clear feedback.

Display a single article on the page by rendering the featured image, title, date, and content using string interpolation and innerHTML, then test by viewing the article in the blog.

Style a single article by adding article, image, title, and meta info classes; center the image and apply global CSS to typography and paragraph spacing for a polished blog post.

Publish your Angular blog built with components, routing, services, and CSS that you created yourself, and then proceed to add meta and Open Graph tags.

Set the title and meta and Open Graph tags for blog pages to inform search engines and social platforms. Use the Facebook sharing debugger to verify tags.

Add a title service and shared title logic to an Angular blog app to set the browser tab title for articles, lists, and about pages, with updates on navigation.

Learn how the Facebook debugger previews social shares by inspecting Open Graph tags, titles, images, and descriptions, and optimize meta text for accurate posting.

Add meta tags to the article component, setting the title, description, and Open Graph properties (type, url, image, site name) with a base URL. Validate rendering with Angular Universal SSR.

Learn to set meta and Open Graph tags for search engines and social platforms, understand the logic behind them, and implement them with Angular Universal.

Activate server side rendering with Angular Universal to render on the server and deliver a complete source code to the client, enabling SEO, social sharing, and improved performance on mobile.

Create a universal angular app for server-side rendering using a single command from the angular universal guide, generating a node express server and updated project files.

Explore how Angular Universal renders pages on the server, compare server-side rendered output with the default client app, and run the universal app locally.

Compare server-side rendered versus client-side rendered blog pages, showing server-side rendering delivers faster load times on mobile networks, especially under fast 3G and slow 3G conditions.

Leverage server side rendering to boost performance and search engine visibility, while using tags and client side rendering during development and preparing the back end for publication.

Create a new project for the web service and implement the first REST API calls in the Angular client. Cover the software development process and cross-origin resource sharing.

Create a new project folder and build a web service with the Express framework, install Express with npm, and start the server while preparing for API calls.

Make your first api call by defining a get handler for the root resource /, returning a simple text response, and test it on localhost:1000 with a 200 status.

Install nodemon to monitor code changes and automatically restart your node server. After globally installing nodemon with npm, run nodemon server.js instead of node server.js to enable live reloads.

Create an articles.js module exported with module.exports, import it in server.js, and set up app.get to return all articles. Use a mock articles.js array to test the API.

Implement a get request to fetch a single article by key from the articles resource, filtering the array and returning the first match, then test via chrome and developer tools.

Extend the article service in the Angular client to call rest endpoints using the http client. Tackle cross-origin resource sharing issues and fetch both article lists and single articles.

Implement a CORS policy by installing the course module, configuring origins for localhost:4200 and 4000, and applying app.use with these options to enable cross-origin requests.

Build and test a REST API to fetch articles, integrate cards in the Angular client, enable auto-restarts, and configure CORS as you prepare to add MariaDB ORM.

Install MariaDB and HeidiSQL for database setup, create a new web log database, map models to tables, configure the connection, and create the articles table to fetch and update articles.

Install MariaDB from mariadb.org and set up HeidiSQL to manage databases, then create a new local database called energy block with a root password and no remote access.

Install sequelize and the MariaDB dialect, configure it as an ORM for articles in JavaScript, and initialize, authenticate, and run queries against the database.

Model the articles table by defining an article model with title, key, date, date_time, content, description, and image, with equalize auto-creating the id and timestamps, and synchronizing the table.

Seed the articles table by syncing the table, inserting two mock articles via the article model's create method, and force dropping and recreating the table to prevent duplicate seeds.

Fetch all articles from database by implementing a get articles method using the article model's findAll with date descending, returning results via a callback and wiring Sequelize on the server.

Implement and export get article by key to fetch a single article from the database using find one with a key, guided by an optional options object and a callback.

Add a view count integer to the article model and increment it on article retrieval using Sequelize, updating the view count and handling null values for a real-world blog.

Master the Maria database setup and usage as you connect the Angular client to the web service and database, then prepare for full CRUD operations with an administration dashboard.

We complete all CRUD operations and add features by building new components and service modules for the Angular client and Node.js web service within the administration dashboard.

Create three new components—the dashboard, article overview, and added article—to build the admin interface. Configure routing and navigation to expose the dashboard and article overview, with authentication later.

Create and integrate a dashboard service in Angular to fetch articles from the Node.js server, implement the dashboard overview endpoint, and render the results in the article overview.

Add a published boolean field to articles, defaulting to false, so drafts stay hidden from the public. Update article queries to return only published items while the dashboard shows drafts.

Add an environment variable for the API URL in environment.ts and wire it into the article and dashboard services, replacing localhost calls and testing the client app.

Implement the article overview in the dashboard as a table-like list with image, title, date, views, and a published state dot, using ngFor and class bindings for status.

Implement publish and unpublish for articles in Angular app, update the client and server, toggle the published state via a dashboard service post request, and configure body-parser on the server.

Implement the edit article component in angular 8, add routing and a form for title, key, date, image, description, and content using two-way ngModel binding with dashboard service.

Explore implementing an update article workflow: add an update button, wire it to a service call, handle responses, and provide user feedback with a saved indicator and article preview.

Add a preview button in the edit article component, implement navigation to a dashboard preview route, and distinguish between published and unpublished articles using the dashboard service.

Implement a delete article feature in the admin dashboard by adding a delete method in the dashboard service and client, with server route integration and user confirmation.

Implement a dashboard article creation flow by adding a post method and using secret.js to create articles, handling title, key, dates, image, description, content, and save-as-draft logic.

Automatically update the article key from the title, applying lowercase and spaces to dashes, on key up and blur, and show a 150-character description count with online/offline status.

Implement authentication to secure the administration dashboard after enabling CRUD ops, environment variables, and iterative improvements to blog components and services.

Create a user model, register users, and enable login to the dashboard with credentials. Introduce JSON web tokens, test API calls with postman, and implement middleware with an angular interceptor.

Create a Sequelize user model with name, password, and salt as non-null fields, initialize it, and create the users table; passwords will be hashed later for authentication.

Register a user by adding a new user with a lowercase user name, a salt, and a hashed password using pbkdf2, then save via sequelize and enable login verification.

Learn how to use Postman to set up an API development environment, create collections, and execute a POST request to register a user with a JSON body.

Implement a login endpoint that reads name and password, hashes with salt via crypto, and returns true or false; this preps for token-based authentication in the next lecture.

Describe how JSON Web Tokens (JWT) use a public and private key pair (RSA) to sign and verify tokens, including header, payload, and signature, for secure authorization and API access.

Sign the json web token with the private key using the jsonwebtoken library, embedding the user name in the payload, and set a 12-hour rs256 expiry for verification.

Verify jwt tokens by loading a public key, setting verify options (expires in 12 hours, algorithm IRS to 5 6 9), and enforcing authorization via the dashboard authorization header.

Create an isAuthenticated.js middleware to verify JSON web tokens from the authorization header, returning unauthorized if invalid and calling next() to protect dashboard routes.

Develop a functional user login feature in an angular 8 app by creating a login component and authentication service, wiring routing, http calls, and token handling.

Define a user model with name and password, bind it to a login form, validate inputs, display 'username or password is wrong' errors, and retrieve a token on successful login.

Store the token in local storage when available, and attach it to the authorization header for dashboard requests. Then navigate to the dashboard after saving the token.

Build an HTTP interceptor that clones requests and adds the authorization header from local storage. Configure it in providers as an HTTP interceptor with multi: true and test the token.

Protect the dashboard with an authentication guard using canActivate, implement a guard service, check token validity via the web service, and redirect unauthenticated users to the login page.

Implement authentication with JSON web tokens, store hashed passwords, and verify tokens to grant dashboard access; use an Angular interceptor and middleware to streamline security and deploy the app.

Publish your Angular web app on a Windows server by hosting the web service, build the client as a server-side rendered version, and verify with the Facebook sharing debugger.

Install IIS node on Windows Server, download the 64-bit msi, run as administrator to add a new site to IIS, then test localhost/notes and node express samples.

Deploy a Node.js web service on IIS by relocating sources, configuring a web.config, and updating port settings; test endpoints with Chrome and Postman, and publish the Angular client next.

Publish an angular universal app on iis by configuring production environment variables and api endpoints, building server-side rendering, and deploying the server and browser assets.

Fix the interceptor to render article content server-side by making it injectable and only adding the authorization header when a token exists, restoring Open Graph data.

Learn to use the Facebook sharing debugger to fetch and test Open Graph data for your articles. Verify the title, image, and description, and ensure social media previews render correctly.

Build a blog with angular universal, Node.js, and MariaDB; render on the server, implement a Node.js web service, perform CRUD, add JSON web token authentication, and deploy to Windows server.

Update angular 7 to 8 using the angular update tool, verify current and target versions with ng --version, and apply updates to @angular/cli and @angular/core, noting TypeScript moves to 3.5.