I've been trying to refactor my old AngularJS app for a better structure, first, i'm breaking down controllers to components , I'm following this syntax, but get error failed to instantiate module, and component not registered. my component looks like:
angular.module('app')
.component('LoginComponent', {})
.controller('LoginController', ['$scope', function ($scope,) { }]);
and in my app.js
var app = angular.module('app', [
'ngMaterial',
'LoginComponent'
]);
in my webpack:
module.exports = {
entry: ['path/login.component.js',
],
};
Related
I was able to inject AuthDetails service to other components of my app, but I am having trouble injecting AuthDetails service to my main controller in the app, I have tried following but it does not work. It says: Uncaught ReferenceError: AuthDetails is not defined
MPlayApp.controller('MainCtrl','AuthDetails', [AuthDetails,
function MainCtrl(AuthDetails) {
var subscription = AuthDetails.subscribe(function onNext(d) {
console.log(d);
if(d.success){
this.loggedIn = true;
}
});
}]);
I have added the service to app as follows
var MPlayApp = angular.module('MPlayApp', [
// ...which depends on the MPlayApp module
'player',
'core',
'userMenu',
'home',
'songUpload',
'loginSignUp',
'details',
'angularSoundManager',
'angularFileUpload',
'ngAnimate',
'rx',
'ui.router',
'core.auth'
]);
AuthDetails service is under core.auth module
The syntax is wrong. It should be
MPlayApp.controller('MainCtrl', ['AuthDetails', function MainCtrl(AuthDetails) {
Or better, use ng-annotate, and let it generate this ugly, error-prone syntax for you during the build, from the basic, intuitive syntax:
MPlayApp.controller('MainCtrl', function MainCtrl(AuthDetails) {
I am trying to use webpack in my existing angularjs [1.4.7] application. I have one custom module which is getting generated as a bundle using webpack. I am later adding that custom module as a dependency in some other module. I don't get any error while generating bundle. But when I use this module as a dependency , it's throwing below error. I have tried everything possible and can't understand what's wrong here.
Error
Failed to instantiate module Module2 due to:
Error: [$injector:modulerr]..........
This error occurs when a module fails to load due to some exception. The error message above should provide additional context.
A common reason why the module fails to load is that you've forgotten to include the file with the defined module or that the file couldn't be loaded.
Code Snippet
webpack.config.js
module.exports = {
entry: {
app: [ './src/main/resources/js/app/app.module.js' ]
},
output: {
filename: './src/main/resources/js/app/bundle.js'
},
node: {
module: "empty",
net:"empty",
fs: "empty"
},
watch: false
};
app.module.js
'use strict';
var angular = require('angular');
module.exports = angular.module('module1', [
require('./components/services').name,
require('./components/controllers').name,
require('./components/directives').name
]);
components/services/index.js
'use strict';
var angular = require('angular');
module.exports = angular.module('services',[])
.factory('Service1', require('./Service1'))
.factory( 'Service2' , require('.Service2'))
components/services/service1.js
module.exports = function Service1( $q)
{
var service1 = {};
// service implementation
return service1;
};
components/controllers/index.js
'use strict';
var angular = require('angular');
module.exports = angular.module('controllers',[])
.controller('controller1' , require('./controller1'))
.controller('controller2' , require('./controller2'));
components/directives/index.js
'use strict';
var angular = require('angular');
module.exports = angular.module('directives',['services'])
.directive('directive1', require('./directive1'))
.directive('directive2' , require('./directive2'))
index.html
<script src="bundle.js" type="text/javascript"></script>
another app.js
var app2 = angular.module('Module2',['ui.router','ui.bootstrap','module1']);
Try adding your second module in the entry:
entry: {
app: [
'./src/main/resources/js/app/app.module.js',
'./src/main/resources/js/app/app.js'
]
},
It will help defining your module at first. Also I didn't see any reference to module2 in your code.
I'm making this very preliminary attempt of using node/npm/browserify to build my angular app. The ./app/controllers, ./app/directives, ./app/services basically have index.js files which in turn require() the js files! Below is the root js file i.e. public/index.js.
require('./app/controllers/');
require('./app/directives/');
require('./app/services/');
var app = angular.module('myApp', ['ngRoute'])
app.config(function($routeProvider) {
$routeProvider
.when("/movie/:movieId", {
template: require('./views/movie.html'),
controller: 'MovieCtrl as movie'
})
.when("/movie/:movieId/scene/:sceneId", {
template: require('./views/scene.html'),
controller: 'SceneCtrl as scene'
});
});
module.exports = app;
Now after running below command i do get a bundle.js however,
browserify public/index.js -o release/bundle.js
However, the below line in bundle.js throws the error "Uncaught ReferenceError: app is not defined"
app.controller('MainCtrl', function ($route, $routeParams, $location, MyFactory) {
Now, i was assuming because var app is specified in index.js it should be accessible in MainCtrl.js. Could someone suggest how i could make this work?
----- Adding some more info ------
app/controllers/index.js contains below code:-
require('./MainCtrl.js')
require('./MovieCtrl.js')
require('./SceneCtrl.js')
And MainCtrl.js contains below code:-
app.controller('MainCtrl', function ($route, $routeParams, $location, MyFactory) {
//...
})
I don't know where the line in your code is... it isn't clear from the question, but anyway:
Now, i was assuming because var app is specified in index.js it should be accessible in MainCtrl.js.
That assumption is false. You will need to pass in a reference to whatever you need when you instantiate whatever you included.
For example..
var mainCtrl = new MainCtrl(app);
Ok, so i kind of understood what was going on. var app is local and cannot be accessible anywhere else. Once i set app to the global scope (which is obviously a horrible thing!) and required files after declaring app, it worked. This is mostly not the correct way of doing it, but as i mentioned this was a very preliminary attempt.
app = angular.module('myApp', ['ngRoute'])
app.config(function($routeProvider) {
$routeProvider
.when("/movie/:movieId", {
template: require('./views/movie.html'),
controller: 'MovieCtrl as movie'
})
.when("/movie/:movieId/scene/:sceneId", {
template: require('./views/scene.html'),
controller: 'SceneCtrl as scene'
});
});
require('./app/controllers/');
require('./app/directives/');
require('./app/services/');
I'm beginning with the MEAN Stack and I'm struggling to do something I'm sure it's pretty basic.
I'm trying to inject a new instance of draw2d provided by their downloadable library.
I keep having :
"ncaught Error: [$injector:modulerr] Failed to instantiate module mean due to:
Error: [$injector:modulerr] Failed to instantiate module draw2d due to:
Error: [$injector:nomod] Module 'draw2d' 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."
Comming from :
modules/core/client/app/config.js
var applicationModuleVendorDependencies = ['ngResource', 'ngAnimate', 'ngMessages', 'ui.router', 'ui.bootstrap', 'ui.utils', 'angularFileUpload', 'draw2d'];
Here are the other files :
modules/mymodule/client/controllers/projects.client.controller.js
...
ProjectsController.$inject = ['$scope', '$state', 'Authentication', 'projectResolve', 'draw2d'];
function ProjectsController ($scope, $state, Authentication, project, draw2d) {
$scope.$on('$viewContentLoaded', function(event){
var canvas = new draw2d.create('canvas');
}
);
...
modules/mymodule/client/services/draw2d.client.service.js
(function () {
'use strict';
angular
.module('mymodule')
.factory('draw2d', draw2d);
function draw2d() {
return {
create: function (divName) {
var Draw2d = draw2d;
return new Draw2d().Canvas('canvas');
}
};
}
})();
The module's package is in "public/lib/vendors/draw2d"
config/assets/default.js
'use strict';
module.exports = {
client: {
lib: {
css: [
'public/lib/bootstrap/dist/css/bootstrap.css',
'public/lib/bootstrap/dist/css/bootstrap-theme.css'
],
js: [
'public/lib/vendors/draw2d/lib/canvg.js',
'public/lib/vendors/draw2d/lib/Class.js',
'public/lib/vendors/draw2d/lib/jquery-1.10.2.min.js',
'public/lib/vendors/draw2d/lib/jquery-touch_punch.js',
'public/lib/vendors/draw2d/lib/jquery.autoresize.js',
'public/lib/vendors/draw2d/lib/jquery.contextmenu.js',
'public/lib/vendors/draw2d/lib/json2.js',
'public/lib/vendors/draw2d/lib/pathfinding-browser.min.js',
'public/lib/vendors/draw2d/lib/raphael.js',
'public/lib/vendors/draw2d/lib/rgbcolor.js',
'public/lib/vendors/draw2d/lib/shifty.js',
'public/lib/vendors/draw2d/lib/StackBlur.js',
'public/lib/vendors/draw2d/src/draw2d.js',
'public/lib/angular/angular.js',
'public/lib/angular-resource/angular-resource.js',
'public/lib/angular-animate/angular-animate.js',
'public/lib/angular-messages/angular-messages.js',
'public/lib/angular-ui-router/release/angular-ui-router.js',
'public/lib/angular-ui-utils/ui-utils.js',
'public/lib/angular-bootstrap/ui-bootstrap-tpls.js',
'public/lib/angular-file-upload/angular-file-upload.js',
'public/lib/owasp-password-strength-test/owasp-password-strength-test.js'
],
tests: ['public/lib/angular-mocks/angular-mocks.js']
},
css: [
'modules/*/client/css/*.css',
'public/lib/vendors/draw2d/css/contextmenu.css'
],
less: [
'modules/*/client/less/*.less'
],
sass: [
'modules/*/client/scss/*.scss'
],
js: [
'modules/core/client/app/config.js',
'modules/core/client/app/init.js',
'modules/*/client/*.js',
'modules/*/client/**/*.js'
],
views: ['modules/*/client/views/**/*.html'],
templates: ['build/templates.js']
},
server: {
gruntConfig: 'gruntfile.js',
gulpConfig: 'gulpfile.js',
allJS: ['server.js', 'config/**/*.js', 'modules/*/server/**/*.js'],
models: 'modules/*/server/models/**/*.js',
routes: ['modules/!(core)/server/routes/**/*.js', 'modules/core/server/routes/**/*.js'],
sockets: 'modules/*/server/sockets/**/*.js',
config: 'modules/*/server/config/*.js',
policies: 'modules/*/server/policies/*.js',
views: 'modules/*/server/views/*.html'
}
};
modules/mymodule/core.client.module.js
(function (app) {
'use strict';
app.registerModule('mymodule', ['core']);// The core module is required for special route handling; see /core/client/config/core.client.routes
app.registerModule('mymodule.services');
app.registerModule('kmymodule.routes', ['ui.router', 'mymodule.services']);
})(ApplicationConfiguration);
Can you please help me in explaining me what I did miss ?
Thanks a lot for your precious help ! :)
Oh boy, I found what was providing this error.
I didn't have to declare it in the project dependency.
Works now...
I am currently working on writing a simple test case for the driver script using IIFE(Immediately invoked function expression). Here is my driver script.
driver.js
(function() {
"use strict";
var app = angular
.module("myApp", [
"ui.bootstrap",
"ui.sortable"
]);
}());
Here is my spec driver.spec.js
describe("application configuration tool driver", function() {
it("should create an angular module named myTest", function() {
expect(app).toEqual(angular.module("myApp"));
});
});
When I run my spec using IIFE. I am getting a ReferenceError: app is not defined.
If I run the driver script without IIFE:
var app = angular
.module("myApp", [
"ui.bootstrap",
"ui.sortable"
]);
My spec passes. Any thoughts on passing the spec using IIFE?
You can move app back to the outer scope (if that's an option you can take, of course):
var app;
(function(app) {
"use strict";
app = angular
.module("myApp", [
"ui.bootstrap",
"ui.sortable"
]);
}(app));