CODEWITHSUNDEEP
javascriptjqueryangularjsrequirejs
user2758141
user2758141

Reputation:

specifying jquery as angularjs's dependency generates error in requirejs

I am experimenting and trying to use the angular.element (jQuery wrapper) inside angular's config() function. However, in the main.js file, as soon as I add the deps under angular, it generates the $injector:modulerr error (where the 1st comment is)

Script tag is placed right before in my html file

<script src="js/vendor/require.min.js" data-main="js/own/main.js"></script>

main.js file

require.config({
    baseUrl: "js/vendor/",
    paths: {
        "jquery": "jquery-2.1.1.min",
        "angular": "angular.1.2.9.min"
    },
    shim: {
        "angular": {
            deps: ["jquery"],   // As soon as I add this, it generates a $injector:modulerr error
            exports: "angular"
        }
}
});

require(["angular"], function(angular){
    angular
    .module("app", [])          // ng-app="app" already defined in <body>
    .controller("appctrl", function($scope){  // ng-controller="appctrl" already defined in <body>
        $scope.sample = 1;      // this works fine if I don't add deps under angular in require.config
    });
});

Upvotes: 2

Views: 169

Answers (1)

user2758141
user2758141

Reputation:

Error is gone by removing the directive "ng-app='urAppName'" in the html page. The ng-app has to be manually bootstrapped by angular.bootstrap(document.body, ["urAppName"]) AFTER you define your angular module, e.g. angular.module("urAppName", []).controller().....;

Note that you can leave other directives such as ng-controller or your model data such as {{modelName}} in the page.

Upvotes: 3

Related Questions