Repository files navigation

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

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

• Includes code fromAdMISTER 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.

.

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

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

• 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}`;returnthis.http.get<any>(url).pipe(catchError(this.handleError(`Error getting data from${database}`,[])));}

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

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

• 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

• N/A

• Repo created byABateman, email:gomezbateman@yahoo.com