javascript - Is it possible to pass param from state to state with angularJs? - Stack Overflow

admin管理员组

文章数量:1418361

I wish to pass a param from one store-state to the display product info in products-state:

My app - storeApp

.config(['$stateProvider', function($stateProvider) {
$stateProvider
    .state('store', {
        url: '/store',
        templateUrl: 'store/store',
        controller: 'storeCtrl'
    })
    .state('products', {
        url: '/products/:productSku',
        templateUrl: 'store/product',
        controller: 'productCtrl',
        resolve: {
                productResource: 'productFactory',
                _product: function(productResource, $stateParams){
                return productResource.getProduct($stateParams.productSku);
                    }
                }

Store.jade

a(href='/products/{{product.sku}}')

Product controller

.controller("productCtrl", function ($rootScope, $http, $stateParams, productFactory, storeFactory) {
//.controller('productCtrl', ['_product', function ($scope, $rootScope, storeFactory, _product) {

console.log($stateParams.productSku);

Product Factory

function getProduct(sku) {
    return $http.get('http://localhost:3000/api/products/' + sku );
}

Since I am using MEAN Stack, node has the router attached to express:

Server.js

const storeController = require('./controllers/store');
server.get('/store/product', passportConfig.isAuthenticated, storeController.getProductPage);

Store.js

exports.getProductPage = (req, res) => {
    res.render('store/product', {
        title: 'PP',
        angularApp: 'storeApp'
    })
}

I tried returning _product but I get Unknown provider: _productProvider <- _product <- productCtrl

I tried using ui-sref - a(ui-sref="products({productSku:'{{product.sku}}'})") in store.jade to send param from store_State to products_State & finally got an object back from API.

Now the issue is that node will not return the view.

Basically what I am trying to achieve is: Node serving client views, all store views - store/ product/ cart are attached to angular app served through Server.js, Clicking store product will redirect to product page after resolve product info from api. I am getting product info but not getting product view.

I looked it up but all solutions did not work....maybe my bad :-(
How can I go about this?

UPDATE-1: this is whats happening:

UPDATE-2: When I pass the control to angular, I have express routing the menu, and angular stateProvider routing/ connecting views to controllers. Main view that loads is the store itself:

app.js - store route

$stateProvider
    .state('store', {
            url: '/store',
            templateUrl: 'store/store',
            controller: 'storeCtrl'
    })

server.js (express)

server.get('/store', passportConfig.isAuthenticated, storeController.getStorePage);

store.js

exports.getStorePage = (req, res) => {
    res.render('store/store', {
        title: 'S--tore',
        angularApp: 'storeApp'
    });
}

store.ctr.js

angular.module("storeApp")
.controller("storeCtrl", function($rootScope, $http, storeFactory) {

    var products;

    storeFactory.getProducts().then(function(_products) {
        products = _products.data;
        $rootScope.products = products;
    });

That loads just fine!

But when I try to send the param productSku from store view to product view and have the resolve send product params back to product view that where it stops working, it's either I get the view OR i get the params.

I tried different ways of resolve, they all result the same - view OR product params.

app.js - product route

.state('products', {
    url: '/products/:productSku',
    templateUrl: 'store/product',
    controller: 'productCtrl',
    resolve: {
        _product: function ($stateParams, $state, $http) {
        return $http.get('http://localhost:3000/api/products/' + $stateParams.productSku );
        //return productResource.getProduct($stateParams.productSku)
        }
    }
})

If I remove the resolve and send a(href='/products/{{product.sku}}') from store.jade I get the template in the route, chrome console error I get is `Error: $injector:unpr Unknown Provider _product <- productCtrl

product.ctr.js

.controller('productCtrl', ['_product', function ($rootScope, $http, $stateParams, productFactory, storeFactory, _product) {

If I send a(ui-sref="products({productSku: product.sku })") with resolve I get product params (shown in WebStorem snapshot above) NO view.

I wish to pass a param from one store-state to the display product info in products-state:

My app - storeApp

.config(['$stateProvider', function($stateProvider) {
$stateProvider
    .state('store', {
        url: '/store',
        templateUrl: 'store/store',
        controller: 'storeCtrl'
    })
    .state('products', {
        url: '/products/:productSku',
        templateUrl: 'store/product',
        controller: 'productCtrl',
        resolve: {
                productResource: 'productFactory',
                _product: function(productResource, $stateParams){
                return productResource.getProduct($stateParams.productSku);
                    }
                }

Store.jade

a(href='/products/{{product.sku}}')

Product controller

.controller("productCtrl", function ($rootScope, $http, $stateParams, productFactory, storeFactory) {
//.controller('productCtrl', ['_product', function ($scope, $rootScope, storeFactory, _product) {

console.log($stateParams.productSku);

Product Factory

function getProduct(sku) {
    return $http.get('http://localhost:3000/api/products/' + sku );
}

Since I am using MEAN Stack, node has the router attached to express:

Server.js

const storeController = require('./controllers/store');
server.get('/store/product', passportConfig.isAuthenticated, storeController.getProductPage);

Store.js

exports.getProductPage = (req, res) => {
    res.render('store/product', {
        title: 'PP',
        angularApp: 'storeApp'
    })
}

I tried returning _product but I get Unknown provider: _productProvider <- _product <- productCtrl

I tried using ui-sref - a(ui-sref="products({productSku:'{{product.sku}}'})") in store.jade to send param from store_State to products_State & finally got an object back from API.

Now the issue is that node will not return the view.

Basically what I am trying to achieve is: Node serving client views, all store views - store/ product/ cart are attached to angular app served through Server.js, Clicking store product will redirect to product page after resolve product info from api. I am getting product info but not getting product view.

I looked it up but all solutions did not work....maybe my bad :-(
How can I go about this?

UPDATE-1: this is whats happening:

UPDATE-2: When I pass the control to angular, I have express routing the menu, and angular stateProvider routing/ connecting views to controllers. Main view that loads is the store itself:

app.js - store route

$stateProvider
    .state('store', {
            url: '/store',
            templateUrl: 'store/store',
            controller: 'storeCtrl'
    })

server.js (express)

server.get('/store', passportConfig.isAuthenticated, storeController.getStorePage);

store.js

exports.getStorePage = (req, res) => {
    res.render('store/store', {
        title: 'S--tore',
        angularApp: 'storeApp'
    });
}

store.ctr.js

angular.module("storeApp")
.controller("storeCtrl", function($rootScope, $http, storeFactory) {

    var products;

    storeFactory.getProducts().then(function(_products) {
        products = _products.data;
        $rootScope.products = products;
    });

That loads just fine!

But when I try to send the param productSku from store view to product view and have the resolve send product params back to product view that where it stops working, it's either I get the view OR i get the params.

I tried different ways of resolve, they all result the same - view OR product params.

app.js - product route

.state('products', {
    url: '/products/:productSku',
    templateUrl: 'store/product',
    controller: 'productCtrl',
    resolve: {
        _product: function ($stateParams, $state, $http) {
        return $http.get('http://localhost:3000/api/products/' + $stateParams.productSku );
        //return productResource.getProduct($stateParams.productSku)
        }
    }
})

If I remove the resolve and send a(href='/products/{{product.sku}}') from store.jade I get the template in the route, chrome console error I get is `Error: $injector:unpr Unknown Provider _product <- productCtrl

product.ctr.js

.controller('productCtrl', ['_product', function ($rootScope, $http, $stateParams, productFactory, storeFactory, _product) {

If I send a(ui-sref="products({productSku: product.sku })") with resolve I get product params (shown in WebStorem snapshot above) NO view.

• javascript
• angularjs
• angular-ui-router
• pug
• mean-stack

Share Improve this question Follow edited Aug 12, 2016 at 14:50 Jadeye asked Aug 7, 2016 at 12:33 JadeyeJadeye 4,35944 gold badges5353 silver badges6767 bronze badges 5

• do you have the error of the ui-sref? – AranS Commented Aug 7, 2016 at 12:42
• @AranS: ui-sref issue has been fixed but now it does not redirect to view after resolve product info – Jadeye Commented Aug 8, 2016 at 21:16
• @Jadeye - try a(ui-sref="products({ productSku: product.sku })") instead of a(ui-sref="products({productSku:'{{product.sku}}'})") – Aks1357 Commented Aug 9, 2016 at 20:58
• @Aks1357, same same, & this is not the issue at hand, resolve or any other function on the way is. – Jadeye Commented Aug 10, 2016 at 7:18
• state definition object can have params property and we can pass any object with that param name to that state. – ravshansbox Commented Sep 2, 2016 at 9:40

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

angular will not load jade templates, You will need an html template, The jade template is loaded by express. You might like to try using ui-view like this:

Store.jade

div(ui-view)
  a(href='/products/{{product.sku}}')

Which should make angular look for the unnamed view when loading the route.

Your templateUrl's don't look to be pointing to files, perhaps you're missing the file extension?

Make sure you return a $promise in resolve as ui-router waits until they are resolved before rendering the view.

I'd remend having named views with corresponding config in route too:

.state('store', {
    url: '/store',
    views: {
        '@': {
            templateUrl: 'store/store.html',
            controller: 'storeCtrl'
        }
    }
})
.state('products', {
    url: '/products/:productSku',
    templateUrl: 'store/product',
    controller: 'productCtrl',
    resolve: {
        _product: function ($stateParams, $state, $http) {
            return $http.get('http://localhost:3000/api/products/' + $stateParams.productSku ).$promise;

    }
}

})

See the docs here: https://github./angular-ui/ui-router/wiki/Multiple-Named-Views

This is the solution I found:

store.jade

a(href='/products/{{product.sku}}' ng-click='sku(product.sku)')

stroe.ctr.js

$rootScope.sku = function(value){
        storeFactory.singleProduct.productSku = value;
        storeFactory.singleProduct.saveSku();
}

store.fac.js

var singleProduct = {
    productSku : '',
    saveSku: function() {
        sessionStorage.productSku = angular.toJson(singleProduct.productSku);
    },
    getSku: function() {
        singleProduct.productSku = angular.fromJson(sessionStorage.productSku);
        return singleProduct.productSku;
    }
}

product.ctr.js

var sp = storeFactory.singleProduct.getSku();

productFactory.getProduct(sp).then(function (product) {
    $rootScope.product = product.data;
});

product.fac.js

function getProduct(sku) {
        return $http.get('http://localhost:3000/api/products/' + sku );
}

Basically I am storing productSku to sessionStorage and getting it back from there when product.jade view loads...

Thanx to all who tried...

You can pass it as $state.data in your controller.

toState = $state.get("some-state");
toState.data.foo = $scope.foo;
$state.go(toState);

You have not included dependancy of _products in storeCtrl. When you call that service you get an error.

Correct code is:

angular.module("storeApp")
 .controller("storeCtrl", function($rootScope, $http, storeFactory, _products) {

   var products;

   storeFactory.getProducts().then(function(_products) {
     products = _products.data;
     $rootScope.products = products;
   });

You can use console.log("something here" + _products.data); to see in your browser console

本文标签： javascriptIs it possible to pass param from state to state with angularJsStack Overflow