Javascript 预加载角度路线以便即时查看

我对angular比较陌生，以下是我尝试做的：

我正在尝试将角度模板预编译到视图中，以便在视图的导航事件发生时立即显示它们

我正在尝试为我的应用程序模拟某种导航控制器行为，其中视图预加载或堆叠，直到其路径处于活动状态时才显示在SPA中

我做了一些研究，$templateCache可能不适合我，因为它似乎只是预取模板，即。未编译视图（根据我对angular的有限理解），但我要寻找的是“编译版本”；也就是说，应用于模板的$scope的结果

目前，应用程序的模板和控制器通过$routeProvider和ng视图结构链接

最小代码框架：

JS:

HTML:

//index.html
//shop.html

我真的不认为您需要手动编译模板-angular会帮您完成这项工作。如果您确实坚持，您可以使用$compile:

$compile( element.contents() )( scope );

---

我认为您真正想要的是加载内联模板。显示如何完成。要轻松加快视图的渲染速度，可以做几件事，第一件事是在应用程序的运行阶段，通过调用服务中的预加载方法预加载数据。范例

//service that has a preload function that stores an http result in memory
app.service('myService', function($http){
   var data;

   this.getData= function(){

   return  $http.get('dataUrl')
    .success(function(data, status, headers, config) {

       return data;
    })

  };

  // calls get data and stores result in memory
  this.preloadData = function(){

       this.getData().then(function(data){
       data = data; 

    });
  };

  // returns in memory result
  this.getPreloadedData = function(){

    return data;
  };
}); 

// call preload in run block 
app.run(function(myService){

  // preloads data from service  
  myService.preloadData();
});

// get data from in memory
app.controller('TestCtrl', function($scope, myService) {
  $scope.data = myService.getPreloadedData();
});

您可以做的第二件事是将模板存储在$template缓存中，而不是从http请求中获取模板，您也可以在run块中执行此操作，如果您使用gulp或grunt，则有一些很棒的插件提供了更好的方法

app.run(function($templateCache){

  // cache template
    var tempalate = '<h2>hello world</h2>'
   $templateCache.put('test.html', tempalate);
}); 

app.run（函数（$templateCache）{
//缓存模板
var tempalate='hello world'
$templateCache.put（'test.html'，tempalate）；
}); 

下面是一个更详细的例子

---

这确实预加载了路线，但有助于提高性能：）

请在您的问题中添加一个。如果没有具体的细节，很难排除类似的故障。我觉得这是一个XY问题。已经有很多人在网上发布了angular加载模板和视图的替代方法，但您在现实世界中遇到了什么问题导致您尝试创建此解决方案？@ochi好的，我将创建一个修剪工作示例。该应用程序将一些couchdb附件提取到img标记的ng src属性中。这需要很多时间，因为它击中了数据库。因此，我们的想法是：为什么不预取此视图以及它需要显示的所有couchdb附件。您是否使用ui路由器？您是否计划在应用加载后立即从couchdb获取数据？是的，您是对的。可能是我不想编译模板。我想预加载视图。单击shop时，ng view指令类似于“display:none，z-index:-1（从前景隐藏）”和“display:block，z-index:0/1”。基本上，我不想在用户单击时等待加载couchdb附件，而是希望预先填充它们，以便更快地从浏览器缓存加载视图。

//service that has a preload function that stores an http result in memory
app.service('myService', function($http){
   var data;

   this.getData= function(){

   return  $http.get('dataUrl')
    .success(function(data, status, headers, config) {

       return data;
    })

  };

  // calls get data and stores result in memory
  this.preloadData = function(){

       this.getData().then(function(data){
       data = data; 

    });
  };

  // returns in memory result
  this.getPreloadedData = function(){

    return data;
  };
}); 

// call preload in run block 
app.run(function(myService){

  // preloads data from service  
  myService.preloadData();
});

// get data from in memory
app.controller('TestCtrl', function($scope, myService) {
  $scope.data = myService.getPreloadedData();
});

app.run(function($templateCache){

  // cache template
    var tempalate = '<h2>hello world</h2>'
   $templateCache.put('test.html', tempalate);
});