javascript – 有可能使用angularJs将状态从状态传递到状态吗？

我希望通过一个商店状态的参数到产品状态的显示产品信息：

我的应用 – 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,但是我收到了未知的提供者：_productProvider<- _product<- productCtrl 我尝试在store.jade中使用ui-sref – a(ui-sref =“products({productSku：'{{product.sku}}’})”)将param从store_State发送到products_State&终于从API得到了一个对象. 现在的问题是节点不会返回视图. 基本上我想要实现的是：

节点服务客户端视图,所有商店视图 – 商店/产品/购物车附加到通过Server.js提供的角度应用程序,点击商店产品将从api解析产品信息后重定向到产品页面.

我得到产品信息,但没有获得产品视图.

我看了看,但所有的解决方案都没有工作….也许我的坏:-(

我该怎么办？

更新1：这是发生了什么：

更新2：

当我将控件传递给角度时,我有快速路由菜单,并且角状态提供路由/连接视图到控制器.

主要观点是负载是商店本身：

app.js – 商店路线

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

那加载很好！

但是当我尝试将param productSku从商店视图发送到产品视图,并将解决方案发送到产品视图,停止工作时,它是我得到的视图,或者我得到参数.

我尝试了不同的解决方法,它们都是相同的 – 查看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)
        }
    }
})

如果我从store.jade中删除解决方案并发送一个(href =’/ products / {{product.sku}}’),我得到路由中的模板,我得到的chrome控制台错误是“错误：$inject：unpr未知Provider _product<- productCtrl product.ctr.js

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

如果我发送(ui-sref =“products({productSku：product.sku})”),我将得到产品参数(在上面的WebStorem快照中显示)NO视图.

角度不会加载玉模板,您将需要一个html模板,玉模板由快递加载.你可能想尝试使用ui-view这样：

Store.jade

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