Question

我想使用ui-router在我的div中预加载模板。这是我的template.html文件，位于/ templates文件夹中。

// its location is templates/template1.html
<div>
    Template 1
</div>

angularjs中的.config函数具有以下代码，其中包含状态。这里template1是state1的子状态

.state('state1',{
            url:'/state1',
            templateUrl:'templates/state1.html',
            controller: 'state1Controller',
        })
        .state('state1.template1',{
            templateUrl: 'templates/template1.html'
        })

按下按钮时会加载Template1，但我希望预先加载模板。我能做些什么才能达到理想的效果？

Answer 1

声明方式：将所有模板放入脚本标记中，类型为text / ng-template：

<script type="text/ng-template" id="templateId.html">
  <p>This is the content of the template</p>
</script>

代码方式：使用$ templateCache。

在state1Controller中，加载模板并将其放入缓存，如下所示：

$templateCache.put('templateId.html', 'This is the content of the template');

或者使用http：

加载它

$http.get('templates/template1.html').then(function(template){
   $templateCache.put('templateId.html', template);
})

然后在您的路由器定义中，将templateId.html作为templateUrl的值

.state('state1.template1',{
    templateUrl: 'templateId.html'
})

每当您请求templateId.html时，angular会在向服务器发送请求之前自动在$ templateCache中找到模板。

如何在我的ui-view中预加载模板

1 个答案: