知識星球
在開始之前，我想先介紹三個工具，我們將使用這些工具達到預期標的。
- CoffeeScript：一個強大的小型語言，它受Ruby啟發並被編譯為JavaScript，它擁有無數的語法糖能夠加快開發進度。
- MiddleMan：一個靜態的站點生成器，透過它，你可以使用現代網路開發中所有的快捷方法和工具。
- Brunch.io：基於node.js的JavaScript任務執行器，是一種前端開發的自動化工具。
請記住，這些工具並不是必需的，你可以使用JavaScript，Grunt或Gulp來完成相同的成果。
準備工作
首先，讓我們明確描述一下我們的標的。
我們有兩個獨立的Angular單頁應用，比如說前者是供學生使用的，後者是供獵頭使用的，它們被分別置於https://hunters.com/ 和 https://students.com/下。我們已經擁有一個第三方應用程式處理通用的asset，如CSS和JS。
以上片段允許我們透過一個特殊的儲存於theenv物件中的屬性對生產環境和開發環境進行區分，它可能是下麵這樣的：
# development:
env = { ASSETS_HOST: ‘http://localhost:8888’ }
# production:
env = { ASSETS_HOST: ‘http://assets.com’ }
在middleman中可以使用dotenv gem來管理環境變數，同樣的，在brunch.io中可以使用jsenv。
應用案例
我們不僅需要公共的JavaScript和樣式表，還需要通用的HTML模版。因此我們必須在兩個應用程式間提取可重用的片段（partials），並將其儲存於asset伺服器上。
程式碼
我們為$templateCache建立一個簡單的封裝get和set方法的裝飾者，透過這個裝飾者，我們試圖從本地快取中獲取模版，如果存在的話就將其傳回。此外，它還會在asset伺服器上執行一個http請求，獲取那些已經編譯並被置入其自身快取的結果。
Extensions = angular.module ‘MyApplication.ExtensionsModule’, []
# …
Extensions.factory ‘$templateCache’, [
‘$cacheFactory’, ‘$http’, ‘$injector’, ‘SecurityConstants’,
($cacheFactory, $http, $injector, SecurityConstants) ->
cache = $cacheFactory(‘templates’)
promise = undefined
info: cache.info
get: (url) ->
fromCache = cache.get(url)
return fromCache if fromCache
unless promise
promise = $http.get(“#{SecurityConstants.assetsHost}/templates/partials.html”)
.then((response) ->
$injector.get(‘$compile’) response.data
response
)
promise.then (response) ->
status: response.status
data: cache.get(url)
put: (key, value) ->
cache.put key, value
]
為什麼能夠工作？
在brunch.io中，我們使用了一個出色的外掛：jade-angularjs-brunch，它將所有的HTML模版編譯為javascript檔案，表示一個稱為partials的angular元件。
angular.module(‘partials’, [])
.run([‘$templateCache’, function($templateCache) {
return $templateCache.put(‘/partials/content.html’, [
”,
‘
‘,‘
‘,‘
‘,‘
‘,”].join(“n”));
}])
.run([‘$templateCache’, function($templateCache) {
return $templateCache.put(‘/partials/footer.html’, [
”,
‘
‘
‘
StudentHunter Team.
‘,
‘
‘,
‘
‘,”].join(“n”));
}])
記住，這些僅僅是包含HTML程式碼的常規JS字串，這能保證模版在$templateCache中能透過特殊的路徑被訪問到。
感謝這個解決方案，我們能夠預先在$templateCache中填充內容，這樣$http.get就可以只在需要的時候執行（當請求的模版丟失時，這意味著它們應該由asset應用程式處理）。
另一種途徑
如果你使用middleman的話，我們必須找到另一種頗為不同的解決方案。雖然我們擁有與應用程式相關的模版，但是它們在最開始的階段是沒有被編譯的，因此$templateCache也是空的。
結果就是，每個諸如