Por aquí algunas notas de lo que vaya aprendiendo de angular js
- Framework para web de angular material
- Getting started angular
- Angular heroes example
- Angular example applications
- Example to divide the application in different modules and use lazy loading - OUTDATED
- Docs of lazy loading y Ejemplo de lazy loading
- 20220727 - Angular Universal flickering fix and caching state
Resumen propio
Angular funciona por módulos y componentes. Un módulo contiene multiples componentes, y cuando cargas un módulo se cargan todos ellos.
Angular Component
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
ngOnInit(): void {
}
}
Default NgModule
// imports
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// @NgModule decorator with its metadata
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
Router
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {IndexComponent} from "./index/index.component";
const routes: Routes = [
{ path: '',
component: IndexComponent},
{
path: 'auth',
loadChildren: () => import('./login/login.module').then(m => m.LoginModule)
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Nested routes
This means you’re adding a second <[router-outlet](https://angular.io/api/router/RouterOutlet)> in a component to load another component, because it is in addition to the <[router-outlet](https://angular.io/api/router/RouterOutlet)> in AppComponent.
Example of editor-routing.module.ts:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {EditorComponent} from "./editor/editor.component";
import {MainComponent} from "./main/main.component";
const editorRoutes: Routes = [
{ path: '',
component: EditorComponent,
children: [
{
path: '',
component: MainComponent
}
]}
];
@NgModule({
imports: [RouterModule.forChild(editorRoutes)],
exports: [RouterModule]
})
export class EditorRoutingModule { }