☰

» »

angular aplikacija in JQuery

angular aplikacija in JQuery

PH03N1X ::

Razvijam eno Angular SPA aplikacijo 
npm install -g @angular/cli@7.3.9
pa imam težave z vključevanje javascripta (jqueryja - čeprav deluje, ker uporabljam Bootstrap) in CSS-a, kjer imam en main Css in en podsite specific css. Prav tako določen tekst kar manjka, če prav se gre za statičen tekst. Kaj delam narobe:
Struktura za en primer:
index.html
<!doctype html>
<html lang="sl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  
  <title>e-terAPPevt</title>
  <base href="/">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
  <link rel="stylesheet" href="assets/stylesheets/main.css"/> <!-- main se normalno vključuje -->
</head>


<body>
 
  <div>
    <app-ogrodje></app-ogrodje>
  </div>
</body>

</html>

registracija.component.html
    
<head>       
         <link rel="stylesheet" href="assets/stylesheets/signIn.css"/> <!--site specific css-->
</head>
<body>
        <script src="/assets/javascripts/prijavaInRegistracija.js"></script> <!--JS, ki sploh ne deluje -->
        <br>
        <br>
        <div>
            <h2 id="formTitle">Registracija</h2> <!-- se sploh ne vidi-->
            <br/>
            <form id="signIn">
                 <!--elementi v formi-->
            </from>
        </div>
    </body>

ogrodje.html
<header>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary mainNav">
      <a class="navbar-brand" routerLink="/">E - terapija</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-item nav-link active" routerLink="/">Domov <span class="sr-only">(current)</span></a>

          <a class="nav-item nav-link" routerLink="clanki">Članki</a>

          <a class="nav-item nav-link" routerLink="clanek">Članek</a><!-- ustrezno popraviti-->

          <a class="nav-item nav-link" routerLink="vnos-clanka">Vnos članka</a><!-- ustrezno popraviti-->

       
    
          <a class="nav-item nav-link" routerLink="seznam-uporabnikov">Seznam uporabnikov</a>
          <a class="nav-item nav-link" routerLink="odjava">Odjava</a>
          
            <form class="form-inline my-2 my-lg-0">
              <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
              <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
      </div>
    </nav>
    
    <!-- to je le zacasna resitev, ker css se ne dela povsem-->
    <style>
      #osnovniZamik {
        margin-left: 70px;
        margin-right: 70px;
      }
    </style>
</header>

<div id="osnovniZamik">
  <router-outlet></router-outlet>
</div>

<br>
<footer>
    <address>Avtorji spletne strani e-terappevt so ... <br>&copy; 2019 - 2020</address>
</footer>

https://pastebin.com/xGaK0CVC
Za JQ in ANGULAR sem že nekaj bral na SO (za novejše verzije sicer) za CSS pa nimam ravno clue-a kaj delam narobe.

PH03N1X ::

CSSi in JS so dobri, ker mi drugače v statičnih datotekah deluje vse pravilno.

matejm1994 ::

Sicer Angularja ne poznam, tako da pomagat ti ne more, ampak glede na to da je to podobna zadeva kot Vue, zakaj sploh rabiš jQuery?
A ni fora Angularja med drugim tudi to, da se takih knjižnic rešiš in vse kar se tiče DOMa prevzame Angular.

Stari89 ::

@OP:
Narobe je to, da tlačiš dva front-end frameworka na eno stran. Angular in jQuery imet skupaj je precej zgrešeno, saj oba s precej različnimi (in v precejšnji meri nekompatibilnimi) koncepti dosežeta isto reč. Ne rečem, da ni nemogoče in brez koristi, ampak moraš res vedet kaj delaš.
CSSji ti po vsej verjetnosti ne delajo, ker je v Angularju ena reč, ki se ji reče CSS Encapsulation. Na kratko, CSS se pozna samo na pripadajoči komponenti. Več
Naslednji problem je, da dodajaš linke in scripte v index.html. To samo po sebi ni narobe (še posebej ko tankaš iz CDNjev). Načeloma pa se pakete dodaja preko NPMja in referencira v angular.json datoteki. Na ta način imaš vse nastavitve na enem mestu, ne pa raztresene po raznih html datotekah.
Če še vedno želiš uporabljat Bootstrap z Angularjem imaš več opcij. Najbolj očitna je, da si rečeš "jebiga" in v svoj projekt uvoziš jQuery, katerega uporablja izključno Bootstrap za svoje delovanje, ti pa ga enostavno ignoriraš. En lep tutorial: LINK. IMHO boljša opcija je, da uporabiš kak NPM paket, kjer imaš Bootstrapove komponente pripravljene za uporabo v Angularju, brez kakršnihkoli odvisnosti na jQuery. Recimo kaj takega: LINK. Pri Bootstrapu se očitno zavedajo, da jih odvisnost od jQuery precej tepe, zato bo naslednja verzija (5) povsem brez jQuery dependencijev! Juhej
LP

Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
»

HTML in CSS v Visual Studio 2017

Oddelek: Programiranje		91362 (900) Stari89
»

Učenje programiranja (Front-end) (strani: 1 2 )

Oddelek: Programiranje		5213633 (10729) matjash
»

Učenje PHP?

Oddelek: Programiranje		161926 (1417) brodul
»

jquery in div-i (strani: 1 2 )

Oddelek: Izdelava spletišč		8711274 (10012) lisjak
»

Javascript:sprememba/naložitev nove slike v DIV

Oddelek: Izdelava spletišč		142657 (2492) JayKay

Več podobnih tem