I'm using the angular-seed-play at the moment which has been very handy but am having problems configuring more angular dependencies.
I want to use Angular UI Bootstrap but it's not working for me.
My app.js is essentially
define('angular', ['webjars!angular-locale_en-gb.js'], function() {
return angular;
});
require(['angular', './controllers', './directives', './filters', './services', 'webjars!angular-ui.js'],
function(angular, controllers) {
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ui.bootstrap']).
config(['$routeProvider', function($routeProvider) {
....
}]);
This result in
Uncaught No WebJar dependency found for angular-ui-bootstrap. Please ensure that this is a valid dependency
Can anyone point me in the right direction?
Maybe the dependency is missing? angular-ui-bootstrap is separate from AngularJS. In your Build.scala, add the following and then run play update:
val appDependencies = Seq(
...,
"org.webjars" % "angular-ui-bootstrap" % "0.3.0-1" exclude("org.webjars", "angularjs")
)
app.js:
require(['angular', './controllers', './directives', './filters', './services', "webjars!ui-bootstrap.js", "webjars!ui-bootstrap-tpls.js"], function(angular, controllers, directives, filters, services) {
angular.module("your.module", ["ui.bootstrap", "ui.bootstrap.tpls"]);
}
Related
I am trying to get angularjs to play nicely with local templates that override bootstrap ones.
I had initially use the same file path (uib/template/carousel/carousel.html for example) which is fine when published, but locally it doesn't work.
So, I found this soluton:
Angular ui bootstrap directive template missing
They have said you can override the template with a new url with the $provide service.
So I have done this:
'use strict';
angular.module('core').config(coreConfig);
function coreConfig($provide) {
$provide.decorator('uibCarousel', function ($delegate) {
console.log($delegate[0]);
$delegate[0].templateUrl = 'bootstrap/carousel/carousel.html';
return $delegate;
});
};
which should work.
my core module looks like this:
'use strict';
angular.module('core', [
'ngCookies',
'ngNotify',
'ngResource',
'ngSimpleCache',
'ui.bootstrap',
'ui.bootstrap.tpls',
'ui.router',
'ui.select',
// -- remove for brevity -- //
]);
As you can see, I have the ui.bootstrap.tpls module loaded, so in theory, my code should work.
Can anyone think of a reason that it won't?
Sorry for all the comment spam. I think I have found the answer to your issue.
You must append Directive to a directive when defining the decorator:
function coreConfig($provide) {
$provide.decorator('uibCarouselDirective', function ($delegate) {
console.log($delegate[0]);
$delegate[0].templateUrl = 'bootstrap/carousel/carousel.html';
return $delegate;
});
};
From the docs:
Decorators have different rules for different services. This is
because services are registered in different ways. Services are
selected by name, however filters and directives are selected by
appending "Filter" or "Directive" to the end of the name. The
$delegate provided is dictated by the type of service.
https://docs.angularjs.org/guide/decorators
This is an example from my own (working) code:
$provide.decorator("uibDatepickerPopupDirective", [
"$delegate",
function($delegate) {
var directive = $delegate[0];
// removed for brevity
return $delegate;
}
]);
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.
how can I start to use this module: http://gregpike.net/demos/angular-local-storage/demo/demo.html
I have a controller:
app.controller('FormController', function ($scope, localStorageService) {
});
And I injected
localStorageService
as shown in example, but naturally nothing work. How can I fix it? Thanks.
First, you link the script from your page:
<script src=".../angular-local-storage.min.js"></script>
Second, you add the module to the module dependencies array (I guess that's what you missed):
angular.module('myApp', [..., 'LocalStorageModule', ...])
Then you can inject and use localStorageService in your components, as you did.
That said, I would add a step 0 : Read this Readme :)
i recommend you this one https://github.com/gsklee/ngStorage also use this syntax for not breaking whe you minify
app.controller('FormController', ["$scope", "otherProvider",function ($scope, otherProvider) {
//in this way angular know what to inject
}]);
I am using ngMock for unit testing in Angular. I now have a browserify \w Angular setup. I have some strange behaviour. When I just load angular-mocks with require('angular-mocks'); my tests and app work. But if I then load it into my Angular app module as an dependency it does not load my Angular app anymore, but my karma test still works:
(function () {
'use strict';
require('angular');
require('angular-route');
require('angular-mocks');
require('./home');
angular.module('greenboxUi', [
'ngRoute',
//'ngMock',
'greenboxUi.home'
]);
}());
If I uncomment ngMock, my app does not load anymore
My browserify-shim:
'angular-mocks': {
path: './app/bower_components/angular-mocks/angular-mocks.js',
exports: 'angular.mock',
depends: {
angular: 'angular'
}
}
My test:
beforeEach(function(){
module('greenboxUi.home');
inject(function($controller){
controller = $controller('HomeCtrl');
});
});
it('test test', function() {
expect(controller.hello).toBe('Hello world');
});
My app does work when just commenting 'ngMock' out, but I just find it a bit strange because the Angular docs do load it with angular.module('app', ['ngMock']).. Is it because browserify wraps the module somehow?
Kind regards, Niels
In fact, ngMock should not be added to the dependencies of "production" project.
See this github issue for more information : https://github.com/angular/angular.js/issues/12137
I'm trying for the first time to use AngularJS in conjunction with RequireJS using this guide as a basis. As far I can tell after a lot of debugging I'm loading all my modules in the correct order, but when the application runs Angular throws an Error / Exception with the following message:
Argument 'fn' is not a function, got string from myApp
I've seen this message before due to syntax errors, so even though I've looked trough the code multiple times I won't rule out the possibility of a simple syntax error. Not making a Fiddle just yet in case it is something as simple as a syntax error, but I'll of course do so if requested.
Update: I just noticed when setting ng-app="myApp" in the <html> tag I also get an additional error,
No module: myApp
Update II: Okay, it turns out it indeed was an syntax error in the only file not included below. I am though still left with the problem from update I.
RequireJS bootstrap
'use strict';
define([
'require',
'angular',
'app/myApp/app',
'app/myApp/routes'
], function(require, ng) {
require(['domReady'], function(domReady) {
ng.bootstrap(domReady, ['myApp']);
});
});
app.js
'use strict';
define([
'angular',
'./controllers/index'
], function(ng) {
return ng.module('myApp', [
'myApp.controllers'
]);
}
);
controllers/index
'use strict';
define([
'./front-page-ctrl'
], function() {
});
controllers/module
'use strict';
define(['angular'], function (ng) {
return ng.module('myApp.controllers', []);
});
controllers/front-page-ctrl
'use strict';
define(['./module'], function(controllers) {
controllers.
controller('FrontPageCtrl', ['$scope',
function($scope) {
console.log('I\'m alive!');
}
]);
});
Delete ng-app="myApp" from your html.
Because it has bootstrapped manually
ng.bootstrap(domReady, ['myApp']);
RequireJS docs on Dom ready state:
Since DOM ready is a common application need, ideally the nested
functions in the API above could be avoided. The domReady module also
implements the Loader Plugin API, so you can use the loader plugin
syntax (notice the ! in the domReady dependency) to force the
require() callback function to wait for the DOM to be ready before
executing. domReady will return the current document when used as a
loader plugin:
So, when you require 'domReady' the result is a function:
function domReady(callback) {
if (isPageLoaded) {
callback(doc);
} else {
readyCalls.push(callback);
}
return domReady;
}
But when you append the domReady string with ! sign the result will be the actual document element:
'use strict';
define([
'require',
'angular',
'app/myApp/app',
'app/myApp/routes'
], function(require, ng) {
require(['domReady!'], function(domReady) {
// domReady is now a document element
ng.bootstrap(domReady, ['myApp']);
});
});