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)
movies