Come mostrare il contenuto basato sul file di modello in js angolare - javascript, jquery, wordpress, angularjs

Sono un novizio di angular js, nella mia applicazione web devo visualizzare alcuni contenuti solo su una pagina specifica ma non so come raggiungerlo.

Ecco il mio modello di HTML (showContent.html), con questo modello stanno generando tutte le mie pagine e l'URL della mia pagina in cui voglio solo mostrare il contenuto è http://localhost/myapps/top/

Quindi ho provato qualcosa del genere:

<div ng-if="location.path() === "/top"" style="float:right;">

<button ng-click="toggle()">Week</button>
<button ng-click="toggle1()">Month</button>
<button ng-click="toggle2()">Year</button>
<button ng-click="toggle3()">All</button>{{post.id}}
</div>

ma non funziona e il mio contenuto è totalmente nascosto da questa condizione. Quindi, come posso ottenere in js angolari per visualizzare solo questo mio contenuto http://localhost/myapps/top/ pagina.

TIA

risposte:

Dovresti usare il $routeProvider fornito di Angular. RouteProvider crea un'associazione per ciascun modello: puoi associare il modello, un controller e altri parametri (come lo stato di visualizzazione, ecc.). Consulta i documenti per ulteriori informazioni, ma l'esempio che segue dovrebbe essere sufficiente per risolvere il problema.

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

yourApp.config(["$routeProvider", function( $routeProvider ) {

$routeProvider

.when("/", {
templateUrl: "myapps/home.html",
controller: "someCtrl"
})

.when("/top", {
templateUrl: "myapps/top.html",
controller: "anotherCtrl"

.otherwise({ redirectTo: "/" });

}])

Nota: Dovrai anche avere un ng-view definito nella tua applicazione (probabilmente nel tuo file index.html iniziale. Puoi avere una sola vista per applicazione.

<div ng-view></div>

I controller possono essere definiti all'interno dello stesso file JavaScript o in un altro file collegato alla pagina tramite <script src="yourScript.js"></script>. Di seguito è riportato un esempio di come definire un controller.

yourApp.controller("anotherCtrl", [ "$scope", "$http", "$location",

function( $scope, $http, $location ) {

alert("You are now on a page using the anotherCtrl Controller!");

}]);

Un'altra nota: Una delle cose straordinarie di Angular è iniezione di dipendenza, che è il modo in cui stiamo fornendo il $scope, $http, e $location argomenti. Man mano che entri in angolare, dovresti assolutamente dare un'occhiata agli altri servizi disponibili. Questi servizi e direttive sono ciò che Angular è così eccezionale.

controlla questi due link. lì ti viene spiegato come funzionano i percorsi in angularjs. i percorsi vengono utilizzati ad es. per mostrare contenuti diversi su URL diversi

https://docs.angularjs.org/api/ngRoute/provider/$routeProvider https://docs.angularjs.org/tutorial/step_07