I'm using AngularJS ngBoilerplate and trying to add my module. I placed file mymodule/mymodule.js with code
angular.module( 'mymodule', [] );
in common directory. I added path to file in build.config.js, then add it to app.js dependencies:
angular.module('app', [ ..., 'mymodule'
then run grunt build and got:
Iceweasel 24.7.0 (Linux 0.0.0) AppCtrl isCurrentUrl should pass a dummy test 1 FAILED
minErr/<#/var/www/angular/vendor/bower/angular/angular.js:68
loadModules/<#/var/www/angular/vendor/bower/angular/angular.js:4379
forEach#/var/www/angular/vendor/bower/angular/angular.js:336
loadModules#/var/www/angular/vendor/bower/angular/angular.js:4339
createInjector#/var/www/angular/vendor/bower/angular/angular.js:4265
workFn#/var/www/angular/vendor/bower/angular-mocks/angular-mocks.js:2409
script mymodule.js included in page correctly.
What am I doing wrong?
Are you sure you want to place the nodule in the common directory ? I'm not sure about what you're trying to achieve. However, to get up and running with a custom module in ngbp, I would suggest that you create a new folder under src/app called mymodule. Next create a mymodule.js under the newly created directory. Finally, add your code to the file:
angular.module( 'mymodule', [
....
]);
And add the module to the src/app/app.js
angular.module('app', [ ..., 'mymodule']);
The grunt build should be working at this stage.
I found answer! Adding path mask for my module to karma-unit.tpl.js solve the problem.
Related
I am trying to understand how requireJs works. There is a property "packages" which I came across while configuring requireJs. What my understanding is that 'packages' is used to mention a complete folder/module which contains "main.js" & main.js requires all other dependencies inside that module. But does mentioning "packages" in config file will automatically load main.js or do we need to do something to make it load main.js ?
Below is my folder structure & main.js snippet. 'main.js' is the data-main or entry point of application.
So after trying few stuff, what I understood is that packages lets you mention a directory or folder which has other modules (commonJs directory is what docs refer it to). So the way we define a package is :
packages: [
{name : 'controllers' , location :'../controllers' },
{name : 'directives' , location : '../directives'},
{name : 'services' , location : '../services'}
] ,
Where name is an alias for this entire directory or folder. location is the path of the folder relative to your main.js or requireJs's config file.
Now answering the 2) point - it does not load automatically. For it to load we need to require it somewhere. Once we require it, requireJs will first load the main.js inside that directory by default. And we need to define all the other modules inside that directory, in this main.js. For eg- I will require it in my app.js before bootstrapping my application-
require([
// Add additional dependencies
'angular',
'angular-ui-router',
'jquery',
'app',
'route',
"controllers",
"directives",
"services"] , function(){ console.log("All dependencies loaded"); });
Running into a weird issue with loading an Angular module.
I have a file structure like so
-ng-app
-app
-account
accountCtrl.js.coffee
-auth
authCtrl.js.coffee
-other_folders
app.js.coffee
and I'm loading accountCtrl and other controllers like so
#app/app.js.coffee
angular.module("app", [
'ngResource'
'smart-table'
'checklist-model'
'ui.router'
...
])
#app/account/accountCtrl.js.coffee
#app = angular.module('app')
app.controller 'accountCtrl', ($scope, $state) ->
....
#app/auth/authCtrl.js.coffee
#app = angular.module('app')
app.controller 'authCtrl', ($scope, $state) ->
....
But then accountCtrl throws an error
Module 'app' 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.
I know the syntax is correct, because I'm loading a a few dozen other controllers with the same syntax. So I started playing around with different scenarios.
I deleted the 'account' folder
No error thrown, other controllers load normally
I renamed account folder to z-account
No error thrown, all controllers including accountCtrl load normally
So the error only occurs when the folder is named 'account' and is the first file in the 'app' folder. Any ideas what's going on?
Rails asset pipeline includes javascript files aphabetically, and app/account.js.coffee was being included before app/app.js.coffee, hence the missing module error.
Two solutions possible:
prefix files with an underscore to ensure it loads first like so:
_app.js.coffee
Or
Remove
//= require_tree .
in application.js and include files manually.
I'm testing an Angular app with Karma. I've got everything working, but it seems like I'm doing something wrong.
https://gist.github.com/guyjacks/7bca850844deb612e681
Karma will throw the following error if I comment out 'app/notes/notes.main.js' :
Uncaught Error: [$injector:nomod] Module 'notes.main' 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.
http://errors.angularjs.org/1.4.3/$injector/nomod?p0=notes.main
at /Users/guyjacks/projects/adr-demo/node_modules/angular/angular.js:1958
I don't want to have to manually list each application file to control the order in which each file loads. Am I don't something wrong or do I just have to list each file in the order I want?
---- Solution based on the accepted answer ----
My app is organized into modules as recommended by the Angular Style Guide: https://github.com/johnpapa/angular-styleguide.
'app/app.module.js',
'app/**/*.module.js',
'app/**/*.service.js',
'app/**/*.controller.js',
'app/**/*.directive.js',
'app/**/*.js'
I don't think the following lines are necessary above
'app/**/*.service.js',
'app/**/*.controller.js',
'app/**/*.directive.js'
when each module has an angular module declared in the *.module.js file like my app does.
That said, if you did need to explicitly load services before controllers & controllers before directives then this would be the way to do it.
Update : I could not see your karma file, now Gist link is fixed.
The point in notes[.]main.js is causing the problem,
So, 'app/**/*.js' is not matching notes.main.js.
Try now like this : app/**/*. *.js
=============================================================
Before update :
You have to load the modules that you app depends on, in karma config. file :
module.exports = function(config) {
config.set({
.......
// list of files / patterns to load in the browser
files: [
'./client/app/vendors/angular/angular.js',
// =====> load Your modules here ...
'./client/app/app.js',
'./client/app/controllers/*.js',
'./client/app/directives/*.js',
'./client/app/services/*.js',
'./test/client/unit/**/*.js'
],
.....
}) }
I have generated a project using Sencha cmd. This creates a nice folder named 'overrides' where I have put my overridden Ext.Ajax class. I then include it in my app.js file like so
requires: [
'overrides.Ajax'
]
This works just fine when using my app, however when I try to build it using Sencha cmd I get the following error:
[ERR] BUILD FAILED
[ERR] com.sencha.exceptions.BasicException: The following error occurred while e
xecuting this line:
[ERR] Z:\public_html\LoginScreen\.sencha\app\build-impl.xml:469: com.sencha.exce
ptions.ExBuild: com.sencha.exceptions.ExBuild: Failed to find any files for Z:\p
ublic_html\LoginScreen\app\app.js::ClassRequire::overrides.Ajax
Does anyone know how to properly include files that are inside the overrides folder?
Turns out I needed to edit the .sencha/app/sencha.cfg file, adding the following to the end of the app.classpath
,${app.dir}/overrides
Thanks to Mitchell over at the official Sencha forums for helping me out!
http://www.sencha.com/forum/showthread.php?261361-Properly-using-the-overrides-folder-generated-by-Sencha-Cmd-for-Ext-Js-4.2
For Ext 5 user, you can specify "overrides folder" in app.json. Example:
"overrides": "${app.dir}/overrides",
You probably need path defined in your loader config for overrides.
Something like this:
Ext.Loader.setConfig({
paths: {
'Ext.ux': 'js/extjs/ux',
'overrides' : 'somepath/to/overrides',
'Skirtle.CTemplate':'js/extjs/ux/SkirtleCTemplate.js' //<-- specific component
}
});
For me just the
requires: [
'overrides.Ajax'
]
didn't work I had to add
requires: [
'MyApp.overrides.Ajax'
]
And it worked :)
Also the vars
// #require #packageOverrides
// #require #appOverrides
don't do anything for me, so the steps are
add the ,${app.dir}/overrides in the sencha.cfg
add the requires in the app.js inside the Ext.application
Tested in Sencha Cmd v4.0.2.67
I wrote a backbone.js app that uses require.js and is broken up with models/, collections/ and so forth. I then wrote another app that depends on the first app (and some other things. The files are laid out like so:
/scripts/appA/
models/
collections/
views/
/scripts/appNeedsA/
models/
collections/
views/
What do I put in the needsA to require appA? The below seems logical to me but doesn't work. If I use ../../appA, that finds appA but IT's dependencies can't be found because the root is wrong.
define(
['underscore', 'backbone', '../appA'],
function (_, Backbone, appA) {
...
}
It might not be the answer you were hoping for but, here's one approach:
https://github.com/busticated/RequireLoadingExample
The idea is that you define your module deps using the path the consuming application will use, then in the consumed app you alias the path appropriately.
In my example, I have a top-level main.js file which pulls in both app1.js and app2.js modules. Both of these modules depend on modules within their own sub-directories - e.g. app1.js uses one/mods/a.js and one/mods/b.js. I have another main (main-one.js) file that lives a level down inside the one/ directory. This file calls:
require.config({
paths: {
'jquery': 'libs/jquery',
'one': '.'
}
});
So now when app1.js loads, the one/mods/a.js path is translated to ./mods/a.js and is found / loaded without issue.
You should be able to fork my repo above and load index.html & one.html in a browser with js console open to see it all work.
Hope it helps!
The proper solution is to:
define(
['underscore', 'backbone', 'appA/views/whatever'],
function (_, Backbone, appAWhateverView) {
...
}
and to set your require.config paths to include:
require.config({
paths: {
appA: '../appA'
}
});