What does "packages" property of requireJs config mean ? And how it works? - angularjs

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"); });

Related

setting up ng-htmljs-preprocessor karma preprocessor

I am setting up my Karma configuration file, but I do not fully understand some of options that exist as I am not having success testing templates that have ran through the ngHtml2JsPreprocessor and have been
$templateCached
Inside of the ngHtml2JsPreprocessor I can add a few key value properties involving paths.
ngHtml2JsPreprocessor: {
stripPrefix: ".*/Went all the way back to the root of my application/",
// moduleName: 'templatesCached'//
},
I commented out the templates for now to make sure that I am getting access to each file as module. I am loading the modules with no error. I can find the templateCached version in my dev tools.
beforeEach(module('template'));
My Templates folder sits outside the basepath I created.
basePath: 'Scripts/',
I have it referenced inside the preprocessors object
preprocessors: {
'../Templates/**/*.html' : ['ng-html2js']
},
Again all of my templates are now js files and cached.
I inside of my package.json I saved the files as
save-dev
"karma-chrome-launcher": "^0.2.2",
"karma-jasmine": "^0.2.2",
"karma-ng-html2js-preprocessor": "^0.2.1",
I referenced my installs in the plugins.
plugins: [
'karma-chrome-launcher',
'karma-jasmine',
'karma-sinon',
'karma-ng-html2js-preprocessor'
],
I have all of my files loaded
files: [
//jquery libaries
// angular libraries
// Scripts files
// source app.js
// tests folder and files
]
My tests are running off of Karma start
However, my directive is just an empty string
element.html()
returns ""
I have bard inject set up
bard.inject(
"$compile",
"$controller",
"$rootScope",
'$templateCache',
"haConfig",
"$q"
);
Here is the inside of my beforeEach
bard.mockService(haConfig, {
getTemplateUrl: '/tst!'
});
//bard.mockService(haConfig, {});
console.log('ha config2', haConfig.getTemplateUrl());
var html = angular.element("<div explore-hero></div>");
console.log('htl',haConfig.getTemplateUrl());
scope = $rootScope.$new();
//templateCache
element = $compile(html)(scope);
//console.log(haConfig.getTemplateUrl(html));
scope.$digest(element);
console.log('missing text',haConfig.getTemplateUrl(html));
controller = element.scope();
console.log("element", element);
I have no idea why I am getting an empty string back. I am creating the html file but, nothing is inside of it.
All I can wonder if I should have the the templatesCached files showing up in a folder on my dev tools? Also whether or not the files should be referenced inside of the files array inside karma.conf.js
Right now I have the html files referenced? I have tried the js files but that did not seem to do anything
The problem was actually quite simple fix. I was tempted to delete it but, in case someone has a similar issue I want this to be available.
Inside the karma.conf.js I have a
stripPrefix: 'rootDirectory' // was already in place
stripSuffix: '.js.html' // I had to make a strip on the templatesCached
prependSuffix: '.html' // this is what I was searching for
When the preprocessor ran it templateCached all of my files. However, they did not end the way that I was expecting them and I could not read them. I had the module and other parts set up correctly.

How do I control the order files are loaded in karma config

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'
],
.....
}) }

How to add module in AngularJS ngBoilerplate?

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.

Ext MVC does not load all folders and source files

I'm new to Ext and it's my first contact with this framework and I'm creating java web app. Here is my folder structure:
src
--main
--webapp
--index
--application
--controller
--Index.js
--model
--store
--view
--MainPanel.js
--Index.js
--resources
--WEB-INF
--Index.jsp
Here is webapp/Index/Index.js
Ext.application({
name: 'Spring_Ext',
appFolder: '/index/application',
controllers: [
'Index'
]
});
And here is webapp/index/application/controller/Index.js
Ext.define('Spring_Ext.controller.Index',{
extend: 'Ext.app.Controller',
views: ['MainPanel'],
init: function(){
....
}
....
});
When I run it on tomcat in chrome I get error saying it cannot found(404)
GET http://localhost:8081/index/application/controller/Index.js?_dc=1425849848988 ext-all-debug.js:6262
and when looking in source tab in chrome developer in index folder there isn't application folder with MVC structure, but only Index.js.
Thats because at the index.js level of your directory structure you are already in /index/application/
Extjs is now looking for the same path and cannot find it. Instead just specify '/' for you appFolder config. You might even not need to set this as it may default to this already
No need for appFolder. And in your source tab there is no application folder with mvc because your controller hasn't loaded successfully. Try giving the whole path of MainPanel in our controller like this
Views: Spring_Ext.view.MainPanel

One Backbone.js app using require.js depends on another: how do I include the child?

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'
}
});

Resources