Share
Enkelsidiga program kan du uppdatera en viss del av en webbsida genom att dirigera innehåll som är lagrat i en separat .html-fil. Genom att göra så laddar du inte tillbaka din huvudsida.
AngularJS ger en modul som heter ngRoute exakt för detta ändamål.
En annan användbar modul för AngularJS är ngAnimate, vilket gör det enkelt att animera med vissa CSS-klasser.
I denna handledning kommer jag att försöka förklara varje steg noggrant, även om du fortfarande behöver en grundläggande kunskap om AngularJS för att kunna följa.
Denna index.html-fil kommer att bli vår huvudsida där vi har både fast och routerat innehåll.
Jag kommer att börja med ett grundläggande HTML-dokument och inkludera alla nödvändiga bibliotek tillsammans med vårt anpassade stilark som heter style.css och en JavaScript-fil angularApp.js.
Nu lägger jag till två DIV med idnamn på fixedContent och routedContent inuti a mainWrapper DIV.
routedContent är också inslaget i en annan DIV heter omslag. Det beror på att routedContent bör vara absolut positionerad i förhållande till en förälder DIV på grund av att två olika innehållsdelar kolliderar med varandra under routing-animering.
Som id namnen innebär, fixedContent kommer att vara det statiska innehållet på vår huvudsida, och routedContent kommer att förändras dynamiskt vid användarens interaktion.
För att definiera en Angular app i vår HTML-fil måste vi använda ng-app direktiv. Eftersom hela sidan kommer att vara en Angular app, måste vi tilldela detta direktiv till mainWrapper DIV.
Vi behöver också ng-view Direktivet, som berättar för DIV det är tilldelat för att visa det dirigerade sidinnehållet.
Nu ser vår index.html-fil ut så här:
Vi behöver en navigeringsmeny för att kunna styra olika innehållsdelar till ng-view.
Vi ska använda ul och en element för att skapa en enkel horisontell meny. Nedan kan du se HTML-snippet för menystrukturen.
Page1 Page2 Page3 Page4
Som standard är ng-rutt modulen använder ! prefix. Men här använder vi bara # framför våra sidor som ska dirigeras. Detta görs med hashPrefix attribut som används i konfigurationen, som jag kommer att förklara senare i den relaterade sektionen. För nu, ta det som det är.
Vår sista HTML-fil är enligt följande:
Page1 Page2 Page3 Page4
Eftersom denna handledning fokuserar på AngularJS, kommer jag inte att detaljera CSS-styling. Om du har tidigare CSS kunskap, utforma sidan som du önskar. Annars kan du använda stilen som jag anger nedan.
html, kropp margin: 0; vaddering: 0; #mainWrapper display: flex; flex-riktning: kolumn; align-items: center; margin-top: 50px #fixedContent margin-bottom: 50px; #wrapper bredd: 350px; #routedContent width: 350px; position: absolut; ul display: flex; motivera innehåll: mellanslag mellan; bredd: 350px; marginal: 0; vaddering: 0; en text-decoration: none; färg: #FFFFFF; font-family: Arial; listestil: none; bakgrundsfärg: #cecece; vaddering: 7px 10px; gränslinje: 2px;
Varje sida som kommer att dirigeras till DIV med ng-view Direktivet i huvud HTML-filen kan ha en unik HTML-struktur och CSS-styling.
Låt oss börja med page1.html.
Eftersom vi vill ha en specifik styling för varje sida behöver vi separata CSS-filer för varje sida. Därför skapar vi också en fil med namnet page1.css, som kommer att innehålla stilreglerna för page1.html.
Den grundläggande HTML-strukturen för sida 1 är som följer:
Sida 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Utan minsta möjliga vänskap, det är inte nödvändigt att utöva arbetskraftsarbeten och utifrån det som följer. Duis aute irure dolor in reprehenderit i voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Överst kopplas vi till CSS-filen som kommer att stylera sidan, och vi förklarade en DIV med id-namn på Sida 1, där hela innehållet kommer att läggas.
Jag kommer att hålla det enkelt, men det är helt upp till dig hur du strukturerar HTML-filen. Tänk bara på att din behållare alltid är den DIV som den ng-view Direktivet är tilldelat. Så allt i dina rutade sidor kommer att vara i förhållande till det DIV.
Styling av page1.html ges nedan:
# page1 font-family: Arial; h1 färg: # ffa42a;
De andra tre sidorna kan vara helt olika, men för enkelhets skull använder jag bara samma mall för varje HTML-sida och lite olika CSS-filer (olika h1 text-färger).
Sida 2
Utan ministernamn, är det bara att utöva sina anställda i arbetet, men det är inte ett annat än en följd? Frågan är omöjlig att avstå från att göra en fulländning om att det inte är en följd av en följd, om du är en del av det, och om du vill veta vad du vill göra.?
# page2 font-family: Arial; h1 färg: cornflowerblue;
Page 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Utan minsta möjliga vänskap, det är inte nödvändigt att utöva arbetskraftsarbeten och utifrån det som följer. Duis aute irure dolor in reprehenderit i voluptate velit esse cillum dolore eu fugiat nulla pariatur.
# page3 font-family: Arial; h1 färg: # b2ce6f;
Page 4
Utan ministernamn, är det bara att utöva sina anställda i arbetet, men det är inte ett annat än en följd? Frågan är omöjlig att avstå från att göra en fulländning om att det inte är en följd av en följd, om du är en del av det, och om du vill veta vad du vill göra.?
# page4 font-family: Arial; h1 färg: # ff4517;
Hittills har vi slutfört alla nödvändiga HTML- och CSS-filer. Nu är det dags att skriva JavaScript-koden som styr routing och animering.
Sedan vår ng-app direktivet heter mainApp, Vi använder denna id i modulfunktionen. Vi måste också inkludera ngRoute och ngAnimate beroenden.
mainAngular = angular.module ('mainApp', ['ngRoute', 'ngAnimate']);
Nu har vi tillgång till $ routeProvider och $ locationProvider.
Vi ska använda $ routeProvider att hantera routningarna och $ locationProvider att ändra hashPrefix, som är inställd på ! som standard.
Vi använder .när ('/ page1', templateUrl: 'page1.html') att definiera den sida som ska dirigeras när Sida 1 klickas i vår huvudsakliga HTML-fil.
Vi upprepar samma kod kod för varje sida som ska dirigeras. I slutet använder vi .annars (redirectTo: '/ page1'), som hanterar oväntade sidnamn. Om du försöker besöka ett odefinierat sidnamn, säg Sida5, Du kommer att omdirigeras till Sida 1.
Den fullständiga JavaScript-koden är nedan:
Accentsconagua
var mainAngular = angular.module ('mainApp', ['ngRoute', 'ngAnimate']); mainAngular.config (funktion ($ routeProvider, $ locationProvider) $ routeProvider .when ('/ page1', templateUrl: 'page1.html'). när ('/ page2', templateUrl: 'page2.html' ). När ('/ page3', templateUrl: 'page3.html'). när ('/ page4', templateUrl: 'page4.html') .otherwise (redirectTo: '/ page1'); $ locationProvider.hashPrefix ("););Extra anmärkning:Om du vill lägga till en specifik ng-regulator Direktiv för alla sidor som ska dirigeras, du kan hantera det här inuti $ routeProvider.
Ett exempel för Sida 1:
.när ('/ page1', templateUrl: 'page1.html', controller: 'page1Controller')I slutet ska vår sida se ut så här, och du ska kunna navigera mellan sidor utan övergångs animeringar.
Nu är det dags att animera rutttransitionerna.
För animationsändamål har AngularJS inbyggda CSS-klasser tack vare ngAnimate-beroendet.
De klasser som vi ska använda är:
ng-ange: Start CSS-format för enter animationen.ng-enter-aktiv: Den färdiga CSS-stilen för enter animationen.ng-permission: Den startande CSS-stilen för ledighetsanimationen.ng-leave-aktiv: Den färdiga CSS-stilen för orlov animationen.Så det dirigerade innehållet som kommer in på huvudsidan har en övergång från ng-ange till ng-enter-aktiv. På samma sätt har innehållet som lämnar huvudsidan en övergång från ng-permission till ng-leave-aktiv.
Vi måste bifoga ovan nämnda klasser till vår routedContent klass.
Ett exempel övergång ges nedan. Du kan antingen designa egna övergångs animeringar eller använda den här inuti din style.css fil.
# routedContent.ng-enter transform: translateX (-500px); opacitet: 0; -webkit-övergång: alla 0,35s cubic-bezier (1, .01,0, .99); -moz-övergång: alla 0,35s kubik-bezier (1, .01,0, .99); -ms-övergång: alla 0,35s kubik-bezier (1, .01,0, .99); -o-övergång: alla 0,35s cubic-bezier (1, .01,0, .99); övergång: alla 0,35s cubic-bezier (1, .01,0, .99); # routedContent.ng-enter-active transform: translateX (0px); opacitet: 1; # routedContent.ng-leave transform: translateX (0); opacitet: 1; -webkit-övergång: alla 0,35s cubic-bezier (1, .01,0, .99); -moz-övergång: alla 0,35s kubik-bezier (1, .01,0, .99); -ms-övergång: alla 0,35s kubik-bezier (1, .01,0, .99); -o-övergång: alla 0,35s cubic-bezier (1, .01,0, .99); övergång: alla 0,35s cubic-bezier (1, .01,0, .99); # routedContent.ng-leave-active transform: translateX (500px); opacitet: 0;
Nedan är slutresultatet av projektet på Plunker.
I denna handledning behandlade vi hur man skapar SPA-applikationer med ng-rutt modul av AngularJS, och sedan animerade vi övergångarna genom CSS klasserna av ng-animera.
Genom att använda endast fyra CSS-klasser som tillhandahålls av ng-animera, du kan uppnå olika animeringar. Du kan alltid bifoga extraklasser för att få större kontroll över övergångsanimationerna. Du kan till exempel göra dina sidövergångar riktningsmedvetna.
Jag nämnde också det genom att bifoga kontrollant Direktivet till varje enskild sida inuti $ routeProvider, Du kan uppnå extra kontroll över varje sida.
JavaScript, med sina bibliotek som Angular, har blivit ett av de faktiska språken för att arbeta på webben. Det är inte utan sina inlärningskurvor, och det finns gott om ramar och bibliotek för att hålla dig upptagen också. Om du letar efter ytterligare resurser att studera eller använda i ditt arbete, kolla vad vi har tillgängligt på Envato Market.
Jag hoppas att denna handledning gav dig en övergripande idé om hur man använder ng-rutt och ng-animera moduler tillsammans.
