Question

我从角度开始

我想编写一个函数，为每个state

带来模板

就在需要的时候。作为＆＃34;懒惰加载＆＃34;

的原则

然后在第一次将其保存在缓存中

我写了这段代码但我有错误，我不知道我错了什么，一些我不理解的东西，所以我理解我的代码中的问题

这是我的全部代码：

http://plnkr.co/edit/qzKJUwNImVX8EGb3ymnT?p=preview

var app = angular.module('myApp', ['ui.router']);

var getTemplate = function(name) {

  templates = {pages: 'content of pagesTemplate.html. I very wish !!'};

  if (name in templates) {
    return templates[name];
  }

  $http.get(name + 'Template.html' ).then(
    function(response){
      templates[name] = response.data;
      return templates[name];
    }
  );
};

app.config(function($stateProvider, $urlRouterProvider, $locationProvider) {

  $locationProvider.html5Mode({
    enabled: true,
    requireBase: false
  });

  $stateProvider
    .state('pages', {
      url: '/:page',

      templateUrl: getTemplate(),  // Exist in line 18 ▲ 
                // Here I want to build a function or calld a function
                // To bring me the template of the page
                // But I want it will be stored in the cache, if it comes first time
                // And next time I will take it from the cache by the name of the 'state' ('pages').

      controller: function($stateParams) {
        alert($stateParams.page);

        // And here I want to receive From the server The content of the page By $stateParams.page

      }
    })

});

<a ui-sref="pages({ page: 'home' })">Home</a>
<div ui-view=""></div>

Answer 1

有updated and working example

我们能做的最好的事情是结合两个很棒的功能：

UI-Router templateProvider动态构建模板路径和
angular $templateRequest 非常聪明，它为我们加载和缓存模板

这里是templateUrl替换：

// instead of templateUrl
templateProvider: ['$templateRequest', '$stateParams', 
    function($templateRequest,$stateParams){
      var pathToTemplate = 'pagesTemplate.html';

      // do some magic with pathToTemplate

      return $templateRequest(pathToTemplate);

    }],

检查here in action

并观察这些：

UI-Router，如何获取＆＃39;州的名称＆＃39;以及如何将它发送到带来模板状态的函数

1 个答案: