Cordova/phonegap application with yeoman/backbone/handlebars/require - backbone.js

I've tried to follow this tutorials:
http://www.gauntface.co.uk/blog/2013/07/18/cordova-web-best-practices/
http://rockyj.in/2013/05/11/yeoman_and_backbone.html
to develop my test cordova application with yeoman and backbone...I've followed all steps but when I've tried to insert my first view the console gives me error about template...I'm novice in this and I don't understand where I wrong.
If I execute the code in my app source the console error is:
**GET http://localhost:8888/LABS_and_TRAINING/TEST/pgyo-test03/PgYoTest/src/app/scripts/templates.js 404 (Not Found) require.js:1880
Uncaught Error: Script error for: templates
http://requirejs.org/docs/errors.html#scripterror require.js:163**
If I execute the code in the dist, the error is:
**Uncaught TypeError: Cannot call method 'template' of undefined**
Here you can download the src(without the node modules)
https://dl.dropboxusercontent.com/u/2637840/src.zip

I was only receiving the "Cannot call method 'template' of undefined" error when viewing dist build. I came across the solution, but am not sure why it works.
Your RequireJS Shim for Handlebars should look like this
shim: {
handlebars: {
exports: 'Handlebars',
init: function() {
this.Handlebars = Handlebars;
return this.Handlebars;
}
}
}
This solution is still being discussed, but it works for now.

The problem is the define block in your AppView-view, where you try to load a file called templates.
define([
'jquery',
'underscore',
'backbone',
'templates',// there is no file called templates
], function ($, _, Backbone, JST) {
'use strict';
This file isn't present so you get the 404. I assume you want to load handlebars instead, that you define in your requirejs.config block.

Related

Failed to instantiate module ui-mask angulajs with rquirejs

I need to mask my input in my application. I was using ngMask in angularjs. But i found an issue in ngMask is that if we update the mid value the cursor move to end. I tried to resolve the issue but did not find anything. Even on github this issue has reported but still not resolved. Here is the link
ngMask Issue
Then i decided to use another mask library. I found ui-mask and trying to use in my application but i am getting error when i include in my project. My application is in angularjs and i am using requirejs as well to load the modules.
This is what i have done in main.js:
paths: {
...////
"angular-ui-mask": "../../lib/ui-mask/ui-mask.min",
},
'angular-ui-mask': {
deps: ['angular'],
exports: 'angular-ui-mask'
},
in app.js i have done:
var app = angular.module("app",
[
"ui.router",
"mobile-angular-ui",
"scrollable-table", //for alert triggering
"rzModule", //slider for SEMI diagram
"isteven-multi-select",
"ui.bootstrap",
"cgBusy", "dndLists", 'apm-kpi-widget',
'angular.filter',
"pascalprecht.translate",
"jQueryScrollbar",
"ui.checkbox",
"angular-ui-mask"
])
This is exact i was doing for ngMask. But in this case i am getting error
[$injector:modulerr] http://errors.angularjs.org/1.5.5/$injector/modulerr?
at angular.js:38
at angular.js:4587
at q (angular.js:322)
at g (angular.js:4548)
at bb (angular.js:4470)
at c (angular.js:1746)
at Object.yc [as bootstrap] (angular.js:1767)
at HTMLDocument.<anonymous> (angularAMD.js:449)
at i (jquery-1.12.3.min.js?v=1531811705531:2)
at Object.add [as done] (jquery-1.12.3.min.js?v=1531811705531:2)
What's the issue?

AngularJS component won't instantiate, "'module' is not a function"

I've been asked to do a project in Angular 1, and I've been having a nightmare of a time just trying to get the page to load the app code from bundle.js. I've currently got an error along the lines of
[$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module {"_invokeQueue":
[],"_configBlocks":[],"_runBlocks":[],"name":"approveComponent"} due to:
Error: [ng:areq] Argument 'module' is not a function, got Object
but the only approveComponent I've got is essentially a blank placeholder -
import angular from 'angular';
const approve = angular.module('approveComponent', []);
export default approve;
What can I do to get this actually running?
I'm using Webpack 4 to bundle everything. (NO errors from webpack.)
I have seen this error earlier.You need to pass module name not module in the dependency
ngModule = angular.module('webpack', [
require('./webpack/photocrop/client')//this is a object
])
You can simply require the file and just inject by name Like this
var firstModule = require('./webpack/myapp/client')
ngModule = angular.module('webpack', [
'firstModule'//this is should work
])
firstModule(ngModule)
SAMPLE GITHUB REPO

Uncaught Error: [$injector:modulerr] Failed to instantiate module yeomanTestApp due to: Error: [$injector:unpr] Unknown provider: e

I'm using yeoman generator for scaffolding angular web application with requirejs. Its working fine but when I tried to concat and minifying all the js file into a single file through grunt task runner its started giving me above mentioned error. I've researched online about the issue and common solution is I may be mis-spelled any service injecting in the module or service does not exists, I've cross checked again all the spelling, quotation marks etc everything seems fine but still I'm unable to resolve this issue.
Here is my app.js file where my main module with dependencies is listed.
return angular
.module('arteciateYeomanApp', [
'arteciateYeomanApp.controllers.MainCtrl',
'arteciateYeomanApp.controllers.AboutCtrl',
'arteciateYeomanApp.services.Xhr',
'arteciateYeomanApp.services.Common',
'arteciateYeomanApp.controllers.ArtworkCtrl',
'arteciateYeomanApp.controllers.AddAccountCtrl',
'arteciateYeomanApp.controllers.AddArtgroupCtrl',
'arteciateYeomanApp.controllers.AddArtistCtrl',
'arteciateYeomanApp.controllers.AddArtworkCtrl',
'arteciateYeomanApp.controllers.AddCampaignsCtrl',
'arteciateYeomanApp.controllers.AddGenreCtrl',
'arteciateYeomanApp.controllers.AddInstitutionCtrl',
'arteciateYeomanApp.controllers.AdminSignupCtrl',
'arteciateYeomanApp.controllers.ArtistInfoCtrl',
'arteciateYeomanApp.controllers.DirectUserSignupCtrl',
'arteciateYeomanApp.controllers.ErrorCtrl',
'arteciateYeomanApp.controllers.ForgotPasswordCtrl',
'arteciateYeomanApp.controllers.GroupBuyingCtrl',
'arteciateYeomanApp.controllers.LoginCtrl',
'arteciateYeomanApp.controllers.AdminLoginCtrl',
'arteciateYeomanApp.controllers.ResetPasswordCtrl',
'arteciateYeomanApp.controllers.SignupCtrl',
'arteciateYeomanApp.controllers.UnblockUserCtrl',
'arteciateYeomanApp.controllers.UpdatePasswordCtrl',
'arteciateYeomanApp.controllers.DashboardCtrl',
'ngRoute','ngResource']).config(.....);
here is grunt task which I'm running for minifying the js files.
registering task
grunt.registerTask('dev', ['requirejs' ]);
Here is task running script
requirejs : {
compile : {
options : {
baseUrl : "<%= yeoman.app %>/scripts",
mainConfigFile : "<%= yeoman.app %>/scripts/main.js",
name : "main",
out : "requireArterciate.js"
}
}
}
Please let me know if I'm doing something wrong here.
If you need to minify the angularjs code, then use the following standard format syntax to define the controller and to inject the dependencies. Refer Dependency Injection
angular.module('test').controller('testController', testController);
testController.$inject = ['$scope', '$rootScope'];
function testController($scope, $rootScope) {};

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

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