How should I get the Backbone.Marionette.Application using requireJs - backbone.js

I decided to divide my web app in different Apps (app1, app2).
Why from js/app1.js I get undefined?
How should I access the mainApp from the app1 using requirejs?
Here's my code:
js/main.js
require([
'js/app',
'js/app1/app1',
'js/app2/app2'
],
function (App)
{
"use strict";
App.initialize();
});
js/mainApp.js
define([''],
function(app)
{
var mainApp = new Backbone.Marionette.Application();
mainApp.start();
mainApp.initialize = function() {
Backbone.history.start();
}
return mainApp;
});
js/app1/app1.js
define(['js/mainApp],
function(app)
{
console.log(app); // undefined
});

With require.js, if there is an error in one of the required file, sometimes it doesn't show as an error but the return value becomes undefined. In your case, app in js/app1/app1.js is undefined most likely due to an error in js/mainApp.js.
Just from the code you provided, js/mainApp.js has a define statement with an empty string, but expects App to be passed to it's function. Try removing the empty string and just pass an empty list ([]) to define, and not pass App to the function there.
If your actual code doesn't have these syntax problems but you're still getting undefined, please update the code snippets in your question.
Try this:
js/mainApp.js
define(['jquery', 'underscore', 'backbone', 'backbone.marionette'],
function($, _, Backbone)
{
var mainApp = new Backbone.Marionette.Application();
// Make sure main app is not undefined here.
console.log('mainApp:', mainApp);
mainApp.start();
mainApp.initialize = function() {
Backbone.history.start();
};
return mainApp;
});
Don't forget to provide the correct path for the JS libraries.

Related

Two nested angular apps and constants

I have a main app:
var mainApp = angular.module('mainApp', ['secondApp'])
.constant('config', {
key: "mainKey"
});
And the second app looks like this:
var secondApp = angular.module('secondApp', [])
.constant('config', {
key: "secondKey"
});
When I am injecting config into a directive in the second app:
secondApp.directive("ngTest", function (config) {
});
config is being initialized from the main app config. What I am doing wrong here? When I name a constant differently and injecting with the different name it works fine.
var secondApp = angular.module('secondApp', [])
.constant('secondConfig', {
key: "secondKey"
});
secondApp.directive("ngTest", function (secondConfig) {
});
Version is: AngularJS v1.5.7
AngularJs 1 not does not handle namespace collisions.
So if you are using two module in one APP having same named
Services
Factory
Constants
So according to me best to overcome this problem is:
Just give some prefix to your variable
Like::
var mainApp = angular.module('mainApp', ['secondApp'])
.constant('mainApp_config', {
key: "mainKey"
});
var secondApp = angular.module('secondApp', [])
.constant('secondApp_config', {
key: "secondKey"
});
I know this is not a solution which may you are looking...
this is only way I know i can suggest to you.

AngularJS: Module not found error when creating module from asynchronous function's callback

When i try to create angularjs module in usual way, it works perfect, but when i try to execute same code inside a callback function of aync function call, it throws error that module not found:
The following code works fine:
var myApp = angular.module('SSApp',[]);
myApp.controller('config', function($scope) {
});
But following throws error:
Init_Data(function() {
initApp();
});
function initApp() {
var myApp = angular.module('SSApp',[]);
myApp.controller('config', function($scope) {
});
}
function Init_Data(callback) {
chrome.storage.local.get(null, function(data) {
window.data = data;
callback();
});
}
I've defined ng-app="SSApp" directive in respective html code.
The reason your code is not doing what you expect is because, Angular tries to bootstrap the module "SSApp" automatically when the DOM is ready. But, finds no such module defined by your JavaScript code when it tries to do so.
You probably have ng-app="SSApp" somewhere in your HTML which is why Angular tries to bootstrap the module automatically.
You can choose to bootstrap the module manually by removing the ng-app directive and doing
angular.bootstrap(document.documentElement, ['SSApp']);
This is the change you have to do:
var myApp = angular.module("SSApp", []);
Init_Data(function () {
initApp();
});
function initApp() {
myApp.controller('config', function ($scope) {
});
console.log(myApp)
}
function Init_Data(callback) {
setTimeout(function () {
callback();
},4000);
}
From what I understand in your code, first you want to load data and then to add config controller to your app...so define your app first and then in your callback configure

Angular Tests always fail on $logProvider when getting constants in tests

Very new to Angular testing... using 1.3.0.rc0. To get started I'm trying to do something simple: get the value of a constant I set. Within a config.js, I have the following:
(function () {
'use strict';
var app = angular.module('app');
// create app configuration
var appConfig = {
version = '0.0.1.0',
debugMode = true
};
app.constant('config', appConfig);
app.config([function ($logProvider, config) {
// set the debugging setting of the app > same setting for the app
if ($logProvider.debugEnabled) {
$logProvider.debugEnabled(config.debugMode);
}
}]);
})();
I'm tried numerous things to write my tests (using jasmine & karma), but I keep getting an error that:
Error: [$injector:modulerr] Failed to instantiate module app due to:
TypeError: 'undefined' is not an object (evaluating '$logProvider.debugEnabled').
I get that this was a bug a while ago in the angular-mocks.js file but has since been resolved. Regardless, no matter the test I write, it doesn't work. Here's what i'm working with now, knowing that there are issues with it.
'use strict';
describe('config.js', function () {
var logProvider;
beforeEach(module(inject(function ($log) {
logProvider = $log;
})));
beforeEach(module('app', logProvider));
it('should set the config constant to the app global configuration settings', function () {
var $injector = angular.injector(['ng', 'app']);
var settings = $injector.get('config');
//var settings = inject(config);
expect(settings.debugMode).toBe(true);
});
});
Am I doing this right? If so, is there no way to get around the test issue with $logProvider?
There is much to learn about how modules work in Angular, especially under testing with ngMocks. I'll try to be brief.
One always begins by calling module (from ngMocks) one (or more times) to build up the module "cookbook" for a test run.
In any of these module calls you have an opportunity to access and stash away a previously defined provider.
The first time you call inject (from ngMocks) in a given test path, the module "cookbook" is "baked" for that path and the injector is populated based on recipes in that "cookbook".
Subsequent calls to module are irrelevant. Your expression beforeEach(module('app', logProvider)); executes too late (even if it did what you wanted, which it would not).
In fact, I'm surprised that you didn't get the error: "Error: Injector already created, can not register a module!".
inject always returns the thing created by the provider, never the provider itself. Your first beforeEach ...
beforeEach(module(inject(function ($log) {
logProvider = $log;
})));
... actually sets logProvider to the $log service, not the $logProvider.
Does this help?
Here is a sample from my forthcoming course on Ng testing that shows how to access a provider (in this case, the $logProvider). It was inspired by your question.
First, the config2 constant (I already had a value called config:
// my sample application module definition is called 'basics'
var basics = angular.module('basics', []);
/* define 'config2' constant - which is available in Ng's config phase */
basics.constant('config2', {
debugMode: true
});
// use constant in config phase
basics.config(function ($logProvider, config2) {
$logProvider.debugEnabled(config2.debugMode);
})
Now the spec (using Mocha and Chai):
describe('Basics - constant:', function() {
'use strict';
beforeEach(module('basics'));
// other stuff
describe("the $logProvider", function(){
var configConstant;
var $log;
var $logProvider;
beforeEach(module(
// Could combine with module('basics') definition in outer describe
// but only need it here in this describe
// This module definition function has access to any previously defined provider
// which in this case is any provider defined in ng, ngMocks, or basics
function( _$logProvider_) {
$logProvider = _$logProvider_;
}
));
// inject triggers injector creation; module definition now "baked"
beforeEach(inject(function(config2, _$log_){
configConstant = config2;
$log = _$log_;
}));
it("is accessible via the module function", function(){
expect($logProvider).to.exist;
});
it("is not the same as the log service", function(){
expect($logProvider).not.to.equal($log);
});
it("has same debugEnabled value as config2.debugMode", function(){
expect($logProvider.debugEnabled()).to.equal(configConstant.debugMode);
});
});
});

Manually bootstrapping AngularJS and then getting the module

Generally, I'd do the following and there would be an ng-app in my HTML:
var myApp = angular.module("myApp", []);
myApp.controller("AttributeCtrl", function ($scope) {
$scope.master = {
name: "some name"
};
});
However, I need to manually bootstrap angular because I'm only using it in a part of my app that is loaded via jQuery's $.load(). If I do the following:
main.js - this is where the page I want to use angular on is being pulled in
$("#form").load(contextPath + url, params, function() {
angular.bootstrap($("#angularApp"));
});
And then the page being pulled in has it's own javascript:
function AttributeCtrl($scope) {
$scope.master = { name: "some name"};
}
This works, however, ideally, I'd like my controllers to be scoped at the module level. So I modified the above code like so
main.js
$("#form").load(contextPath + url, params, function() {
angular.bootstrap($("#angularApp", ["myApp"]));
});
and then...
var app = angular.module("myApp"); // retrieve a module
app.controller("AttributeCtrl", function($scope) {
$scope.master = { name: "some name"};
});
Retrieving the module this way doesn't seem to work, though. Am I doing something wrong?
You cannot create a controller after you've bootstrapped the app. See the documentation for angular.bootstrap.
You should call angular.bootstrap() after you've loaded or defined your modules. You cannot add controllers, services, directives, etc after an application bootstraps.
I don't know if this is just in the example code you have here but:
angular.bootstrap($("#angularApp", ["myApp"]));
should be
angular.bootstrap($("#angularApp"), ["myApp"]);
Your code for retrieving the module should work.
Updated
They updated the documentation and now it reads like this
Each item in the array should be the name of a predefined module or a
(DI annotated) function that will be invoked by the injector as a run
block. See: {#link angular.module modules}
It seems a bug.
The way you implemented to retrieve the module is correct. Just quote it from the doc to make it clear since it may not be well-known.
When passed two or more arguments, a new module is created. If passed
only one argument, an existing module (the name passed as the first
argument to module) is retrieved.
For the problem you mentioned, long story short...
The bootstrap function calls createInjector with the module list ['ng', ['ngLocale', function(){...}] , 'myApp'] (the last one is the module you passed in)
function bootstrap(element, modules) {
...
var injector = createInjector(modules);
Inside createInjector(), it calls loadModules for each module passed in
function createInjector(modulesToLoad) {
forEach(loadModules(modulesToLoad), function(fn) { instanceInjector.invoke(fn || noop); });
And loadModules calls angularModule, which is initialized as angularModule = setupModuleLoader(window);, which creates the object window.angular.module
function loadModules(modulesToLoad){
....
var moduleFn = angularModule(module); // triggers the error
The the error occurs, since angularModule takes 2nd parameter as requires. Without it, it will throws an exception on this line (line 1148) throw Error('No module: ' + name);
Reported: https://github.com/angular/angular.js/issues/3692
Not sure if this counts as a bug or an implementation decision (albeit a seemingly poor one). Adding an empty array solves the undefined require problem that you were having and should solve your problem overall.
var app = angular.module("myApp", []); // create a module
app.controller("AttributeCtrl", function($scope) {
$scope.master = { name: "some name"};
});`
Also, in your fiddle you call {{name}} which won't render. You should be calling {{master.name}}
Edit
Thank you all for the downvotes .. Here's a working example. Good luck!
http://plnkr.co/edit/UowJpWYc1UDryLLlC3Be?p=preview

Module not found in angularjs

I want to wrap this https://gist.github.com/nblumoe/3052052 in a module. I just changed the code from TokenHandler to UserHandler, because on every api request I want to send the user ID.
However I get module UserHandler not found in firebug console. Here is my full code: http://dpaste.com/1076408/
The relevent part:
angular.module('UserHandler').factory('UserHandler', function() {
var userHandler = {};
var user = 0;
/...
return userHandler;
});
angular.module('TicketService', ['ngResource', 'UserHandler'])
.factory('Ticket', ['$resource', 'UserHandler',
function($resource, userHandler){
var Ticket = $resource('/api/tickets/:id1/:action/:id2',
{
id1:'#id'
},
{
list: {
method: 'GET'
}
});
Ticket = userHandler.wrapActions( Ticket, ["open", "close"] );
return Ticket;
}]);
Any idea why this happens? How to fix it?
Many has fallen into the same trap. Me included.
The following does not define a new module. It will try to retrieve a module named UserHandler which isn't defined yet.
angular.module('UserHandler')
Providing a (empty) array of dependencies as the second argument will define your module.
angular.module('UserHandler', [])
I am new to javascript and have spent a couple of hours to discover my issue. The module initialization function can be ignored. To avoid this, do not forget to add empty parenthesis to the end of a function:
(function() {
"use strict";
var app = angular.module("app", []);
})(); //<<---Here
Also, don't forget to add the new module in your index.html:
<script src="app/auxiliary/test.module.js"></script>
<script src="app/auxiliary/test.route.js"></script>
<script src="app/auxiliary/test.controller.js"></script>

Resources