inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-3323] Fixed broken links in doc files (#3662)

Browse Source 
* [ADF-3323] Fixed URL path to Typescript source files

* [ADF-3323] Fixed and checked broken links caused by previous bug
This commit is contained in:
Andy Stark
2018-08-07 16:00:58 +01:00
committed by Eugenio Romano
parent fd5978e81b
commit e03f3a1a6b
125 changed files with 845 additions and 829 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/tutorials/README.md
View File

@@ -19,10 +19,10 @@ The tutorials are graded as follows:
| [**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. |
| [**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](../core/login.component.md). |
| [**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 the Nodes API Service**](working-with-nodes-api-service.md) | | In this tutorial you will learn how to use the [`NodesApiService`](../core/nodes-api.service.md). 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`](../core/nodes-api.service.md) 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). |
| [**Content metadata component**](content-metadata-component.md) | Advanced | In this tutorial you will learn how to work with the [`ContentMetadataComponent`](../content-services/content-metadata.component.md). 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). |

6
docs/tutorials/content-metadata-component.md
View File

@@ -4,11 +4,11 @@ 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). 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).
In this tutorial you will learn how to work with the [`ContentMetadataComponent`](../content-services/content-metadata.component.md). 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 has some useful attributes, included the `preset` attribute, which is used to point to a collection of aspects/properties to render.
As described in the [`ContentMetadataComponent`](../content-services/content-metadata.component.md) 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.
Below, you can see the `preset` value requesting to render all the available aspects/properties:
@@ -86,7 +86,7 @@ To add a new `preset` configuration, edit the `src/app.config.json` file and loc
### Using the `my-preset` configuration
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:
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`](../../demo-shell/src/app/components/files/files.component.ts)`.html` file as follows:
```html
<adf-content-metadata-card

5
docs/tutorials/creating-the-app-using-yeoman.md
View File

@@ -1,14 +1,17 @@
---
Level: Basic
---
# Creating your ADF application using Yeoman
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.
## Prerequisites
Before any further task, be sure you executed the optional section described in [the preparation of the development environment](./preparing-environment.md), dedicated to the installation of the ADF Yeoman generator. This is a requested prerequisite to complete this tutorial with success.
## Creating the ADF application
The creation of a brand new application is straightforward using the [Yeoman generator](http://yeoman.io/). Open a terminal and execute the following command.
yo alfresco-adf-app
@@ -21,7 +24,7 @@ You can select one of the three following blueprints.
**Process Services**
This will generate an application for Alfresco Process Services. It mainly contains the following components: Login, App List, Task List, Form and Start Process.
This will generate an application for Alfresco Process Services. It mainly contains the following components: Login, App List, Task List, [`Form`](../../lib/process-services/task-list/models/form.model.ts) and Start Process.
**Content Services**

3
docs/tutorials/customising-login.md
View File

@@ -23,7 +23,7 @@ you can customize the `Login` component can be customised via CSS, HTML and Type
example, we will customize the header (as described also in the
[technical documentation](https://alfresco.github.io/adf-component-catalog/components/LoginComponent.html)).
Open the `login.component.html` file and change the content to match the following source code:
Open the [`login.component`](../core/login.component.md)`.html` file and change the content to match the following source code:
```html
<adf-login ...>
@@ -41,4 +41,3 @@ As mentioned earlier, this is a very basic example and the `Login` component can
much more extensively than this. For a complete and detailed description, full of examples, check the
[technical documentation about the component](https://alfresco.github.io/adf-component-catalog/components/LoginComponent.html).
This describes every customization available for the `Login` component.

16
docs/tutorials/new-component.md
View File

@@ -4,7 +4,7 @@ Level: Basic
# Adding a new component
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.
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.
## Creating a component
@@ -25,7 +25,7 @@ Once the component is created, you can use the element
anywhere within the HTML file of another component to render the content of `my-first-component`.
As an example, add `<app-my-first-component></app-my-first-component>` at the top of the
`app.component.html` file in the `src` folder, and run the application again. In the browser you will
[`app.component`](../../demo-shell/src/app/app.component.ts)`.html` file in the `src` folder, and run the application again. In the browser you will
shortly see the text "my-first-component works!", as a placeholder to show where the component is
rendered in the layout.
@@ -35,12 +35,12 @@ By default the new component is created in the `src/app` path and everything is
same name as the component itself. Here, you should find a folder named `my-first-component` has been added
to `src/app`, with the following contents:
- `my-first-component.component.scss` containing the CSS used by the component, initially empty.
- `my-first-component.component.html` containing the HTML used to render the component. This file is
created with a very basic placeholder message that displays the name of the component within a `p` tag.
- `my-first-component.component.spec.ts` containing the unit tests for the component.
- `my-first-component.component.ts` containing the `MyFirstComponentComponent` class that implements the
business logic in typescript.
- `my-first-component.component.scss` containing the CSS used by the component, initially empty.
- `my-first-component.component.html` containing the HTML used to render the component. This file is
created with a very basic placeholder message that displays the name of the component within a `p` tag.
- `my-first-component.component.spec.ts` containing the unit tests for the component.
- `my-first-component.component.ts` containing the `MyFirstComponentComponent` class that implements the
business logic in typescript.
You must declare or import the component in one or more modules in order to use it. In this example the
`app.module.ts` file stored in `src/app` contains the following code:

32
docs/tutorials/using-components.md
View File

@@ -4,22 +4,22 @@ Level: Beginner
# Using components
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.
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](../core/login.component.md).
The ADF documentation is always a good starting point when you plan to use a component. In general,
there are three different ways to use, extend and configure an ADF component:
1. Configuration properties.
2. Event listeners.
3. Content projection / HTML extensions.
1. Configuration properties.
2. Event listeners.
3. Content projection / HTML extensions.
## Configuration properties
Angular components can easily be configured via properties in the HTML template. In this example we will
work with the "Remember me" checkbox and "Need Help?" and "Register" links in the footer of the Login component.
work with the "Remember me" checkbox and "Need Help?" and "Register" links in the footer of the [Login component](../core/login.component.md).
To prepare for the task, make sure you have your ADF application up and running by executing `npm start`
in a terminal from the root folder of the project. Access the login page using your browser and edit the `login.component.html` file stored in the `src/app/.../login` folder. The content of the `login.component.html` file should look like the following:
in a terminal from the root folder of the project. Access the login page using your browser and edit the [`login.component`](../core/login.component.md)`.html` file stored in the `src/app/.../login` folder. The content of the [`login.component`](../core/login.component.md)`.html` file should look like the following:
```html
<adf-login
@@ -54,10 +54,10 @@ new property values.
**Note:** The two new properties are specified with `[]` around them. There are three ways to configure a
property:
1. `[property]=""` This sets the property using an expression or another property from the Typescript
controller. Use this syntax for boolean expressions or variables.
2. `property=""` This value will be passed as raw text.
3. `[(property)]` This is called *banana in a box* and is used for two way binding.
1. `[property]=""` This sets the property using an expression or another property from the Typescript
controller. Use this syntax for boolean expressions or variables.
2. `property=""` This value will be passed as raw text.
3. `[(property)]` This is called _banana in a box_ and is used for two way binding.
## Event listeners
@@ -70,7 +70,7 @@ we can see that it emits three events: `success`, `error` and `executeSubmit`.
We can subscribe to these events and have our custom code executed when they are emitted. We will
hook into the `executeSubmit` event and show a simple `alert()` when the form is submitted.
Back in the `login.component.html` file, add `(success)="mySuccessMethod($event)"` to the `<adf-login/>` component (the position is not relevant).
Back in the [`login.component`](../core/login.component.md)`.html` file, add `(success)="mySuccessMethod($event)"` to the `<adf-login/>` component (the position is not relevant).
```html
<adf-login
@@ -81,7 +81,7 @@ Back in the `login.component.html` file, add `(success)="mySuccessMethod($event
```
Next, implement `myExecuteSubmitMethod` in the Typescript class that defines the component. Edit
the `login.component.ts` file stored in the same `src/app/.../login` folder and add the implementation
the [`login.component`](../core/login.component.md)`.ts` file stored in the same `src/app/.../login` folder and add the implementation
of `myExecuteSubmitMethod` as follows:
```ts
@@ -100,7 +100,7 @@ export class LoginComponent {
}
```
After saving both files, the login component will be refreshed in your browser. Enter random values for
After saving both files, the [login component](../core/login.component.md) will be refreshed in your browser. Enter random values for
the username and password and you should see the alert after pressing the submit button. Looking in the
console of the browser, you'll see the `event` data containing all the details of the form.
@@ -109,7 +109,7 @@ described in the documentation.
## Content projection / HTML extensions
The final way to configure or extend a component is through an approach called *Content projection*. This
The final way to configure or extend a component is through an approach called _Content projection_. This
involves adding placeholders to a component template, allowing developers to "project" their own code or
components into pre-defined locations within the component.
@@ -126,7 +126,7 @@ In regular HTML, elements can be nested. For example:
We can use the same approach with ADF components to inject custom code or entire components into another
component. The documentation shows which targets are available. For example, the `<adf-login/>` component
supports two targets: `login-header` and `login-footer`. Let's add a simple "Hello World" message in the
footer. Edit the template `login.component.html` and add a new tag *inside* the `<adf-login/>` tag:
footer. Edit the template [`login.component`](../core/login.component.md)`.html` and add a new tag _inside_ the `<adf-login/>` tag:
```html
<adf-login
@@ -140,7 +140,7 @@ footer. Edit the template `login.component.html` and add a new tag *inside* the
</adf-login>
```
Make sure that you place the `<login-footer/>` tag *inside* the `<adf-login/>` tag. Inside the
Make sure that you place the `<login-footer/>` tag _inside_ the `<adf-login/>` tag. Inside the
`<login-footer/>` or `<login-header/>` tags you can put anything you want, as long as you wrap it inside
an `<ng-template/>` tag. You can also add custom or 3rd party components.

33
docs/tutorials/working-with-data-table.md
View File

@@ -21,7 +21,7 @@ is well documented [here](https://alfresco.github.io/alfresco-content-app/#/), a
However, if you prefer to create a brand new ADF application from scratch then you should still be able
to follow the tutorial without difficulty.
For this tutorial, the endpoint used to populate the Data Table component is the
For this tutorial, the endpoint used to populate the [Data Table component](../../lib/core/datatable/components/datatable/datatable.component.ts) is the
[`/people` service](https://api-explorer.alfresco.com/api-explorer/#!/people/listPeople) which lists
all users available in an Alfresco Content Services instance. The `/people` service is suitable for the
purpose of this tutorial because it is available by default in the Alfresco Content Services REST API.
@@ -101,7 +101,7 @@ the `src/app/mydatatable/mydatatable.component.ts` file and add the following im
import { ObjectDataTableAdapter } from '@alfresco/adf-core';
```
A DataTable needs an instance of `ObjectDataTableAdapter` to be configured as the data source. Add
A DataTable needs an instance of [`ObjectDataTableAdapter`](../../lib/core/datatable/data/object-datatable-adapter.ts) to be configured as the data source. Add
the source code below to the `mydatatable` component, just before the constructor:
```ts
@@ -174,7 +174,7 @@ context menus, actions and keyboard navigation.
As a simple example, we'll add a `click` event to display an alert when a row is clicked. Open
`src/app/mydatatable/mydatatable.component.html` and add the following:
```html
<adf-datatable
(rowClick)="onRowClick($event)"
@@ -201,19 +201,19 @@ Let's dig a bit deeper into the different options for rendering columns within t
[Data Column component](https://alfresco.github.io/adf-component-catalog/components/DataColumnComponent.html)
is quite in-depth and has lots of examples. We highly recommend checking it out.
From the documentation we can see that the Data Column component has quite a few properties but the
From the documentation we can see that the [Data Column component](../core/data-column.component.md) has quite a few properties but the
most important ones are `key`, `type`, `sortable`, `title` and `class`.
- `key` is the name of the corresponding property in the `ObjectDataTableAdapter` object.
- `type` indicates how to render. By default it will take the `text` from the matching key in the data,
but other modes are also available:
- `image` will take a URI for a Material Icon or a URL for any image and display it.
- `date` will format a date/datetime string. Use the `format` property to override it and define a custom time format.
- `fileSize` will convert into kb/mb/gb as needed.
- `location` assumes the value is a nodeId for ACS and will display the path.
- `sortable` toggles whether or not the column can be sorted.
- `title` sets the column title in the table header.
- `class` allows you to set CSS classes for the column. Use `full-width` for the column to take as much width as it can while still leaving room for the remaining columns.
- `key` is the name of the corresponding property in the [`ObjectDataTableAdapter`](../../lib/core/datatable/data/object-datatable-adapter.ts) object.
- `type` indicates how to render. By default it will take the `text` from the matching key in the data,
but other modes are also available:
\- `image` will take a URI for a Material Icon or a URL for any image and display it.
\- `date` will format a date/datetime string. Use the `format` property to override it and define a custom time format.
\- `fileSize` will convert into kb/mb/gb as needed.
\- `location` assumes the value is a nodeId for ACS and will display the path.
- `sortable` toggles whether or not the column can be sorted.
- `title` sets the column title in the table header.
- `class` allows you to set CSS classes for the column. Use `full-width` for the column to take as much width as it can while still leaving room for the remaining columns.
## Content projection
@@ -277,7 +277,7 @@ to integrate an external API (in this example the
[`/people` service](https://api-explorer.alfresco.com/api-explorer/#!/people/listPeople)
that lists all the users available in an Alfresco Content Services instance).
As explained above, you can do this by populating the `ObjectDataTableAdapter` object that acts as
As explained above, you can do this by populating the [`ObjectDataTableAdapter`](../../lib/core/datatable/data/object-datatable-adapter.ts) object that acts as
the data source of the `DataTable` component. Open the `src/app/mydatatable/mydatatable.component.ts`
file and replace the content with the following:
@@ -334,7 +334,7 @@ As you can see, the major changes are in the constructor where the external API
be in JSON but it could be in any format).
After saving the file, you should see something like the following in the browser:
![data_table_dataSource](../docassets/images/data_table_dataSource.png)
## Adding an action
@@ -414,4 +414,3 @@ After saving this, the application will be updated automatically and your browse
like the following when the `Greetings` action is selected for a row:
![data_table_dataSource](../docassets/images/data_table_action2.png)

52
docs/tutorials/working-with-nodes-api-service.md
View File

@@ -1,13 +1,27 @@
# 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`](../core/nodes-api.service.md). 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`](../core/nodes-api.service.md) is used as an abstraction layer, defined by one of the services in the ADF Core library.
## Contents
- [Preparing the development environment](#preparing-the-development-environment)
- [Basic examples of usage](#basic-examples-of-usage)
- [About the ](#about-the-nodesapiservice)
- [Observables](#observables)
- [MinimalNodeEntryEntity](#minimalnodeentryentity)
- [NodePaging](#nodepaging)
- [Retrieving info and metadata from a node](#retrieving-info-and-metadata-from-a-node)
- [Retrieving the node's children](#retrieving-the-nodes-children)
- [Creating and deleting a subfolder](#creating-and-deleting-a-subfolder)
- [Creating a subfolder](#creating-a-subfolder)
- [Deleting a folder](#deleting-a-folder)
## Preparing the development environment
To focus the description on the `NodesApiService`, we will develop on top of the
To focus the description on the [`NodesApiService`](../core/nodes-api.service.md), we will develop on top of the
[Alfresco Example Content Application](https://github.com/Alfresco/alfresco-content-app).
If you don't have it already installed in your development environment then see the
*how-to* description in
_how-to_ description in
[preparation of the development environment](./preparing-environment.md).
When you have the Alfresco Example Content Application up and running, edit the `FileComponent`
@@ -35,24 +49,24 @@ myOnNodeDoubleClick(nodeId) {
}
```
This will change the user experience when you click on a content node (but *not* a folder):
This will change the user experience when you click on a content node (but _not_ a folder):
in the browser's console you will see something like the following screenshot, instead of
the preview of the content:
![nodesapiservices_myonnodedoubleclick](../docassets/images/nodesapiservices_myonnodedoubleclick.png)
The Alfresco Example Content app is now set up to demonstrate the usage of the `NodesApiService`.
The Alfresco Example Content app is now set up to demonstrate the usage of the [`NodesApiService`](../core/nodes-api.service.md).
## Basic examples of usage
## Basic examples of usage
For a first look at the `NodesApiService`, let's check the `FileComponent` component stored in
For a first look at the [`NodesApiService`](../core/nodes-api.service.md), let's check the `FileComponent` component stored in
`src/app/components/files/files.component.ts`. In the source code, you can see the `nodesApi`
property that represents the `NodesApiService` in the `FilesComponent`. See the `fetchNode` and
property that represents the [`NodesApiService`](../core/nodes-api.service.md) in the [`FilesComponent`](../../demo-shell/src/app/components/files/files.component.ts). See the `fetchNode` and
`fetchNodes` methods for some very basic examples.
## About the `NodesApiService`
## About the NodesApiService
Before going further, let's introduce the `NodesApiService` class. For further details about the
Before going further, let's introduce the [`NodesApiService`](../core/nodes-api.service.md) class. For further details about the
implementation, see the
[component catalog page](https://alfresco.github.io/adf-component-catalog/injectables/NodesApiService.html).
As you can see, the available methods are easy to understand and they should be all you need to
@@ -60,12 +74,12 @@ manage the nodes of your content repository.
### Observables
Almost all the methods return an [Observable](https://angular.io/guide/observables).
Almost all the methods return an [`Observable`](http://reactivex.io/documentation/observable.html).
Observables provide support for passing messages between publishers and subscribers in Angular
applications. Observables offer significant benefits over other techniques for event handling,
asynchronous programming, and handling multiple values.
The return values of the `NodesApiService` methods are managed in the usual way for Observables.
The return values of the [`NodesApiService`](../core/nodes-api.service.md) methods are managed in the usual way for Observables.
You "subscribe" to the asynchronous messaging using the following syntax:
```ts
@@ -77,20 +91,20 @@ this.nodesApi.getNode(nodeId).subscribe(
### MinimalNodeEntryEntity
All the methods that manage content nodes return an `Observable` of the `MinimalNodeEntryEntity`
class. `MinimalNodeEntryEntity` is used to represent the node's content. See the
All the methods that manage content nodes return an [`Observable`](http://reactivex.io/documentation/observable.html) of the [`MinimalNodeEntryEntity`](../content-services/document-library.model.md)
class. [`MinimalNodeEntryEntity`](../content-services/document-library.model.md) is used to represent the node's content. See the
[official documentation](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeMinimalEntry.md)
for further details.
### NodePaging
When a method returns a list of nodes rather than a single node, it usually returns an `Observable` of the `NodePaging` class. See the
[NodePaging](https://alfresco.github.io/adf-component-catalog/classes/NodePaging.html)
When a method returns a list of nodes rather than a single node, it usually returns an [`Observable`](http://reactivex.io/documentation/observable.html) of the [`NodePaging`](../../lib/content-services/document-list/models/document-library.model.ts) class. See the
[`NodePaging`](../../lib/content-services/document-list/models/document-library.model.ts)
docs for further details.
## Retrieving info and metadata from a node
As a first example of the usage of the `NodesApiService`, let's retrieve the properties of a content node using its identifier. Edit the `myOnNodeDoubleClick` method in `src/app/components/files/files.component.ts`, as shown below:
As a first example of the usage of the [`NodesApiService`](../core/nodes-api.service.md), let's retrieve the properties of a content node using its identifier. Edit the `myOnNodeDoubleClick` method in `src/app/components/files/files.component.ts`, as shown below:
```ts
myOnNodeDoubleClick(nodeId) {
@@ -114,7 +128,7 @@ other visual component) then the principle is the same.
## Retrieving the node's children
Another common use of the `NodesApiService` is to retrieve a list of the children of a folder node.
Another common use of the [`NodesApiService`](../core/nodes-api.service.md) is to retrieve a list of the children of a folder node.
Edit `src/app/components/files/files.component.ts` again, changing the `onNodeDoubleClick` method
to match the source code below:
@@ -151,7 +165,7 @@ in the browser's console you will see something like the following screenshot:
## Creating and deleting a subfolder
The `NodesApiService` class is not just for retrieving data. You can also use it to manage a
The [`NodesApiService`](../core/nodes-api.service.md) class is not just for retrieving data. You can also use it to manage a
real CRUD of nodes (content and folders). In the following examples, you will see how to create
a subfolder of the double clicked folder and also how to delete it.