Question

我正在使用AngularJS 1.3和UI-Router。我有一个状态，我有一个决心和一个templateProvider。

我想要完成的是templateProvider可以使用从解析中的数据库中检索的信息。现在，我必须两次获取信息，一次来自resolve，另一次来自templateProvider，这很烦人。

代码：

        .state('articleurl', {
          url: '/:articleUrl',
          resolve: {
            article: function ($http, $stateParams, $location) {

              return $http({
                method: 'GET',
                url: '/articles/' + $stateParams.articleUrl
              })
              .then(function (article) {

                  return article;

              }, function (error) {

                $location.path('/404');

              });
            },
            loggedin: checkLoggedin
          },
          templateProvider: ['$templateFactory', '$stateParams', '$http', function ($templateFactory, $stateParams, $http) {
            return $http({
                method: 'GET',
                url: '/articles/' + $stateParams.articleUrl
              }).then(function(article) {

                if ( article.data.template )
                  return $templateFactory.fromUrl('articles/views/templates/' + article.data.template + '.html');
                else
                  return $templateFactory.fromUrl('articles/views/templates/news.html');
            });
          }],
          controller: 'ArticlesViewController'
        })

正如您所看到的，根据文章的类型，我在templateProvider中加载了一个不同的模板。此外，我使用控制器中的文章信息，该信息之前已经得到了州的决心。

有没有办法在templateProvider中使用先前在解析中获取的信息，避免这种方式再次调用数据库？

现在，每个连接正在对数据库进行2次调用......

谢谢！

Answer 1

app.factory('article', function ($cacheFactory){
  var articleCache = $cacheFactory('article'); 

  return function (url) {
    return articleCache.get(url) || articleCache.put(url, $http({
        method: 'GET',
        url: '/articles/' + url
      })
    );
  };
});

在两个地方都使用它作为article($stateParams.articleUrl).then(...)，这将使事情保持干燥。您可以通过将$cacheFactory替换为angular-cache来更好地控制缓存（例如到期）。

$http own caching也可以成功使用，而不是显式缓存：

如果对同一个URL有多个GET请求使用相同的缓存进行缓存，但仅缓存尚未填充将向服务器发出一个请求，其余请求将发出使用第一个请求的响应来完成。

Answer 2

我认为您可以直接注入已解决的变量，因此您可以在article中注入templateProvider：

   .state('articleurl', {
      url: '/:articleUrl',
      resolve: {
        article: function ($http, $stateParams, $location) {

          return $http({
            method: 'GET',
            url: '/articles/' + $stateParams.articleUrl
          })
          .then(function (article) {

              return article;

          }, function (error) {

            $location.path('/404');

          });
        },
        loggedin: checkLoggedin
      },
      templateProvider: ['$templateFactory', '$stateParams', '$http', 'article', function ($templateFactory, $stateParams, $http, article) {
        // Now here you can use article without the need to re-call it
      }],
      controller: 'ArticlesViewController'
    })

将先前检索到的信息传递给AngularJS中的templateProvider

2 个答案: