This content is part of the Alfresco ADF getting started tutorial and describes how to create your Angular application on top of the service layer composed by Alfresco Content Services, Alfresco Process Services or both. In the following sections we are going to see how to create a brand new application with Alfresco ADF, assuming you went through the prerequisites described in the dedicated content. To reach the goal, we are going to cover the following tasks:
1. Cloning and running the GitHub repository containing the Alfresco ADF application with the minimal of the components.
3. Describing the user experience of the Alfresco ADF application, once launched.
Below you can find a “step by step” description of each task, very straightforward also if you are not extremely familiar with the technologies.
Cloning and running the GitHub repository
Directly on GitHub, you can find the repository called
angular-cli-adf-app.git, stored into the Alfresco’s profile. To clone locally the repository, run the following command in a terminal.
git clone https://github.com/Alfresco/angular-cli-adf-app.git
After the repository is cloned, enter into the
angular-cli-adf-app folder and run the commands below.
The install task will require some time to be completed because it downloads all the dependencies from the web. Please ignore warning messages but consider errors. The start task will open a browser at
http://localhost:4200, with a very simple home page, as described in the following picture.
Configuring the Alfresco ADF application
If you don’t plan to use the Alfresco Content Services or the Alfresco Process Services, you can skip this section. If you plan to use one of them or both, you can read here how to correctly configure your working application to point on them.
The first task to do, is to stop the application running (you can simply use the CTRL+C buttons). In the
angular-cli-adf-app folder, more exactly in the proxy.conf file, you can configure the target systems quite easily. Everything can be configured customising the target attribute (one for Alfresco Content Services into the label
ecm and one for Alfresco Process Services with the label
Once done, start the application again running the npm start command from a terminal. This is all you need to configure the Alfresco ADF application to use Alfresco Content Services or Alfresco Process Services.
Using the Alfresco ADF application
As you can see from the user interface, the Alfresco ADF application developed using the
angular-cli-adf-app project, is really straightforward and basic. This is a precise requirement for this example, because it focuses the attention on the comprehension of the basis, instead of containing complex features that will be part of an intermediate/expert learning path.
To use the Alfresco ADF application, start from the right icon (made by three vertical points) containing: Login, DataTable, Viewer and DocumentList. All of them are the most simple examples of Angular components you can imagine.
In the following paragraphs we are going to (briefly) describe each component to enable you to their understanding and usage.
The Login component
The Login component requires Alfresco Content Services or Alfresco Process Services. If you don’t have at least one of them, up and running (and configured as described above in the document), this component doesn’t seems useful and you can ignore it.
Below a screenshot showing how the Login component look like.
Don’t expect any sort of behaviour, if the login will succeed. The Login component is very basic and nothing is going to happen to the user interface, in this case.
The DataTable component
DataTable component is a generic Angular component developing a table showing data. The
DataTable component lives in the source code hosted into the
<angular-cli-adf-app>/src/app/datatable folder and can be modified changing the
Below a screenshot showing how the
DataTable component look like.
The Viewer component
Viewer component is a generic Angular component developing a viewer of content. The
Viewer component lives in the source code hosted into the
<angular-cli-adf-app>/src/app/viewer folder. Below a screenshot showing how the
Viewer component look like, showing a PDF document.
The DocumentList component
DocumentList component requires Alfresco Content Services up and running and configured as described above in the document. If you don’t have it, this component doesn’t seems useful and you can ignore it.
The DocumentList component develops a navigator for the Alfresco repository. The
DocumentList component lives in the source code hosted into the <angular-cli-adf-app>/src/app/documentlist folder and can show the content only if the login on Alfresco Content Services has been executed with success. Below a screenshot showing how the DocumentList component look like.