在加載節點之前預編譯Angular.js模板

Im學習Angular並試圖將其構建到我現有的Node.js框架中。在加載節點之前預編譯Angular.js模板

角之前，我用Handlebars.js作爲我的模板引擎&將使用節點然後用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）角控制器調用服務器側控制器搶&返回範圍

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

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

    res.json(context); 
}

有沒有什麼方法可以使用Angular BEFORE t預先編譯帶上下文的模板他的模板被加載？這種事情通常如何完成？

來源

2016-11-24 yevg

Angular不是模板引擎，而是前端MVC。 Angular在客戶端工作，並有助於DOM操作。爲了從服務器端預先編譯東西，必須使用模板引擎，如玉，swig，把手等作爲樣板。首先將模板引擎加載到服務器端，然後根據您的routes.js或定義了路由的文件，Angular開始工作。它以SPA的形式工作，所以如果需要從服務器獲取數據，則在加載角度之後，可以通過從控制器發出服務呼叫來完成。 Btw Angular是超快的，並且不笨重，因爲它使用內置指令將數據與dom元素綁定在一起。

來源

2016-11-24 19:19:25

我安裝了EJS模板來初始化應用程序，然後使用角度。謝謝！ – yevg

不，這是在Angular 2中Angular Universal解決的任務。在Angular 1中，應用程序可以爲了搜索引擎優化目的而預渲染靜態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>

和App應該按順序裝入可選有效載荷模塊，用於使其生效：

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

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

清潔器的方法可能會假定所有數據都包含在模型服務中，並且它們的設計方式可以使它們在沒有$http的情況下直接進行水合。

可以使用Grunt/Gulp插件預先構建指令和路由模板，以靜態地提供服務（他們所做的只是生成$templateCache.put(...)語句）。

來源

2016-11-24 19:56:14 estus

在加載節點之前預編譯Angular.js模板

回答

相關問題