UI的路由器,如何获得的“国家”名称,并如何将其发送到这使模板状态的功能 [英] UI-Router, how to get the name of the 'state' And How send it to the function That brings Template state

查看:157
本文介绍了UI的路由器,如何获得的“国家”名称,并如何将其发送到这使模板状态的功能的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我开始角

和我想编写一个函数,将带来模板对于每个状态

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

我写这篇code
但我有错误,我不知道我错了,
有些事情我没有棱角明白,所以我理解有问题我在code

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

这是我所有的code:

this is all my code :

http://plnkr.co/edit/qzKJUwNImVX8EGb3ymnT?p=$p$ PVIEW



  
  
  
  


  
  

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-路由器 templateProvider 来动态生成的模板路径和

  2. $ templateRequest 这是太聪明了,它确实负载与我们联系
  3. 模板缓存
  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);

    }],

检查一下在这里的行动

和也遵守这些:

  • Using templateRequest in angular + typescript ($templateRequest not a function)
  • ui router nested views condtions

这篇关于UI的路由器,如何获得的“国家”名称,并如何将其发送到这使模板状态的功能的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆