是否有可能通过angularJs将param从州传递到州？

Question

我希望从一个商店状态传递一个参数到产品状态的显示产品信息:

我的应用程序 - 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}}')

产品控制器

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

console.log($stateParams.productSku);

产品工厂

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

由于我使用的是MEAN Stack,所以节点附有路由器来表示:

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'
    })
}

我试过回来,_product但我得到了Unknown provider: _productProvider <- _product <- productCtrl

我试着用ui-sref- a(ui-sref="products({productSku:'{{product.sku}}'})")在store.jade发送PARAM从store_State以products_State&终于得到了一个对象从API回来.

现在的问题是节点不会返回视图.

基本上我想要实现的是: 节点服务客户端视图,所有商店视图 - 商店/产品/购物车附加到angular app服务Server.js,点击商店产品将重定向到resolve产品信息后的产品页面api.我正在获取产品信息,但没有获得产品视图.

我查了一下,但所有的解决方案都没有用......也许我的不好:-(
我怎么能这样做？

更新-1:这是发生了什么:

UPDATE-2:当我将控件传递给时angular,我已经express路由菜单,并angular stateProvider路由/连接views到controllers.主要观点是负载store本身:

app.js - 存储路线

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

server.js(快递)

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;
    });

加载就好了!

但是当我尝试将视图productSku从store视图发送到product视图并让resolve发送产品参考回来product查看它停止工作的地方时,我要么得到视图,要么得到参数.

我尝试了不同的方法resolve,它们都是相同的 - 查看OR产品参数.

app.js - 产品路线

.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)
        }
    }
})

如果我删除resolve并发送a(href='/products/{{product.sku}}')从store.jade我获取路径中的模板,我得到的chrome console错误是`错误:$ injector:unpr未知提供商_product < - productCtrl

product.ctr.js

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

如果我发送a(ui-sref="products({productSku: product.sku })")与resolve我得到产物PARAMS(示于上面WebStorem快照)NO图.

Answer 1

Angular不会加载jade模板，你将需要一个html模板，jade模板是通过express加载的。您可能想尝试像这样使用 ui-view ：

翡翠店

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

这应该在加载路线时对未命名视图进行角度查找。

您的 templateUrl 看起来没有指向文件，也许您缺少文件扩展名？

确保你返回一个$promise解析，因为 ui-router 在渲染视图之前会等待它们被解析。

我建议在路线中也使用相应的配置命名视图：

.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;

    }
}

})

请参阅此处的文档：https ://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views