mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-3198] Index and tutorial content review (#3500)
* [ADF-3198] Fixed glitches in doc index files and tools * [ADF-3198] Reviewed new tutorial content and fixed index glitches * [ADF-3198] Fixed host settings component brief description
This commit is contained in:
Andy Stark
committed by
Eugenio Romano
Eugenio Romano
parent
737becd51f
commit
58522d0722
@@ -14,22 +14,15 @@ The tutorials are graded as follows:
|
||||
|
||||
| Name | Level | Abstract |
|
||||
| -- | -- | -- |
|
||||
| [**Preparing the development environment**](preparing-environment.md) | Beginner | In this content is shared all the prerequisites valid for all the tutorials and descriptions of the entire documentation. This content contains the development environment description, along with the details of the suggested versions for each tools, library or module. |
|
||||
| [**Preparing the development environment**](preparing-environment.md) | Beginner | Here you will find the prerequisites for all the tutorials and descriptions of the entire documentation. This document contains the development environment description, along with the details of the suggested versions for each tool, library and module. |
|
||||
| [**Creating your ADF application using Yeoman**](creating-the-app-using-yeoman.md) | Basic | In this tutorial you are going to see how to create an ADF application from scratch, using the [Yeoman scaffolding tool](http://yeoman.io/). This is a "getting started" task that should enable you to start developing your own ADF application. |
|
||||
| [**Creating your Alfresco JavaScript application**](creating-javascript-app-using-alfresco-js-api.md) | Basic | In this tutorial you will learn how to create an application in JavaScript from scratch to
|
||||
interact with Alfresco. This is a "getting started" task that should enable you to start
|
||||
developing your own JavaScript application on top of Alfresco Content Services or Alfresco
|
||||
Process Services. |
|
||||
| [**Creating your Alfresco JavaScript application**](creating-javascript-app-using-alfresco-js-api.md) | Basic | In this tutorial you will learn how to create an application in JavaScript from scratch to interact with Alfresco. This is a "getting started" task that should enable you to start developing your own JavaScript application on top of Alfresco Content Services or Alfresco Process Services. |
|
||||
| [**Adding a new component**](new-component.md) | Basic | By definition, a _component_ controls a patch of screen called a _view_. For example, individual components define and control menus, tabs, forms, buttons and every simple or complex portion ofan application's layout. In this tutorial, you will learn how to create a component using [Angular CLI](https://cli.angular.io/) within an existing application. |
|
||||
| [**Adding a new view**](new-view.md) | Beginner | Every application developed in Angular is a single page application where the concepts of _view_ and _routing_ play a key role in the user experience. Being a single page application, the navigation between the different layouts (called _views_) is enabled through the _routing_. In this tutorial you will learn how to create a new view in your application and how to access it using a defined endpoint. |
|
||||
| [**Using components**](using-components.md) | Beginner | There are three different ways to use, extend and configure an ADF component: configuration properties, event listeners, and content projection / HTML extensions. In this tutorial you will see a practical example of each approach using the Login component. |
|
||||
| [**Basic theming**](basic-theming.md) | Beginner | As introduced in the [user guide about theming](../user-guide/theming.md), the customisation of the [Cascading Style Sheets](https://en.wikipedia.org/wiki/Cascading_Style_Sheets) is something straightforward into an ADF application. In this tutorial you will see how to change it, using a step-by-step approach. The focus of this tutorial is [ADF apps built using Yeoman](./creating-the-app-using-yeoman.md), but you can re-use the same principles to customise the themes in all the ADF applications. |
|
||||
| [**Basic theming**](basic-theming.md) | Beginner | As detailed in the [user guide page about theming](../user-guide/theming.md), you can easily customize the [Cascading Style Sheets](https://en.wikipedia.org/wiki/Cascading_Style_Sheets) used by an ADF application. In this tutorial you will see how to modify the CSS, using a step-by-step approach. The focus of this tutorial is [ADF apps built using Yeoman](./creating-the-app-using-yeoman.md), but you can use the same principles to customize the themes in any ADF application. |
|
||||
| [**Customizing the Login component**](customising-login.md) | Intermediate | In this tutorial you will learn how to customize the [`Login` component](https://alfresco.github.io/adf-component-catalog/components/LoginComponent.html) following the [technical documentation](https://alfresco.github.io/adf-component-catalog/components/LoginComponent.html). The task will be very simple. See the documentation for further details about customizing this component, along with examples. |
|
||||
| [**Working with a Data Table**](working-with-data-table.md) | Intermediate | In this tutorial you will learn how to populate a [`DataTable` component](https://alfresco.github.io/adf-component-catalog/components/DataTableComponent.html) with custom data from a generic back-end service or third party API. As an example we are going to use data from one of the available services on Alfresco Content Services. However, the procedure is much the same if want to use an Alfresco Process Services endpoint or a third party API. |
|
||||
| [**Working with the Nodes API Service**](working-with-nodes-api-service.md) | | In this tutorial you will learn how to use the [`NodesApiService`](https://github.com/Alfresco/alfresco-ng2-components/blob/master/lib/core/services/nodes-api.service.ts). We have developed some practical examples to show you how to interact with an instance of Alfresco Content Services without using the REST endpoints directly. With this approach the `NodesApiService` is used as an abstraction layer, defined by one of the services in the ADF Core
|
||||
library. |
|
||||
| [**Working with Nodes using the JS API**](working-with-nodes-js-api.md) | | In this tutorial you will learn how to use the
|
||||
[`AlfrescoCoreRestApi`](https://github.com/Alfresco/alfresco-js-api/tree/master/src/alfresco-core-rest-api)
|
||||
We have developed some practical examples to show you how to interact with an instance of
|
||||
Alfresco Content Services, without using the REST endpoints directly. With this approach the `AlfrescoCoreRestApi` is used as an abstraction layer, defining one of the core services of the [`alfresco-api-js`](https://github.com/Alfresco/alfresco-js-api) library. |
|
||||
| [**Content metadata component**](content-metadata-component.md) | Advanced | In this tutorial you will learn how to work with the [`ContentMetadataComponent`](https://alfresco.github.io/adf-component-catalog/components/ContentMetadataComponent.html), used to render the standard and custom metadata of a generic content (called _node_) stored into Alfresco Content Services. With the usual approach "learning by doing", you will see here some practical examples you might find useful in your uses cases. As a starting point, we are going to use and customise the [Alfresco Content App](https://github.com/Alfresco/alfresco-content-app). |
|
||||
| [**Working with the Nodes API Service**](working-with-nodes-api-service.md) | | In this tutorial you will learn how to use the [`NodesApiService`](https://github.com/Alfresco/alfresco-ng2-components/blob/master/lib/core/services/nodes-api.service.ts). We have developed some practical examples to show you how to interact with an instance of Alfresco Content Services without using the REST endpoints directly. With this approach the `NodesApiService` is used as an abstraction layer, defined by one of the services in the ADF Core library. |
|
||||
| [**Working with Nodes using the JS API**](working-with-nodes-js-api.md) | | In this tutorial you will learn how to use the [`AlfrescoCoreRestApi`](https://github.com/Alfresco/alfresco-js-api/tree/master/src/alfresco-core-rest-api). We have developed some practical examples to show you how to interact with an instance of Alfresco Content Services without using the REST endpoints directly. With this approach the `AlfrescoCoreRestApi` is used as an abstraction layer, defining one of the core services of the [`alfresco-api-js`](https://github.com/Alfresco/alfresco-js-api) library. |
|
||||
| [**Content metadata component**](content-metadata-component.md) | Advanced | In this tutorial you will learn how to work with the [`ContentMetadataComponent`](https://alfresco.github.io/adf-component-catalog/components/ContentMetadataComponent.html). This component is used to render the standard and custom metadata of generic content item (called a _node_) stored in Alfresco Content Services. With the usual approach "learning by doing", you will see here some practical examples you might find useful in your own applicatioin. As a starting point, we will use and customize the [Alfresco Content App](https://github.com/Alfresco/alfresco-content-app). |
|
||||
|
||||
@@ -1,23 +1,24 @@
|
||||
---
|
||||
Level: Beginner
|
||||
---
|
||||
|
||||
# Basic theming
|
||||
|
||||
As introduced in the [user guide about theming](../user-guide/theming.md), the customisation of the [Cascading Style Sheets](https://en.wikipedia.org/wiki/Cascading_Style_Sheets) is something straightforward into an ADF application. In this tutorial you will see how to change it, using a step-by-step approach. The focus of this tutorial is [ADF apps built using Yeoman](./creating-the-app-using-yeoman.md), but you can re-use the same principles to customise the themes in all the ADF applications.
|
||||
As detailed in the [user guide page about theming](../user-guide/theming.md), you can easily customize the [Cascading Style Sheets](https://en.wikipedia.org/wiki/Cascading_Style_Sheets) used by an ADF application. In this tutorial you will see how to modify the CSS, using a step-by-step approach. The focus of this tutorial is [ADF apps built using Yeoman](./creating-the-app-using-yeoman.md), but you can use the same principles to customize the themes in any ADF application.
|
||||
|
||||
## About the `adf-core` theming
|
||||
|
||||
As described into the [user guide about theming](../user-guide/theming.md), all happens into the `src/custom-style.scss` file defining the *primary*, the *accent* and the *warn* set of palettes. For a detailed description of the different types of palettes, check the [user guide about theming](../user-guide/theming.md).
|
||||
As described in the [user guide about theming](../user-guide/theming.md), eveything happens in the `src/custom-style.scss` file defining the *primary*, the *accent* and the *warn* set of palettes. For a detailed description of the different types of palettes, check the [user guide about theming](../user-guide/theming.md).
|
||||
|
||||
As you can see directly in the `css` file, the sets of palettes are defined by some predefined variables used in the source code as described below.
|
||||
As you can see directly in the `css` file, the sets of palettes are configured using some predefined variables used in the source code as described below.
|
||||
|
||||
$primary: mat-palette($alfresco-accent-orange);
|
||||
$accent: mat-palette($alfresco-accent-purple);
|
||||
$warn: mat-palette($alfresco-warn);
|
||||
|
||||
The `mat-palette` function is used to define the [Material Design](https://material.io/design/introduction/) Palettes from a collection of colours and `$alfresco-ecm-cyan`, `$alfresco-accent-purple` and `$alfresco-warn` are variables declared locally into the project to define the colours to be used in the application.
|
||||
The `mat-palette` function is used to define the [Material Design](https://material.io/design/introduction/) Palettes from a collection of colors and `$alfresco-ecm-cyan`, `$alfresco-accent-purple` and `$alfresco-warn` are variables declared locally in the project to define the colors to be used in the application.
|
||||
|
||||
As you can easily imagine, changing the parameter of the `mat-palette` function, you will change the colours of the entire application in one action.
|
||||
As you would expect, changing the parameter of the `mat-palette` function will change the colours of the entire application together.
|
||||
|
||||
All the available variables containing the set of palettes for the application can be found in the `node_modules/@alfresco/adf-core/_theming.css` file. In that file you can find:
|
||||
|
||||
@@ -29,7 +30,7 @@ All the available variables containing the set of palettes for the application c
|
||||
- `$alfresco-accent-purple`
|
||||
- `$alfresco-accent-orange`
|
||||
|
||||
Check the `_theming.css` file to see the latest changes and how the variable are structured and defined in practice.
|
||||
Check the `_theming.css` file to see the latest changes and how the variables are structured and defined.
|
||||
|
||||
## Changing the palette of your application
|
||||
|
||||
@@ -37,11 +38,11 @@ As an example, let's change the set of palettes for the primary colours. In the
|
||||
|
||||
$primary: mat-palette($alfresco-ecm-blue);
|
||||
|
||||
Once done, save the `custom-style.scss` file and you will see the application refreshed with different colours. That's all.
|
||||
Once done, save the `custom-style.scss` file and you will see the application refreshed with different colours. That's all there is to it.
|
||||
|
||||
## Developing your own palette
|
||||
|
||||
In some cases you might want to do something more "customised", and you might want to choose your preferred colours for your application. In this case you simply need to develop your own palette into a local variable and use it as primary, accent or warn.
|
||||
In some cases you might want to do something more "customized", and you might want to choose your preferred colours for your application. In this case you simply need to develop your own palette in a local variable and use it as the primary, accent or warn palette.
|
||||
|
||||
As an example, let's edit the `src/custom-style.scss` file adding the following source code immediately before the definition of the `$primary` variable.
|
||||
|
||||
@@ -78,10 +79,10 @@ As an example, let's edit the `src/custom-style.scss` file adding the following
|
||||
)
|
||||
);
|
||||
|
||||
Once done replace the `$primary` definition as follows and save the `custom-style.scss` file.
|
||||
When you have done this, replace the `$primary` definition as follows and save the `custom-style.scss` file:
|
||||
|
||||
$primary: mat-palette($my-own-brown);
|
||||
|
||||
After few seconds you will see the application refreshing with different colours in the upper menu. In the following screenshot you can see how the new palette looks like.
|
||||
After a few seconds you will see the application refreshing with different colours in the upper menu. In the following screenshot you can see how the new palette looks:
|
||||
|
||||
|
||||
|
||||
@@ -1,99 +1,106 @@
|
||||
---
|
||||
Level: Advanced
|
||||
---
|
||||
|
||||
# Content metadata component
|
||||
|
||||
In this tutorial you will learn how to work with the [`ContentMetadataComponent`](https://alfresco.github.io/adf-component-catalog/components/ContentMetadataComponent.html), used to render the standard and custom metadata of a generic content (called *node*) stored into Alfresco Content Services. With the usual approach "learning by doing", you will see here some practical examples you might find useful in your uses cases. As a starting point, we are going to use and customise the [Alfresco Content App](https://github.com/Alfresco/alfresco-content-app).
|
||||
In this tutorial you will learn how to work with the [`ContentMetadataComponent`](https://alfresco.github.io/adf-component-catalog/components/ContentMetadataComponent.html). This component is used to render the standard and custom metadata of generic content item (called a *node*) stored in Alfresco Content Services. With the usual approach "learning by doing", you will see here some practical examples you might find useful in your own applicatioin. As a starting point, we will use and customize the [Alfresco Content App](https://github.com/Alfresco/alfresco-content-app).
|
||||
|
||||
## About the `ContentMetadataComponent`
|
||||
|
||||
As described in the [`ContentMetadataComponent`](https://alfresco.github.io/adf-component-catalog/components/ContentMetadataComponent.html) documentation, the `adf-content-metadata-card` tag admits some useful attributes, included the `preset` one, used to point to a collection of aspects/properties to render.
|
||||
As described in the [`ContentMetadataComponent`](https://alfresco.github.io/adf-component-catalog/components/ContentMetadataComponent.html) documentation, the `adf-content-metadata-card` tag has some useful attributes, included the `preset` attribute, which is used to point to a collection of aspects/properties to render.
|
||||
|
||||
In the following example you can see the `preset` value requesting to render all the available aspects/properties.
|
||||
Below, you can see the `preset` value requesting to render all the available aspects/properties:
|
||||
|
||||
```
|
||||
```html
|
||||
<adf-content-metadata-card
|
||||
[node]="..."
|
||||
[preset]="'*'">
|
||||
</adf-content-metadata-card>
|
||||
```
|
||||
|
||||
In the following example you can see the `preset` value requesting to render all the available aspects/properties related to a specific configuration, named `custom`.
|
||||
As another example, you can see the `preset` value requesting to render all the available aspects/properties related to a specific configuration, named `custom`:
|
||||
|
||||
```
|
||||
```html
|
||||
<adf-content-metadata-card
|
||||
[node]="..."
|
||||
[preset]="'custom'">
|
||||
</adf-content-metadata-card>
|
||||
```
|
||||
|
||||
All the `preset` configurations are defined in one single configuration's file named `app.config.json`, stored into the `src` folder of the project. The `app.config.json` file contains all the configurations of the ADF application, included a section named `content-metadata`, used to store the `presets`. In the following JSON you can find an example of configuration for the `present` named `custom`.
|
||||
All the `preset` configurations are defined in one single configuration file named `app.config.json`, stored in the `src` folder of the project. The `app.config.json` file contains all the configurations of the ADF application, including a section named `content-metadata`, which is used to store the `presets`. The following JSON excerpt gives an example of configuration for the `preset` named `custom`:
|
||||
|
||||
"content-metadata": {
|
||||
"presets": {
|
||||
"custom": [
|
||||
{
|
||||
"title": "APP.CONTENT_METADATA.EXIF_GROUP_TITLE",
|
||||
"items": [
|
||||
{
|
||||
"aspect": "exif:exif",
|
||||
"properties": [
|
||||
"exif:pixelXDimension",
|
||||
"exif:pixelYDimension",
|
||||
...
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
```json
|
||||
"content-metadata": {
|
||||
"presets": {
|
||||
"custom": [
|
||||
{
|
||||
"title": "APP.CONTENT_METADATA.EXIF_GROUP_TITLE",
|
||||
"items": [
|
||||
{
|
||||
"aspect": "exif:exif",
|
||||
"properties": [
|
||||
"exif:pixelXDimension",
|
||||
"exif:pixelYDimension",
|
||||
...
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
```
|
||||
|
||||
This configuration is going to show all the listed properties `exif:*` in a group titled with the value of the variable `APP.CONTENT_METADATA.EXIF_GROUP_TITLE` for the aspect `exif:exif`. Since this aspect is not related to the related node, the component will simply ignore the rendering and nothing will be displayed for these properties. In other words: the aspects to be displayed are calculated as an intersection of the preset's aspects and the aspects related to the node.
|
||||
This configuration will show all the listed properties prefixed with `exif:*` in a group titled with the value of the variable `APP.CONTENT_METADATA.EXIF_GROUP_TITLE` for the aspect `exif:exif`. Since this aspect is not related to the node, the component will simply ignore the rendering and nothing will be displayed for these properties. In other words: the aspects to be displayed are calculated as an intersection of the preset's aspects and the aspects related to the node.
|
||||
|
||||
## Adding and using a new `preset` configuration
|
||||
|
||||
In this example we are going to add a new preset configuration and see how it looks like in the user interface.
|
||||
In this example we will add a new preset configuration and see how it looks in the user interface.
|
||||
|
||||
### Adding a new `preset` configuration
|
||||
|
||||
To add a new `preset` configuration, edit the `src/app.config.json` file and point to the `content-metadata` section. Once done, append the following JSON to the `presets` content and save the file.
|
||||
To add a new `preset` configuration, edit the `src/app.config.json` file and locate the `content-metadata` section. Then, append the following JSON to the `presets` content and save the file:
|
||||
|
||||
...,
|
||||
"content-metadata": {
|
||||
"presets": {
|
||||
"custom": [...],
|
||||
"my-preset": [
|
||||
{
|
||||
"title": "This is my preset",
|
||||
"items": [
|
||||
{
|
||||
"aspect": "st:siteContainer",
|
||||
"properties": ["*"]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
```json
|
||||
...,
|
||||
"content-metadata": {
|
||||
"presets": {
|
||||
"custom": [...],
|
||||
"my-preset": [
|
||||
{
|
||||
"title": "This is my preset",
|
||||
"items": [
|
||||
{
|
||||
"aspect": "st:siteContainer",
|
||||
"properties": ["*"]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
```
|
||||
|
||||
**Note:** As alternative to `"properties": ["*"]` that indicates all the properties of the `st:siteContainer` aspect, you can use `"properties": ["st:componentId"]` that will render one property only.
|
||||
**Note:** As an alternative to `"properties": ["*"]` (which matches all the properties of the `st:siteContainer` aspect), you can use `"properties": ["st:componentId"]`, which will render one property only.
|
||||
|
||||
### Using the `my-preset` configuration
|
||||
|
||||
Now that the `my-preset` configuration is defined, let's use it into a view of the ADF application. As an example, let's edit the files view, stored into the `src/app/files` folder. More in detail, let's change the `files.component.html` file as follow.
|
||||
Now that the `my-preset` configuration is defined, let's use it in a view of the ADF application. As an example, let's edit the files view, stored in the `src/app/files` folder. Specifically, let's change the `files.component.html` file as follows:
|
||||
|
||||
<adf-content-metadata-card
|
||||
...
|
||||
[preset]="'my-preset'">
|
||||
</adf-content-metadata-card>
|
||||
```html
|
||||
<adf-content-metadata-card
|
||||
...
|
||||
[preset]="'my-preset'">
|
||||
</adf-content-metadata-card>
|
||||
```
|
||||
|
||||
### Viewing the result
|
||||
|
||||
After saving the html file, open the ADF app into a browser and dive into the `Personal Files > Sites > swsdp` folder of the Alfresco's repository. Once there, select the `documentLibrary` folder (one click only) and click on the view details icon (the `i` on the top right). Scrolling down the metadata tab on the right, click on the `More information` item at the bottom. Once clicked, you will see two different groups: `Properties` (already there by default) and `This is my preset`. Click on `This is my preset` to show the properties related.
|
||||
After saving the html file, open the ADF app in a browser and dive into the `Personal Files > Sites > swsdp` folder of the Alfresco's repository. Once there, select the `documentLibrary` folder (one click only) and click on the view details icon (the `i` on the top right). Scrolling down the metadata tab on the right, click on the `More information` item at the bottom. Once clicked, you will see two different groups: `Properties` (already there by default) and `This is my preset`. Click on `This is my preset` to show the properties related.
|
||||
|
||||
In the following screenshot you can see how the result should look like.
|
||||
In the following screenshot you can see how the result should look:
|
||||
|
||||
|
||||
|
||||
As an example, double click on the `documentLibrary` folder and select (with one click) the `Presentations` folder. You should see disappearing the `This is my preset` group from the metadata panel, because the node doesn't have the `st:siteContainer` aspect.
|
||||
To check it out, double click on the `documentLibrary` folder and select (with one click) the `Presentations` folder. You should see the `This is my preset` group disappear from the metadata panel, because the node doesn't have the `st:siteContainer` aspect.
|
||||
|
||||
@@ -4,10 +4,7 @@ Level: Basic
|
||||
|
||||
# Creating your Alfresco JavaScript application
|
||||
|
||||
In this tutorial you will learn how to create an application in JavaScript from scratch to
|
||||
interact with Alfresco. This is a "getting started" task that should enable you to start
|
||||
developing your own JavaScript application on top of Alfresco Content Services or Alfresco
|
||||
Process Services.
|
||||
In this tutorial you will learn how to create an application in JavaScript from scratch to interact with Alfresco. This is a "getting started" task that should enable you to start developing your own JavaScript application on top of Alfresco Content Services or Alfresco Process Services.
|
||||
|
||||
The tutorial uses Alfresco Content Services for demonstration purposes, but development on
|
||||
top of Alfresco Process Services follows exactly the same principles.
|
||||
|
||||
@@ -1,23 +1,25 @@
|
||||
---
|
||||
Level: Beginner
|
||||
---
|
||||
## Preparing the development environment
|
||||
In this content is shared all the prerequisites valid for all the tutorials and descriptions of the entire documentation. This content contains the development environment description, along with the details of the suggested versions for each tools, library or module.
|
||||
|
||||
# Preparing the development environment
|
||||
|
||||
Here you will find the prerequisites for all the tutorials and descriptions of the entire documentation. This document contains the development environment description, along with the details of the suggested versions for each tool, library and module.
|
||||
|
||||
## Node.js
|
||||
|
||||
[Node.js](https://nodejs.org) is a JavaScript runtime built using an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js uses [npm](https://www.npmjs.com/) as public registry and a package system.
|
||||
[Node.js](https://nodejs.org) is a JavaScript runtime built using an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js uses [npm](https://www.npmjs.com/) as a public registry and package system.
|
||||
|
||||
You need the latest `node.js` of either the `8.x` or `9.x` branch.
|
||||
You need the latest `node.js` from either the `8.x` or `9.x` branch.
|
||||
To check the version, run the following command in a terminal.
|
||||
|
||||
node -v
|
||||
|
||||
## Angular CLI
|
||||
|
||||
The [Angular CLI](https://cli.angular.io/) is a tool to initialise, develop, scaffold and maintain [Angular](https://angular.io/) applications
|
||||
[Angular CLI](https://cli.angular.io/) is a tool to initialize, develop, scaffold and maintain [Angular](https://angular.io/) applications
|
||||
|
||||
Earlier and later versions have issues around `@angular/devkit-core`. 1.6.6 seem to be the stable choice currently.
|
||||
Version 1.6.6 seems to be the most stable version currently. Earlier and later versions have issues regarding `@angular/devkit-core`.
|
||||
|
||||
If you already have `Angular CLI` installed check the version by running:
|
||||
|
||||
@@ -29,7 +31,7 @@ To globally install `Angular CLI` version globally 1.6.6 run:
|
||||
|
||||
## Code Editor
|
||||
|
||||
We recommend [Visual Studio Code](http://code.visualstudio.com) - it's a free, lightweight and *very* powerful tool from Microsoft that works great with Angular development.
|
||||
We recommend [Visual Studio Code](http://code.visualstudio.com) - it's a free, lightweight and *very* powerful tool from Microsoft that works well for Angular development.
|
||||
|
||||
## Alfresco Content Services (optional)
|
||||
|
||||
@@ -43,28 +45,36 @@ Please note that you might want to deploy and use Alfresco Content Services Ente
|
||||
|
||||
If you want to develop on top of the [Alfresco Process Services](https://www.alfresco.com/platform/process-services-bpm), you might want to install it as described in the [official documentation](https://docs.alfresco.com/process-services1.8/topics/installing_process_services.html).
|
||||
|
||||
Please note that ADF applications are compliant with [Alfresco Process Services powered by Activiti](https://www.alfresco.com/platform/process-services-bpm) and not with [Activiti](https://www.activiti.org/) yet.
|
||||
Please note that ADF applications are compatible with [Alfresco Process Services powered by Activiti](https://www.alfresco.com/platform/process-services-bpm) and not with [Activiti](https://www.activiti.org/) yet.
|
||||
|
||||
## ADF Yeoman generator (optional)
|
||||
|
||||
You might want to ensure that you have `Yeoman` installed by running `yo --version`. If this is not in your system make sure you run:
|
||||
You can check if you have `Yeoman` installed by running `yo --version`. If this is not in your system then you can install it by running:
|
||||
|
||||
sudo npm install -g yo
|
||||
|
||||
If you have installed it previously, you might want to make sure you uninstall them before. In ADF 2.0 we renamed the generator packages and the update is highly suggested.
|
||||
(The `sudo` command is not required on Windows but you may need to ensure you are running a command
|
||||
prompt with Administrator privileges).
|
||||
|
||||
Uninstall previous versions with:
|
||||
|
||||
sudo npm uninstall generator-alfresco-adf-app
|
||||
sudo npm uninstall generator-ng2-alfresco-app
|
||||
|
||||
Install the latest version of the `generator-alfresco-adf-app` using the following command.
|
||||
|
||||
sudo npm install -g generator-alfresco-adf-app
|
||||
|
||||
If you have an earlier version of the generator installed then it usually a good idea to uninstall it before reinstalling the latest version. This is especially true if you installed the generator packages before ADF 2.0 because the packages were renamed for this version.
|
||||
|
||||
Uninstall previous versions with:
|
||||
|
||||
sudo npm uninstall generator-alfresco-adf-app
|
||||
|
||||
...for versions after ADF 2.0 and:
|
||||
|
||||
sudo npm uninstall generator-ng2-alfresco-app
|
||||
|
||||
...for versions before ADF 2.0.
|
||||
|
||||
## Alfresco Example Content Application (optional)
|
||||
|
||||
In some tutorials your might be required to use the [Alfresco Example Content Application](https://github.com/Alfresco/alfresco-content-app) available into a public repository on GitHub named [`alfresco-content-app`](https://github.com/Alfresco/alfresco-content-app). The Alfresco Example Content Application is an example application and it is used in the tutorial as a starting point to customise the behaviour and show the development, avoiding to loose time in building apps from scratch.
|
||||
In some tutorials your might be required to use the [Alfresco Example Content Application](https://github.com/Alfresco/alfresco-content-app) available in a public repository on GitHub named [`alfresco-content-app`](https://github.com/Alfresco/alfresco-content-app). The Alfresco Example Content Application is an example application and it is used in the tutorial as a starting point to customise the behaviour and show the development, avoiding to loose time in building apps from scratch.
|
||||
|
||||
The Alfresco Example Content Application requires an instance of Alfresco Content Services up and running, to work properly. If you don't have it already, follow the instructions above in the `Alfresco Content Services (optional)` paragraph.
|
||||
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
# Working with the Nodes API Service
|
||||
|
||||
In this tutorial you will learn how to use the [`NodesApiService`](https://github.com/Alfresco/alfresco-ng2-components/blob/master/lib/core/services/nodes-api.service.ts). We have developed some practical examples to show you how to interact with an instance of Alfresco Content Services without using the REST endpoints directly. With this approach the `NodesApiService` is used as an abstraction layer, defined by one of the services in the ADF Core
|
||||
library.
|
||||
In this tutorial you will learn how to use the [`NodesApiService`](https://github.com/Alfresco/alfresco-ng2-components/blob/master/lib/core/services/nodes-api.service.ts). We have developed some practical examples to show you how to interact with an instance of Alfresco Content Services without using the REST endpoints directly. With this approach the `NodesApiService` is used as an abstraction layer, defined by one of the services in the ADF Core library.
|
||||
|
||||
## Preparing the development environment
|
||||
|
||||
|
||||
@@ -1,9 +1,6 @@
|
||||
# Working with Nodes using the JS API
|
||||
|
||||
In this tutorial you will learn how to use the
|
||||
[`AlfrescoCoreRestApi`](https://github.com/Alfresco/alfresco-js-api/tree/master/src/alfresco-core-rest-api)
|
||||
We have developed some practical examples to show you how to interact with an instance of
|
||||
Alfresco Content Services, without using the REST endpoints directly. With this approach the `AlfrescoCoreRestApi` is used as an abstraction layer, defining one of the core services of the [`alfresco-api-js`](https://github.com/Alfresco/alfresco-js-api) library.
|
||||
In this tutorial you will learn how to use the [`AlfrescoCoreRestApi`](https://github.com/Alfresco/alfresco-js-api/tree/master/src/alfresco-core-rest-api). We have developed some practical examples to show you how to interact with an instance of Alfresco Content Services without using the REST endpoints directly. With this approach the `AlfrescoCoreRestApi` is used as an abstraction layer, defining one of the core services of the [`alfresco-api-js`](https://github.com/Alfresco/alfresco-js-api) library.
|
||||
|
||||
## Preparing the development environment
|
||||
|
||||
|
||||
Reference in New Issue
Block a user