Kas ir veidnes URL un stila URL leņķiskajā formātā?

Kas ir veidnes URL un stila URL leņķiskajā formātā?
Tādi lasītāji kā jūs palīdz atbalstīt MUO. Veicot pirkumu, izmantojot saites mūsu vietnē, mēs varam nopelnīt filiāles komisiju.

Izmantojot Angular, varat sadalīt lapas, dialoglodziņus vai citas lietotnes sadaļas komponentos. Angular lietojumprogrammas komponenti galvenokārt sastāv no HTML, CSS un TypeScript failiem.





bezsaistes GPS lejupielāde android bez maksas

TypeScript failā varat pievienot jebkuru loģiku, kas nepieciešama lietotāja interfeisa darbībai, piemēram, datu izgūšanu no servera.





Varat arī renderēt komponenta HTML un CSS, izmantojot TypeScript, norādot tā veidnes un stila atribūtus. Varat izmantot templateUrl vai styleUrls, lai izveidotu saiti uz ārējiem HTML vai CSS failiem.





DIENAS VIDEO MAKEUSEOF

Kas ir veidne un veidnes URL valodā Angular?

Kad jūs izveidot savu komponentu Angular , varat atveidot tā HTML, izmantojot veidni. Ir divi veidi, kā rakstīt HTML veidni:

  • HTML kodu varat ierakstīt veidnē pašā TypeScript failā.
  • Varat ierakstīt HTML kodu ārējā failā un saistīt TypeScript failu ar šo HTML failu.

Jaunā komponentā varat iestatīt atribūtus “template” vai “templateUrl” atkarībā no tā, kur rakstāt HTML.



nevar kopēt failus uz ārējo cieto disku Windows 7
  1. Izveidot a jauna Angular lietotne .
  2. Lietojumprogrammas terminālī palaidiet no ģenerēšanas komponenta komandu, lai izveidotu jaunu komponentu. Izsauciet jauno komponentu 'about-page'.
    ng generate component about-page
  3. In app.component.html, aizstāt pašreizējo kodu ar sava jaunā komponenta tagiem:
    <app-about-page></app-about-page>
  4. Atveriet about-page.component.ts failu. Ja jums nav daudz HTML koda, varat izmantot veidnes atribūtu, lai to ierakstītu tieši TypeScript failā. Nomainiet @Component dekoratoru ar šādu:
    @Component({ 
    selector: 'app-about-page',
    template: '<h2>About Page</h2><br><p>This is rendering the HTML from the TypeScript file!</p>'
    })
  5. Ja vēlaties iekļaut vairāku rindu veidni, varat izmantot pēdiņas ar ķeksīti:
    @Component({ 
    selector: 'app-about-page',
    template: `<h2>About Page</h2>
    <br>
    <p>This is rendering the HTML from the TypeScript file!</p>`
    })
    .
  6. Terminālī ierakstiet no kalpot lai apkopotu savu kodu un palaistu to tīmekļa pārlūkprogrammā. Atveriet savu lietotni vietnē http://localhost:4200/. Your HTML code from the TypeScript file will render on the page.
  7. In about-page.component.ts , aizstājiet 'veidni' ar 'templateUrl'. Iekļaujiet saiti uz komponenta ārējo HTML failu. Varat izmantot “templateUrl”, ja jums ir sarežģītāks HTML kods, kuram nepieciešams savs fails.
    @Component({ 
    selector: 'app-about-page',
    templateUrl: './about-page.component.html'
    })
  8. Pievienojiet HTML kodu about-page.component.html fails:
    <h2>About Page</h2> 
    <p>This is rendering the HTML from the HTML file!</p>
  9. Atgriezieties pārlūkprogrammā vai palaidiet vēlreiz no kalpot lai atkārtoti apkopotu savu kodu. Atveriet savu lietotni vietnē http://localhost:4200/. The browser now renders the HTML from the about-page.component.html failu.

Kas ir stili un stila URL leņķī?

Līdzīgi kā HTML, atkarībā no tā, kur izvēlaties glabāt savu CSS, varat izmantot vai nu 'style' vai 'styleUrls'.

TypeScript kodā varat iekļaut CSS, ja jums ir ļoti vienkāršas CSS deklarācijas. Pretējā gadījumā varat izmantot 'styleUrl', lai saistītu TypeScript failu ar ārēju CSS, kurā ir vairāk stilu.





  1. Iepriekš izveidotajā Angular lietojumprogrammā atveriet about-page.component.ts failu. Pievienojiet komponentam atribūtu 'styles'. Sadaļā 'Stili' pievienojiet savu CSS stilu lapai:
    @Component({ 
    selector: 'app-about-page',
    templateUrl: './about-page.component.html',
    styles: ['h2 {color:red}','p {color:green}']
    })
  2. Terminālī ierakstiet no kalpot lai apkopotu savu kodu un palaistu to tīmekļa pārlūkprogrammā. Atveriet savu lietotni vietnē http://localhost:4200/ to view the styling specified in the TypeScript file.
  3. Ja jums ir daudz CSS, izmantojiet 'styleUrls', nevis 'styles', lai saistītu TypeScript failu ar ārēju CSS failu. In about-page.component.ts , nomainiet @Component dekoratoru ar šādu:
    @Component({ 
    selector: 'app-about-page',
    templateUrl: './about-page.component.html',
    styleUrls: ['./about-page.component.css']
    })
  4. Pievienojiet kādu CSS stilu about-page.component.css :
    h2 { 
    color: blue
    }
    p {
    color: darkorange
    }
  5. Atgriezieties pārlūkprogrammā vai palaidiet vēlreiz no kalpot lai atkārtoti apkopotu savu kodu. Atveriet savu lietotni vietnē http://localhost:4200/ to view the styles used from the external CSS file.

Komponenta HTML renderēšana leņķiskā formātā

Tagad jūs zināt dažādus veidus, kā Angular lietojumprogrammā varat renderēt savu HTML un CSS saturu. Varat noteikt, kuru pieeju vēlaties izmantot, pamatojoties uz jūsu HTML un CSS sarežģītību.

Ja jūs interesē, varat izpētīt, kā nodot datus starp Angular komponenta HTML un TypeScript failiem.