:zap: 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

:page_facing_up: Table of contents

• :zap: Angular Website Example
  • :page_facing_up: Table of contents
  • :books: General info
  • :camera: Screenshots
  • :signal_strength: Technologies
  • :floppy_disk: Setup
  • :computer: Code Examples
  • :cool: Features
  • :clipboard: Status & To-Do List
  • :clap: Inspiration
  • :file_folder: License
  • :envelope: Contact

:books: General info

• Includes code from AdMISTER STUDIOs - see :clap: 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.

:camera: Screenshots

.

:signal_strength: 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.

:floppy_disk: 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.

:computer: 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}`, []))
  );
}

:cool: Features

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

:clipboard: Status & To-Do List

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

:clap: 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

:file_folder: License

• N/A

:envelope: Contact

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