在Angular js中使用不同文件中的多个模块

时间:2016-03-19 21:45:23

标签: javascript html angularjs

您好,请原谅我的英语。

我的问题是:我是Angular js的初学者(目前正在学习1.4版),我想将我的应用程序分成两个模块:

app.js

(function(){
var app = angular.module('store', ['store-products', 'ngAnimate', 'ui.bootstrap']);



    app.controller('StoreController', function(){
        ...
        });

    app.controller('ReviewController', function(){
        ...
        };

        this.rateOnClick = function(){
            ...
        };

        this.addReview = function(product){
            ...
        };
        });


    .
    .
    .
})();

products.js

(function(){

    var app = angular.module('store-products', []);

    app.directive('productTitle', function(){
            ...
        });

    app.directive('productPanels', function(){
            ...

        });
})();

的index.html

<html>
  <head>
    <title>My Angular App!</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.4.js"></script>
    <link href="styles.css" rel="stylesheet">
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="app.js"></script>
    <script src"products.js"></script>
...
</html>

我的所有文件都在同一个文件夹中。 app.js是主要模块,所以据我所知,包含很好,但我仍然得到错误:

Uncaught Error: [$injector:modulerr] Failed to instantiate module store due to:
Error: [$injector:modulerr] Failed to instantiate module store-products due to:
Error: [$injector:nomod] Module 'store-products' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

不知道为什么会发生这种情况?

3 个答案:

答案 0 :(得分:1)

大声笑,刚刚想通了,问题就在于:

<script src"products.js"></script>

修正如下:

<script src="products.js"></script>

答案 1 :(得分:0)

您需要在应用脚本之前添加产品脚本。

答案 2 :(得分:0)

请勿在app.js代码中包含商店产品,因为在此[]中我们添加了指令,并且没有指令名称&#39; store-products&#39;