mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
Insights dependency and documentation improvements (#9815)
This commit is contained in:
Denys Vuika
GitHub
@@ -9,8 +9,6 @@ Github only: true
|
||||
| --- | --- | --- |
|
||||
| [**Prerequisites and the requirements**](creating-your-first-adf-application.md) | Basic | In this tutorial you are going to learn how to create a very basic (and almost “empty”) ADF-based application that you can start enriching with features, behaviors and customizations. The creation of this basic ADF-based application is possible through a scaffolding tool called [Yeoman]\(https://yeoman.io/ "https://yeoman.io/"), which makes this task very straightforward. |
|
||||
| [**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. |
|
||||
| [**Adding a new component**](new-component.md) | Basic | 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 | 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 ADF Components**](using-components.md) | Basic | In this tutorial, you will learn how to extend, use, and configure ADF Components. |
|
||||
| [**Basic theming**](basic-theming.md) | Beginner | In this tutorial you will see how to theme an ADF app by modifying the CSS. |
|
||||
| [**Working with a Data Table**](working-with-data-table.md) | Intermediate | In this tutorial you will learn how to populate a DataTable component. |
|
||||
|
||||
@@ -1,62 +0,0 @@
|
||||
---
|
||||
Title: Adding a new component
|
||||
Level: Basic
|
||||
---
|
||||
|
||||
# Adding a new component
|
||||
|
||||
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 of an application's layout.
|
||||
|
||||
## Creating a component
|
||||
|
||||
Starting from the root of your project, run the following command in a terminal:
|
||||
|
||||
ng generate component my-first-component
|
||||
|
||||
If you are adding the component to an application with more than one module, you might want to specify it using the `--module` parameter. For example use `--module app` to add the new component to the root app of your application.
|
||||
|
||||
## Using the component
|
||||
|
||||
Once the component is created, you can use the element
|
||||
|
||||
```html
|
||||
<app-my-first-component></app-my-first-component>
|
||||
```
|
||||
|
||||
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`](../../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.
|
||||
|
||||
## Anatomy of the component
|
||||
|
||||
By default the new component is created in the `src/app` path and everything is stored in a folder with the
|
||||
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.
|
||||
|
||||
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:
|
||||
|
||||
```ts
|
||||
import { MyFirstComponentComponent } from './my-first-component/my-first-component.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
...
|
||||
MyFirstComponentComponent
|
||||
],
|
||||
```
|
||||
|
||||
These is the most basic information you need to know about your component. Everything mentioned here is
|
||||
standard Angular code without anything specific to ADF applications.
|
||||
@@ -1,138 +0,0 @@
|
||||
---
|
||||
Title: Adding a new view
|
||||
Level: Beginner
|
||||
---
|
||||
|
||||
# Adding a new view
|
||||
|
||||
In this tutorial you will learn how to create a new view in your application and how to access it using a defined endpoint.
|
||||
|
||||
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*.
|
||||
|
||||
## Creating a view
|
||||
|
||||
In an Angular application, a view is implemented by a regular component. A view can use other views
|
||||
(ie, other components) but a view can also be used to implement the full layout of your application.
|
||||
This is the reason why creating a view is not necessarily the same task as creating a component.
|
||||
|
||||
To create a view, run the following command in a terminal from the root of your project:
|
||||
|
||||
ng generate component my-first-view
|
||||
|
||||
For further details about creating a component, refer to the tutorial [here](new-component.md).
|
||||
|
||||
## Routing the view
|
||||
|
||||
An Angular application has one singleton instance of the `Router` service that is used to match the browser's URL with the corresponding component to display. The `Router` service must be configured in a Typescript file with a syntax similar to the following source code.
|
||||
|
||||
```ts
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
const appRoutes: Routes = [
|
||||
{ path: 'path-in-the-app', component: ExistingComponent },
|
||||
{ path: '**', component: PageNotFoundComponent }
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forRoot(
|
||||
appRoutes,
|
||||
{ enableTracing: true } // <-- debugging purposes only.
|
||||
)
|
||||
// other imports here
|
||||
],
|
||||
...
|
||||
})
|
||||
```
|
||||
|
||||
To add the new view to the routing, change the `appRoutes` constant as follows:
|
||||
|
||||
```ts
|
||||
const appRoutes: Routes = [
|
||||
{ path: 'path-in-the-app', component: ExistingComponent },
|
||||
{ path: 'my-first-view', component: MyFirstViewComponent }, // <-- Add this!
|
||||
{ path: '**', component: PageNotFoundComponent }
|
||||
];
|
||||
```
|
||||
|
||||
And remember to import the component in the same file with the following syntax.
|
||||
|
||||
```ts
|
||||
import { MyFirstViewComponent } from './my-first-view/my-first-view.component';
|
||||
```
|
||||
|
||||
Be aware that the `Router` service can be declared in a file that can be stored in different places in the application's structure. Usually, the `Router` service is declared in a location close to the file containing
|
||||
the root module.
|
||||
|
||||
## Testing the view
|
||||
|
||||
To render the new view through the application and check the user experience, restart the application and open a browser at the following URL:
|
||||
|
||||
http://<ip_address>:<port>/my-first-view
|
||||
|
||||
The result should be a very simple page with the following content.
|
||||
|
||||
my-first-view works!
|
||||
|
||||
## View parameters (optional)
|
||||
|
||||
In most use cases, you will want to add parameters to the view's endpoint. To enable this, change the `appRoutes` constant as follows:
|
||||
|
||||
```ts
|
||||
const appRoutes: Routes = [
|
||||
{ path: 'path-in-the-app', component: ExistingComponent },
|
||||
{ path: 'my-first-view/:name', component: MyFirstViewComponent }, // <-- Change this!
|
||||
{ path: '**', component: PageNotFoundComponent }
|
||||
];
|
||||
```
|
||||
|
||||
Then open the Typescript controller for the `MyFirstViewComponent` stored in `src/app/my-first-view` (`my-first-view.component.ts`). You need to add a few things here:
|
||||
|
||||
1. We need to `import` and `inject` the router into the class.
|
||||
2. Subscribe to the router parameters and fetch the value.
|
||||
3. Unsubscribe to the router parameters.
|
||||
|
||||
While #3 isn't strictly required, it would eventually cause a memory leak in your application, so
|
||||
please remember to unsubscribe!
|
||||
|
||||
Modify the typescript controller `my-first-view.component.ts` to look like this:
|
||||
|
||||
```ts
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-my-first-view',
|
||||
templateUrl: './my-first-view.component.html',
|
||||
styleUrls: ['./my-first-view.component.scss']
|
||||
})
|
||||
export class MyFirstViewComponent implements OnInit {
|
||||
|
||||
private params: any;
|
||||
name: String;
|
||||
|
||||
constructor(private route: ActivatedRoute) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.params = this.route.params.subscribe(params => {
|
||||
this.name = params['name'];
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.params.unsubscribe();
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Next open the template `my-first-view.component.html` in the same folder and add the greeting as in
|
||||
the following source code.
|
||||
|
||||
```html
|
||||
<p>
|
||||
Hello {{ name }}
|
||||
</p>
|
||||
```
|
||||
|
||||
You can now navigate to `http://<ip_address>:<port>/my-first-view/sir` and see the nice message "Hello sir".
|
||||
|
||||
@@ -171,5 +171,3 @@ docs to find out how you can change the logo and background image!
|
||||
We have some tutorials for you to explore. Here are a few suggested ones to try next:
|
||||
|
||||
- [Basic theming](basic-theming.md)
|
||||
- [Create a new page](new-view.md)
|
||||
- [Adding a new component](new-component.md)
|
||||
|
||||
Reference in New Issue
Block a user