IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: AngularJS - problém s routováním

Aktivity
Avatar
Ladislav Niderle:30.12.2018 6:04

Ahoj, z nějakého důvodu mi aplikace pořád říká, že mám něco špatně s routováním a při kliku na menu mi neodkáže nima. Snažil jsem se použít nejnovější verzi angularJS 1.7.5

Zkusil jsem: Snažil jsem se jet i podle zdejšího tutoriálu, ale prostě ten problém nevidím.

Zde je ukázka těch souboru:

'use strict';

let app;

app = angular.module('LiCe', ['ngRoute', 'ngResource', 'ngMessages', 'ngCookies']);

app.config(['$routerProvider', function ($routerProvider) {

   let templatePath;
   templatePath = 'app/templates/';

    $routerProvider
        .when('/Home', {
           templateUrl: templatePath + 'home.tpl.html',
           controller: 'homeController'
       })
        .when('/About', {
           templateUrl: templatePath + 'about.tpl.html',
           controller: 'aboutController'
       })
        .when('/Contact', {
           templateUrl: templatePath + 'contact.tpl.html',
           controller: 'contactController'
       })
        .when('/Registration', {
           templateUrl: templatePath + 'registration.tpl.html',
           controller: 'registrationController'
       })
        .when('/Dashboard', {
           templateUrl: templatePath + 'dashboard.tpl.html',
           controller: 'dashboardController'
       })
        .otherwise({
           redirectTo: templatePath + 'home.tpl.html'
       })

}]);

Chci docílit: Původně jsem chtěl i to samotné menu generovat a ne ho mít napevno, ale když vyjde toto, tak by pak mohlo fungovat i ostatní.
Předem moc děkuji za nasměrování

 
Odpovědět
30.12.2018 6:04
Avatar
Jindřich Máca
Tvůrce
Avatar
Odpovídá na Ladislav Niderle
Jindřich Máca:31.12.2018 15:04

Ahoj, ten kód vypadá na první pohled v pohodě. Nechceš sem spíš poslat tu chybu, kterou to píše? :-)

 
Nahoru Odpovědět
31.12.2018 15:04
Avatar
Odpovídá na Jindřich Máca
Ladislav Niderle:3.1.2019 14:35

Už je to v pohodě, měl jsem problém s písmenky, že jsem je tam trošku omylem popřehazoval.

Ale chtěl jsem se heště zeptat zda existuje nějaká možnost jak registrovat jednotlivé kontrolery, directivy a service automaticky, abych pokaždé nemusel zasahovat do souboru index.html.

Děkuji

 
Nahoru Odpovědět
3.1.2019 14:35
Avatar
Jindřich Máca
Tvůrce
Avatar
Odpovídá na Ladislav Niderle
Jindřich Máca:3.1.2019 21:55

Ahoj, otázka jasná, odpověď je trochu komplikovanější, pokud to chci vzít poctivě. :D

Takže je jasné, že JS, jako potažmo většina interpretovaných jazyků, je skládán za běhu aplikace. Tudíž je potřeba správně "manuálně" slinkovat všechny soubory. V prostředí webu, z principu jeho fungovaní, je pak asi nejednodušší prostě je dát ve správném pořadí do HTML kódu stránky pomocí elementu <script>. Chápu ale, že u větších aplikací, obzvláště pak v AngularJS, počet těchto souborů za chvíli nepříjemně narůstá. Naštěstí tohle není jediná cesta, jak to řešit. Dám sem pár odkazů na další populární možnosti:

  • Místo vkládání mnoha elementů <script> použít slinkování pomocí tzv. ES modulů a nechat to přímo na JavaScriptu. Jak na to je popsáno třeba tady - https://developers.google.com/…mers/modules. Obecně jsou zde ale 2 menší komplikace. Za prvé zpětná kompatibilita, jelikož použití modulů v prostředí webu není ještě tak rozšířené, viz. https://caniuse.com/#…. A za druhé naroubování této modulární architektury do již složité struktury AngularJS aplikace.
  • Problém zpětné kompatibility lze pak vyřešit např. pomocí nástroje webpack. Zde je k dispozici návod, přímo pro AngularJS - http://angular-tips.com/…and-webpack/
  • Nebo se ES modulům úplně vyhnout. Pak lze sáhnout po dalších různých sestavovacích nástrojích, které daný JS kód poskládají i do jediného souboru a nejlépe ještě minifikují. Pak stačí v HTML použít jenom tento jediný výsledný soubor. Tady je návod opět přímo pro AngularJS a to s nástrojem Gulp - https://blog.angular-university.io/…-provide-it/. Nevýhodou tady pak může být menší komplikace celého vývojového procesu a nutnost správného nastavení těchto nástrojů.

Tak to by bylo pár příkladů s odkazy, jak řešit tento problém. Určitě to nejsou zdaleka všechny možnosti, takže pokud někdo má nějaký tip, klidně ho sem také napište. Rád se přiučím. :)

 
Nahoru Odpovědět
3.1.2019 21:55
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 4 zpráv z 4.