[JavaScript]AngularJS ui-router problem Opcje

[kamilo818]

Próbuje napisać stronę w oparciu o AngularJS

Po wejsciu na podstrone www.shop.pl#/shop podstrona shop wyświetla się poprawnie.
Na tej podstronie mam linki do kategorii np buty koszule.
Po kliknieciu w buty www.shop.pl#/shop/buty nastepuje filtrowanie danych i wyswietlane sa dane z kategorii buty.

Moj problem polega na tym że po bezpośrednim wejsciu na www.shop.pl#/shop/buty wyswietla się zawartość bez filtracji po 'buty'

Chciałbym żeby po wejsci na ten link parametr 'buty' został przekazany do funkcji która filtruje, ale nie moge dojść jak to zrobić.

kod wygląda tak:
main.js

[PHP] pobierz, plaintext 
var myShopApp = angular.module('myShopApp' , ['ui.router']);
 
myShopApp.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('shop', {
            url: '/shop',
            templateUrl: 'pages/shop.php'
        })
	.state('shop.item',{
	    url: '/:item',
            templateUrl: 'pages/shop.php',    
            controller: function($scope, $stateParams) {
                $scope.item = $stateParams.item;
            }
 
	})
        .state('promocje', {
            url: '/promocje',
            templateUrl: 'pages/promocje.php'
        })
 
myShopApp.controller("menuCtrl", function($scope) {
 
    $scope.currentCategory = null;
    function setCurrentCategory(pos){
        $scope.currentCategory = pos;
 
    }
 
    $scope.setCurrentCategory = setCurrentCategory;
 
})
 
})
[PHP] pobierz, plaintext 

shop.php

[PHP] pobierz, plaintext 
<categories ng-controller="menuCtrl">
    <category>
        <div ng-click="setCurrentCategory(null)">Wszystkie produkty</div>
 
        <li ng-repeat="pos in categories" >
           <a ng-click="setCurrentCategory(pos)" ng-href="#/shop/{{pos.item}}" ng-class="{'active':isCurrentCategory(pos)}">{{pos.item}}</a>
        </li>
 
    </category>
 
    {{currentCategory.item}}
 
    <box >
        <div ng-repeat="pos in products | filter:currentCategory.item">
            {{pos.name}} {{pos.opis}}
        </div>
    </box>
</categories>
[PHP] pobierz, plaintext 

Mam nadzieje że jasno wyjasniłem o co mi chodzi

wydawało mi się że dzięki temu

[PHP] pobierz, plaintext 
 
            controller: function($scope, $stateParams) {
                $scope.item = $stateParams.item;
            }
[PHP] pobierz, plaintext 

będę miał odczytany parametr ale to chyba nie działa,albo nie potrafie sie do niego dostac.

Z góry dzięki za pomoc

[markuz]

A zamiast /:item nie powinno być /shop/:item?
Zrób console.log($stateParams); i powiedz Co wyświetla.

I filtrujesz według currentCategory.item a parametr z URL chcesz przekazać do item.

Ten post edytował markuz 15.09.2014, 10:54:25

[kamilo818]

podobno to to samo
Ale próbowałem i tak i tak

[markuz]

Co to samo? currentCategory.item to to samo co item? Czy /shop/:item to to samo co :item? Według mnie nic z powyższych nie jest takie same. Co zwróciło console.log?

PS. Polecam Ci najpierw przerobić tutorial - https://docs.angularjs.org/tutorial/step_00

Ten post edytował markuz 15.09.2014, 11:04:41

[kamilo818]

console.log($stateParams) nic nie wyświetla

/shop/:item to to samo co :item - odpowiedziałem Ci przed tym jak post edytowałeś.
to to samo wg:
https://egghead.io/lessons/angularjs-introduction-ui-router 2:20 min

[markuz]

A zamiast $stateParams nie powinno być $routeParams? Ten tutorial dotyczy wersji 1.2.6 - teraz najnowsza stabilną jest 1.2.23 a ostatnią 1.3. Ty z ktorej wersji angulara korzystasz?

[kamilo818]

1.2.24

[markuz]

Zmieniłeś $stateParams na $routeParams? Strasznie jesteś oporny na poprawianie kodu

[kamilo818]

Poprawiłem. nic to nie dało.

Dodatkowo chciałem sprawdzić czy wogóle wyłapuje parametr. Zmienielem na

[PHP] pobierz, plaintext 
	.state('shop.item',{
	    url: '/:item',
            templateUrl: 'pages/test.php',    
	    controller: function($scope, $stateParams) {
                $scope.item2 = $stateParams.item;
 
            }
 
	})
[PHP] pobierz, plaintext 

test.php

[PHP] pobierz, plaintext 
{{item2}}
[PHP] pobierz, plaintext 

Wogole nie przechodzi to test.php

[markuz]

Od kiedy to angular używa plików php? To jest przecież javascript..
Poprawiłeś na $routeParams i zrobiłeś też console.log?
Zrób console.log($routeParams) i powiedz Co wyświetla.

[kamilo818]

Tak zrobiłem i nic nie wyświetla

[PHP] pobierz, plaintext 
	.state('shop.item',{
	    url: '/:item',
            templateUrl: 'pages/test.html',    
	    controller: function($scope, $routeParams) {
                $scope.item2 = $routeParams.item;
		console.log($routeParams);
            }
 
	})
[PHP] pobierz, plaintext 

[markuz]

Nic nie wyświetla - a co to oznacza? Że w ogóle nie wykonuje tego kodu. Pokazało by undefined albo null, ale jak nic nie wyświetla tzn. że masz problem z routerem. Na jakiej przeglądarce to debugujesz?

Jeszcze raz Ci podpowiem - przerób oficjalny tutorial Angluara - https://docs.angularjs.org/tutorial i będziesz wiedział o co chodzi.

Ten post edytował markuz 15.09.2014, 12:33:42

[kamilo818]

Jak bym nie miał problemu to bym nie pisał.

Chrome

Ten post edytował kamilo818 15.09.2014, 12:33:17

[markuz]

Żeby Ci dobrze działał routing musisz:
1. Do bower.json dodać jako "dependencies" "angular-route": "~1.2.x"
2. Wykonać npm install
3. Do module aplikacji dodać 'ngRoute'
4. I w całkowicie inny sposób definiować routery, zobacz: https://docs.angularjs.org/tutorial/step_07 np.

[JAVASCRIPT] pobierz, plaintext 
phonecatApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/phones', {
        templateUrl: 'partials/phone-list.html',
        controller: 'PhoneListCtrl'
      }).
      when('/phones/:phoneId', {
        templateUrl: 'partials/phone-detail.html',
        controller: 'PhoneDetailCtrl'
      }).
      otherwise({
        redirectTo: '/phones'
      });
  }]);
[JAVASCRIPT] pobierz, plaintext 

Twoim głównym problemem jest źródło wiedzy

Ten post edytował markuz 15.09.2014, 12:41:20