rahiyansafz / angular-what-if

Angular What If?

What if Angular used Single File Components (SFC) by default? What if Angular used the fetch API or Axios for HTTP requests? What if Angular apps used standard import/exporting of TypeScript modules?

The web apps in this monorepo explore these ideas, using the Tour of Heroes theme.

by John Papa

Getting Started

1. Clone this repository

   git clone https://github.com/johnpapa/angular-what-if.git what-if
   cd what-if

2. Choose your app

   cd sfc-app

3. Install the npm packages

   npm install

4. Run the app

   npm run full-stack

Scenarios

Here is a list of the scenarios explored in this monorepo.

Scenario	Description
SFC	Angular, by default, separates files for HTML, TypeScript, and CSS into three files, and places them in a folder. The Single File Component (SFC) scenario combines them into a single file, and eliminates the need for the parent folder. This reduces the files, reduces file jumping during development, and makes it easier to see the entire context of a component in one place.
HTTP Requests	Angular offers HttpClient as its recommended HTTP library. Often the standard Fetch API is a great fit for apps. Where more robust logic is needed (e.g. interceptors) Axios is a stable, widely used, and powerful library. Both alternatives use promises and can work with the async/await syntax by default, vs RxJS default from HttpClient (though it can also work with Promises).
JavaScript/TypeScript Modules	Angular offers Dependency Injection, which has led to a lot of logic being placed in class based Angular Services. When an application does not need the DI, it may be simpler to create a module with your functions/var/let/const and export them, then import them.

Apps in this Repository

There are several apps in this repository.

Folder	Description
mfc-app	Angular app using Multiple File Components (MFC). File extensions *component.ts, *.component.html, *.component.css).
sfc-app	Angular app using Single File Components (SFC).

What's in the App

Here is a list of the features in each app (other than the angular-http-hard-way app)

• Pages for home, list of movies, heroes and villains
• Axios Interceptors
• API
  • json-server is a backend. No database needed.
  • json-server-auth provides signin/out authentication and authorization routes.
  • App served on one port which can access API on another port proxy or CORS)
  • HTTP via Axios - Uses most common client http libraries for each framework
  • API routes are restricted to those who sign in except movies
• Viewing/Editing Pages
  • Home and Movies pages are read-only, and require no authentication
  • Heroes and Villains pages support editing, and require authenticatation
• Styling with Bulma, same css in each app, and Font Awesome

Problems or Suggestions

Open an issue here

Resources

• Angular Essentials for VS Code
• Axios
• Axios Interceptors
• Angular's HttpClient
• Angular HttpClient interceptors
• VS Code
• Azure Free Trial