角度自動導入腳本

我想知道是否有更好的方法來導入我所有的角色腳本。目前，如果我添加一個新的控制器或組件，我需要進入我的index.html並將其導入到底部。這很好，但是這是一個乏味的任務，我可以想象應用程序增長後，這可能會變得混亂。有沒有最佳做法來實現這一點？角度自動導入腳本

我的索引頁看起來是這樣的：（所有的批評是值得歡迎的）

<!DOCTYPE html> 
<html lang="en" ng-app="app"> 
    <head> 
     <title>Test Page</title> 
     <!-- Stylesheets --> 
     <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css"> 
     <link rel="stylesheet" href="assets/css/main.css"> 

     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <meta name="description" content=""> 
     <meta name="author" content=""> 
    </head> 
    <body> 
     <popcorn-header></popcorn-header> 

     <!-- .container --> 
     <div class="container"> 

      <div class="row"> 
       <div class="col-lg-12 text-center"> 

        <div ui-view></div> 

       </div> 
      </div> 

     </div> 
     <!-- /.container --> 

     <!-- Vendor --> 
     <script src="lib/jquery/dist/jquery.min.js"></script> 
     <script src="lib/bootstrap/dist/js/bootstrap.min.js"></script> 
     <script type="text/javascript" src="lib/angular/angular.min.js"></script> 
     <script src="lib/angular-route/angular-route.min.js"></script> 
     <script src="lib/angular-animate/angular-animate.min.js"></script> 
     <script src="lib/angular-resource/angular-resource.min.js"></script> 
     <script src="lib/angular-ui-router/release/angular-ui-router.min.js"></script> 
     <script src="https://www.youtube.com/iframe_api"></script> 
     <script src="lib/angular-youtube-mb/dist/angular-youtube-embed.min.js"></script> 

     <!-- Bootstrapping --> 
     <script type="text/javascript" src="app.js"></script> 

     <!-- Routes --> 
     <script type="text/javascript" src="routes.js"></script> 

     <!-- Core --> 
     <script type="text/javascript"src="components/api/api.js"></script> 
     <script type="text/javascript"src="constants.js"></script> 

     <script type="text/javascript"src="components/api/ApiFactory.js"></script> 

     <script type="text/javascript"src="components/header/HeaderDirective.js"></script> 

     <script type="text/javascript"src="components/feed/feed.js"></script> 
     <script type="text/javascript"src="components/feed/FeedController.js"></script> 
     <script type="text/javascript" src="components/feed/FeedDirective.js"></script> 
    </body> 
</html>

來源

2015-05-13 Luca

看看一些角度種子項目，如https://github.com/ngbp，這些都有自動完成此任務的構建腳本（grunt腳本）。 – Chandermani

[將所有javascript文件包含在一個目錄中以angularjs形式存在一個html文件中？與咕嚕？]（http://stackoverflow.com/questions/24097146/include-all-javascript-files-in-a-directory-to-a-html-file-in-angularjs-with-gr） –

如果您的應用程序較小，只有10-20腳本和CSS文件，然後編寫簡單的咕嚕任務生成的HTML將簡單好的。但是，如果您有數百個腳本和樣式，那麼您應該使用以下模塊加載器庫之一。這些庫將使您的生活在管理基於模塊的應用程序中非常輕鬆。

而Angular的模塊系統對所有這些都非常有用。

RequireJs

http://requirejs.org/

Browserify

http://browserify.org/

的WebPack

http://webpack.github.io/

來源

2015-05-13 15:07:01

有沒有對另一方有什麼好處？我認爲Browserify看起來對我最有吸引力。 – Luca

@Luca，我與Requirejs（異步模塊定義，AMD）合作了相當長的時間，它的工作非常好，requirejs是市場上最老的人。Browserify更多的是關於在前端使用node.js模塊的風格（CommonJS模塊系統）。而且，Webpack在市場上相當新穎，它支持CommonJs和AMD。 Webpack都在一個捆綁器/模塊系統中，它還支持打包所有靜態資源（樣式表，圖像，網頁字體等）。 webpack的概念，如多入口點和通用文件等，真的很棒，至少對我來說 –

角度自動導入腳本

回答

相關問題