UI-Router，如何获取“状态"的名称以及如何将其发送到带来模板状态的函数 [英] UI-Router, how to get the name of the 'state' And How send it to the function That brings Template state

问题描述

我从角度开始

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

And I want to write a function that will bring template For each state

而且就在需要的时候.作为延迟加载"的原则

And just when need it. As the principle of "Lazy loading"

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

And after that keep it in the cache when it's the first time

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

I wrote this code But I have errors, and I do not know what I'm wrong, Some things I did not understand in angular so I understand the problematic in my code

这是我所有的代码:

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>

推荐答案

有 更新和工作例子

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

The best we can do is to combine two great features:

1. UI-Router templateProvider 到动态构建的模板路径和
2. angular $templateRequest 非常智能，它确实为我们加载和缓存模板

1. UI-Router templateProvider to dynamically built template path and
2. angular $templateRequest which is so smart, that it does load and caches templates for us

这里是 templateUrl 替换:

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

      // do some magic with pathToTemplate

      return $templateRequest(pathToTemplate);

    }],

检查它在这里操作

还要注意这些:

• 在 angular + typescript 中使用 templateRequest($templateRequest 不是函数)
• ui 路由器嵌套视图条件

这篇关于UI-Router，如何获取“状态"的名称以及如何将其发送到带来模板状态的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！