Share
Aplicațiile de o singură pagină vă permit să reîmprospătați o anumită porțiune dintr-o pagină web prin rutarea oricărui conținut stocat într-un fișier separat .html. Procedând astfel, nu reîncărcați pagina principală.
AngularJS oferă un modul numit ngRoute exact în acest scop.
Un alt modul util al AngularJS este ngAnimate, ceea ce face ușor animarea cu anumite clase CSS.
În acest tutorial voi încerca să explic fiecare pas cu atenție, deși aveți încă nevoie de o cunoaștere de bază a AngularJS pentru a putea urma.
Acest fișier index.html va fi pagina noastră principală în care avem atât conținut fix, cât și conținut redirecționat.
Voi începe cu un document HTML de bază și va include toate bibliotecile necesare împreună cu foaia de stil personalizată numită style.css și un fișier JavaScript angularApp.js.
Acum adaug doua DIV cu nume de id fixedContent și routedContent în interiorul a mainWrapper DIV.
routedContent este, de asemenea, înfășurat într-un alt nume DIV învelitoare. Asta pentru că routedContent ar trebui să fie poziționat absolut în raport cu un DIV părinte datorită faptului că în timpul animației de rutare, două părți diferite de conținut se ciocnesc unul cu celălalt.
După cum indică numele de id, fixedContent va fi conținutul static al paginii noastre principale și routedContent vor fi schimbate dinamic în urma interacțiunii cu utilizatorul.
Pentru a defini o aplicație Angular în fișierul HTML, trebuie să folosim ng-app directivă. Întrucât întreaga pagină va fi o aplicație Angular, trebuie să atribuim această directivă mainWrapper DIV.
Avem de asemenea nevoie de ng-view , care spune DIV-ului că este alocat să afișeze conținutul paginii redirecționate.
Acum, fișierul index.html arată astfel:
Avem nevoie de un meniu de navigare pentru a direcționa diferite piese de conținut ng-view.
Vom folosi ul și A elemente pentru a crea un simplu meniu orizontal. Mai jos puteți vedea fragmentul HTML pentru structura meniului.
Pagina 1 Pagina2 Pagina3 Pagina4
În mod implicit, funcția ng-route module utilizează ! prefix. Cu toate acestea, aici folosim doar # în fața paginilor noastre pentru a fi rutate. Acest lucru se face cu hashPrefix atribut utilizat în configurație, pe care o voi explica mai târziu în secțiunea corespunzătoare. Pentru moment, ia-o așa cum este.
Fișierul HTML final este după cum urmează:
Pagina 1 Pagina2 Pagina3 Pagina4
Din moment ce acest tutorial se concentrează pe AngularJS, nu voi detalia stilul CSS. Dacă aveți cunoștințe anterioare CSS, stilul paginii așa cum doriți. În caz contrar, puteți utiliza stilul pe care l-am furnizat mai jos.
html, organism margine: 0; umplutura: 0; #mainWrapper display: flex; direcție flexibilă: coloană; aliniere: centru; marginea superioară: 50px #fixedContent margin-bottom: 50px; #wrapper width: 350px; #routedContent width: 350px; poziția: absolută; ul display: flex; justify-content: spațiu-între; lățime: 350px; marja: 0; umplutura: 0; a text-decoration: none; culoare: #FFFFFF; font-familie: Arial; listă: nu există; fundal-culoare: #cecece; padding: 7px 10px; raza de graniță: 2px;
Fiecare pagină care va fi direcționată către DIV cu ng-view directiva din interiorul fișierului HTML principal poate avea o structură HTML unică și stilul CSS.
Sa incepem cu page1.html.
Deoarece dorim un stil specific pentru fiecare pagină, avem nevoie de fișiere CSS separate pentru fiecare pagină. Prin urmare, vom crea, de asemenea, un fișier numit page1.css, care va conține regulile de stil page1.html.
Structura HTML de bază pentru pagina1 este după cum urmează:
Pagina 1
Lorem ipsum dolor stai în ordine, consecutiv, în timp ce se ascultă, în timp ce lucrați în timpul muncii și alături de magna aliqua. Ut enim ad minim veniam, quis exerciții de muncă ultima lucrătoare aliquip ex a commodo consequat. Duis aute irure dolor în reputație în voluptate comandă esse cillum dolore eu fugiat nulla pariatur.
În partea de sus, ne-am conectat la fișierul CSS care va fi stilul paginii și am declarat un DIV cu numele de ID Pagina 1, unde va fi pus întregul conținut.
Voi păstra o simplă, dar vă stau complet la îndoială cum să structurați fișierul HTML. Doar țineți minte că containerul dvs. va fi întotdeauna DIV la care ng-view directiva este atribuită. Deci, tot în paginile dvs. rutate va fi relativ la acel DIV.
Stilul lui page1.html este prezentat mai jos:
# page1 font-family: Arial; h1 culoare: # ffa42a;
Celelalte trei pagini pot fi complet diferite, dar, din motive de simplitate, folosesc același șablon pentru fiecare pagină HTML și fișiere CSS ușor diferite (diferite h1 Text-culori).
Pagina 2
În cazul în care aveți nevoie de un minim de exerciții fizice sau de un exercițiu fizic existent, În cazul în care vă aflați într-o anumită măsură, căutați-le în căsuța de comandă, faceți clic pe următoarea indicație, apoi apăsați pe butonul din stânga sus.?
# pagină2 font-family: Arial; h1 culoare: cornflowerblue;
Pagina 3
Lorem ipsum dolor stai în ordine, consecutiv, în timp ce se ascultă, în timp ce lucrați în timpul muncii și alături de magna aliqua. Ut enim ad minim veniam, quis exerciții de muncă ultima lucrătoare aliquip ex a commodo consequat. Duis aute irure dolor în reputație în voluptate comandă esse cillum dolore eu fugiat nulla pariatur.
# page3 font-family: Arial; h1 culoare: # b2ce6f;
Pagina 4
În cazul în care aveți nevoie de un minim de exerciții fizice sau de un exercițiu fizic existent, În cazul în care vă aflați într-o anumită măsură, căutați-le în căsuța de comandă, faceți clic pe următoarea indicație, apoi apăsați pe butonul din stânga sus.?
# page4 font-family: Arial; h1 culoare: # ff4517;
Până acum, am finalizat toate fișierele HTML și CSS necesare. Acum este timpul să scrieți codul JavaScript care controlează rutarea și animația.
De la noi ng-app directiva este numită mainApp, folosim acest id în funcția modulului. Trebuie, de asemenea, să includem ngRoute și ngAnimate dependențe.
mainAngular = angular.module ("mainApp", ['ngRoute', 'ngAnimate'));
Acum avem acces la $ routeProvider și $ locationProvider.
Vom folosi $ routeProvider pentru a gestiona rutina și $ locationProvider pentru a schimba hashPrefix, care este setat la ! în mod implicit.
Folosim .când ('/ page1', templateUrl: 'page1.html') pentru a defini pagina care trebuie redirecționată atunci când Pagina 1 este făcută clic pe fișierul HTML principal.
Repetăm aceeași linie de cod pentru fiecare pagină care trebuie direcționată. În final, vom folosi .altfel (redirectTo: '/ page1'), care gestionează numele de pagini neașteptate. Dacă încercați să vizitați un nume de pagină nedefinit, spuneți page5, vi se va redirecționa Pagina 1.
Codul JavaScript complet este de mai jos:
Accentsconagua
var mainAngular = angular.module ("mainApp", ['ngRoute', 'ngAnimate']); mainAngular.config (functie ($ routeProvider, $ locationProvider) $ routeProvider .when ('/ page1', templateUrl: 'page1.html') .when ('/ page2', templateUrl:'page2.html ' .when ('/ page3', templateUrl: 'page3.html')). când ('/ page4', templateUrl: 'page4.html') altfel (redirectTo: '/ page1'); $ locationProvider.hashPrefix ("););Notă suplimentară:Dacă doriți să adăugați o specificație ng-controler directive pentru toate paginile care urmează să fie direcționate, puteți face acest lucru în interiorul $ routeProvider.
Un exemplu pentru Pagina 1:
.când ('/ page1', templateUrl: 'page1.html', controler: 'page1Controller')În cele din urmă, pagina noastră ar trebui să arate astfel și ar trebui să navigați între pagini fără animații de tranziție.
Acum este momentul să animați tranzițiile rutei.
În scopuri de animație, AngularJS are built-in clase CSS grație dependenței ngAnimate.
Aceste clase pe care le vom folosi sunt:
ng-enter: Stilurile CSS de pornire pentru animația enter.ng-enter-activă: Stilurile CSS de finisare pentru animația enter.ng-leave: Stilurile CSS de pornire pentru animația de concediu.ng-concediu activ: Stilurile CSS de finisare pentru animația de concediu.Deci, conținutul redirecționat care intră în pagina principală are o tranziție de la ng-enter la ng-enter-activă. De asemenea, conținutul care iese din pagina principală are o tranziție de la ng-leave la ng-concediu activ.
Trebuie să atașăm clasele mai sus menționate routedContent clasă.
O tranziție de exemplu este prezentată mai jos. Puteți să creați propria animație de tranziție sau să o utilizați în interiorul dvs. style.css fişier.
# routedContent.ng-introduceți transform: translateX (-500px); opacitate: 0; -webkit-transition: toate 0.35s cubic-bezier (1, .01,0, .99); -moz-tranziție: toate 0,35s cubic-bezier (1, .01,0, .99); -ms-tranziție: toate 0,35s cubic-bezier (1, .01,0, .99); -o-tranziție: toate 0,35s cubic-bezier (1, .01,0, .99); tranziție: toate 0,35s cubic-bezier (1, .01,0, .99); # routedContent.ng-introduceți-activ transform: translateX (0px); opacitate: 1; # routedContent.ng-lăsați transform: translateX (0); opacitate: 1; -webkit-transition: toate 0.35s cubic-bezier (1, .01,0, .99); -moz-tranziție: toate 0,35s cubic-bezier (1, .01,0, .99); -ms-tranziție: toate 0,35s cubic-bezier (1, .01,0, .99); -o-tranziție: toate 0,35s cubic-bezier (1, .01,0, .99); tranziție: toate 0,35s cubic-bezier (1, .01,0, .99); # routedContent.ng-lăsa-activ transform: translateX (500px); opacitate: 0;
Mai jos este rezultatul final al proiectului pe Plunker.
În acest tutorial, am abordat modul de creare a aplicațiilor SPA cu ng-route modul de AngularJS, iar apoi am animat tranzițiile prin clasele CSS de ng-insufletit.
Utilizând doar patru clase CSS furnizate de ng-insufletit, puteți realiza diverse animații. Puteți să atașați întotdeauna clase suplimentare pentru a avea mai mult control asupra animațiilor de tranziție. De exemplu, puteți face ca pagina dvs. să aibă o direcție conștientă.
Am menționat, de asemenea, că prin atașarea controlor directivă la fiecare pagină specifică din interiorul $ routeProvider, puteți obține un control suplimentar asupra fiecărei pagini.
JavaScript, cu bibliotecile sale, cum ar fi Angular, a devenit una dintre limbile de facto de a lucra pe web. Nu este fără curbele sale de învățare, și există o mulțime de cadre și biblioteci pentru a vă menține ocupați. Dacă sunteți în căutarea unor resurse suplimentare pentru a studia sau a utiliza în munca dvs., verificați ce avem disponibil pe Envato Market.
Sper că acest tutorial ți-a dat o idee generală despre cum să folosești ng-route și ng-insufletit module împreună.
