模塊化設計使用AngularJS和UI路由

我在angularjs（我來自使用Java，Python，Objective-C的）新的，我試圖實現模塊化設計。但我看不出如何能app.js「進口」等模塊，然後控制器如何導入其他控制器，並讓他們在不同的文件。模塊化設計使用AngularJS和UI路由

這就是我想要的東西：

/app 

    /img -- application level images 
    /css -- application level css 
    /js 

    app.js -- the main app module 
    /modules 
     /login 
      /js 
       controllers.js --controllers for login module 
       directives.js --directives for login module 

      /views -- views for login module 
      /css 
      /img 
      loginModule.js -- Main login module definition 

     /comment 
      /js 
       controllers.js --controllers for login module 
       directives.js --directives for login module 

      /views -- views for comment module 
      /css 
      /img 
      commentModule.js -- Main comment module definition 

    ... 

    ... 

    index.html

來源

2016-01-21 Ricardo

我強烈建議你閱讀本https://github.com/toddmotto/angular-styleguide和https://github.com/johnpapa /角風格指南＃風格-Y021。在第二個環節，你可以看到更好的。我通常做的是將角度模塊中的功能組合起來，然後將該模塊導入到我的主模塊（通常是應用程序）中。當您導入模塊時，該模塊的所有服務控制器等都將可用於應用程序中。 –

你可以參考https://github.com/johnpapa/angular-styleguide爲完整的風格指南和https://github.com/johnpapa/angular-styleguide#modules在特定的模塊。 – jagmohan

您可以通過他們依賴進口的其他modules。

在你的情況下，它可能會是這樣的。

angular.module("app.module", ["login.module", "comment.module"]);

你也組 '核心' 功能集成到一個模塊像core.module

angular.module("core.module", ["login.module", "comment.module"]);

然後讓app.module取決於該模塊上。

angular.module("app.module", ["core.module", "ui.router"]);

希望有所幫助。

您引用您的文件中index.html像這樣：

<html> 
<head> 
    <title></title> 
</head> 
<body> 
    // HTML code here 

    // angular libraries and other vendor libaries 

    <script type="text/javascript" src="<path to each module>"></script> 
    ... 
    <script type="text/javascript" src="app.js"></script> 
</body> 
</html>

來源

2016-01-21 15:55:28 TheLazyChap

我應該在index.html中導入每個js模塊文件嗎？ – Ricardo

@Ricardo您需要提供'<腳本類型=「文/ JavaScript的」 SRC =「...路徑腳本文件」>'以正確的順序，使您的應用程序模塊應該是最後一個，因爲它取決於另外兩個在你的'index.html'中 – TheLazyChap

模塊化設計使用AngularJS和UI路由

回答

相關問題