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
-
Clone this repository
git clone https://github.com/johnpapa/angular-what-if.git what-if cd what-if -
Choose your app
cd sfc-app -
Install the npm packages
npm install
-
Run the app
npm run full-stack
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. |
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). |
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