i have a question. I have a full app, a lot of view(backbone), models, everything using require, routes etc. When my app is on production i have a single file main.js, like this:
<script data-main="main-gdfgfda.js" src="url/require.js"></script>
But i cant run tasks on my spec.
MY views work like this:
define(function(require){
"use strict";
var $ = require('jquery'),
Backbone = require('backbone'),
ContentFactory = require('views/ContentFactory'),
imagesLoaded = require('imagesloaded'),
ShareView = require('views/ui/ShareView');
var myView = Backbone.View.extend(....
});
And isnted i have some variables in php files.
And i cant running tests in this framework, there is a lot of error because depedency and et, what should i do, what is the best way to acess myView to start testing using jasmine?
If i put in jasmine template it will work? I cant just run SRC folder/*js, because there is a lot of dependecys and etc.
What should i do? Thx
Related
I am wondering why do I get different code generated from the rest of the mean app. What I mean exactly is this - when I run yo meanjs:angular-config I get a file that looks like this:
(function() {
'use strict';
// My Module module config
angular
.module('my-module')
.run(menuConfig);
menuConfig.$inject = ['Menus'];
function menuConfig(Menus) {
// Config logic
// ...
}
})();
I know that this is ok, but I am interested why don't I get a code block that looks like in the other mean modules, like this:
'use strict';
// Configuring the Articles module
angular.module('users.admin').run(['Menus',
function (Menus) {
Menus.addSubMenuItem('topbar', 'admin', {
title: 'Manage Users',
state: 'admin.users'
});
}
]);
Why is there a difference? I use version 0.4.2 of meanjs.
How can I generate code like in the second code block I posted? I did see some video tutorials where they use the same console command and the same version of meanjs as I do and they get the "expected" code generated.
Are you watching the MEAN Stack Honolulu Challenge by chance? I'm having compatibility issues with MEAN 0.4.2 and that series myself.
Thanks for reading. I am new to gulp, so apologizing if its a dumb question. I have an AngularJS project with the following folder structure:
app/
app.js
modules/
mod1/
index.js
mod1.js
another.js
mod2/
... same structure as mod1
To create a bundle using browserify I am using this:
gulp.task('bundle', function() {
return browserify('app/app.js')
.bundle()
.pipe(vinylSource('bundle.js'))
.pipe(gulp.dest('public/js'));
});
To make this work, I have include require('mod1') ..require('another') and so on.
I always have to make sure that I am requiring the script that I need to use.
My goal is to create a bundle that includes all javascript file inside my app folder starting from app.js without getting into dependency conflicts and without me writing require('somefile').
You can get that by just using the gulp-concat plugin.
You just specify the paths to search. Because you're using angular and need the modules defined before everything else, I'd add the app first, then all the module definitions, then remaining directives and controllers etc after.
var gulp = require('gulp');
var concat = require('gulp-concat');
gulp.task('app-js', function() {
return gulp.src([
'./app/app.js',
'./app/**/mod*.js',
'./app/**/*.js',
])
.pipe(concat('bundle.js'))
.pipe(gulp.dest('public/js'))
});
I have a service with a few methods:
function userService($http, API, auth) {
....
}
and then used in my module like:
var app = angular.module('app', ['ngRoute'])
.service('user', userService)
...
All of this is in my app.js file, I want to separate things so its easier to maintain. I'm trying to use the line .service('user', '/services/userService') but its not working any ideas how to i need to reference this?
Thanks.
I think you are creating a new module instead of use yours.
To retrieve an existing module and use it in a separated file, you have to do :
var app = angular.module('app')
.service('user', userService')
// ...
Instead of
var app = angular.module('app', ['ngRoute'])
.service('user', userService')
// ...
Documentation available at https://docs.angularjs.org/guide/module#creation-versus-retrieval
EDIT from #koox00 answer
Don't forgot to load all files related to your module in your markup, in the good order (before load the file containing your module declaration).
I'm doing some studies using the Pixijs library, which I find amazing. I'll also have a look into Fabricjs, that seems to have a smaller footprint.
I've been working with Angularjs for some time now and I like conventions, instead of taking time in each project doing configuration and organizing code differently every time.
I would like to hear from some body who experienced Pixijs (or similar) with a framework to organise the code.
I understand that Angularjs is MVVM, but let me know about any tips or suggestion that you may think of?
I did some research this far and a few things came to my mind, such as Browserify (I do believe in convention instead of configuration like I've mentioned though and maybe this wouldn't be the best tool for me).
Kinda old question, but this is something I was looking for myself when starting out with PIXI, so I hope it could be of help to someone to get started.
I use the Revealing module pattern and separate the application into separate files/modules, and then use Browserify to create the application bundle. The HTML loads the app.js bundle which stems from the app.js source below.
index.html: Load your libs (PIXI et al) in <head> and then your app.js in the <body>.
app.js source example:
(function() {
// App.js is the "bootstrap" that loads dependencies, takes care of pre-loading etc.
// I have a template of this which I copy into any new project and use as a checklist.
var core = require("./core.js"); // Use a dummy module as application-wide namespace for easy access
// Any external modules (f eg node modules) could go here
core.utilityLib = require("node-lib");
// Application modules here
core.myModule = require("./myModule.js");
// core.myModule2 = require("./myModule2.js"); // .. you get the idea
// Our main application module
core.main = require("./main.js");
// Init function to run when DOM/scripts have loaded
var init = function() {
// I have a generic screen module which sets up PIXI renderer depending on device compatibility using Modernizr (or weapon of choice). To keep it simple for the sake of the example, lets just create our renderer directly:
core.renderer = PIXI.autoDetectRenderer(screen.innerWidth,screen.innerHeight,{resolution:window.devicePixelRatio});
// I also use a generic loader module that wraps PIXI.loader, taking a list of assets from a config file. Let's just call PIXI.loader directly for now:
PIXI.loader
.add({name:"myasset",url:"/myasset.png"})
.on('progress', loadProgressFunction)
.once('complete',loadCompleteFunction)
})
.load();
}
window.onload = init; // Tell browser to call init function when loaded
// Optional loading progress bar
var function = loadProgressCallback(e) {
}
// Call when mandatory assets has been loaded
var loadCompleteFunction = function() {
myModule.init(); // Init any mandatory modules, f eg to instantiate a player
main.init(); // Tell our main application/game module that we're ready to do fancy stuff
}
// Method to make things move
var animate = function() {
// Send juice to modules that needs to be juiced (or use a ticker module on per-module basis).
// core.main.animate();
requestAnimationFrame(animate);
}
requestAnimationFrame(animate); // See comment below
}());
Comment: PIXI has an built-in requestAnimationFrame alias that takes care of fallback. If not using PIXI, you could use Paul Irish' gist.
core.js:
module.exports = {}; // Just a dummy object to create a module scope that all the modules
// can use to communicate with each other, without running into circular reference problems
main.js:
// Main application/game module
module.exports = (function() {
// Dependencies
var core = require("./core.js"); // This way we can easily access all the necessary modules
// Exports
var exports = {}; // Everything put into this object will be "public"
// Vars
var stuff = 1; // Module vars
exports.init = function() {
// Application magic starts here :)
}
// Some other public method ...
exports.publicMethod = function() {
}
// Some private method
var privateMethod = function() {
}
return exports; // Expose public functions to other modules
}());
Any additional modules can be organized in pretty much the same way as main.js.
Run browserify dev/app.js > html_root/app.js each time you want to "compile" your bundle (or create a Makefile, gulp-, node-, or webpack-script - whichever you prefer).
I have a lot of tests in my angular app (tested with Karma & Jasmine in Coffee Script), and I always end up writing all the dependencies of my modules like this:
myModule = dependency1 = dependency2 = dependency3 = undefined
beforeEach inject (_myModule_, _dependency1_, _dependency2_, _dependency3_) ->
myModule = _myModule_
dependency1 = _dependency1_
dependency2 = _dependency2_
dependency3 = _dependency3_
In the long term, this becomes really annoying, because I have to specify all the dependencies of a module again in my tests. And furthermore, when something changes, I have to add the dependency again to that place, so that I can use it in my test.
My question is, if there is any solution, to inject a modules dependencies automatically in my tests, and assign them to the window object, to use them in my tests?