Share
Enkelsidige programmer lar deg oppdatere en bestemt del av en nettside ved å dirigere innhold som er lagret i en egen .html-fil. Ved å gjøre det, laster du ikke på hovedsiden din.
AngularJS gir en modul kalt ngRoute nøyaktig for dette formålet.
En annen nyttig modul av AngularJS er ngAnimate, noe som gjør det enkelt å animere med bestemte CSS-klasser.
I denne opplæringen vil jeg prøve å forklare hvert trinn grundig, selv om du fortsatt trenger grunnleggende kunnskap om AngularJS for å kunne følge.
Denne index.html-filen kommer til å være vår hovedside der vi har både fast og rutet innhold.
Jeg vil starte med et grunnleggende HTML-dokument og inkludere alle nødvendige biblioteker sammen med vårt tilpassede stilark som heter style.css og en JavaScript-fil angularApp.js.
Nå legger jeg til to DIV med ID navn på fixedContent og routedContent inne i a mainWrapper DIV.
routedContent er også pakket inn i en annen DIV kalt wrapper. Det er fordi routedContent bør være absolutt posisjonert i forhold til en forelder-DIV på grunn av at to forskjellige innholdsstoffer kolliderer med hverandre under ruting-animasjon.
Som id-navnene innebærer, fixedContent vil være det statiske innholdet på vår hovedside, og routedContent vil endre seg dynamisk ved brukernes interaksjon.
For å definere en Angular app i vår HTML-fil, må vi bruke ng-app direktiv. Siden hele siden skal være en Angular app, må vi tilordne dette direktivet til mainWrapper DIV.
Vi trenger også ng-syn Direktivet, som forteller DIV det er tildelt for å vise det rutede sidens innhold.
Nå ser vår index.html fil ut slik:
Vi trenger en navigasjonsmeny for å kunne lede forskjellige deler av innholdet til ng-syn.
Vi skal bruke ul og en elementer for å lage en enkel horisontal meny. Nedenfor kan du se HTML-koden for menystrukturen.
Side1 Side2 Side3 Side4
Som standard er ng-rute modulen bruker ! prefiks. Men her bruker vi bare # foran våre sider som skal sendes. Dette gjøres med hashPrefix attributt som brukes i konfigurasjonen, som jeg vil forklare senere i den tilhørende delen. For nå, ta det som det er.
Vår siste HTML-fil er som følger:
Side1 Side2 Side3 Side4
Siden denne opplæringen fokuserer på AngularJS, kommer jeg ikke til å detaljere CSS styling. Hvis du har tidligere CSS kunnskap, stil siden som du ønsker. Ellers kan du bruke stylingen jeg gir nedenfor.
html, kropp margin: 0; polstring: 0; #mainWrapper display: flex; flex-retning: kolonne; justeringselementer: center; margin-topp: 50px #fixedContent margin-bottom: 50px; #wrapper bredde: 350px; #routedContent bredde: 350px; posisjon: absolutt; ul display: flex; begrunn-innhold: mellomrom mellom; bredde: 350px; margin: 0; polstring: 0; en tekst-dekorasjon: ingen; farge: #FFFFFF; font-familie: Arial; listestil: none; bakgrunnsfarge: #cecece; polstring: 7px 10px; border-radius: 2px;
Hver side som blir sendt til DIV med ng-syn Direktivet inne i hoved HTML-filen kan ha en unik HTML-struktur og CSS-styling.
La oss begynne med page1.html.
Siden vi ønsker en bestemt styling for hver side, trenger vi separate CSS-filer for hver side. Derfor lager vi også en fil som heter page1.css, som vil inneholde styling regler av page1.html.
Den grunnleggende HTML-strukturen for side 1 er som følger:
Side 1
Det er ikke noe du vil, men det er ikke så mye som du vil, men det er ikke et øyeblikk, og du har en god jobb. Ut som et minimum, det er en utfordring å utøve arbeidet med å utvide ut fra dette. Duis aute irure dolor in reprehenderit i voluptate velit esse cillum dolore eu fugiat nulla pariatur.
På toppen koblet vi til CSS-filen som vil styling siden, og vi erklærte en DIV med id-navn på Side 1, hvor hele innholdet vil bli lagt.
Jeg vil holde det enkelt, men det er helt opp til deg hvordan du strukturerer HTML-filen. Bare vær oppmerksom på at beholderen din alltid vil være DIV som den ng-syn Direktivet er tildelt. Så alt i dine rutede sider vil være i forhold til det DIV.
Styling av page1.html er gitt nedenfor:
# page1 font-family: Arial; h1 farge: # ffa42a;
De andre tre sidene kan være helt forskjellige, men for enkelhets skyld bruker jeg bare samme mal for hver HTML-side og litt forskjellige CSS-filer (forskjellige h1 tekst-farger).
Side 2
Er det bare et minimum av innvandrere, og er det bare å utøve dem? Quis er velkjent, og du vil gjenta det, og du vil ikke ha det som følger med dette, men du kan ikke si noe om dette.?
# page2 font-family: Arial; h1 farge: cornflowerblue;
Side 3
Det er ikke noe du vil, men det er ikke så mye som du vil, men det er ikke et øyeblikk, og du har en god jobb. Ut som et minimum, det er en utfordring å utøve arbeidet med å utvide ut fra dette. Duis aute irure dolor in reprehenderit i voluptate velit esse cillum dolore eu fugiat nulla pariatur.
# page3 font-family: Arial; h1 farge: # b2ce6f;
Side 4
Er det bare et minimum av innvandrere, og er det bare å utøve dem? Quis er velkjent, og du vil gjenta det, og du vil ikke ha det som følger med dette, men du kan ikke si noe om dette.?
# page4 font-family: Arial; h1 farge: # ff4517;
Så langt har vi fullført alle nødvendige HTML- og CSS-filer. Nå er det på tide å skrive JavaScript-koden som styrer rutingen og animasjonen.
Siden vår ng-app Direktivet heter mainApp, Vi bruker dette id i modulfunksjonen. Vi må også inkludere ngRoute og ngAnimate avhengig.
mainAngular = angular.module ('mainApp', ['ngRoute', 'ngAnimate']);
Nå har vi tilgang til $ routeProvider og $ locationProvider.
Vi skal bruke $ routeProvider å administrere rutingene og $ locationProvider å endre hashPrefix, som er satt til ! som standard.
Vi bruker .når ('/ side1', templateUrl: 'page1.html') å definere siden som skal sendes når Side 1 er klikket i vår hoved HTML-fil.
Vi gjentar samme linje med kode for hver side som skal sendes. På slutten bruker vi .ellers (redirectTo: '/ page1'), som håndterer uventede sidenavn. Hvis du prøver å besøke et udefinert sidenavn, si page5, Du blir omdirigert til Side 1.
Den komplette JavaScript-koden er under:
Accentsconagua
var mainAngular = angular.module ('mainApp', ['ngRoute', 'ngAnimate']); mainAngular.config (funksjon ($ routeProvider, $ locationProvider) $ routeProvider .when ('/ page1', templateUrl: 'page1.html') .when ('/ page2', templateUrl: 'page2.html' ). Når ('/ side3', templateUrl: 'page3.html'). når ('/ side4', templateUrl: 'page4.html') .otherwise (redirectTo: '/ page1'); $ locationProvider.hashPrefix ("););Ekstra note:Hvis du ønsker å legge til en bestemt ng-kontrolleren Direktiv for eventuelle sider som skal sendes, du kan håndtere dette inne i $ routeProvider.
Et eksempel på Side 1:
.når ('/ side1', templateUrl: 'page1.html', kontrolleren: 'page1Controller')Til slutt bør vår side se slik ut, og du bør kunne navigere mellom sider uten overgangs animasjoner.
Nå er det på tide å animere ruteovergangene.
For animasjonsformål har AngularJS innebygde CSS klasser takket være ngAnimate avhengigheten.
De klassene som vi skal bruke er:
ng-skriv: Start CSS-stilene for enter animasjonen.ng-enter-aktive: De ferdige CSS-stilene for enter animasjonen.ng-forlate: Start CSS-stilene for permisjonen til permisjonen.ng-leave-aktive: De ferdige CSS-stilene for permisjonen til permisjonen.Så det rutede innholdet som kommer inn på hovedsiden har en overgang fra ng-skriv til ng-enter-aktive. På samme måte har innholdet som forlater hovedsiden, en overgang fra ng-forlate til ng-leave-aktive.
Vi må feste ovennevnte klasser til vår routedContent klasse.
Et eksempel på overgang er gitt nedenfor. Du kan enten designe dine egne overgangs animasjoner eller bruke denne i din style.css fil.
# rutedContent.ng-enter transform: translateX (-500px); opasitet: 0; -webkit-overgang: alle 0.35s kubisk-bezier (1, .01,0, .99); -moz-overgang: alle 0,35s kubisk-bezier (1, .01,0, .99); -ms-overgang: alle 0,35s kubisk-bezier (1, .01,0, .99); -o-overgang: alle 0,35s kubisk-bezier (1, .01,0, .99); overgang: alle 0,35s kubisk-bezier (1, .01,0, .99); # rutedContent.ng-enter-active transform: translateX (0px); opasitet: 1; # rutedContent.ng-leave transform: translateX (0); opasitet: 1; -webkit-overgang: alle 0.35s kubisk-bezier (1, .01,0, .99); -moz-overgang: alle 0,35s kubisk-bezier (1, .01,0, .99); -ms-overgang: alle 0,35s kubisk-bezier (1, .01,0, .99); -o-overgang: alle 0,35s kubisk-bezier (1, .01,0, .99); overgang: alle 0,35s kubisk-bezier (1, .01,0, .99); # rutedContent.ng-leave-active transform: translateX (500px); opasitet: 0;
Nedenfor er sluttresultatet av prosjektet på Plunker.
I denne veiledningen dekket vi hvordan du lager SPA-applikasjoner med ng-rute modul av AngularJS, og så animerte vi overgangene gjennom CSS klassene av ng-animere.
Ved å bruke bare fire CSS klasser levert av ng-animere, Du kan oppnå ulike animasjoner. Du kan alltid legge til ekstraklasser for å få mer kontroll over overgangsanimasjonene. For eksempel kan du gjøre sidetransisjonene retningsbestemte.
Jeg nevnte det også ved å legge ved kontrolleren Direktivet til hver bestemt side inne i $ routeProvider, Du kan oppnå ekstra kontroll over hver side.
JavaScript, med sine biblioteker som Angular, har blitt et av de facto språkene for å jobbe på nettet. Det er ikke uten sine lærekurver, og det er nok av rammer og biblioteker for å holde deg opptatt også. Hvis du leter etter flere ressurser for å studere eller bruke i arbeidet ditt, sjekk ut hva vi har tilgjengelig på Envato Market.
Jeg håper denne opplæringen ga deg en helhetlig ide om hvordan du kan bruke ng-rute og ng-animere moduler sammen.
