HTML, JavaScript un CSS ir vieni no priekšgala izstrādes pīlāriem. Angular ir viens no visbiežāk izmantotajiem JavaScript ietvariem klienta puses lietojumprogrammu veidošanai. No otras puses, Bootstrap ir viens no populārākajiem lietotāja interfeisa (UI) ietvariem.
Ietvari ir iepriekš izveidota koda, rīku un bibliotēku kopa, kas piedāvā iepriekš noteiktu veidu, kā veidot lietojumprogrammas. Bootstrap un Angular ir gan ietvari.
Šajā rakstā tiks definēts katrs ietvars un apskatītas abu tehnoloģiju apvienošanas priekšrocības un to apvienošana, lai izveidotu vizuāli pievilcīgas un jaudīgas lietotnes.
Kas ir Bootstrap?
Bootstrap ir bezmaksas priekšgala rīkkopa, lai izveidotu lietojumprogrammas, kas vispirms paredzētas mobilajām ierīcēm. Šajā HTML, CSS un JavaScript ietvarā ir liela atkārtoti lietojamu koda daļu kolekcija, ko izstrādātāji var izmantot dažādās savu projektu daļās.
Šajā ietvarā ir dizaina veidnes dažādām funkcijām, piemēram, pogām, modāļiem, attēlu karuseļiem, tabulām, navigācijām un daudz ko citu. Bootstrap ir pieejama plaša dokumentācija, kas atvieglo lietošanu.
Kas ir AngularJS?
AngularJS ir JavaScript ietvars, kas paplašina HTML sintaksi ārpus parastās iezīmēšanas valodas. Šajā ietvarā ir ieviestas tādas funkcijas kā datu saistīšana, kas ļauj izstrādātājiem izvairīties no sarežģīta adaptīvu tīmekļa lapu izveides procesa, izmantojot HTML.
AngularJS izmanto model-view-controller (MVC) ietvaru, kur ir skaidra atdalīšana starp lietojumprogrammas loģiku un lietotāja interfeisu. Izstrādātāji var izmantot AngularJS, lai izveidotu vienas lapas tīmekļa lietojumprogrammas, sociālo tīklu lietojumprogrammas, e-komercijas platformas, satura pārvaldības sistēmas un daudz ko citu.
Bootstrap izmantošanas priekšrocības Angular režīmā
- Iepriekš iebūvēti lietotāja interfeisa komponenti: jums nav jāizveido navigācijas joslas, pogas, karuseļi un kartītes no jauna, jo Bootstrap ir iepriekš izveidotas koda daļas, kuras varat izmantot. Tādējādi izstrādātāji var vairāk koncentrēties uz funkcionalitāti, kamēr Bootstrap rūpējas par pamata struktūru un stilu.
- Pielāgojams: iepriekš iebūvētie komponenti nodrošina standarta kodu. Tomēr jūs varat pielāgot kodu lietojumprogrammas darbības laikā. Piemēram, ja paņemat karti no Bootstrap, varat mainīt dažādus elementus, piemēram, attēlus un tekstu, lai tie atbilstu savām vajadzībām.
- Adaptīvs: mūsdienu tīmekļa lietotāji pārlūko dažādas ierīces, sākot no viedtālruņiem un planšetdatoriem līdz datoriem. Jums nav jāizveido lietojumprogramma katram ekrāna izmēram, jo Bootstrap nodrošina atsaucīgas tīmekļa lietojumprogrammas.
- Nodrošina konsekventu stilu: labai tīmekļa lietojumprogrammai jābūt konsekventai sajūtai un izskatam dažādās lapās. Bootstrap elementu un komponentu izmantošana var palīdzēt sasniegt šo mērķi.
- Spēcīga kopiena: šajā sistēmā ir daudz resursu un spēcīga dokumentācija, un to atbalsta daudzi izstrādātāji.
Priekšnoteikumi
#1. Node.js
Šī ir JavaScript izpildlaika vide, ko izmantosit, lai palaistu JavaScript kodu ārpus pārlūkprogrammas. Varat pārbaudīt pašreizējo Node.js versiju, izpildot šo komandu;
mezgls -v
Ja tas nav instalēts, varat to instalēt no oficiālās vietnes.
#2. Mezglu pakotņu pārvaldnieks (NPM)
NPM pārvaldīs visas saistītās pakotnes, kas nepieciešamas jūsu Angular lietotnei. NPM tiek instalēts pēc noklusējuma, kad instalējat Node.js. Jūs varat pārbaudīt pašreizējo versiju, izmantojot šo komandu;
npm -v
#3. Leņķiskais CLI
Tas ir komandrindas rīks, ko izmantosim, lai izveidotu Angular lietotnes pamatstruktūru. Jūs varat instalēt Angular CLI, izmantojot šo komandu;
npm instalēt -g @angular/cli
#4. Integrētā izstrādes vide (IDE)
Šeit jūs ierakstīsit savu kodu. Varat izmantot jebkuru IDE, kas atbalsta JavaScript, piemēram, Visual Studio Code vai Webstorm.
Kā pievienot Bootstrap programmai Angular
Tagad mums ir visi rīki, kas nepieciešami mūsu Angular lietotnes izveidei. Ir divas galvenās pieejas Bootstrap pievienošanai Angular; 1. Bootstrap instalēšana, izmantojot NPM. 2. CDN saišu izmantošana
1. pieeja: NPM izmantošana
Mēs varam instalēt visu Bootstrap bibliotēku mūsu projektā, izmantojot NPM. Izpildiet šīs darbības;
1. darbība. Izmantojiet Angular CLI, lai iestatītu lietotnes pamata struktūru
Tipiskā Angular lietotnē ir daudz failu. Mēs nosauksim savu lietotni Angular-bootstrap-mockup (jūs varat piešķirt savai lietotnei jebkuru nosaukumu, kas jums patīk). Izmantojiet šo komandu, lai iestatītu savu lietotni;
jauns leņķa-bootstrap-mockup
Jums tiks sniegti šie jautājumi;
- Vai vēlaties pievienot leņķisko maršrutēšanu? (y/N) ievadiet y
- Kuru stila lapas formātu vēlaties izmantot? Izvēlieties CSS
Kad iestatīšana būs beigusies, jūsu terminālī būs kaut kas līdzīgs šim.
Pārejiet uz izveidoto projektu un pārejiet uz 2. darbību. Varat izmantot šo komandu;
cd angular-bootstrap-mockup
Atveriet projektu savā koda redaktorā. Projekta struktūra būs šāda;
2. darbība: instalējiet sāknēšanas un sāknēšanas ikonas.
Palaidiet šo komandu, lai instalētu abus;
npm instalējiet bootstrap bootstrap-icons
3. darbība: iekļaujiet Bootstrap failā angular.json
Atrodiet failu angular.json savas lietotnes saknes mapē un mainiet šīs rindas;
"styles": [ "node_modules/bootstrap/scss/bootstrap.scss", "node_modules/bootstrap-icons/font/bootstrap-icons.css", "src/styles.scss" ], "scripts": [ "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" ]
4. darbība: instalējiet ng-bootstrap
Ng-bootstrap ir Angular UI komponentu kolekcija, kas izveidota uz Bootstrap ietvara. Dažādie šīs bibliotēkas komponenti ir paredzēti darbam ar AngularJS.
Izmantojiet šo komandu, lai to instalētu;
npm instalējiet @ng-bootstrap/ng-bootstrap
5. darbība. Modificējiet app.module.ts, lai iekļautu NgbModule.
Mainiet faila app.module.ts saturu ar šo;
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
NgbModule,
AppRoutingModule,
],
providers: [
],
bootstrap: [
AppComponent,
],
})
export class AppModule {
}
5. darbība. Modificējiet app.component.ts
import { Component } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
constructor(private modalService: NgbModal) {
}
public open(modal: any): void {
this.modalService.open(modal);
}
}
6. darbība. Pievienojiet Bootstrap elementus failam app.component.html
Vietnē Bootstrap ir daudz komponentu, no kuriem izvēlēties. Mēs izveidosim vienkāršu navigācijas joslu un pievienosim divas pogas.
Mainiet vietnes app.component.html saturu šādi;
<ul class="nav"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link disabled">Blog</a> </li> </ul> <button type="button" class="btn btn-primary btn-lg">Angular</button> <button type="button" class="btn btn-secondary btn-lg">Bootstrap</button>
7. darbība. Palaidiet savu lietotni
Izmantojiet šo komandu;
kalpot
Kad Angular izstrāde darbojas, pārlūkprogrammā varat atvērt http://localhost:4200/.
2. pieeja: pievienojiet Bootstrap programmai Angular, izmantojot CDN saites
Šī pieeja ļauj izveidot tiešu saiti ar satura piegādes tīklu (CDN), kurā tiek glabāti Bootstrap faili.
Izmantojot šo pieeju, jaunā projektā varam izveidot vairākas pogas. Izpildiet šīs darbības;
1. darbība. Izveidojiet jaunu Angular projektu
Mēs nosauksim mūsu lietotni angular-bootstrap-cdn. (Jūs varat izvēlēties jebkuru nosaukumu).
Palaidiet šo komandu;
jauns angular-bootstrap-cdn
Kad instalēšana ir beigusies, mainiet direktoriju un atveriet projektu koda redaktorā. Šo komandu var izmantot, lai ievadītu projekta direktoriju;
cd angular-bootstrap-cdn
2. darbība: iekļaujiet CDN saiti failā index.html
Galvenajā sadaļā atrodiet failu src/index.html un CDN saiti.
<head> ……. href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> ……… </head>
3. darbība. Pievienojiet Bootstrap kodu failam app.component.html
Atrodiet failu src/app/app.component.html.
Jūs varat pievienot šo kodu failam;
<button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-link">Link</button>
4. darbība. Palaidiet savu lietotni
kalpot
bieži uzdotie jautājumi
Vai vienā projektā varat izmantot Bootstrap un Angular Material kopā?
Jā. Bootstrap un Angular Material ir lietotāja saskarnes bibliotēkas, kas izveidotas vienam un tam pašam mērķim. Tomēr, strādājot ar vienu un to pašu komponentu, nevajadzētu izmantot abas bibliotēkas, jo tās var avarēt. Piemēram, ja vēlaties izveidot pieteikšanās lapu, izvēlieties kādu no tām, pamatojoties uz pieejamajiem komponentiem.
Kura Bootstrap versija ir saderīga ar Angular?
Pašreizējā Bootstrap versija šajā rakstīšanas brīdī ir v5.3.0-alpha2. No otras puses, pašreizējā Angular versija ir Angular 15. Jebkas no Bootstrap 4 ir saderīgs ar dažādām Angular versijām. Tomēr, apvienojot abas tehnoloģijas, vienmēr pārbaudiet dokumentāciju gan Bootstrap, gan Angular oficiālajās vietnēs
Kurus projektus varat izveidot, izmantojot Bootstrap un Angular?
Lietojumprogrammām, kuras var izveidot, izmantojot Bootstrap un Angular, nav ierobežojumu. Varat izmantot abus, lai izveidotu vienas lapas lietojumprogrammas, e-komercijas vietnes, sociālās platformas, informācijas paneļus un administratora paneļus. Varat arī izmantot Angular ar Ionic sistēmu, lai izveidotu mobilās lietojumprogrammas.
Vai Angular ir JavaScript vai TypeScript ietvars?
Angular ir JavaScript ietvars. Tomēr Angular ir rakstīts TypeScript, JavaScript superkopā. TypeScript ievieš jaunas funkcijas, kas nav pieejamas JavaScript. Tādējādi varat izmantot Angular gan ar TypeScript, gan Angular lietotnēm.
Secinājums
Tagad varat ērti izmantot divus no populārākajiem priekšgala ietvariem — Angular un Bootstrap, lai izveidotu dažādas lietojumprogrammas.
Pieejas izvēle būs atkarīga no lietošanas gadījuma un izveidojamās lietotnes veida.
Lai gan CDN pieeja izskatās vienkārša, tai ir arī dažādas negatīvās puses. Lielākais izaicinājums ir jūsu lietotnes drošība, jo hakeri var izmantot CDN, lai nosūtītu uz jūsu vietni ļaunprātīgus skriptus.
Instalējot Bootstrap, izmantojot NPM, varat kontrolēt kodu, ko iekļaujat savā lietojumprogrammā. Tomēr šī pieeja var būt laikietilpīga, jo jums ir jālejupielādē visas atkarības.
Uzziniet, kā React lietotnei pievienot Bootstrap.