Keep getting AngularJS module not available (ASP.NET 5)

Question

Trying to get simple Angular DI working in an existing ASP.NET 5 (Core) project. Been following this tutorial.

Versions:

AngularJS 1.4.6
ASP.NET 5 (vNext)
Visual Studio 2015
Windows 10

Checked all the basic gotchas with naming and so on. Unclear about how my dependent js-files "controllers.js" & "services.js" are suppose to be discovered by Angular?

If I explicitly include them - which by the tutorial shouldn't be required - I still get

[ng:areq] Argument 'customerController' is not a function, got undefined

Index.html

<!DOCTYPE html>
<html ng-app="bonusapp">
<head>
    <meta charset="utf-8" />

    <link href="lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="lib/bootswatch/yeti/bootstrap.min.css" rel="stylesheet" />

    <link href="css/main.css" rel="stylesheet" />

    <script type="text/javascript" src="lib/angular/angular.js"></script>
    <script type="text/javascript" src="lib/angular-resource/angular-resource.js"></script>
    <script type="text/javascript" src="lib/angular-route/angular-route.js"></script>

    <script src="lib/app.js"></script>
    <!--<script>angular.bootstrap(document, ['app']);</script>-->
</head>
<body ng-cloak>

    <div id="wrapper" ng-controller="customerController">
        <div id="main" class="container-fluid">
            <div class="row">
                <div class="col-md-3">
                    <h2>Kunder</h2>
                    <ul>
                        <li ng-repeat="item in Models">
                            {{item.FirstName}} {{item.LastName}} <a>Redigera</a> <a>Radera</a>
                        </li>
                    </ul>
                </div>
            </div>
    </div>

    <script type="text/javascript" src="lib/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="lib/jquery-validation/dist/jquery.validate.js"></script>
    <script type="text/javascript" src="lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
</body>

</html>

app.js

(function () {
    'use strict';

    // Define module "app"
    angular.module('bonusapp', [
        // Angular modules 
        'ngRoute',
        'ngResource',

        // Custom modules 
        'customerService'

        // 3rd Party Modules

    ]);
})();

controllers.js

(function () {
    'use strict';

    // Assign controller to app
    angular
        .module('bonusapp')
        .controller('customerController', [
            customerController]);

    // $inject() method call is required to enable the controller to work with minification. 
    customerController.$inject = [
        '$scope',
        'Customers'
    ];

    // Construct controller
    function customerController($scope, Customers) {

        // Populate model from service
        $scope.Models = Customers.get();
    }
})();

services.js

(function() {
    'use strict';

    var customerService =
        angular
            .module('customerService', ['ngResource']);

    customerService
        .factory('Customers',
        ['$resource'], 

    function ($resource) {
        return $resource('/api/customers', {}, {
            // Service call to get Customers
            get: {
                method: 'GET',
                params: {},
                isArray: true
            }
        });
    }
        );

})();

For starters your don't need brackets around the controller. e.g. .controller('customerController', customerController);. What line of code is throwing the exception? — rob
– rob, Commented Mar 1, 2016 at 20:08

Thomas Hagström · Accepted Answer · 2016-03-02 10:13:34Z

As Win suggested, I needed to:

Fix the include order to put jQuery first
Include all my JS files

But I still had some issues. For reference, here are the fixed scripts:

controller.js

(function () {
    'use strict';

    // Construct controller
    // Remarks: controller is now declared FIRST
    var customerController = function ($scope, Customers) {

        $scope.Title = "Title";

        // Populate model from service
        $scope.Models = Customers.get();
    }

    // $inject() method call is required to enable the controller to work with minification. 
    customerController.$inject = [
        '$scope',
        'Customers'
    ];

    // Assign controller to app
    angular
        .module('bonusapp')
        .controller('customerController', 
            customerController);

})();

services.js

(function() {
    'use strict';

    var customerService =
        angular
            .module('customerService',
            ['ngResource']);

    customerService
        .factory('Customers',
        ['$resource', 

    function ($resource) {
        return $resource('/api/customers', {}, {
            // Service call to get Customers
            // Remarks: 'get' in single quotes
            'get': {
                method: 'GET',
                params: {},
                isArray: true
            }
        });
    }
        ]);

})();

Win · Accepted Answer · 2016-03-01 21:37:22Z

0

You need to include controller.js and services.js files.

In addition, you need to move jquery before angular.js.

<script type="text/javascript" src="lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="lib/angular/angular.js"></script>
<script type="text/javascript" src="lib/angular-resource/angular-resource.js"></script>
<script type="text/javascript" src="lib/angular-route/angular-route.js"></script>

<script src="lib/app.js"></script>
<script src="lib/controllers.js"></script>
<script src="lib/services.js"></script>

FYI: You might also want to look into bundling and magnification, before you publish.

answered Mar 1, 2016 at 21:37

Win

62.4k13 gold badges106 silver badges190 bronze badges

1 Comment

Thomas Hagström Over a year ago

jQuery before AngularJS helped a lot, thanks! I also explicitly included all my JS files as suggested. But the Dependency Injection is still not working; when the code comes to $scope.Models = Customers.get() in controllers.js the factory/service "Customers" is still not available?

Collectives™ on Stack Overflow

Keep getting AngularJS module not available (ASP.NET 5)

Index.html

app.js

controllers.js

services.js

2 Answers 2

controller.js

services.js

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Index.html

app.js

controllers.js

services.js

2 Answers 2

controller.js

services.js

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related