Arhiva Angular - Stranica 2 od 4 - Tomislav Stanković

Compodoc – izrada dokumentacije Angular aplikacije

Kada se radi na izradi Angular aplikacija osim poznavanja sintakse važno je imati dobru dokumentaciju kako bi svi uključeni u proces razvoja imali uvid u ono što se i kako radi.

Osim toga, ta se dokumentacija može lijepo iskoristiti prilikom uvođenja novih članova tima koji na jednom mjestu mogu dobiti uvid u sve komponente neke Angular aplikacije.

https://compodoc.app/ služi upravo tome i na jednostavna i brz način pruža automatsku izradu osnovne dokumentacije za Angular aplikacije. Kada kažem osnovne mislim na dio koji se dobije pokretanje jedne naredbe o kojoj će biti riječi u nastavku. Osim toga moguće je dodatno prilagoditi dokumentaciju (npr. izbaciti neke dijelove aplikacije iz dokumentacije) specifičnim potrebama svakog projekta.

Kreiranje aplikacije

Naravno, prije izrade dokumentacije potrebno je imati kreiranu aplikaciju.

Može to biti web aplikacija ili mobilna aplikacija, samo je važno da se u pozadini nalazi Angular.

Za potrebu ovog blog posta iskoristit ću projekt Ionic 3 Start Theme jer se sastoji od puno različitih komponenti što će dobro doći za prikaz dokumentacije.

Izrada dokumentacije

Unutar mape projekta potrebno je pokrenuti sljedeću naredbu:

$ npm install --save-dev @compodoc/compodoc

1	$ npm install --save-dev @compodoc/compodoc

U to će se trenutku unutar package.json datoteke pod devDependencies dodati sljedeće:

 "devDependencies": {
    "@compodoc/compodoc": "^1.1.5",
    "@ionic/app-scripts": "3.2.0",
    "typescript": "2.4.2"
  },

"devDependencies": {

"@compodoc/compodoc": "^1.1.5",

"@ionic/app-scripts": "3.2.0",

"typescript": "2.4.2"

Osim toga, unutar iste datoteke potrebno je dodati još i sljedeće:

  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve",
    "compodoc": "./node_modules/.bin/compodoc -p tsconfig.json -w -s"
  },

"scripts": {

"clean": "ionic-app-scripts clean",

"build": "ionic-app-scripts build",

"lint": "ionic-app-scripts lint",

"ionic:build": "ionic-app-scripts build",

"ionic:serve": "ionic-app-scripts serve",

"compodoc": "./node_modules/.bin/compodoc -p tsconfig.json -w -s"

Sada je sve spremno za generiranje dokumentacije što se radi naredbom:

$ npm run compodoc

1	$ npm run compodoc

Nakon izvršenja naredbe pojavit će se mapa documentation.

Dokumentaciju je moguće vidjeti na da načina. Prvi je posjetom na adresu http://127.0.0.1:8080/, a drugi je otvaranjem datoteke documentation/index.html.

Zaključak

Dokumentacija može biti puno konkretnija od ranije prikazanog.

Ostale mogućnosti moguće je pronaći na adresi https://compodoc.app/guides/getting-started.html

Angular KeyValuePipe – prikaz objekta kao niz

U pravilu, kada se žele prikazati neki podaci koristeći *ngFor potrebno je da ti podaci budu u obliku niza (array).

export class AppComponent {
  heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
}

export class AppComponent {

heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];

}

 <ul>
    <li *ngFor="let hero of heroes">
      {{ hero }}
    </li>
  </ul>

<ul>

</li>

</ul>

U ovom bi slučaju rješenje izgledalo ovako:

Windstorm
Bombasto
Magneta
Tornado

No međutim, ako ti podaci budu u obliku objekta doći će do sljedeće greške (error):

NgFor only supports binding to Iterables such as Arrays

Kako bi se to riješilo Angular 6.1 predstavlja KeyValuePipe.

U tom slučaju sljedeći objekt

constructor(){

  this.hero = {
     name: 'Windstorm'.
     type: 'hero',
     rating: 10
  }

}

constructor(){

this.hero = {

name: 'Windstorm'.

type: 'hero',

rating: 10

}

Mogu prikazati na ovaj način

<ul>
    <li *ngFor="let he of hero | keyvalue">
      {{ he.key}} - {{ he.value }}
    </li>
</ul>

<ul>

{{ he.key}} - {{ he.value }}

</li>

</ul>

Što na kraju izgleda ovako

name – Windstorm
type – hero
rating – 10

Ako se keyvalue pipe pokuša koristiti u nekoj od starijih verzija Angulara doći će do greške što znači da je potrebno nadograditi verziju Angulara na 6.1

The pipe ‘keyvalue’ could not be found

*Naslovna slika preuzeta sa https://orlyapps.de/blog/mobile/einfuhrung-der-neuen-keyvaluepipe-in-angular-61

Angular Multiselect Dropdown komponenta za web aplikacije

Angular2 Multiselect Dropdown — https://www.npmjs.com/package/angular2-multiselect-dropdown

U ovom ću blog postu pokazati kako na brz i jednostavan način ugraditi multiselect dropdown komponentu u Angular web aplikaciju.

Za početak, kreiram novi projekt koristeći Angular CLI.

$ ng new AngularMultiselect
$ cd AngularMultiselect
$ ng serve

$ ng new AngularMultiselect

$ cd AngularMultiselect

$ ng serve

Na adresi http://localhost:4200/ dobijem sljedeće:

Nakon što sam uspješno kreirao projekt mogu dodati potrebnu komponentu, a to radim, unutar mape projekta, naredbom:

$ npm i angular2-multiselect-dropdown

1	$ npm i angular2-multiselect-dropdown

Jednom kada je komponenta uspješno instalirana potrebno je istu dodati unutar app.module.ts datoteke.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { AngularMultiSelectModule } from 'angular2-multiselect-dropdown/angular2-multiselect-dropdown';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AngularMultiSelectModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { AngularMultiSelectModule } from 'angular2-multiselect-dropdown/angular2-multiselect-dropdown';

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

AngularMultiSelectModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

U dokumentaciji komponente navedeno je

From v3.0.0 onwards, you need to include default.theme.css file to get the basic styling of the dropdown.

tako da ću datoteku default.theme.css uključiti u projekt kako bi dobio zadani stil komponente.

To radim na način da unutar datoteke angular.json dodam sljedeće:

"assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css",
              "./node_modules/angular2-multiselect-dropdown/themes/default.theme.css"
            ],
            "scripts": []

"assets": [

"src/favicon.ico",

"src/assets"

"styles": [

"src/styles.css",

"./node_modules/angular2-multiselect-dropdown/themes/default.theme.css"

"scripts": []

Tek sada se mogu baciti na konkretan rad s komponentom.

Unutar HTML datoteke dodajem sljedeće:

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>

<angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems" 
    [settings]="dropdownSettings" 
    (onSelect)="onItemSelect($event)" 
    (onDeSelect)="OnItemDeSelect($event)"
    (onSelectAll)="onSelectAll($event)"
    (onDeSelectAll)="onDeSelectAll($event)"
    (onOpen)="onOpen($event)"
    (onClose)="onClose($event)"></angular2-multiselect>

<h1>

Welcome to {{ title }}!

</h1>

</div>

<angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems"

[settings]="dropdownSettings"

(onSelect)="onItemSelect($event)"

(onDeSelect)="OnItemDeSelect($event)"

(onSelectAll)="onSelectAll($event)"

(onDeSelectAll)="onDeSelectAll($event)"

(onOpen)="onOpen($event)"

(onClose)="onClose($event)"></angular2-multiselect>

Ova se komponenta unutar angular2-multiselect tagova sastoji od nekoliko dijelova:

[data] – podaci kojima će se napuniti komponenta
[(ngModel)] – two-way binding
[settings] – poziva objekt s postavkama tog konkretnog padajućeg izbornika
(onSelect) – poziva funkciju koja će nešto napraviti kada se odabere jedan ili više podataka iz padajućeg izbornika
(onDeSelect) – poziva funkciju koja će nešto napraviti kada se odznači jedan ili više podataka iz padajućeg izbornika
(onSelectAll) – poziva funkciju koja će nešto napraviti kada se odaberu svi podataci iz padajućeg izbornika
(onDeSelectAll) – poziva funkciju koja će nešto napraviti kada se odznače svi podataci iz padajućeg izbornika
(onOpen) – metoda koja se poziva pri otvaranju padajućeg izbornika
(onClose) – metoda koja se poziva pri zatvaranju padajućeg izbornika

Sada ću unutar app.component.ts datoteke kreirati funkcionalnost koja će upravljati podacima.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  dropdownList = [];
  selectedItems = [];
  dropdownSettings = {};

  ngOnInit(){
      this.dropdownList = [
            {"id":1,"itemName":"Hrvatska"},
            {"id":2,"itemName":"Slovenija"},
            {"id":3,"itemName":"BiH"},
            {"id":4,"itemName":"Srbija"},
            {"id":5,"itemName":"Mađarska"},
            {"id":6,"itemName":"Njemačka"},
            {"id":7,"itemName":"Francuska"},
            {"id":8,"itemName":"Austrija"},
            {"id":9,"itemName":"Belgija"},
            {"id":10,"itemName":"Poljska"}
      ];
      this.dropdownSettings = { 
              singleSelection: false, 
              text:"Odaberite državu",
              selectAllText:'Odaberite sve',
              unSelectAllText:'Odznačite sve',
              enableSearchFilter: true,
              searchPlaceholderText: 'Traži',
              classes:"myclass custom-class"
      };            
  }
  onItemSelect(item:any){
      console.log(item);
      console.log(this.selectedItems);
  }
  OnItemDeSelect(item:any){
      console.log(item);
      console.log(this.selectedItems);
  }
  onSelectAll(items: any){
      console.log(items);
  }
  onDeSelectAll(items: any){
      console.log(items);
  }
  onOpen(e:any){
    console.log("Otvoreno =" + " " + e);
  }
  onClose(e:any){
    console.log("Zatvoreno =" + " " + e);
  }

}

import { Component, OnInit } from '@angular/core';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit {

dropdownList = [];

selectedItems = [];

dropdownSettings = {};

ngOnInit(){

this.dropdownList = [

{"id":1,"itemName":"Hrvatska"},

{"id":2,"itemName":"Slovenija"},

{"id":3,"itemName":"BiH"},

{"id":4,"itemName":"Srbija"},

{"id":5,"itemName":"Mađarska"},

{"id":6,"itemName":"Njemačka"},

{"id":7,"itemName":"Francuska"},

{"id":8,"itemName":"Austrija"},

{"id":9,"itemName":"Belgija"},

{"id":10,"itemName":"Poljska"}

];

this.dropdownSettings = {

singleSelection: false,

text:"Odaberite državu",

selectAllText:'Odaberite sve',

unSelectAllText:'Odznačite sve',

enableSearchFilter: true,

searchPlaceholderText: 'Traži',

classes:"myclass custom-class"

};

}

onItemSelect(item:any){

console.log(item);

console.log(this.selectedItems);

}

OnItemDeSelect(item:any){

console.log(item);

console.log(this.selectedItems);

}

onSelectAll(items: any){

console.log(items);

}

onDeSelectAll(items: any){

console.log(items);

}

onOpen(e:any){

console.log("Otvoreno =" + " " + e);

}

onClose(e:any){

console.log("Zatvoreno =" + " " + e);

}

U praksi to izgleda ovako:

P.S. U slučaju pojavljivanja sljedeće greške

Can’t bind to ‘ngModel’ since it isn’t a known property of ‘angular2-multiselect’.

potrebno je u projekt dodati FormsModule.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

import { AngularMultiSelectModule } from 'angular2-multiselect-dropdown/angular2-multiselect-dropdown';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AngularMultiSelectModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

import { AngularMultiSelectModule } from 'angular2-multiselect-dropdown/angular2-multiselect-dropdown';

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

FormsModule,

AngularMultiSelectModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Zaključak

Struktura projekta prema package.json

{
  "name": "angular-multiselect",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "angular2-multiselect-dropdown": "^3.2.1",
    "core-js": "^2.5.4",
    "rxjs": "~6.2.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.8.0",
    "@angular/cli": "~6.2.3",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.3.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~2.9.2"
  }
}

{

"name": "angular-multiselect",

"version": "0.0.0",

"scripts": {

"ng": "ng",

"start": "ng serve",

"build": "ng build",

"test": "ng test",

"lint": "ng lint",

"e2e": "ng e2e"

"private": true,

"dependencies": {

"@angular/animations": "^6.1.0",

"@angular/common": "^6.1.0",

"@angular/compiler": "^6.1.0",

"@angular/core": "^6.1.0",

"@angular/forms": "^6.1.0",

"@angular/http": "^6.1.0",

"@angular/platform-browser": "^6.1.0",

"@angular/platform-browser-dynamic": "^6.1.0",

"@angular/router": "^6.1.0",

"angular2-multiselect-dropdown": "^3.2.1",

"core-js": "^2.5.4",

"rxjs": "~6.2.0",

"zone.js": "~0.8.26"

"devDependencies": {

"@angular-devkit/build-angular": "~0.8.0",

"@angular/cli": "~6.2.3",

"@angular/compiler-cli": "^6.1.0",

"@angular/language-service": "^6.1.0",

"@types/jasmine": "~2.8.8",

"@types/jasminewd2": "~2.0.3",

"@types/node": "~8.9.4",

"codelyzer": "~4.3.0",

"jasmine-core": "~2.99.1",

"jasmine-spec-reporter": "~4.2.1",

"karma": "~3.0.0",

"karma-chrome-launcher": "~2.2.0",

"karma-coverage-istanbul-reporter": "~2.0.1",

"karma-jasmine": "~1.1.2",

"karma-jasmine-html-reporter": "^0.2.2",

"protractor": "~5.4.0",

"ts-node": "~7.0.0",

"tslint": "~5.11.0",

"typescript": "~2.9.2"

}

Angular Framework resursi

Do sada sam objavio nekoliko blog postova na temu Angular Frameworka koje možete pronaći u kategoriji Razvoj, ali sam odlučio objaviti i ovaj blog post kako bi olakšao pronalazak i pregled svih blog postova vezanih upravo uz Angular Framework jednako kao što sam to napravio i za Ionic Framework, a nadam se da ću isto uskoro učiniti i za NodeJS tj. ExpressJS.

Ako niste pronašli vama zanimljiv/potreban blog post slobodno ostavite komentar s prijedlogom teme pa ću se potruditi objaviti blog post ili pronaći resurs koji će vam biti od pomoći.

24/06/2019 – *ngFor u Angularu
07/01/2019 – SMS login – Angular & Firebase
07/10/2018 – Angular KeyValuePipe – prikaz objekta kao niz
30/09/2018 – Angular Multiselect Dropdown komponenta za web aplikacije
17/06/2018 – Angular 6 – SEO optimizacija
20/05/2018 – Angular (2,4,5) 6 je ‘sranje’ !?
29/04/2018 – Ažuriranje Angular projekta sa angular-cli na @angular/cli
22/04/2018 – Angular & Marvel API – demo aplikacija
18/03/2018 – Angular & Firebase – registracija i prijava
28/01/2018 – Angular & pdfmake – kreiranje PDF-a
19/11/2017 – Kako prilagoditi Angular početni zaslon (Initial Loading Screen)
12/11/2017 – Angular CRUD aplikacija
05/11/2017 – Uvod u Angular Material
15/10/2017 – Uvod u Angular CLI
31/12/2016 – Postavljanje Angular 2 + TypeScript projekta

Angular 6 – SEO optimizacija

Aplikacije napravljene u Angularu u startu nisu SEO optimizirane što ne znači da to tako mora i ostati. Koristeći ng-toolkit Universal moguće je kroz nekoliko koraka omogućiti da Angular aplikacija postane SEO-Friendly.

Angular CLI

Prije svega, moram provjeriti koju verziju Angular CLI-a imam instaliranu. U ovom slučaju to je verzija 6.0.8

$ ng -v

$ ng -v

Kreiranje Angular projekta

Novi projekt kreiram i pokrećem sljedećim naredbama

$ ng new AngularSeo --routing
$ cd AngularSeo
$ ng serve -o

$ ng new AngularSeo --routing

$ cd AngularSeo

$ ng serve -o

U web pregledniku mogu vidjeti kako projekt trenutno izgleda. Na početnoj se stranici nalazi nekoliko redova teksta.

Međutim, ako kliknem na desnu tipku miša i odaberem ‘View page source‘ mogu vidjeti sljedeće tj. niti jedan od ranije spomenutih redova teksta ovdje nije vidljiv, a trebao bi biti ako želim imati SEO optimizaciju.

Dodavanje nove komponente

Novu komponentu dodajem sljedećom naredbom

$ ng g c nova-komponenta

1	$ ng g c nova-komponenta

Nakon što je komponenta kreirana

trebam dodati i pripadajuću rutu kako bi se nova komponenta prikazala. To ću napraviti unutar datoteke app-routing.module.ts.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { NovaKomponentaComponent } from './nova-komponenta/nova-komponenta.component';

const routes: Routes = [
  {
    path: 'nova-komponenta',
    component: NovaKomponentaComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

import { NgModule } from '@angular/core';

import { Routes, RouterModule } from '@angular/router';

import { NovaKomponentaComponent } from './nova-komponenta/nova-komponenta.component';

const routes: Routes = [

{

path: 'nova-komponenta',

component: NovaKomponentaComponent

}

];

@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule]

})

export class AppRoutingModule { }

Na početnoj stranici app.component.html sada mogu navesti poveznicu prema novoj komponenti.

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
    <li>
        <h2><a routerLink="nova-komponenta">Nova komponenta</a></h2>
      </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

<router-outlet></router-outlet>

<h1>

Welcome to {{ title }}!

</h1>

</div>

<h2>Here are some links to help you start: </h2>

<ul>

<li>

<h2><a routerLink="nova-komponenta">Nova komponenta</a></h2>

</li>

<li>

<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>

</li>

<li>

<h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>

</li>

<li>

<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>

</li>

</ul>

<router-outlet></router-outlet>

Sve to na kraju izgleda ovako

Međutim, koliko god ja sadržaja dodao tražilice ga neće vidjeti što znači da ga neće moći indeksirati što opet znači da moja Angular aplikacija neće biti SEO optimizirana.

SEO optimizacija

Angular CLI će i ovdje odraditi veliki dio posla umjesto mene.

Pokrećem sljedeću naredbu i nadam se da neće biti grešaka.

$ ng add @ng-toolkit/universal

1	$ ng add @ng-toolkit/universal

Aplikaciju ću sada pokrenuti sljedećom naredbom

$ npm run build:prod
$ npm run server

1 2	$ npm run build:prod $ npm run server

i odmah mogu vidjeti da je od sada moja Angular aplikacija SEO optimizirana.

Moguće je primijetiti da početna i nova stranica imaju jednak naslov

<title>AngularSeo</title>

1	<title>AngularSeo</title>

Za novu komponentu mogu napraviti poseban naslov na sljedeći način.

import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';

@Component({
  selector: 'app-nova-komponenta',
  templateUrl: './nova-komponenta.component.html',
  styleUrls: ['./nova-komponenta.component.css']
})
export class NovaKomponentaComponent implements OnInit {

  constructor(private _title: Title) { }

  ngOnInit() {
    this._title.setTitle( 'Ovo je novi naslov!' );
  }

}

import { Component, OnInit } from '@angular/core';

import { Title } from '@angular/platform-browser';

@Component({

selector: 'app-nova-komponenta',

templateUrl: './nova-komponenta.component.html',

styleUrls: ['./nova-komponenta.component.css']

})

export class NovaKomponentaComponent implements OnInit {

constructor(private _title: Title) { }

ngOnInit() {

this._title.setTitle( 'Ovo je novi naslov!' );

}

Zaključak

SEO optimizacija je daleko kompleksnije područje da bi se gore navedeni primjer mogao smatrati cjelovitim rješenjem, ali i ovo je dobar početak za svakog Angular developera.

Struktura projekta:

{
  "name": "angular-seo",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build:server:prod": "ng run AngularSeo:server && webpack --config webpack.server.config.js --progress --colors",
    "build:browser:prod": "ng build --prod",
    "build:prod": "npm run build:server:prod && npm run build:browser:prod",
    "server": "node local.js"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/platform-browser": "^6.0.0",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "@ng-toolkit/universal": "^1.1.21",
    "core-js": "^2.5.4",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26",
    "@angular/platform-server": "^6.0.0",
    "@nguniversal/module-map-ngfactory-loader": "^6.0.0",
    "webpack-cli": "^2.1.4",
    "ts-loader": "4.2.0",
    "@nguniversal/express-engine": "^6.0.0",
    "cors": "~2.8.4"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^6.0.3",
    "@angular-devkit/build-angular": "~0.6.8",
    "typescript": "~2.7.2",
    "@angular/cli": "~6.0.8",
    "@angular/language-service": "^6.0.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"
  }
}

{

"name": "angular-seo",

"version": "0.0.0",

"scripts": {

"ng": "ng",

"start": "ng serve",

"build": "ng build",

"test": "ng test",

"lint": "ng lint",

"e2e": "ng e2e",

"build:server:prod": "ng run AngularSeo:server && webpack --config webpack.server.config.js --progress --colors",

"build:browser:prod": "ng build --prod",

"build:prod": "npm run build:server:prod && npm run build:browser:prod",

"server": "node local.js"

"private": true,

"dependencies": {

"@angular/animations": "^6.0.3",

"@angular/common": "^6.0.3",

"@angular/compiler": "^6.0.3",

"@angular/core": "^6.0.3",

"@angular/forms": "^6.0.3",

"@angular/http": "^6.0.3",

"@angular/platform-browser": "^6.0.0",

"@angular/platform-browser-dynamic": "^6.0.3",

"@angular/router": "^6.0.3",

"@ng-toolkit/universal": "^1.1.21",

"core-js": "^2.5.4",

"rxjs": "^6.0.0",

"zone.js": "^0.8.26",

"@angular/platform-server": "^6.0.0",

"@nguniversal/module-map-ngfactory-loader": "^6.0.0",

"webpack-cli": "^2.1.4",

"ts-loader": "4.2.0",

"@nguniversal/express-engine": "^6.0.0",

"cors": "~2.8.4"

"devDependencies": {

"@angular/compiler-cli": "^6.0.3",

"@angular-devkit/build-angular": "~0.6.8",

"typescript": "~2.7.2",

"@angular/cli": "~6.0.8",

"@angular/language-service": "^6.0.3",

"@types/jasmine": "~2.8.6",

"@types/jasminewd2": "~2.0.3",

"@types/node": "~8.9.4",

"codelyzer": "~4.2.1",

"jasmine-core": "~2.99.1",

"jasmine-spec-reporter": "~4.2.1",

"karma": "~1.7.1",

"karma-chrome-launcher": "~2.2.0",

"karma-coverage-istanbul-reporter": "~2.0.0",

"karma-jasmine": "~1.1.1",

"karma-jasmine-html-reporter": "^0.2.2",

"protractor": "~5.3.0",

"ts-node": "~5.0.1",

"tslint": "~5.9.1"

}