Lekce 7 - Jednoduchý redakční systém v AngularJS - Výpis článku
V minulé lekci, Jednoduchý redakční systém v AngularJS - API článků, jsme si připravili službu pro práci s API i samotné API článků.
A jak jsem slíbil, v dnešním tutoriálu do našeho redakčního systému přidáme kontroler a šablony, čímž zprovozníme výpis článků.
Routování
Začneme zavedením routování do naší aplikace, abychom se dostali k daným článkům přes API podle jejich URL adresy.
app/cms.routes.js
Routování zařídíme přidáním routovací konfigurace, která se z
pravidla píše do samostatného souboru. Proto si jej vytvoříme. Pro
routování v naší aplikaci jsem se rozhodl využít standardní AngularJS
modul ngRoute
, který jsme si již dříve přidali. Konfigurace
našeho routování pomocí něj bude vypadat následovně:
'use strict'; /** Definice routovacích pravidel naší aplikace. */ app.config(function ($routeProvider) { var templatePath = 'app/templates/'; $routeProvider .when('/:url?', { templateUrl: templatePath + 'article.html', controller: 'ArticleController', controllerAs: 'article' }) .otherwise({ redirectTo: '/' }); });
Jak vidíte, vše probíhá přes službu $routeProvider
,
které určíme jaký kontroler, šablonu, případně alias, či jiné
nastavení, má použít pro kterou URL. Naše URL navíc obsahuje nepovinný
URL parametr, který reprezentuje URL samotného článku. Pokud není zadána,
budeme muset vybrat nějakou výchozí, ale to až za chvíli. Následuje
defaultní přesměrování, což je v našem případě pouze formalita.
Kontroler
app/controllers/article.controller.js
Budeme pokračovat s kontrolerem pro výpis článku. Ten bude vypadat následovně:
'use strict'; /** Zpracovává vykreslování článku. */ app.controller('ArticleController', function ($routeParams, $rootScope, $location, Articles) { var url = $routeParams.url || 'uvod'; // Získání URL zobrazovaného článku. this.content = ''; // Načtení dat zobrazovaného článku z API pomocí služby. Articles.get({url: url}, (function (article) { // Asynchronní zpracování dat článku. $rootScope.title = article.title; $rootScope.description = article.description; this.content = article.content; }).bind(this), function (error) { // Ošetření chyby při načítání článku. if (error.status === 404) $location.path('/chyba'); else { console.error(error); $location.path('/'); } }); });
Zde bychom již měli být jako doma, jelikož kontrolery a jejich
fungování dobře známe. Co zde stojí za zmínku je získání parametru z
routování pomocí $routeParams
, kde se hned vyřeší i URL pro
výchozí článek. V rámci definice API z lekce API
článků jsme určili, že vždy bude existovat článek 'uvod' a 'chyba' a
zde na to spoléháme.
Dále určitě stojí za prozkoumání práce se službou API pro správu článku. Kladou se zde klasické asynchronní dotazy, zde na konkrétní článek s danou URL. Poté následuje zpracování v podobě callbacků. Pro ty, kteří mají radši novější Promise, tato metoda jej zároveň vrací, takže si vlastně můžete vybrat
Když tedy najdeme článek, vezmeme jeho hodnoty a nastavíme je šablonám.
$rootScope
slouží pro globální hodnoty, když this
v tomto případě reprezentuje aktuální šablonu kontroleru. Když naopak
dojde k chybě, rozlišíme, jestli je to chyba s HTTP kódem 404 (nenalezeno),
poté směrujeme na článek 'chyba'. Nebo pokud se jedná o obecnou chybu, tak
ji alespoň zalogujeme a zkusíme se vrátit na domovskou stránku. Zde vidíme,
že vnitřní směrování probíhá pomocí služby $location
.
Všechny používané služby uvnitř kontroleru poté získáme automaticky pomocí DI, stejně jako u kalkulačky.
Šablony
Nyní je tedy čas podívat se na zoubek šablonám.
app/templates/article.html
Začneme šablonou samotného článku, která je relativně jednoduchá:
<ng-bind-html ng-bind-html="article.content"></ng-bind-html>
Jak vidíte, vypisuje se v ní pouze obsah článku. Ovšem je tu problém.
AngularJS kvůli bezpečnosti automaticky escapuje všechen HTML i jiný kód ze
svých dat. My ale máme a chceme mít v obsahu článku HTML kód. Pro to zde
použijeme modul ngSanitize
, který definuje výše uvedenou
direktivu, což nám umožní vypsat obsah článku jako HTML.
index.html
Pokračovat budeme úpravou celkového vzhledu naší aplikace, který
definuje soubor index.html
. Zde musíme kromě základní HTML
struktury naší aplikace doplnit ještě i pár dalších drobností. Jeho
výsledná podoba bude následující:
<!DOCTYPE html> <!-- Kompatibilita se staršími prohlížeči. --> <!--[if lt IE 7]> <html lang="cs" ng-app="cms" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html lang="cs" ng-app="cms" class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html lang="cs" ng-app="cms" class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html lang="cs" ng-app="cms" class="no-js"> <!--<![endif]--> <head> <!-- Úvodní meta informace pro prohlížeč. --> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Popis a titulek aplikace. --> <meta name="description" content="{{description}}"> <title ng-bind="title">Jednoduchý redakční systém v AngularJS</title> <!-- AngularJS ikona. --> <link rel="icon" href="//angularjs.org/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="//angularjs.org/favicon.ico" type="image/x-icon"> <!-- CSS pro zajištění zpětné kompatibility. --> <link rel="stylesheet" href="assets/lib/css/normalize.css"> <link rel="stylesheet" href="assets/lib/css/main.css"> <!-- Globální styly aplikace. --> <link rel="stylesheet" href="assets/css/cms.css"> <!-- JavaScript pro zajištění zpětné kompatibility. --> <script src="assets/lib/js/modernizr.min.js"></script> </head> <body> <!-- Upozornění na aktualizaci u starších prohlížečů. --> <!--[if lt IE 7]> <p class="browsehappy"> Používáte <strong>zastaralý</strong> prohlížeč. Prosím <a href="http://browsehappy.com/">aktualizujte svůj prohlížeč</a>, aby jste mohli naplno využít poskytované služby. </p> <![endif]--> <!-- HTML + AngularJS kód aplikace. --> <header> <h1>Jednoduchý redakční systém v AngularJS</h1> </header> <nav> <ul> <li><a href="#!uvod">Úvod</a></li> <li><a href>Seznam článků</a></li> <li><a href>Kontakt</a></li> </ul> </nav> <br clear="both"/> <article> <header> <h1 ng-cloak>{{title}}</h1> </header> <section> <!-- Vložení obsahu do šablony. --> <ng-view></ng-view> </section> </article> <footer> <p>Ukázkový tutoriál pro jednoduchý redakční systém v AngularJS z programátorské sociální sítě <a href="http://www.itnetwork.cz" target="_blank">itnetwork.cz</a>. </p> </footer> <!-- AngularJS CDN --> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-resource.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-mocks.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-sanitize.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-messages.js"></script> <!-- Hlavní modul aplikace. --> <script src="app/cms.module.js"></script> <!-- Definice routování aplikace. --> <script src="app/cms.routes.js"></script> <!-- Simulace serverového API. --> <script src="api/api.js"></script> <script src="api/entities/article.js"></script> <script src="api/models/article-model.js"></script> <!-- Služby / Model. --> <script src="app/services/articles.factory.js"></script> <!-- Kontrolery. --> <script src="app/controllers/article.controller.js"></script> </body> </html>
Nejdříve tedy doplníme do hlavičky dynamickou změnu title
i
description
, dále vytvoříme základní HTML strukturu naší
aplikace a nakonec nezapomeneme přidat nově definované skripty naší
aplikace.
Za zmínku stojí asi 2 věci. Jednak direktiva ng-view
, kterou
definuje modul ngRoute
a v níž se bude dynamicky měnit obsah
dalších šablon podle routování. A potom způsob definování odkazů
aplikace použitý např. v href
. Celé routování se totiž
projevuje i v rámci URL adresy, ovšem všechny "vnitřní" stránky mají své
URL uvedeny za #. To není z principu považováno za hezké
URL. Mám pro vás ale dobrou zprávu, toto chování lze změnit a vaše
webová aplikace může mít hezké URL adresy se vším všudy. Ovšem
vyžaduje to hned několik netriviálních kroků, takže my se pro jednoduchost
zatím spokojíme s výchozím chováním.
Nyní si již můžete zkusit web spustit a vidět úvodní stránku. Je to jistě příjemný pocit po tom, co jsme změnili tolik kódu, že?
Úplný základ máme zprovozněný.
V příští lekci, Jednoduchý redakční systém v AngularJS - Administrace, si do administrace článků přidáme kontrolery i šablony pro jejich vytváření, editaci a mazání.
Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.
Stáhnout
Stažením následujícího souboru souhlasíš s licenčními podmínkami
Staženo 50x (20.88 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript