mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
New tutorial about: Working with DataTable. (#3199)
New tutorial about: Working with DataTable
This commit is contained in:
Francesco Corti
committed by
Eugenio Romano
Eugenio Romano
parent
782893838f
commit
0ff0573401
@@ -1,38 +1,112 @@
|
||||
---
|
||||
Level: Beginner
|
||||
---
|
||||
# Adding a new component
|
||||
# Adding a new view
|
||||
|
||||
By definition a *component* controls a patch of screen called a view. As an example, individual components define and control menus, tabs, forms, buttons and every simple or complex portion of layout of an application. In this tutorial you will learn how to create a component using [Angular CLI](https://cli.angular.io/). After the creation you will learn how to add it to an existing application.
|
||||
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 into your application and how to have access to it using a defined endpoint.
|
||||
|
||||
## Creating a component
|
||||
Starting from the root of your project, run the following command into a terminal.
|
||||
## Creating a view
|
||||
Into an Angular application, a view is implemented by a regular component. A view can use other views (so other components), but a view can be used to implement the full layout of your application. This is the reason why creating a view is the task than creating a component.
|
||||
|
||||
ng generate component my-first-component
|
||||
To create a view, run the following command into a terminal, starting from the root of your project.
|
||||
|
||||
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.
|
||||
ng generate component my-first-view
|
||||
|
||||
## Using the component
|
||||
Once done, wherever you will use `<app-my-first-component></app-my-first-component>` into the HTML file of another component, you will see the content of the new component rendered exactly in that place.
|
||||
For further details about creating a component, you can refer to the tutorial here (link to "Adding a new component").
|
||||
|
||||
As an example, add `<app-my-first-component></app-my-first-component>` on top of the `app.component.html` file stored into the `src` folder, and run the application again. Directly in the browser you will see `my-first-component works!`, that shows exactly the place where the component is rendered in the layout.
|
||||
|
||||
## Anatomy of the component
|
||||
By default the new component is created into the `src/app` path and everything is stored in a folder named like the component itself. In this example a folder named with `my-first-component` is added to `src/app`, with inside the following content:
|
||||
|
||||
- `my-first-component.component.scss` containing the CSS used by the component. This file is created as empty.
|
||||
- `my-first-component.component.html` containing the HTML used to render the component. This file is created with a very basic message rendering the name of the component included in 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 implementing the business logic in typescript.
|
||||
|
||||
To make the component usable, one or more modules should declare it (or import it). In this example the `app.module.ts` file stored into the `src/app` folder contains the following code.
|
||||
|
||||
import { MyFirstComponentComponent } from './my-first-component/my-first-component.component';
|
||||
## 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 (usually in the , in with a syntax similar to the following source code.
|
||||
|
||||
const appRoutes: Routes = [
|
||||
{ path: 'path-in-the-app', component: ExistingComponent },
|
||||
{ path: '**', component: PageNotFoundComponent }
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
...
|
||||
MyFirstComponentComponent
|
||||
],
|
||||
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 follow.
|
||||
|
||||
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.
|
||||
|
||||
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 place where the `Router` service is declared is closed 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 to 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 of the use cases, you might want to add parameters to the view's endpoint. To develop this, change the `appRoutes` constant as follow.
|
||||
|
||||
const appRoutes: Routes = [
|
||||
{ path: 'path-in-the-app', component: ExistingComponent },
|
||||
{ path: 'my-first-view/:name', component: MyFirstViewComponent }, // <-- Add this!
|
||||
{ path: '**', component: PageNotFoundComponent }
|
||||
];
|
||||
|
||||
Then open the typescript controller for the `MyFirstViewComponent` stored into `src/app/my-first-view` (`my-first-view.component.ts`) where few things need to happen:
|
||||
|
||||
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: please remember to unsubscribe!
|
||||
|
||||
Modify the typescript controller `my-first-view.component.ts` to look like this:
|
||||
|
||||
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 print out the greeting like the following source code.
|
||||
|
||||
<p>
|
||||
Hello {{ name }}
|
||||
</p>
|
||||
|
||||
You can now navigate to `http://<ip_address>:<port>/my-first-view/sir` and see the nice message "Hello sir".
|
||||
|
||||
These are the very basic information you should be know about your brand new component. All you have read here is standard Angular, not customised or valid for ADF applications only.
|
||||
|
||||
Reference in New Issue
Block a user