Question

我正在学习Angular并尝试将其构建到我现有的Node.js框架中。

在Angular之前，我使用Handlebars.js作为我的模板引擎＆amp;将使用Node构建上下文，然后在编写标题之前使用HTML模板进行编译，并基本上像这样加载HTML：

res.writeHead(200, { 'Content-Type': 'text/html' });
for(var i = 0; i < files.length; ++i) {

    var source = files[i].toString('utf8');

    // Handlebars
    var template = Handlebars.compile(source);
    var html = template(context);   

    res.write(html);

}
res.end();

现在，因为Angular在客户端，我必须首先加载DOM模板然后让Angular获取并编译数据，这不仅会产生明显的延迟，而且从编码的角度来看似乎很麻烦，因为我必须使用一个服务器端控制器加载DOM，然后另一个服务器端控制器，角度用来获取所需的数据。

1）加载HTML模板：

res.writeHead(200, { 'Content-Type': 'text/html' });
for(var i = 0; i<files.length; ++i) {

    var html = files[i].toString('utf8');
    res.write(html);

}
res.end();

2）加载角度控制器

app.controller('testCtrl', function($scope, $http) {

    $http.get('/test').then(function(response){ 

        $scope.context = response.data;

    });     
}

3）Angular控制器调用服务器端控制器来抓取＆amp;返回范围

if(req.method==='GET'){

    var context = {test : 'this is the test context'};

    res.json(context);  
}

有没有办法在加载模板之前使用Angular BEF预编译模板？这种事情通常是怎么做的？

Answer 1

没有。这是使用Angular 2中的Angular Universal解决的任务。在Angular 1中，可以将应用程序预先渲染为SEO用于静态HTML，但它不会保留动态行为。

您可以通过向初始响应添加有效负载并相应地设计服务来加速应用。

基本上，有效载荷模块应由服务器端控制器动态插入：

<script>
(function () {

var httpPayload = {
  '/test': [200, /*JSON response string*/, /*optional subrequest headers*/],
  ...
};

var templatePayload = {
  '/template.html': /*template HTML string*/,
  ...
};

angular.module('app.payload', [])
.run(function($http, $cacheFactory, $templateCache) {
  var httpPayloadCache = $http.defaults.cache = $cacheFactory('httpPayload');
  Object.keys(httpPayload).forEach(function (key) {
    httpPayloadCache.put(key, httpPayload[key]));
  });

  Object.keys(templatePayload).forEach(function (key) {
    $templateCache.put(key, templatePayload[key]));
  });

});

})();
</script>

应用程序应加载可选的有效负载模块，以使其生效：

try {
  angular.module('app.payload');
} catch (e) {
  angular.module('app.payload', []);
}

angular.module('app', ['app.payload'])...

更清洁的方法可能会假设所有数据都包含在模型服务中，并且它们的设计方式是它们可以直接水合而不涉及$http。

可以使用Grunt / Gulp插件预先构建指令和路由模板，以便静态提供（他们所做的只是生成$templateCache.put(...)语句）。

在使用节点

1 个答案: