¡Angular 6 ya está disponible! Las nuevas funciones incluyen un mejor rendimiento, nuevas y potentes adiciones de CLI y una nueva forma de inyectar servicios.
Este tutorial es para principiantes. Aprenderá Angular con el ejemplo construyendo una aplicación web CRUD de pila completa: crear, leer, actualizar y eliminar. Utilizaremos la última versión del marco y la plataforma más populares para crear aplicaciones del lado del cliente móviles y de escritorio. El nombre de estas aplicaciones es SPA o Aplicaciones de página única.
En el back-end, usaremos Python con Django. Django es el framework web pythonic más popular diseñado para perfeccionistas con fechas límite.
En pocas palabras, aprenderá a generar aplicaciones Angular 6, generar componentes y servicios y agregar enrutamiento. También aprenderá a usar varias funciones como HttpClient para enviar solicitudes AJAX y llamadas HTTP y suscribirse a observables RxJS 6, etc.
Al final de este tutorial de Angular 6 , aprenderá creando una aplicación de ejemplo del mundo real:
- cómo instalar la última versión de Angular CLI,
- cómo usar la CLI de Angular 6 para generar un nuevo proyecto de Angular 6 ,
- cómo usar Angular 6 para construir una aplicación CRM simple,
- ¿Qué es una arquitectura basada en componentes y componentes?
- cómo usar RxJS 6 Observables y operadores (
map()
yfilter()
etc.) - cómo crear componentes de Angular 6,
- cómo agregar navegación y enrutamiento de componentes,
- cómo usar HttpClient para consumir una API REST, etc.
El back-end CRUD de ejemplo de Django
Usaremos una API CRUD simple construida con el framework Django y Django REST. Dado que este es un tutorial de Angular, no nos centraremos en crear la API. Ese será el tema de un tutorial separado. Puede obtener el código fuente de la API de back-end de este repositorio.
Puede utilizar los siguientes comandos para iniciar el servidor de desarrollo:
# Clone the project and navigate into it $ git clone //github.com/techiediaries/django-crm $ cd django-crm # Create a virtual environment and install packages $ pipenv install # Activate the virtual environment $ pipenv shell # Create and migrate the database then run the local development server $ python manage.py migrate $ python manage.py runserver
Su servidor se ejecutará desde //localhost:8000
.
Estamos usando pipenv, la herramienta de administración de paquetes recomendada oficialmente para Python. Necesitarás tenerlo instalado. El proceso es bastante simple dependiendo de su sistema operativo.
Ejemplo CRUD de Angular 6
La aplicación Angular 6 de ejemplo que crearemos es la interfaz para una API RESTful de CRM. Le permitirá crear cuentas, clientes potenciales, oportunidades y contactos. Es un ejemplo perfecto para una aplicación CRUD (Crear, Leer, Actualizar y Eliminar) construida como una SPA (Aplicación de Página Única).
La aplicación de ejemplo está en progreso, así que la crearemos a través de una serie de tutoriales. Se actualizará para incluir funciones avanzadas como RxJS 6 y autenticación JWT. También usaremos Bootstrap 4 y Angular 6 Material para construir y diseñar los componentes de la interfaz de usuario. Necesita Bootstrap 4 o Angular Material para diseñar. Dependiendo de su elección, puede seguir tutoriales separados:
- Construyendo la UI con Material Angular 6
- Construyendo la interfaz de usuario con Bootstrap 4
Instalación de Angular CLI (v6.0.0)
Asegúrese de tener Node.js instalado, luego ejecute el siguiente comando en su terminal para instalar Angular CLI v 6.0.0 .
npm -g install @angular/cli
Puede verificar la versión instalada ejecutando el siguiente comando:
Ahora, está listo para crear un proyecto con Angular CLI v6. Simplemente ejecute el siguiente comando en su terminal:
La CLI generará automáticamente un montón de archivos comunes a la mayoría de los proyectos de Angular 6. También instalará las dependencias necesarias para su proyecto.
La mayoría de las veces trabajaremos dentro de la src/app
carpeta. Esta es la estructura de directorios del proyecto:

Puede servir su aplicación localmente ejecutando los siguientes comandos:
# Navigate inside your project's folder $ cd crmapp # Serve your application $ ng serve
Su aplicación se ejecutará desde //localhost:4200
.
Esta es una captura de pantalla de la página de inicio de la aplicación:

Componentes en Angular 6 | 5 | 4
Ahora bien, ¿qué es un componente?
Un componente es una clase de TypeScript. Tiene una plantilla HTML y un conjunto opcional de estilos CSS que controlan una parte de la pantalla.
Los componentes son el concepto más importante en Angular 6. Una aplicación de Angular 6 es básicamente un árbol de componentes con un componente raíz (el famoso AppComponent ). El componente raíz es el que se encuentra en la matriz de arranque en el NgModule
módulo principal app.module.ts
.
Un aspecto importante de los componentes es la reutilización. Un componente se puede reutilizar en toda la aplicación e incluso en otras aplicaciones. El código común y repetible que realiza una determinada tarea se puede encapsular en un componente reutilizable. Ese componente se puede llamar siempre que necesitemos la funcionalidad que proporciona.
Cada componente bootstrap es la base de su propio árbol de componentes. La inserción de un componente de arranque generalmente desencadena una cascada de creaciones de componentes que completan ese árbol. FuenteArquitectura basada en componentes
Una aplicación Angular está formada por varios componentes. Estos componentes forman una estructura de árbol con componentes padre e hijo.
Un componente es un bloque independiente de un gran sistema (aplicación web). Se comunica con los demás bloques de construcción (componentes) del sistema mediante entradas y salidas. Un componente tiene vista, datos y comportamiento asociados. Puede tener componentes padre e hijo.
Los componentes permiten una máxima reutilización, pruebas sencillas, mantenimiento y separación de preocupaciones.
Veamos ahora esto de manera práctica. Dirígete a la carpeta del proyecto de tu aplicación Angular y abre la src/app
carpeta. Encontrarás los siguientes archivos:
app.component.css
: the CSS file for the componentapp.component.html
: the HTML view for the componentapp.component.spec.ts
: the unit tests or spec file for the componentapp.component.ts
: the component code (data and behavior)app.module.ts
: the application main module
Except for the last file which contains the declaration of the application main (root) Module, all these files are used to create a component. It’s the AppComponent: The root component of our application. All other components we are going to create next will be direct or un-direct children of the root component.
Demystifying the AppComponent (The Root Component of Angular Applications)
Go ahead and open the src/app/app.component.ts
file and let's understand the code behind the main/root component of the application.
First, this is the code:
import { Component } from '@angular/core';@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})export class AppComponent { title = 'app';}
We first import the Component decorator from @angular/core
. Then we use it to decorate the TypeScript class AppComponent. The Component decorator takes an object with many parameters such as:
- selector: specifies the tag that can be used to call this component in HTML templates just like the standard HTML tags
- templateUrl: indicates the path of the HTML template that will be used to display this component (you can also use the template parameter to include the template inline as a string)
- styleUrls: specifies an array of URLs for CSS style-sheets for the component
The export keyword is used to export the component so that it can be imported from other components and modules in the application.
The title variable is a member variable that holds the string ‘app’. There is nothing special about this variable and it’s not a part of the canonical definition of an Angular component.
Now let’s see the corresponding template for this component. If you open src/app/app.component.html
this is what you'll find:
Welcome to !
![Angular Logo]()
Here are some links to help you start:
-
Tour of Heroes
CLI Documentation
Angular blog
The template is a normal HTML file (almost all HTML tags are valid to be used inside Angular templates except for some tags such as
; and ) with the exception that it can contain template variables (in this case the title variable>,
) or exp
ressions ({ {...}}) that can be used to insert values in the DOM dynamically. This is called interpolation or data binding. You can find more information about templates from the docs.
You can also use other components directly inside Angular templates (via the selector property) just like normal HTML.
If you are familiar with the MVC (Model View Controller) pattern, the component class plays the role of the Controller. The HTML template plays the role of the View.
Angular 6 Components by Example
After getting the theory behind Angular components, let’s now create the components for our simple CRM application.
Our REST API, built with Django, exposes these endpoints:
/api/accounts
: create or read a paginated list of accounts/api/accounts/<
id>: read, update or delete an account/api/contacts
: create or read a paginated list of contacts/api/contacts/<
id>: read, update or delete a contact/api/leads
: create or read a paginated list of leads/api/leads/<
id>: read, update or delete a lead/api/opportunities
: create or read a paginated list of opportunities/api/opportunities/<
id>: read, update or delete an opportunity
Before adding routing to our application we first need to create the application’s components. Based on the exposed REST API architecture we can divide our application into these components:
AccountListComponent
: this component displays and controls a tabular list of accountsAccountCreateComponent
: this component displays and controls a form for creating or updating accountsContactListComponent
: displays a table of contactsContactCreateComponent
: displays a form to create or update a contactLeadListComponent
: displays a table of leadsLeadCreateComponent
: displays a form to create or update a leadOpportunityListComponent
: displays a table of opportunitiesOpportunityCreateComponent
: displays a form to create or update an opportunity
Let’s use the Angular CLI to create the components
ng generate component AccountList ng generate component AccountCreate ng generate component ContactList ng generate component ContactCreate ng generate component LeadList ng generate component LeadCreate ng generate component OpportunityList ng generate component OpportunityCreate
This is the output of the first command:
CREATE src/app/account-list/account-list.component.css (0 bytes) CREATE src/app/account-list/account-list.component.html (31 bytes) CREATE src/app/account-list/account-list.component.spec.ts (664 bytes) CREATE src/app/account-list/account-list.component.ts (292 bytes) UPDATE src/app/app.module.ts (418 bytes)
You can see that the command generates all the files to define a component and also updates src/app/app.module.ts
.
If you open src/app/app.module.ts
after running all commands, you can see that all components are automatically added to the AppModuledeclarations
array.:
import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { AppComponent } from './app.component';import { AccountListComponent } from './account-list/account-list.component';import { AccountCreateComponent } from './account-create/account-create.component';import { ContactListComponent } from './contact-list/contact-list.component';import { ContactCreateComponent } from './contact-create/contact-create.component';import { LeadListComponent } from './lead-list/lead-list.component';import { LeadCreateComponent } from './lead-create/lead-create.component';import { OpportunityListComponent } from './opportunity-list/opportunity-list.component';import { OpportunityCreateComponent } from './opportunity-create/opportunity-create.component';@NgModule({declarations: [ AppComponent, AccountListComponent, AccountCreateComponent, ContactListComponent, ContactCreateComponent, LeadListComponent, LeadCreateComponent, OpportunityListComponent, OpportunityCreateComponent],imports: [ BrowserModule],providers: [],bootstrap: [AppComponent]})export class AppModule { }
If you are creating components manually, you need to make sure to include them manually so they can be recognized as part of the module.
Adding Angular 6 Routing
Angular CLI provides the --routing
switch (ng new crmapp --routing
) that enables you to add routing automatically. We’re going to add routing manually. I want you to understand the various pieces involved in adding component routing to your Angular application.
In fact, adding routing is quite simple:
- add a separate module (which can be called
AppRoutingModule
) in a fileapp-routing.module.ts
, and import the module by including it in theimports
of mainAppModule
, - add
r-ou
tlet> in app.co
mponent.html (this is where the Angular Router will insert components matching the current path), add routes (each route is an object with properties such as path and component etc.).
This is the initial content of
app-routing.module.ts
:
import { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';const routes: Routes = [];@NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule]})export class AppRoutingModule { }
The routes will contain all the routes of the application. After creating the components we’ll see how to add routes to this array.
For now, we want to redirect the visitor to the
/accounts
path when the home URL is visited so the first path we'll add is:
{ path: '', redirectTo: 'accounts', pathMatch: 'full' },
The pathMatch specifies the matching strategy.
full
means that we want to fully match the path.
Next, let’s add the other paths:
{ path: '', redirectTo: 'accounts', pathMatch: 'full' },{ path: 'accounts', component: AccountListComponent},{ path: 'create-account', component: AccountCreateComponent},{ path: 'contacts', component: ContactListComponent},{ path: 'create-contact', component: ContactCreateComponent},{ path: 'leads', component: LeadListComponent},{ path: 'create-lead', component: LeadCreateComponent},{ path: 'opportunities', component: OpportunityListComponent},{ path: 'create-opportunity', component: OpportunityCreateComponent}];
Now open
src/app/app.module.ts
and import the routing module then add it to the imports array:
import {AppRoutingModule} from './app-routing.module';[...]@NgModule({declarations: [AppComponent,[...]],imports: [ BrowserModule, AppRoutingModule],[...]})export class AppModule { }
Finally, open
src/app/app.component.html
then add the navigation links and the router outlet:
Accounts Create Account Contacts Create Contact Leads Create Lead Opportunities Create Opportunity
An Example for Consuming the REST API Using Angular 6 HttpClient
Now we’ve created the different components and added routing and navigation. Let’s see an example of how to use the HttpClient of Angular 6 to consume the RESTful API back-end.
First, you need to add the HttpClientModule module to the imports array of the main application module:
[..]import { HttpClientModule } from '@angular/common/http';@NgModule({declarations: [..],imports: [[..]HttpClientModule],providers: [],bootstrap: [AppComponent]})export class AppModule { }
Create an Angular 6 Service/Provider
A service is a global class that can be injected into any component. It’s used to encapsulate code that can be common between multiple components in one place instead of repeating it throughout various components.
Now, let's create a service that encapsulates all the code needed for interacting with the REST API. Using Angular CLI run the following command:
Two files:
src/app/api.service.ts
and src/app/api.service.spec.ts
will be generated. The first contains code for the service and the second contains tests.
Open
src/app/api.service.ts
then import and inject the HttpClient class.
import { Injectable } from '@angular/core';import { HttpClient} from '@angular/common/http';@Injectable({providedIn: 'root'})export class APIService { constructor(private httpClient: HttpClient) {}}
Angular 6 provides a way to register services/providers directly in the
@Injectable()
decorator by using the new providedIn
attribute. This attribute accepts any module of your application or 'root'
for the main app module. Now you don't have to include your service in the providers array of your module.
Getting Contacts/Sending HTTP GET Request Example
Let’s start with the contacts API endpoint.
First, we’ll add a method to consume this endpoint in our global API service,
next, we’ll inject the API service and call the method from the corresponding component class (
ContactListComponent
)and finally, we’ll display the result (the list of contacts) in the component template.
Open
src/app/api.service.ts
and add the following method:
export class APIService {API_URL = '//localhost:8000';constructor(private httpClient: HttpClient) {}getContacts(){ return this.httpClient.get(`${this.API_URL}/contacts`);}
Next, open
src/app/contact-list/contact-list.component.ts
and inject the APIService then call the getContacts() method:
import { Component, OnInit } from '@angular/core';import { APIService } from '../api.service';@Component({ selector: 'app-contact-list', templateUrl: './contact-list.component.html', styleUrls: ['./contact-list.component.css']})export class ContactListComponent implements OnInit {private contacts: Array = [];constructor(private apiService: APIService) { }ngOnInit() { this.getContacts();}public getContacts(){ this.apiService.getContacts().subscribe((data: Array) => { this.contacts = data; console.log(data); });}
Now let’s display the contacts in the template. Open
src/app/contact-list/contact-list.component.html
and add the following code:
My Contacts
First Name
Last Name
Phone
Email
Address
{{ contact.first_name }}
{{ contact.last_name }}
{{ contact.phone }}
{{ contact.email }}
{{ contact.address }}
This is a screen-shot of the component:

Creating Contacts/Sending HTTP POST Request Example
Now let’s create a method to send HTTP Post request to create a random contact. Open the API service file and add the following method:
createContact(contact){ return this.httpClient.post(`${this.API_URL}/contacts/`,contact);}
Next, let’s call this method from the ContactCreateComponent
to create a contact. First, open src/app/contact-create/contact-create.component.ts
and add the following code:
import { Component, OnInit } from '@angular/core';import { APIService } from '../api.service';@Component({selector: 'app-contact-create',templateUrl: './contact-create.component.html',styleUrls: ['./contact-create.component.css']})export class ContactCreateComponent implements OnInit {constructor(private apiService: APIService) { }ngOnInit() {}createContact(){var contact = { account: 1, address: "Home N 333 Apartment 300", createdBy: 1, description: "This is the third contact", email: "[email protected]", first_name: "kaya", isActive: true, last_name: "Abbes", phone: "00121212101"};this.apiService.createContact(contact).subscribe((response) => { console.log(response);});};}}
For now, we’re simply hard-coding the contact info for the sake of simplicity.
Next, open src/app/contact-create/contact-create.component.html
and add a button to call the method to create a contact:
Create Contact
Create Contact
Conclusion
Throughout this Angular 6 tutorial for beginners, we’ve seen, by building a simple real-world CRUD example, how to use different Angular concepts to create simple full-stack CRUD application with Angular and Django. You can find the source code in this repository.