如何從angularjs中的模板加載腳本

我有index.html，其中定義了所有源Javascript和ui-view。如何從angularjs中的模板加載腳本

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="UTF-8" http-equiv="pragma" content="no-cache" /> 
    <meta http-equiv="expires" content="0" /> 
    <title>Projects</title> 
    <link rel="stylesheet" href="resources/css/style.css"> 
    <link rel="stylesheet" href="resources/css/external/c3.min.css"> 
    <link href="resources/css/external/colorpicker.css" rel="stylesheet"> 
    <link href="resources/css/external/googlechart.css" rel="stylesheet"> 
    <script type="text/javascript" src="scripts/dndTree.js"></script> 

    <!-- Controllers --> 
    <!-- Controllers for dashboard --> 
    <script type="text/javascript" src="app/shared/headercontroller.js"></script> 
    <script type="text/javascript" src="app/views/homepage/project/projectcontroller.js"></script> 
    <script type="text/javascript" src="app/views/homepage/conceptmodel/cmdboardcontroller.js"></script> 
    <script type="text/javascript" src="app/views/homepage/repository/repositorycontroller.js"></script> 
    <script type="text/javascript" src="app/views/homepage/ontology/ontdboardcontroller.js"></script> 
    <script type="text/javascript" src="app/views/overview/section/component/componentmanager.js"></script> 
    <script type="text/javascript" src="app/views/overview/section/component/componenttemplate.js"></script> 

    <!-- document viewer js --> 
    <script type="text/javascript" src="app/views/analysis/docviewer/manager/docviewermanager.js"></script> 
    <script type="text/javascript" src="app/views/analysis/docviewer/model/solrdocument.js"></script> 
    <script type="text/javascript" src="app/views/analysis/docviewer/controller/docviewercontroller.js"></script> 
</head> 

<body id="db" class="homepage" ng-app="ipaApp"> 
    <ui-view></ui-view> 

</body> 

</html>

我有大約150這樣的js文件，目前所有文件都加載web應用程序負載時，從而提高加載時間。我想縮小所有這些文件，並在index.html和其他子模板中加載與儀表板相關的文件，以獲得更好的用戶體驗。我試圖在模板中移動這些腳本，但沒有解決。是否有可能這樣做？什麼可能是解決這個問題的最好方法？

來源

2016-12-01 Manoj Suthar

查找到'grunt'，'gulp'或'webpack'這是建立系統經常被用來做這樣的任務，並有據可查。 – GillesC

一種常見的方法是腳本標記移動到body標籤的結束，所以這種方式，內容（HTML）被加載和腳本加載最後，讓用戶體驗更好。

儘管第一次，它可能需要一些時間來完全加載所有的資源，在這之後，你會看到的結果，因爲你不會有再次裝入任何其他資源的用戶體驗這麼多優於如果您每次在不同的模板中加載一些腳本。這將分配許多部分的初始時間（對於每個模板）。更不用說，你可能不止一次地從一個模板切換到另一個模板（這樣你再次加載相同的資源）。這是一種視角問題，你的最終目標是什麼：在開始時投入一些時間，而不是在那之後，或者將時間分成小部分，每個模板加載一次。

隨着第一種方法會是這樣的：

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="UTF-8" http-equiv="pragma" content="no-cache" /> 
    <meta http-equiv="expires" content="0" /> 
    <title>Projects</title> 
    <link rel="stylesheet" href="resources/css/style.css"> 
    <link rel="stylesheet" href="resources/css/external/c3.min.css"> 
    <link href="resources/css/external/colorpicker.css" rel="stylesheet"> 
    <link href="resources/css/external/googlechart.css" rel="stylesheet"> 
</head> 

<body id="db" class="homepage" ng-app="ipaApp"> 
    <ui-view></ui-view> 


<script type="text/javascript" src="scripts/dndTree.js"></script> 

    <!-- Controllers --> 
    <!-- Controllers for dashboard --> 
    <script type="text/javascript" src="app/shared/headercontroller.js"></script> 
    <!-- ... --> 

    <!-- document viewer js --> 
    <script type="text/javascript" src="app/views/analysis/docviewer/manager/docviewermanager.js"></script> 
    <!-- ... --> 


</body> 

</html>

希望這有助於:)

來源

2016-12-01 17:42:37 lealceldeiro

如何從angularjs中的模板加載腳本

回答

相關問題