I am using mean.js boilerplate. I would like to include angular-stripe in my client side. For that I have installed angular-stripe and it is available under node_modules.
Now I would like to add it in my code as follows
(function () {
'use strict';
angular
.module('myApp', [
'angular-stripe'
])
.config(function (stripeProvider) {
stripeProvider.setPublishableKey('my_key')
})
PaymentController.$inject = ['$scope', '$state', 'Authentication', 'Socket', 'stripe'];
function PaymentController($scope, $state, Authentication, Socket, stripe) {
var vm = this;
}
());
It throws the folowing error
Module 'angular-stripe' 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.
If you're using MeanJs boilerplate, you have to add your dependencies at config/assets/default.js in client - lib and client-css if the dependecy has a .css file.
module.exports = {
client: {
lib: {
css: [
// bower:css
'public/lib/bootstrap/dist/css/bootstrap.css',
'public/lib/bootstrap/dist/css/bootstrap-theme.css',
'public/lib/angular-ui-notification/dist/angular-ui-notification.css'
// endbower
],
js: [
// bower:js
'node_modules/angular-stripe/src/index.js',
'public/lib/angular/angular.js',
'public/lib/angular-animate/angular-animate.js',
'public/lib/angular-bootstrap/ui-bootstrap-tpls.js',
'public/lib/ng-file-upload/ng-file-upload.js',
'public/lib/angular-messages/angular-messages.js',
'public/lib/angular-mocks/angular-mocks.js',
'public/lib/angular-resource/angular-resource.js',
'public/lib/angular-ui-notification/dist/angular-ui-notification.js',
'public/lib/angular-ui-router/release/angular-ui-router.js',
'public/lib/owasp-password-strength-test/owasp-password-strength-test.js',
// endbower
], // rest of the code..
MeanJs highly recommend to use bower for your frontend dependencies.
For more info: MeanJS docs
The problem is that the angular-stripe plugin is not included when the angular module is declared.
When using js modules from node_modules, use the global require() method in your module declaration instead
angular.module('myApp', [
require('angular-stripe')
]);
The other solution is to include the files the "standard" way <script src="....
Good blog post about the require method here
Related
According to an excellent explanation of how to add translation using angular-translate (https://technpol.wordpress.com/2013/11/02/adding-translation-using-angular-translate-to-an-angularjs-app/)
I have a breaking my head error and I'm wondering why that happens? And what am I doing wrong?
Error:
angular.js:36 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.26/$injector/modulerr?p0=app&p1=Error%3A%20…alhost%3A9085%2FScripts%2Fcomponents%2Fangular%2Fangular.min.js%3A18%3A170)
Aim:
Partial loading translations in my entire app
What I've done:
Downloaded (both) via bower and included into the project.
angular-translate
angular-translate-loader-partial
Added them into ReguireJS config file (after Angular)
'angular': '../Scripts/components/angular/angular.min',
'ngAnimate': '../Scripts/components/angular-animate/angular-animate.min',
'ngResource': '../Scripts/components/angular-resource/angular-resource.min',
'ngRoute': '../Scripts/components/angular-route/angular-route.min',
'ngCookies': '../Scripts/components/angular-cookies/angular-cookies.min',
'pascalprecht.translate': '../Scripts/components/angular-translate/angular-translate.min',
'angularTranslate': '../Scripts/components/angular-translate-loader-partial/angular-translate-loader-partial.min'
Added shim:
'pascalprecht.translate': {
deps: ['angular']
},
'angularTranslate': {
deps: ['pascalprecht.translate']
}
In app.js file included dependencies (at the end, after angular stuff):
'pascalprecht.translate',
'angularTranslate',
var app = angular.module('app', ['...',
'pascalprecht.translate',
'angularTranslate' ]);
App.js config
app.config(['$routeProvider', '$locationProvider', '$httpProvider', '$translateProvider', '$translatePartialLoaderProvider',
function ($routeProvider, $locationProvider, $httpProvider, $translateProvider, $translatePartialLoaderProvider) {
Stuff in controllers config:
define(
[
'angular',
'./services/services',
'./controllers/controllers',
'./directives/directives',
'./filters/filters',
'pascalprecht.translate'
],
function(angular) {
'use strict';
var module = angular.module('common', ['common.services', 'common.controllers', 'common.directives', 'common.filters', 'pascalprecht.translate']);
return module;
});
Controller
define(function (require) {
'use strict';
function angularTranslate ($translateProvider, $translatePartialLoaderProvider) {
$translateProvider.useLoader('$translatePartialLoader', {
urlTemplate: '../Translations/locale-{part}.json'
});
$translateProvider.preferredLanguage('en');
}
return angularTranslate;
});
After precisely following above tutorial I still get thi error.
I albo searched in github and stackoverflow but nothing works for me.
Please help!
Short: You dependency management in RequireJS is not correct. The controller's module should require angularTranslate, not pascalprecht.translate.
Long:
At first I would advice you using the official documentation and guide which you will found at https://angular-translate.github.io/
I also recommend using both the latest AngularJS (which is 1.5.x atm) and angular-translate (which is 2.10.x atm).
Additionally, I would also advice using only the non minified versions of libraries because they will give you a much better experience. Minified source files are not for the developer.
And I would also appreciate working demo using JSFiddle, Plnkr or others because they give everyone a running proof of concept/bug.
Said this, it is not clear which version of angular-translate you are using. If you have run bower install angular-translate, you will probably have the latest already -- but the page behind the link you have referenced is made with an older one (about three years old). APIs have changed.
Coming to you actual issue: I would say you have mixed the problems both in AngularJS and RequireJS which leads in such exceptions.
First of all: Your (shim) configuration for RequireJS is misleading/confusing. You should not name the partial loader plugin as angularTranslate.
'angularTranslate': '../Scripts/components/angular-translate-loader-partial/angular-translate-loader-partial.min'
and
'angularTranslate': {
deps: ['pascalprecht.translate']
}
Less confusing would be a name like pascalprecht.translate.partialLoader.
And now the RequireJS module dependency management:
You have defined a shim dependency angularTranslate -> pascalprecht.translate. Whenever the last one will be requested, the first one will be loaded before. That's fine.
You have defined your app depends on both pascalprecht.translate and angularTranslate (which is the partial loader actually). This is fine, but the first one is actually obsolete. It will be available automatically because you have defined the shim dependency already.
However the controller's module only requires the core library pascalprecht.translate.
This means: The dependency management resolver of RequireJS will not wait for the partial loader (no reason it should do this) and therefor it can/will be not available when processing the AJS injections (here: translatePartialLoaderProvider).
Disclaimer: I'm the co-maintainer of the AngularJS plugin angular-translate.
app.js looked like this:
define(
[
...
'pascalprecht.translate',
'angularTranslate',
],
var app = angular.module('app', ['...',
'pascalprecht.translate',
'angularTranslate' ]);
but it should be like:
define(
[
...
'pascalprecht.translate',
'angularTranslate',
],
var app = angular.module('app', ['...',
'pascalprecht.translate' ]);
I've defined submodule angular-translate-loader-partial as normal module and that causes the error. Dependency between both modules (angular-translate and angular-translate-loader-partial) should be made only in requirejs shim.
Can anybody show an example of what gulp-angular-filesort really does and how to use it properly?
The thing is that I’ve recently realized that my gulp-angular-filesort doesn’t sort angularjs files at all, however my AngularJS App with lots of files works fine.
So, I’ve come up with two questions:
Is AngualarJs still sensitive for source files order? As to me, it looks like it isn’t.
What gulp-angular-filesort actually does? I can’t see any results of its work.
I’ve thought that gulp-angular-filesort looks at angular.module statements and sort files according to specified dependency in the brackets. It looks like I was wrong.
Please look at my sample below.
// File: Gulpfile.js
'use strict';
var
gulp = require('gulp'),
connect = require('gulp-connect'),
angularFilesort = require('gulp-angular-filesort'),
inject = require('gulp-inject');
gulp.task('default', function () {
gulp.src('app/index.html')
.pipe(inject(
gulp.src(['app/js/**/*.js']).pipe(angularFilesort()),
{
addRootSlash: false,
ignorePath: 'app'
}
))
.pipe(gulp.dest('app'))
;
connect.server({
root: 'app',
port: 8081,
livereload: true
});
});
//a_services.js
'use strict';
angular.module('myServices', [])
.factory('MyService', function () {
return {
myVar:1
};
})
;
//b_controllers.js
'use strict';
angular.module('myControllers', ['myServices'])
.controller('MyController', function ($scope, MyService) {
$scope.myVar = MyService.myVar;
})
;
// c_app.js
'use strict';
angular.module('myApp', ['myControllers']);
The result of gulp-inject is the following:
<!-- inject:js -->
<script src="js/c_app.js"></script>
<script src="js/b_controllers.js"></script>
<script src="js/a_services.js"></script>
<!-- endinject -->
I was expected exactly an opposite order to make the App work (however it still does work).
So, using of gulp-angular-filesort simply sorted files alphabetically, despite of all the dependencies specified in the angular.module(...,[...])
What is going on here?
Actually in your case you don't need gulp-angular-filesort because you declare a module for each file. The dependency injection mechanism for angular will figure out the correct way to call your modules according to your dependencies.
You'll need gulp-angular-filesort only when you have one module spread across multiple files. So for your example if all files use 'myApp' as the module name. Then the plugin will sort the files correctly: always the one with dependencies before the others.
Here your example modified so that gulp-angular-filesort is needed:
//a_services.js
'use strict';
angular.module('myApp')
.factory('MyService', function () {
return {
myVar:1
};
})
;
//b_controllers.js
'use strict';
angular.module('myApp')
.controller('MyController', function ($scope, MyService) {
$scope.myVar = MyService.myVar;
})
;
// c_app.js
'use strict';
angular.module('myApp', []);
In this case this will still be:
c_app.js
b_controller.js
a_service.js
gulp-angular-filesort moves files containing module’s declaration above the files wherein the modules are mentioned.
If the module is mentioned before it declared, you’ll got errors like these:
"angular.js:68 Uncaught Error: [$injector:nomod] Module 'myApp' 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."
"angular.js:13294 Error: [ng:areq] Argument 'MyController' is not a function, got undefined"
I am injecting the entityManagerFactory into Angular but I am getting an error. This is being done in the datacontext module just like John Papa's example. The error is unknown provider. I am including the entityManagerFactory.js file in the index.html file but no success. Any ideas?
function () {
'use strict';
var serviceId = 'datacontext';
angular.module('app').factory(serviceId, ['common', 'entityManagerFactory', 'breeze', 'logger', datacontext]);
function datacontext(common) {
var $q = common.$q;
var service = {
getPeople: getPeople,
getMessageCount: getMessageCount
};
}
}
I had the same error, the solution was simple and documented in John Papas blog.
In your index.html file, make sure that you have references to all of the required source files, and that they are loaded in the correct order.
<link href="content/breeze.directives.css" rel="stylesheet" />
<script src="scripts/breeze.debug.js"></script>
<script src="scripts/breeze.angular.js"></script>
<script src="scripts/breeze.directives.js"></script>
<script src="scripts/breeze.saveErrorExtensions.js"></script>
<script src="scripts/breeze.to$q.shim.js"></script> <!-- Needed only if you are using to$q -->
<script src="app/app.js"></script>
...
...
<script src="app/services/entityManagerFactory.js"></script>
Make sure that app.js is loaded before entityManagerFactory.js
Don't forget to include references to your breeze modules in app.js as well.
var app = angular.module('app', [
// Angular modules
'ngAnimate', // animations
'ngRoute', // routing
'ngSanitize', // sanitizes html bindings (ex: sidebar.js)
// Custom modules
'common', // common functions, logger, spinner
'common.bootstrap', // bootstrap dialog wrapper functions
// 3rd Party Modules
'breeze.angular', // configures breeze for an angular app
'breeze.directives', // contains the breeze validation directive (zValidate)
'ui.bootstrap' // ui-bootstrap (ex: carousel, pagination, dialog)
]);
If you started a new project using HotTowel.Angular.Breeze version 2.2.0, the issue you're facing may actually be a problem with the BreezeProvider, which entityManagerFactory injects.
If this is the case, you should be seeing the error:
Unknown provider: breezeProvider <- breeze <- entityManagerFactory <- datacontext
To correct this problem, make sure you have added both 'breeze.angular.js' and 'breeze.directives.js' to the index.html and added the 'breeze.angular' and 'breeze.directives' to app.js.
This will allow angular to inject the breezeProvider into entityManagerFactory, which should then be able to successfully be injected into your datacontext.
Additionally, You may find that you are missing the breeze.directives.js from the script folder and instead only have breeze.directives.validation.js. This appears to be an issue with the HotTowel.Angular.Breeze v2.2.0 Nuget package. You can fix this by installing Breeze.Angular.Directives v1.3.6 using Nuget.
PM> install-package breeze.angular.directives
Additional information and detailed instructions on this issue can be found on John Papa's blog at http://www.johnpapa.net/new-breeze-angular-service/
I have problems with call a factory in one module from another module. I am using angular.js + require.js.
Here is my code
Module 1:
define(['angular', 'app/admin/app.admin', 'app/admin/account/services'], function (angular, app, services) {
app.controller('MainCtrl', ['$scope', 'providerService', function ($scope, providerService) {
$scope.showMe = false;
$scope.provider = providerService.Providers;
}]);
return app;
});
Module 2
define(['angular', 'app/admin/config/index'], function (angular) {
'use strict';
var service = angular.module('app.admin.account.services', []);
service.factory('providerService', ['app.admin.config',
function (config) {
var providers = [
{ name: 'google+', url: config.AUTH_URL + '/google' },
{ name: 'facebook', url: config.AUTH_URL + '/facebook' }
];
return {
Providers: providers
};
}
]);
return service;
});
When i try to call providerService in module 2 from module 1. I got an error say providerService is not there. Can someone tell me what I did wrong here?
Cheers
It is perfectly fine to use RequireJS and AngularJS together, however the term "module" has different meaning between the two and is a little bit confusing when it comes to dependencies.
In RequireJS a "module" is a typical Javascript file that encapsulates a piece of code. You define the dependencies using RequireJS in order to pass in/around other modules as dependencies and ensure correct script load ordering.
In AngularJS the term "module" specifically means an AngularJS "module", which is a container for a number of controller/services/directive etc. declarations.
You use RequireJS to define the order and dependencies of your script files. You then also need to tell Angular which "Angular modules" your module depends on, essentially importing all of the controllers/services/directives along with it.
In 'app/admin/app.admin' make sure you define the dependencies for your AngularJS module by passing in the 'app.admin.account.services' module as a second parameter e.g.
var app = angular.module('app.admin', ['app.admin.account.services']);
That will then import the 'app.admin.account.services' module into your main module making your providerService available for dependency injection.
i have a weird problem regarding angular resource. when i try to define it it causes the app to create an error. i dunno but is this the correct style of defining an angular Resource? tIA
main.js
'use strict';
require.config({
paths: {
jquery: 'libs/jquery/jquery-1.9.1',
angular: 'libs/angular/angular.min',
ngResource: 'libs/angular/angular-resource.min'
},
shim: {
angular: {
exports: 'angular'
},
resource : { deps : ['angular'], 'exports' : 'ngResource'},
}
});
require([
'jquery',
'angular',
//'ngResource',
'app',
'routes',
],
function ($, angular, app, routes) {// set main controller
$(function(){
var $html = $('html');
angular.bootstrap($html, [app['name']]);
$html.addClass('ng-app');
});
});
Just to help out those users who are not familiar with the code above; The code shows RequireJS configuration and initialization structure, and only a small part at the end is the actuall AngularJS code.
You have correctly configured RequireJS to include ngResource before initialization, but you didn't actually tell Angular to use it.
I'm not sure what app['name'] stands for, but your angular bootstrap call should include the ngResource module:
angular.bootstrap($html, ['ngResource']);
And, btw, I don't think you need to add the class ('ng-app') at the end.
In your callback when all resources are loaded, try to explicitly define the modules and dependancies before bootstrapping, like this:
angular.module('fooApp', ['ngResource']); // Module name and list of dependancies.
angular.bootstrap(document, 'fooApp');
There is no need to manually add the ng-app class, when this class is used to do bootraping automatically, witch is not what you want. You want to load the applicatiopns module when all scripts are loaded, with the ngResource module as a dependancy.
Hope this helps.