About this sample
This is an example of a simple application built with the Angular 8 framework and the Bootstrap CSS library. It can run standalone by loading index.html, and it can be imported or pushed into a Script Portlet. It's an example of a "single page application" where the different views within a single index.html page are dynamically loaded by the Angular framework. When used in a Script Portlet, a single page application like this is displayed as one portlet on a page, typically alongside other portlets. The application is a simple contact list application for viewing a list of contacts. Here are the key features illustrated in the sample:
- The three different views (list, details, and about) are separate HTML files loaded as component pages using the Angular router, configured in app.module.ts.
- Angular HttpClient is used to load the default JSON data file, contacts.json.
- The Angular $httpClient service is used to load the default JSON data file, contacts.json.
- There are three simple Angular components used, for the list view, the details view and the about page.
- There are a few separate JavaScript files used, and when running in Script Portlet they are combined into a single resource by HCL Digital Experience's resource aggregation feature (available in version 8.5, CF03 or later). See the comment at the top of index.html for how this is enabled.
- The Bootstrap 3 library is used for styling of the application UI