AngularJS-i marsruutimise näide parameetritega

Enne kui õpime tundma, kuidas Angularis marsruutimine töötab, anname üheleheliste rakenduste kohta kiire ülevaate.

Mis on ühelehelised rakendused?

Ühe lehe rakendused ehk SPA-d on veebirakendused, mis laadivad ühe HTML-lehe ja värskendavad seda dünaamiliselt vastavalt kasutaja suhtlusele veebirakendusega.

Võtame näite saidi kohta, mida hostitakse URL-i kaudu http://example.com/index.html.

Sellel lehel majutaksite oma rakenduse avalehte. Oletame, et rakendus korraldas sündmust ja soovitakse näha, millised on erinevad kuvatavad sündmused, või soovite näha konkreetse sündmuse üksikasju või sündmuse kustutada. Kui marsruutimine on lubatud ühe lehe rakenduses, on kõik need funktsioonid saadaval järgmiste linkide kaudu

http://example.com/index.html#ShowEvent

http://example.com/index.html#DisplayEvent

http://example.com/index.html#DeleteEvent

Sümbolit # kasutatakse koos erinevate marsruutidega (ShowEvent, DisplayEvent ja DeleteEvent).

• Nii et kui kasutaja soovib näha kõiki sündmusi, suunatakse ta lingile (http://example.com/index.html#ShowEvent), muidu
• Kui nad tahavad lihtsalt näha konkreetset sündmust, suunatakse nad uuesti lingile ( http://example.com/index.html#DisplayEvent) Või
• Kui nad soovivad sündmust kustutada, suunatakse nad lingile http://example.com/index.html#DeleteEvent.

Pange tähele, et peamine URL jääb samaks.

AngularJS-marsruudi lisamine $routeProvider abil

Nii nagu me varem arutasime, marsruudid sisse AngularJS kasutatakse kasutaja suunamiseks teie rakenduse muusse vaatesse. Ja see marsruutimine toimub samal HTML lehel, et kasutajal oleks kogemus, et ta polegi lehelt lahkunud.

Marsruutimise rakendamiseks tuleb teie rakenduses mis tahes kindlas järjekorras rakendada järgmised peamised sammud.

1. Viide angular-route.js-le. See on a JavaScript Google'i välja töötatud fail, millel on kõik marsruutimise funktsioonid. See tuleb paigutada teie rakendusse, et see saaks viidata kõigile peamistele marsruutimiseks vajalikele moodulitele.
2. Järgmine oluline samm on ngRoute'i moodulile sõltuvuse lisamine oma rakendusest. See sõltuvus on vajalik selleks, et rakenduses saaks kasutada marsruutimise funktsioone. Kui seda sõltuvust ei lisata, ei saa rakenduses angular.JS marsruutimist kasutada.

Allpool on selle avalduse üldine süntaks. See on lihtsalt tavaline mooduli deklaratsioon, mis sisaldab märksõna ngRoute.

var module = angular.module("sampleApp", ['ngRoute']);

3. Järgmine samm oleks $routeProvider konfigureerimine. See on vajalik teie rakenduses erinevate marsruutide pakkumiseks. Allpool on selle avalduse üldine süntaks, mis on väga iseenesestmõistetav. See lihtsalt ütleb, et kui vastav tee on valitud, kasutage marsruuti antud vaate kuvamiseks kasutajale.

when(path, route)

4. Lingid teie marsruudile teie HTML-lehelt. Lisate oma HTML-lehele viitelingid teie rakenduses erinevatele saadaolevatele marsruutidele.

<a href="#/route1">Route 1</a><br/>

5. Lõpuks oleks kaasatud ng-view direktiiv, mis oleks tavaliselt sildis div. Seda kasutatakse vastava marsruudi valimisel vaate sisu sisestamiseks.

AngularJS-i marsruutimise näide

Vaatame nüüd näidet marsruutimisest, kasutades ülalnimetatud samme.

Meie AngularJS-i parameetritega marsruutimise näites

Esitame kasutajale 2 linki,

• Üks on teemade kuvamine an Nurga JS muidugi ja teine ​​on mõeldud Node.js muidugi.
• Kui kasutaja klõpsab kummalgi lingil, kuvatakse selle kursuse teemad.

Step 1) Kaasake skripti viitena nurkmarsruudi fail.

See marsruudifail on vajalik mitme marsruudi ja vaate funktsioonide kasutamiseks. Selle faili saab alla laadida veebisaidilt angular.JS.

Step 2) Lisage href-sildid, mis tähistavad linke „Angular JS-i teemadele” ja „Node JS-teemadele”.

Step 3) Lisage ng-view direktiiviga div silt, mis esindab vaadet.

See võimaldab sisestada vastava vaate alati, kui kasutaja klõpsab valikul „Angular JS Topics” või „Node JS Topics”.

Step 4) Lisage AngularJS-i skriptimärgendisse „ngRoute module” ja teenus „$routeProvider”.

Koodi selgitus:

1. Esimene samm on mooduli ngRoute kaasamine. Kui see on paigas, haldab Angular teie rakenduses marsruutimist automaatselt. Google'i välja töötatud moodulil ngRoute on kõik funktsioonid, mis võimaldavad marsruutimist. Selle mooduli lisamisel mõistab rakendus automaatselt kõiki marsruutimiskäske.
2. $routeprovider on teenus, mida Angular kasutab kutsutavate marsruutide taustal kuulamiseks. Nii et kui kasutaja klõpsab lingil, tuvastab AngularJS-i marsruudipakkuja selle ja otsustab seejärel, millise marsruudi valida.
3. Looge nurgalingi jaoks üks marsruut – see plokk tähendab, et kui klõpsate Angular linki, sisestage fail Angular.html ja kasutage mis tahes äriloogika töötlemiseks ka kontrollerit "AngularController".
4. Looge sõlme lingile üks marsruut – see plokk tähendab, et kui sõlme lingil klõpsate, sisestage fail Node.html ja kasutage mis tahes äriloogika töötlemiseks ka kontrollerit "NodeController".

Step 5) Järgmisena tuleb lisada kontrollerid, et töödelda nii AngularControlleri kui ka NodeControlleri äriloogikat.

Igas kontrolleris loome võtme-väärtuste paaride massiivi, et salvestada iga kursuse teemade nimed ja kirjeldused. Massiivimuutuja 'tutorial' lisatakse iga kontrolleri ulatuse objektile.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
</head>
<body ng-app="sampleApp">
<title>Event Registration</title>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>

<h1> Guru99 Global Event</h1>

<div class="container">
    <ul>
        <li><a href="#Angular">Angular JS Topics</a></li>
        <li><a href="#Node.html">Node JS Topics</a></li>
    </ul>
    <div ng-view></div>
</div>

<script>
    var sampleApp = angular.module('sampleApp',['ngRoute']);
    sampleApp.config(['$routeProvider',

        function($routeProvider){
        $routeProvider.
        when('/Angular',{
            templateUrl : '/Angular.html',
            controller: 'AngularController'
        }).
        when("/Node", {
            templateUrl: '/Node.html',
            controller: 'NodeController'
        });
    }]);
    sampleApp.controller('AngularController',function($scope) {

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]
    });

    sampleApp.controller('NodeController',function($scope){

        $scope.tutorial = [
            {Name:"Promises",Description :"Power of Promises"},
            {Name:"Event",Description :"Event of Node.js"},
            {Name:"Modules",Description :"Modules in Node.js"}
            ]
    });

</script>
</body>
</html>

Step 6) Looge lehed nimega Angular.html ja Node.html. Iga lehe puhul teostame alltoodud samme.

Need sammud tagavad, et kõik massiivi võtme-väärtuste paarid kuvatakse igal lehel.

1. Kasutades käsku ng-repeat, et läbida iga õpetuse muutujas määratletud võtme-väärtuse paar.
2. Iga võtme-väärtuse paari nime ja kirjelduse kuvamine.

• Nurk.html

<h2>Anguler</h2>
<ul ng-repeat="ptutor in tutorial">
    <li>Course : {{ptutor.Name}} - {{ptutor.Description}}</li>
</ul>

• Node.html

<h2>Node</h2>
<ul ng-repeat="ptutor in tutorial">
    <li>Course : {{ptutor.Name}} - {{ptutor.Description}}</li>
</ul>

Kui kood on edukalt käivitatud, kuvatakse koodi brauseris käivitamisel järgmine väljund.

Väljund:

Kui klõpsate lingil AngularJS teemad, kuvatakse allolev väljund.

Väljund näitab selgelt, et

• Kui klõpsate linki „Angular JS-i teemad”, otsustab meie koodis deklareeritud routePakkuja, et tuleb sisestada kood Angular.html.
• See kood sisestatakse märgendisse "div", mis sisaldab ng-view direktiivi. Samuti pärineb kursuse kirjelduse sisu "õpetuse muutujast", mis oli osa AngularControlleris määratletud ulatuse objektist.
• Kui üks klõpsab Node.js Teemad, toimub sama tulemus ja kuvatakse Node.js-i teemade vaade.
• Samuti pange tähele, et lehe URL jääb samaks, muutub ainult marsruut pärast märgendit #. Ja see on üheleheliste rakenduste kontseptsioon. URL-is olev märgend #hash on eraldaja, mis eraldab marsruudi (meie puhul on "nurk", nagu on näidatud ülaloleval pildil) ja HTML-i põhilehte (Sample.html)

Vaikimisi marsruudi loomine AngularJS-is

AngularJS-i marsruutimine pakub ka võimalust kasutada vaikemarsruuti. See on marsruut, mis valitakse juhul, kui olemasolevale marsruudile pole vastet.

Vaikimisi marsruut luuakse teenuse $routeProvider määratlemisel järgmise tingimuse lisamisega.

Allolev süntaks tähendab lihtsalt ümbersuunamist teisele lehele, kui mõni olemasolevatest marsruutidest ei ühti.

otherwise ({
    redirectTo: 'page'
});

Kasutame sama ülaltoodud näidet ja lisame oma $routeProvider teenusele vaikemarsruudi.

function($routeProvider){
$routeProvider.

when('/Angular',{
templateUrl : 'Angular.html',
controller: 'AngularController'
}).

when("/Node", {
templateUrl: 'Node.html',
controller: 'NodeController'
}).
otherwise({
    redirectTo:'/Angular'
});
}]);

Koodi selgitus:

1. Siin kasutame sama koodi nagu ülal, ainsaks erinevuseks on see, et kasutame muidu avaldust ja valikut "redirectTo", et määrata, milline vaade tuleks laadida, kui marsruuti pole määratud. Meie puhul tahame, et kuvatakse vaade „/Angular”.

Kui kood on edukalt käivitatud, kuvatakse koodi brauseris käivitamisel järgmine väljund.

Väljund:

Väljundist,

• Näete selgelt, et vaikevaade on JS-i nurkvaade.
• Selle põhjuseks on asjaolu, et lehe laadimisel läheb see funktsiooni $routeProvider valikule „muidu” ja laadib vaate „/Angular”.

Kuidas pääseda AngularJS-marsruudi parameetritele juurde

Angular pakub ka funktsiooni marsruutimise ajal parameetrite esitamiseks. Parameetrid lisatakse URL-is marsruudi lõppu, näiteks http://guru99/index.html#/Angular/1. Selles nurkmarsruutimise näites

1. , http://guru99/index.html on meie peamine rakenduse URL
2. Sümbol # on peamise rakenduse URL-i ja marsruudi eraldaja.
3. Nurk on meie marsruut
4. Ja lõpuks '1' on parameeter, mis lisatakse meie marsruudile

Süntaks selle kohta, kuidas parameetrid URL-is välja näevad, on näidatud allpool:

HTMLPage#/marsruut/parameeter

Siin märkate, et parameeter edastatakse URL-is marsruudi järel.

Nii et ülaltoodud AngularJS-i marsruutide näites Angular JS-i teemade jaoks saame edastada parameetrid, nagu allpool näidatud

Sample.html#/Angular/1

Sample.html#/Angular/2

Sample.html#/Angular/3

Siin võivad parameetrid 1, 2 ja 3 tegelikult tähistada teemat.

Vaatame üksikasjalikult, kuidas nurgamarsruuti rakendada parameetriga:

Samm 1) Lisage oma vaatele järgmine kood

1. Lisage tabel, et kuvada kasutajale kõik Angular JS kursuse teemad
2. Lisage tabeli rida teema „Kontrollijad” kuvamiseks. Muutke selle rea href-märgend väärtuseks „Angular/1”, mis tähendab, et kui kasutaja sellel teemal klõpsab, edastatakse parameeter 1 URL-is koos marsruudiga.
3. Lisage tabeli rida teema „Modelid” kuvamiseks. Muutke selle rea märgendiks href „Angular/2”, mis tähendab, et kui kasutaja sellel teemal klõpsab, edastatakse parameeter 2 URL-is koos marsruudiga.
4. Lisage tabeli rida teema „Direktiivid” kuvamiseks. Muutke selle rea märgendiks href väärtuseks „Angular/3”, mis tähendab, et kui kasutaja sellel teemal klõpsab, edastatakse parameeter 3 URL-is koos marsruudiga.

Samm 2) Lisage teema ID funktsiooni Routeprovider teenusesse
Lisage marsruuditeenuse osutaja teenuse funktsioonis:topicId, mis tähistab, et iga marsruudi järel URL-is edastatud parameeter tuleks määrata muutujale topicId.

Samm 3) Lisage kontrollerile vajalik kood

1. Lisage kontrolleri funktsiooni määratlemisel esmalt parameetrina "$routeParams". Sellel parameetril on juurdepääs kõigile URL-is edastatud marsruudiparameetritele.
2. Parameetril „routeParams” on viide objektile topicId, mis edastatakse marsruudiparameetrina. Siin lisame oma ulatuseobjektile muutuja '$routeParams.topicId' muutujana '$scope.tutitalid'. Seda tehakse selleks, et sellele saaks meie vaates viidata muutuja Tutorialid kaudu.

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
    <thead>
    <tr> <th>#</th><th>Angular JS topic</th><th>Description</th><th></th> </tr> </thead>
    <tbody>
    <tr>
        <td>l</td><td>l</td><td>Controllers</td>
        <td><a href="#Angular/l">Topic details</a></td>
    </tr>
    <tr>
        <td>2</td><td>2</td><td>Models</td>
        <td><a href="#Angular/2">Topic details</a></td>
    </tr>
    <tr>
        <td>3</td><td>3</td><td>Directives</td>
        <td><a href="#Angular/3">Topic details</a></td>
    </tr>
    </tbody>
</table>

<script>
    var sampleApp = angular.module('sampleApp',['ngRoute']);

    sampleApp.config(
        function($routeProvider){
            $routeProvider.
            when('/Angular/:topicId',{
                templateUrl : 'Angular.html',
                controller: 'AngularController'
            })
        });

    sampleApp.controller('AngularController',function($scope,$routeParams) {

        $scope.tutorialid=$routeParams.topicId

    });
</script>
</body>
</html>

Samm 4) Lisage avaldis kuvatava muutuja jaoks
Lisage avaldis, et kuvada juhendi muutuja lehel Angular.html.

<h2>Anguler</h2>

<br><br>{{tutorialid}}

Kui kood on edukalt käivitatud, kuvatakse koodi brauseris käivitamisel järgmine väljund.

Väljund:

Väljundekraanil

• Kui klõpsate esimese teema lingil Teema üksikasjad, lisatakse URL-ile number 1.
• Teenus Angular.JS kasutab seda numbrit „marsruudiparameetri” argumendiks ja seejärel pääseb sellele juurde meie kontroller.

Kuidas kasutada Angular $route teenust

Teenus $route võimaldab juurdepääsu marsruudi omadustele. Teenus $route on parameetrina saadaval, kui funktsioon on kontrolleris defineeritud. Allpool on näidatud üldine süntaks selle kohta, kuidas parameeter $route kontrollerist saadaval on;

myApp.controller('MyController',function($scope,$route)

1. myApp on teie rakenduste jaoks määratletud moodul angular.JS
2. MyController on teie rakenduse jaoks määratud kontrolleri nimi
3. Nii nagu teie rakenduse jaoks on saadaval muutuja $ ulatus, mida kasutatakse teabe edastamiseks kontrollerist vaatesse. Parameetrit $route kasutatakse marsruudi omadustele juurdepääsuks.

Vaatame, kuidas saame teenust $route kasutada.

Selles näites

• Loome lihtsa kohandatud muutuja nimega "mytext", mis sisaldab stringi "See on nurk".
• Me lisame selle muutuja oma marsruudile. Ja hiljem pääseme sellele stringile oma kontrollerist juurde, kasutades teenust $route, ja seejärel kasutame selle kuvamiseks skoobi objekti.

Niisiis, vaatame samme, mida peame selle saavutamiseks tegema.

Step 1) Lisage marsruudile kohandatud võtme-väärtuse paar. Siin lisame võtme nimega "mytext" ja määrame sellele väärtuse "See on nurk".

Step 2) Lisa kontrollerile vastav kood

1. Lisage kontrolleri funktsioonile parameeter $route. Parameeter $route on nurgas määratletud võtmeparameeter, mis võimaldab juurdepääsu marsruudi omadustele.
2. Marsruudil määratletud muutujale "mytext" pääseb juurde viite $route.current kaudu. Seejärel määratakse see ulatuse objekti muutujale "tekst". Tekstimuutujale pääseb seejärel vastavalt vaatest juurde.

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
    <thead>
    <tr> <th>#</th><th>Angular JS topic</th><th>Description</th><th></th> </tr> </thead>
    <tbody>
    <tr>
        <td>l</td><td>l</td><td>Controllers</td>
        <td><a href="#Angular/l">Topic details</a></td>
    </tr>
    <tr>
        <td>2</td><td>2</td><td>Models</td>
        <td><a href="#Angular/2">Topic details</a></td>
    </tr>
    <tr>
        <td>3</td><td>3</td><td>Directives</td>
        <td><a href="#Angular/3">Topic details</a></td>
    </tr>
    </tbody>
</table>

<script>
    var sampleApp = angular.module('sampleApp',['ngRoute']);

    sampleApp.config(['$routeProvider',
        function($routeProvider){
            $routeProvider.
            when('/Angular/:topicId',{
                mytext:"This is angular",
                templateUrl : 'Angular.html',
                controller: 'AngularController'
            })
        }]);

    sampleApp.controller('AngularController',function($scope,$routeParams,$route) {

        $scope.tutorialid=$routeParams.topicId;
        $scope.text=$route.current.mytext;

    });
</script>
</body>
</html>

Step 3) Lisage avaldisena viide ulatuseobjektist tekstimuutujale. See lisatakse meie Angular.html lehele, nagu allpool näidatud.

Selle tulemusel sisestatakse vaatesse tekst "See on nurgeline". Avaldis {{tutorilid}} on sama, mis eelmises teemas ja see kuvab numbri '1'.

<h2>Anguler</h2>

<br><br>{{text}}

<br><br>

Kui kood on edukalt käivitatud, kuvatakse koodi brauseris käivitamisel järgmine väljund.

Väljund:

Väljundist,

• Näeme, et tekst "See on nurk" kuvatakse ka siis, kui klõpsame tabelis mis tahes lingil. Tekstiga samal ajal kuvatakse ka teema ID.

HTML5 marsruutimise lubamine

HTML5 marsruutimist kasutatakse põhiliselt puhta URL-i loomiseks. See tähendab hashtag'i eemaldamist URL-ist. Seega kuvatakse marsruutimise URL-id, kui kasutatakse HTML5 marsruutimist, nagu allpool näidatud

Näidis.html/Angular/1

Näidis.html/Angular/2

Näidis.html/Angular/3

Seda kontseptsiooni nimetatakse tavaliselt kasutajale ilusa URL-i esitamiseks.

HTML2 marsruutimiseks tuleb läbi viia kaks peamist sammu.

1. $locationProvider seadistamine
2. Suhteliste linkide baasi määramine

Vaatame üksikasjalikult, kuidas ülaltoodud samme meie ülaltoodud näites läbi viia

Step 1) Lisage nurgamoodulile vastav kood

1. Lisage rakendusele baseURL-i konstant – see on vajalik HTML5 marsruutimiseks, et rakendus teaks, mis on rakenduse baasasukoht.
2. Lisage $locationProvider teenused. See teenus võimaldab teil määrata HTML5-režiimi.
3. Määrake teenuse $locationProvider HTML5Mode väärtuseks true.

Step 2) Kergesti loetava URL-i loomiseks eemaldage linkidelt kõik #sildid ('Angular/1', 'Angular/2', 'Angular/3').

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
    <thead>
    <tr> <th>#</th><th>Angular JS topic</th><th>Description</th><th></th> </tr> </thead>
    <tbody>
    <tr>
        <td>l</td><td>l</td><td>Controllers</td>
        <td><a href="Angular/l">Topic details</a></td>
    </tr>
    <tr>
        <td>2</td><td>2</td><td>Models</td>
        <td><a href="Angular/2">Topic details</a></td>
    </tr>
    <tr>
        <td>3</td><td>3</td><td>Directives</td>
        <td><a href="Angular/3">Topic details</a></td>
    </tr>
    </tbody>
</table>

<script>
    var sampleApp = angular.module('sampleApp',['ngRoute']);
    sampleApp.constant("baseUrl","http://localhost:63342/untitled/Sample.html/Angular");

    sampleApp.config(
        function($routeProvider,$locationProvider){
            $routeProvider.
            when('/Angular/:topicId',{
                templateUrl : 'Angular.html',
                controller: 'AngularController'
            })
        });

    sampleApp.controller('AngularController',function($scope,$routeParams,$route) {

        $scope.tutorialid=$routeParams.topicId

    });
</script>
</body>
</html>

Kui kood on edukalt käivitatud, kuvatakse koodi brauseris käivitamisel järgmine väljund.

Väljund:

Väljundist,

• Rakendusele sisenedes näete, et silt # pole seal.

kokkuvõte

• Marsruutimist kasutatakse erinevate vaadete esitamiseks samal veebilehel kasutajale. See on põhimõtteliselt kontseptsioon, mida kasutatakse ühelehelistes rakendustes, mida rakendatakse peaaegu kõigi tänapäevaste veebirakenduste jaoks
• Angular.JS-marsruutimise jaoks saab seadistada vaikemarsruudi. Seda kasutatakse selleks, et määrata, milline on kasutajale kuvatav vaikevaade
• Parameetreid saab marsruudile edastada URL-i kaudu marsruudiparameetritena. Seejärel pääseb nendele parameetritele juurde kontrolleri parameetri $routeParams abil
• Teenust $route saab kasutada marsruudil kohandatud võtme-väärtuste paaride määratlemiseks, millele saab seejärel vaatest juurde pääseda
• HTML5 marsruutimist kasutatakse #tag eemaldamiseks marsruutimise URL-ilt nurgeliselt, et moodustada ilus URL