CODEWITHSUNDEEP
javascripthtmlangularjs
Crixx93
Crixx93

Reputation: 777

Working with multiple modules in different files in Angular js

Hello and excuse my english.

My problem is this: I'm a beginner to Angular js (currently learning with version 1.4) and I want to separate my application in two modules like this:

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>

All of my files are in the same folder. app.js is the primary module, so as far I understand the includes are fine, but I still get the error:

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.

Can't someon figure out why this is happening ?

Upvotes: 1

Views: 383

Answers (3)

Crixx93
Crixx93

Reputation: 777

LOL, just figured out, the problem was the line:

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

Fixed like this:

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

Upvotes: 1

Hassan Tariq
Hassan Tariq

Reputation: 740

Do not include store-products in your app.js code because in this [ ] we add directives and there is no directive name 'store-products'

Upvotes: 0

sahbeewah
sahbeewah

Reputation: 2690

You need to include your products script before your app script.

Upvotes: 0

Related Questions