Angular 7.0 – Ce este nou în noul său Avatar?

Publicat: 2018-12-29

Forța unei clădiri este în stâlpii ei de beton. La fel este și cadrul pentru o aplicație web. Un cadru software oferă o modalitate standard de a proiecta, construi și implementa aplicații. Într-o lume a platformelor Java, framework-ul Javascript a fost cel mai rostit cuvânt de interes până când Angular a câștigat importanță.
Acum, să vedem câteva caracteristici esențiale ale Angular.

  • Angular este un cadru Javascript open source care s-a transformat în ceea ce se numește „Typescript” acum.
  • Generarea și dezvoltarea codului sunt rapide în comparație cu un cod JS (Javascript).
  • Linia de comandă (CLI) are comenzi pentru a construi aplicația mai rapid.
  • Codul este bine organizat, deoarece folosește componente, ceea ce îmbunătățește productivitatea
  • O directivă este o funcție dinamică care gestionează variabile, instrucțiuni if ​​și bucle în HTML
  • Angular este multiplatformă, prin urmare, este independent de browser și de sistemul de operare
  • Angular CLI vine cu instrumente de testare care sunt utile pentru testarea unitară

Învață cursuri de inginerie software online de la cele mai bune universități din lume. Câștigă programe Executive PG, programe avansate de certificat sau programe de master pentru a-ți accelera cariera.

Cuprins

AngularJS – Un precursor al Angular

AngularJS a fost primul produs din seria Angular introdusă de Google în 2009. Este un cadru pentru client sau front-end. Acest lucru înseamnă că codul rulează pe browserul utilizatorului și nu pe serverul web. AngularJS a fost scris exclusiv în Javascript. Acesta a fost dezvoltat pentru a decupla logica aplicației, cu toate acestea, a fost singura cale destul de reușită și pavată pentru Angular cu actualul său avatar 7.0.
Este AngularJS alegerea potrivită pentru următoarea dezvoltare a aplicațiilor mobile?

Cadrul Angular 7.0

Să înțelegem pe scurt blocurile de bază ale Angular:

  1. Modul : Defalcă practic ecranele de bază ale aplicației în mod logic. De exemplu, dacă există o pagină de coș de cumpărături, s-ar putea dori să aveți un modul de coș de cumpărături.
  2. Componentă : Aceasta este o secțiune a interfeței de utilizare și este o „clasă” ca în programarea orientată pe obiecte. Acesta este elementul fundamental al interfeței cu utilizatorul (UI). Clasa de componente conține logica de bază pentru pagină.
     Componentele sunt formate din:

    1. Șablon : un șablon este scris în HTML sau pot fi fișiere HTML. Poate avea proprietăți dinamice, cum ar fi variabile și utilizarea „dacă condiții” este posibilă cu directive.
    2. Clasa : este codul aplicației. Codul este scris cu dactilografia. Typescript este un superset de Javascript. Typescript este un limbaj de tip „static” în care variabilele sunt declarate cu tipurile definite. Prin urmare, erorile sunt surprinse la compilarea programului, mai degrabă decât să fie surprinse în timpul execuției. Clasele unghiulare pot fi scrise și în Javascript. Componentele au proprietăți și metode de date.
    3. Metadate : Pentru a identifica că clasa este o componentă Angular, se utilizează Metadate. Metadatele pot fi atașate la Typescript folosind o declarație de decorator.
       Să trecem printr-o componentă simplă în Angular.

       Import {component} din ''@angular/core''; Aici pachetul de componente este importat din biblioteca de bază Angular.
@component ({ (aceasta este o declarație a decoratorului)
Selector: „aplicația mea” …(.aceasta este eticheta HTML personalizată pe care o folosim pentru a insera componenta. )
Șablon: „<h1> Bună ziua {(nume)}</h1> (numele este o variabilă)
})
export class AppComponent{ (Aceasta este clasa componentei, iar „nume” este o proprietate din clasă)
nume = 'Cadru unghiular';
}
<corp>
<myapplication>Se încarcă un exemplu de componentă de aplicație aici..</myapplication>
</corp>
    4. Legarea datelor : un proces care permite comunicarea între componentă și vizualizare. Deci datele sunt transmise de la componentă la vizualizare și invers. Există patru tipuri de legare de date. În interpolare și legarea de proprietăți datele sunt trimise de la componentă la vizualizare, iar în legarea de evenimente, datele sunt trimise la componentă din vizualizare sau șablon. În legarea în două sensuri, datele se deplasează în ambele sensuri.
    5. Service : Aceasta este o clasă care este scrisă pentru cod reutilizabil, adică cod care poate fi accesat din mai multe componente. Aceste clase trimit date și funcționalități între componente. Clasele de servicii pot obține și date dintr-o bază de date sau dintr-un fișier js/JSON. Când se folosește o clasă Service, codul pare organizat și fragmentat.
    6. Directivă : Personalizarea atributelor HTML pentru a extinde puterea HTML este o directivă. ngIf, ngFor, ngModel sunt directive. ngModel este responsabil pentru legarea vizualizării în model, pe care alte directive precum input, textarea sau Select necesită.
       Iată o bucată de cod care arată cum funcționează ngmodel.

       <div ng-app="" ng-init="firstName='John'">
<p>Introduceți un nume în caseta de introducere:</p>
<p>Nume: <input type="text" ng-model="firstName"></p>
<p>Ați scris: {{ firstName }}</p>
</div>

      Deci, firstName a fost inițializat la „John” și când se introduce o nouă valoare în caseta de text, firstName va păstra noul nume introdus.

    7. Injecție de dependență (DI) : Clasele au nevoie de obiecte pentru a îndeplini o anumită funcție. În loc să creeze obiectele de fiecare dată în clasă, clasa primește obiectele (dependențele) din surse externe. În cadrul DI, următorii sunt pașii care trebuie urmați:
      1. Creați o clasă de servicii de ex. Datele angajaților
      2. Înregistrați această clasă de service cu Injector. Un injector este un container care deține toate clasele de dependență
      3. Declarați clasa Employeedata ca dependență în clasa care are nevoie de ea, de ex. Clasa EmployeeList
Ce face un dezvoltator de software?

Versiuni de Angular

După AngularJS, a fost lansat Angular 2, care a fost o rescrie completă a lui AngularJS. Componentele au fost adăugate de la Angular 2. Angular 2 nu a fost compatibil cu versiunea inversă. Angular este alcătuit dintr-o grămadă de pachete, iar pachetul Router din Angular 3 nu era sincronizat. Prin urmare, echipa Angular a trecut la Angular 4, care a fost lansat cu toate corecțiile și caracteristicile cu compatibilitate inversă cu Angular 2. Ulterior Angular 5, Angular 6 a fost lansat și cea mai recentă versiune acum este Angular 7 .

Ce este nou în Angular 7.0?

  1. Solicitări CLI : O modificare în promptul liniei de comandă Angular este că CLI solicită utilizatorului să selecteze caracteristicile în timp ce rulează comenzile comune. Caracteristici precum rutarea unghiulară sau formatul foii de stil și multe altele pot fi selectate de utilizator. În versiunile anterioare de Angular, trebuia să vă amintiți și să tastați opțiunile pe prompt.
  2. Performanța aplicației :
    1. Erori frecvente:
       În această versiune, echipa unghiulară a analizat și a eliminat unele greșeli comune făcute de dezvoltatori, cum ar fi umplutura polivalentă „reflect-metadata” a fost inclusă în producție, care este de fapt necesară doar în dezvoltare.
    2. Pachetul-bugete:
       Pentru a îmbunătăți performanța aplicației, bugetele implicite ale pachetului sunt definite în angular.JSON. Dezvoltatorii vor fi acum avertizați dacă dimensiunea pachetului de aplicații depășește o limită de 5 MB și atunci când pachetul inițial depășește 2 MB. Aceste valori pot fi modificate în fișierul JSON după cum este necesar.
  3. Material Angular și CDK: Kitul de dezvoltare a componentelor Angular (CDK) a fost creat din Materialul Angular (UI pentru biblioteci). Cele două funcții noi adăugate în CDK sunt
    1. Defilare virtuală:
       Pentru a încărca doar partea vizibilă pe ecran, pachetul <cdk-virtual-scroll-viewport> oferă asistență pentru directivele care reacționează la evenimentele de defilare. Deci, va reda doar elementele care pot încăpea pe ecran. Când un utilizator defilează prin listă, DOM-ul va încărca și descărca elementele în mod dinamic, în funcție de dimensiunea afișajului.
    2. Suport pentru glisare și plasare:
       Modulul @angular/cdk/drag-drop ajută la tragere și plasare gratuită a unui element, reordonarea elementelor dintr-o listă, mutarea elementelor într-o listă și așa mai departe. Acest lucru se face cu ajutorul directivelor cdkDropList și cdkDrag.
  4. Angular 7.0 și-a actualizat dependențele pentru a suporta Typescript 3.1, RxJS 6.3 și Node 10 .
  5. Accesibilitate îmbunătățită a Selects: „Selectul” nativ are unele avantaje de performanță, accesibilitate și utilizare, prin urmare utilizarea unui element select nativ în interiorul unui „câmp-form-mat” este o caracteristică nouă în Angular 7.0.
  6. Elemente unghiulare: o mică schimbare, dar nou în Angular 7
     „ Angular Elements acceptă acum proiecția conținutului folosind standarde web pentru elemente personalizate .” — Iată ce spune Stephen Fluin, Angular.
  7. Lucrul cu partenerii: echipa Angular a lucrat pentru a colabora cu proiecte comunitare care au fost lansate recent, unul dintre ele este Angular Console. Angular Console este o interfață de utilizator pentru Angular CLI. Este bun pentru începători și experți, deoarece este mult mai ușor decât solicitările. Există diferite versiuni de UI pentru Windows și Mac OS .
Un ghid pentru începători pentru arhitectura MVC în Java

Majoritatea modificărilor din Angular 7.0 se referă la îmbunătățirea performanței și remedierea erorilor. Prin urmare, este cea mai sigură versiune până în prezent și migrarea de la versiunile anterioare este simplă. Ivy este noul motor de randare la care lucrează echipa Angular. Până atunci, hai să așteptăm și să vedem. Continuați să învățați !

Dacă sunteți interesat să aflați mai multe despre dezvoltarea de software full stack, consultați programul Executive PG în dezvoltare software de la upGrad și IIIT-B – Specializare în dezvoltare full stack, care este conceput pentru profesioniști care lucrează și oferă peste 500 de ore de formare riguroasă, 9+ proiecte și sarcini, statutul de absolvenți IIIT-B, proiecte practice practice și asistență pentru locuri de muncă cu firme de top.

Deveniți un dezvoltator Full Stack

Aplicați pentru certificarea upGrad PG legată de locuri de muncă în inginerie software