Angularjs używający $ routeProvider bez ng-view
Mam prostą aplikację jednostronicową, która wyświetla na niej obrazy.
Przy pierwszym załadowaniu strona jest pusta i ludzie dodają własne obrazy, jednak jeśli następnie powrócą do strony z zapisanym identyfikatorem w adresie URL, chcę, aby strona przechwyciła poprzedni model.
Teraz wszystkie moje poprzednie próby użycia routeProvider nie powiodły się, chyba że umieściłem ng-view gdzieś na stronie. Ale ma to wpływ na obszary, które znajdują się w obszarze widoku ng.
Zasadniczo muszę reagować inaczej na stronie, w zależności od tego, czy identyfikator znajduje się w adresie URL, czy nie, ale nie zmieniam widoku i muszę uzyskać identyfikator z parametrów trasy.
Zastanawiam się więc, jak zamierzacie to zrobić, kiedy wydaje mi się, że szczekam na niewłaściwe drzewa! Każda pomoc byłaby bardzo mile widziana.
Nie znaleziono powiązanych wyników
Zaproszony:
Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się
4 odpowiedzi
Anonimowy użytkownik
Potwierdzenie od:
JS:
var app = angular.module('plunker', []);app.config(function($routeProvider){return $routeProvider
.when('/', {
controller: 'HomeController',
templateUrl: 'home.html'
})
.when('/:id', {
controller: 'HomeController',
templateUrl: 'home.html'
})
.otherwise({ redirectTo: '/' });
});app.controller('HomeController',
[
'$scope',
'$routeParams',
function($scope, $routeParams) {
if($routeParams.id){
$scope.id = $routeParams.id;
// handle scenario when there is an id in URL
return;
}// handle scenario when there is no id
$scope.id = 'no ID!!';
}
]
);
<kbd> Plunker
http://plnkr.co/edit/wgUpeq9jz1ZJeUGf1WVz
</kbd>
A oto inny sposób, bez korzystania z ng-view i polegania na usłudze $ location:
var app = angular.module('plunker', []);app.config( ['$locationProvider',function($locationProvider) {
$locationProvider.html5Mode(true);
}
]
);app.controller('HomeController',
[
'$scope',
'$location',
function($scope, $location) { $scope.$watch(function(){
return $location.hash();
},
function(id){
$scope.id = id;
}
); $scope.$watch('id', function(id){
if(id){
// handle scenario when there's id available
return;
}
// handle scenario when there is no id
}); }
]
);
<kbd> Plunker
http://plnkr.co/edit/071lYiArvGe95wMH2mua
</kbd>
Anonimowy użytkownik
Potwierdzenie od:
http://plnkr.co/edit/S0ZgUkt4m ... eview
inicjuje usługę $ route, dodającjako zależność do programu uruchamiającego aplikacje. Pomysł jest opisany
tutaj
https://groups.google.com/foru ... t89IJ
.
angular.module('myApp', ['myApp.controllers']).config(function($routeProvider) {
return $routeProvider.when("/", {
controller: 'firstCtrl'
}).when("/numbers/:number", {
controller: 'secondCtrl'
});
}).run(function($route) {});angular.module("myApp.controllers", [])
.controller("firstCtrl", function($scope) {
$scope.numbers = [1, 2, 3];
})
.controller("secondCtrl", function($scope,$routeParams, $rootScope, $location) {
return $rootScope.$on("$routeChangeSuccess", function(event, current) {
$scope.current_path = $location.$$path;
$scope.number = $routeParams['number'];
});
});
Anonimowy użytkownik
Potwierdzenie od:
Ben Nadel - zagnieżdżone widoki, routing i głębokie łączenie z AngularJS
http://www.bennadel.com/blog/2 ... S.htm
Anonimowy użytkownik
Potwierdzenie od:
Utwórz usługę, a następnie korzystaj z niej kiedykolwiek i gdziekolwiek chcesz.
angular.module('app').service('urlParser', function(){this.parse = function(url){
var query = url.split('?')
if (url.length == 1){ return {} }//it means it has no parameters
else{
var paramsArray = query.split('&')
var params = {}//this is going to be your return object
var i;
for ( i=0; i < paramsArray.length; i++ ){
var arr = paramsArray[i].split('=')
var param = arr[0]
var value;
//check if is set with some value
if( arr.length == 1 )
value = null
else
value = arr[1]
obj[param] = value
}
return obj;
}
}
})
Będziesz wywoływał to ze swojego kontrolera jako usługę.
Nazwa usługi: urlParser
Nazwa metody: parse (: string)
Przykład:
var url = "
http://www.yourwebsite.com/you ... D1000
http://www.yourwebsite.com/you ... D1000
"
var params = urlParser.parse(url)
params.page// daje ci 1
params.user// daje 1000
Mam nadzieję, że to pomogło