Bardelman Bardelman - 1 year ago 56
AngularJS Question

Failed to pass a variable in an IIEF

I'm following an angular.js tutorial in which a controller has been decalred in a seperate file within an IIEF to prevent poluating the global scope. Simple vanilla javascript was used in that tutorial but i chose to use ES6 (and also to use webpack as a bundler).

this is how originally the controller code was written without ES6 and webpack(then the file was simply referenced in a script tag in html)


"use strict";

.controller("classifiedsCtrl", ["$scope", function($scope){
$ = "Ryann";

and this is how i wrote that controller code in its file with a commonjs export and also as this file won't be simply referenced in html but its function will be called using commonjs require and i had to pass the main app module as a parameter to its function:

module.exports = (ngClassifieds => {
"use strict";

console.log('ngClassifieds : ' + ngClassifieds);

ngClassifieds.controller("classifiedsCtrl", $scope => {
$ = "Ryann";

and this is how i called it from another file:

import angular from 'angular';
import classifiedsCtrl from './../components/classifieds.ctrl';

const ngClassifieds = angular.module('ngClassifieds', []);

but i got this serie of errors in the brower console :

Uncaught ReferenceError: ngClassifieds is not defined
angular.js?3437:4640Uncaught Error: [$injector:modulerr] Failed to instantiate module ngClassifieds due to:
Error: [$injector:nomod] Module 'ngClassifieds' 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.$injector/nomod?p0=ngClassifieds
at eval (eval at <anonymous> (http://localhost:3000/index.js:60:2), <anonymous>:68:12)
at eval (eval at <anonymous> (http://localhost:3000/index.js:60:2), <anonymous>:2082:17)
at ensure (eval at <anonymous> (http://localhost:3000/index.js:60:2), <anonymous>:2006:38)
at module (eval at <anonymous> (http://localhost:3000/index.js:60:2), <anonymous>:2080:14)
at eval (eval at <anonymous> (http://localhost:3000/index.js:60:2), <anonymous>:4617:22)
at forEach (eval at <anonymous> (http://localhost:3000/index.js:60:2), <anonymous>:321:20)
at loadModules (eval at <anonymous> (http://localhost:3000/index.js:60:2), <anonymous>:4601:5)
at createInjector (eval at <anonymous> (http://localhost:3000/index.js:60:2), <anonymous>:4523:19)
at doBootstrap (eval at <anonymous> (http://localhost:3000/index.js:60:2), <anonymous>:1758:20)
at bootstrap (eval at <anonymous> (http://localhost:3000/index.js:60:2), <anonymous>:1779:12)$injector/modulerr?p0=ngClassifieds&p1=Er…F%2Flocalhost%3A3000%2Findex.js%3A60%3A2)%2C%20%3Canonymous%3E%3A1779%3A12)

i don't know why passing the variable in the IIEF wasn't successful and i also wonder if using the IIEF itself is still worthwhile.

Answer Source

You want to export a regular function, and not use an IIFE:

module.exports = ngClassifieds => {
    "use strict";

    console.log('ngClassifieds : ' + ngClassifieds);

    ngClassifieds.controller("classifiedsCtrl", $scope => {
        $ = "Ryann";