⚡ Angular Website Example

• Converts a free Namari HTML template to an Angular app
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Angular Website Example
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• Includes code from AdMISTER STUDIOs - see 👏 Inspiration below, but with changes to reduce lines of code and use latest Angular version. Some of the videos listed below are not applicable as I decided to just reproduce the Namari website and not include a blog, user login/logoff, auth guard, separate API etc.
• Angular feature modules used for organisational best practise
• Single service used to fetch data for all pages so this data can be accessed from an API. This meant I could not use custom interface classes. Each module should have its own service with interface class.

📷 Screenshots

.

📶 Technologies

• Angular v17 JS framework
• Font Awesome v4 icons
• RxJS Library v7 used to subscribe to the API data observable.
• The HttpClient in @angular/common/http offers a simplified client HTTP API for Angular applications that rests on the XMLHttpRequest interface exposed by browsers.

💾 Setup

• Run npm i to install dependencies.
• Run ng serve for a dev server.
• Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

💻 Code Examples

• shared/services/config.service.ts function to get data from API with inputs: database name and id

getSettings(database: string, id?: number): Observable<any> {
  let url = id? `api/${database}/${id}` : `api/${database}`;
  return this.http.get<any>(url).pipe(
    catchError(this.handleError(`Error getting data from ${database}`, []))
  );
}

🆒 Features

• Lazy-load modules used for most pages to speed up initial rendering of home page

📋 Status & To-Do List

• Status: Working
• To-Do: Remove unused CSS. Create separate service for each module?

👏 Inspiration

• Create your first website using angular 6 -- Part 1 -- HTML Template to Angular Component
• Create your first website using angular 6 -- Part 2-- Routing and Static data to configuration file
• Create your first website using angular 6 -- Part 3 -- Configuration File
• Create your first website using angular 6 -- Part 4 -- Add BLOG Section
• Create your first website using angular 6 -- Part 5 -- 404 Component and Pagination for blog
• Create your first website using angular 6 -- Part 6-- Login Signup and Contact form using In Memory
• Create your first website using angular 6 -- Part 7-- Add JQUERY and existing JS
• Create your first website using angular 6 -- Part 8-- blog post Markdown Editor
• Create your first website using angular 6 -- Part 9 -- Static to Dynamic Menu populated from DB
• Create your first website using angular 6 -- Part 10 -- User Dashboard Module
• Create your first website using angular 6 -- Part 11 -- Named Router Outlets
• Create your first website using angular 6 -- Part 12 -- Local Development SSL
• Create your first website using angular 6 -- Part 13 -- Components to Feature Modules
• Create your first website using angular 6 -- Part 14 -- Components to Feature Modules
• Create your first website using angular 6 -- Part 15 -- Blog Component to Blog Feature Module
• Create your first website using angular 6 -- Part 16 -- Creating email contact form API
• Create your first website using angular 6 -- Part 17 -- send email from Angular APP
• One Page Love website of html templates

📁 License

• N/A

✉️ Contact

• Repo created by ABateman, email: [email protected]