I'm looking to include global options for an Angular directive/module.
I could use a .constant() (or simply an object of configs) in my module file, but since the module is designed for other people to include in their projects, and is installable via Bower, I don't like the idea of global options being blown away when the module gets an update. I'm aware that the .constant() could be included in another file, but then the user has to include it - rather I'd prefer that the module included everything (default values), and then the user could extend/modify if required.
I'm envisioning a similar approach as to a jQuery plugin pattern such as:
$('.myElement').myPlugin({
option1: '',
option2: ''
});
The Plugin
(function($) {
$.myPlugin = function( element, conf ) {
var $element = $(element);
var defaults = {
option1: '',
option2: '',
};
var config = $.extend( defaults, conf );
//...
};
$.fn.myPlugin = function(config) {
return this.each(function() {
if (undefined == $(this).data('myPlugin')) {
var plugin = new $.myPlugin(this, config);
$(this).data('myPlugin', plugin);
}
});
};
})(jQuery);
Your App and Configuring the Module
This is where we can define a configuration block and inject a provider. From this we can set our config options.
var myApp = angular.module( 'myApp', ['myModule'] )
myApp.config( function( myDirectiveConfigProvider ) {
myDirectiveConfigProvider.config = {
option1: 'A new setting'
//option2: 'A new setting'
};
// OR
myDirectiveConfigProvider.config.option1 = 'A new setting';
//myDirectiveConfigProvider.config.option2 = 'A new setting';
});
The Module
Within the module we can define a service to hold our default config options. This could also simply be included in the directive if you don't wish to inject it var config = {}.
We also define a Provider which will be injected into our configuration block.
Within the directive we simply need to extend config (injected service or var) with the providers.
angular.module( 'myModule', [] )
.value( 'config', {
'option1': 'my default setting',
'option2': 'my default setting'
})
.directive( 'myDirective', [ 'config', 'myDirectiveConfig', function( config, myDirectiveConfig ) {
return {
link: function( scope, element, attrs ) {
angular.extend( config, myDirectiveConfig.config );
console.log( config.option1 ); //'A new setting'
console.log( config.option2 ); //'my default setting'
}
}
}])
.provider( 'myDirectiveConfig', function() {
var self = this;
this.config = {};
this.$get = function() {
var extend = {};
extend.config = self.config;
return extend;
};
return this;
});
Related
I have a backbone app that uses require.js.
Prior to using require my Backbone router looked something like this.
APP.views = {};
APP.Router = Backbone.Router.extend({
routes: {
'(/)' : 'index',
'about(/)' : 'about'
},
initialize : function(){
Backbone.history.start({ pushState: true });
},
index: function() {
this.showView( new APP.Views.IndexView() );
},
about: function() {
this.showView( new APP.Views.AboutView() );
},
showView : function( view ) {
if ( APP.views.current ) {
APP.views.current.remove();
}
APP.views.current = view;
$( '#page' ).html( view.render().$el );
}
});
I would stash the 'current' view in a global variable and kill the existing view each time a route was changed and life was good.
But, how do I achieve this with require.js ?
My requirejs router currently looks like the following but I'm not sure how to remove the existing views. Although, I have not noticed any of the typical "zombie view" symptoms I feel like I should be removing the existing views.
define( function( require ){
// DEPS
var $ = require('jquery'),
_ = require('underscore'),
Backbone = require('backbone');
// ROUTER
var Router = Backbone.Router.extend({
routes: {
'(/)' : 'index',
'about(/)' : 'about'
},
initialize : function(){
Backbone.history.start({ pushState: true });
},
index: function(){
this.showPage('index');
},
about: function() {
this.showPage('about');
},
showPage : function( pageName ) {
var view = 'views/pages/' + pageName;
require( [ view ] , function( Page ) {
var page = new Page();
$('#page').html( page.render().el );
});
}
});
return Router ;
});
Even before using require.js, a global wasn't needed.
Just put the current view into a router property.
initialize : function() {
this.$page = $('#page');
Backbone.history.start({ pushState: true });
},
showView : function(view) {
if (this.current) this.current.remove();
this.$page.html((this.current = view).render().el);
}
Then, same thing applies to your async require case:
showPage : function(pageName) {
if (this.current) this.current.remove();
var view = 'views/pages/' + pageName,
self = this;
require([view], function(Page) {
self.$page.html((self.current = new Page()).render().el);
});
}
But even then, I don't feel like requiring each view with an async require is worth it. You're just slowing down your application with a lot of extra requests.
Just define the dependencies for each module.
define([
'jquery',
'backbone',
'views/index',
'views/about'
], function($, Backbone, IndexView, AboutView){
// ...
});
While in development, you'll see a lot of request each time you refresh, but when ready for production, build a minified bundle of all the js files with require optimizer.
Also note that you can have module scope global, which are just local variable declared at the root of a module scope (IIFE or with require.js).
(function() {
var currentView;
var Router = Backbone.Router.extend({
// ...snip...
showView: function(view) {
if (currentView) currentView.remove();
this.$page.html((currentView = view).render().el);
}
});
})();
I am trying to implements a modal from this answer but I fail to use the service in the app controller. The question is simple: How can I use the modalService via injection in the emaApp main controller?
modal.js
angular.module('emaApp', []).service('modalService', [ '$modal',
// NB: For Angular-bootstrap 0.14.0 or later, use $uibModal above instead of $modal
function($modal) {
var modalDefaults = {
backdrop : true,
keyboard : true,
modalFade : true,
templateUrl : '/app/partials/modal.html'
};
var modalOptions = {
closeButtonText : 'Close',
actionButtonText : 'OK',
headerText : 'Proceed?',
bodyText : 'Perform this action?'
};
this.showModal = function(customModalDefaults, customModalOptions) {
if (!customModalDefaults)
customModalDefaults = {};
customModalDefaults.backdrop = 'static';
return this.show(customModalDefaults, customModalOptions);
};
this.show = function(customModalDefaults, customModalOptions) {
//Create temp objects to work with since we're in a singleton service
var tempModalDefaults = {};
var tempModalOptions = {};
//Map angular-ui modal custom defaults to modal defaults defined in service
angular.extend(tempModalDefaults, modalDefaults, customModalDefaults);
//Map modal.html $scope custom properties to defaults defined in service
angular.extend(tempModalOptions, modalOptions, customModalOptions);
if (!tempModalDefaults.controller) {
tempModalDefaults.controller = function($scope, $modalInstance) {
$scope.modalOptions = tempModalOptions;
$scope.modalOptions.ok = function(result) {
$modalInstance.close(result);
};
$scope.modalOptions.close = function(result) {
$modalInstance.dismiss('cancel');
};
};
}
return $modal.open(tempModalDefaults).result;
};
} ]);
index.js
var app = angular.module('emaApp', []);
app.controller('mainCtrl',['$scope', '$http', 'modalService', function($scope, $http, modalService) {
$scope.deleteModel = function(modelId) {
var modalOptions = {
closeButtonText : 'Cancel',
actionButtonText : 'Delete Customer',
headerText : 'Delete ' + modelId + '?',
bodyText : 'Are you sure you want to delete this model?'
};
modalModule.showModal({}, modalOptions).then(function(result) {
//your-custom-logic
alert("muaha")
});
}
}]);
You are defining module emaApp multiple times. Hence overwriting the existing module, You need to retrieve module in file which is loaded later i.e. index.js, notice removed []
var app = angular.module('emaApp');
instead of
var app = angular.module('emaApp', []);
You already injected the service into your controller. You should use modalService instead of -possibly- undefined modalModule in your controller.
I've been using the following code to bind viewModels in other projects, and had to modify it a bit for magento 2. Maybe I've just been looking at it too long but heres my issue.
In the following snippet I get the error Cannot set property 'categoryViewModel' of undefined although logging it out it seems like it should be defined. Any ideas out there?
demoController.js
define('js/theme',[
'jquery',
'knockout',
'category',
'product',
'domReady!'
], function ($, ko, categoryView, productView) {
'use strict';
var demoController = {
init: function(){
var self = this;
var shouter = new ko.subscribable();
categoryView.categoryViewController(shouter);
productView.productViewController(shouter);
self.masterVM = (function(){
this.categoryViewModel = new categoryView.categoryViewModel();
this.productViewModel = new productView.productViewModel();
})();
ko.applyBindings(self.masterVM);
}
};
demoController.init();
});
categoryView.js
define([
'jquery',
'knockout'
], function($, ko) {
var categoryView = {
categoryViewController: function(shouter){
//var self = this;
this.categoryViewModel = function(){
this.foo = ko.observable('category!');
console.log('category view', this.foo() );
};
}
};
return categoryView;
});
I am trying to create a mock for testing a service that depends on another one managed by bower. The code for the Jasmine test is the following (full example at plunker):
describe('jsonrpc', function() {
'use strict';
var uuidMock, $httpBackend, jsonrpc;
beforeEach(module('jsonrpc', function ($provide) {
uuidMock = {};
uuidMock.generate = function () { return 0; };
$provide.value('uuid', uuidMock);
}));
beforeEach(inject(function(_jsonrpc_, _$httpBackend_) {
jsonrpc = _jsonrpc_;
$httpBackend = _$httpBackend_;
}));
it('should have created $httpBackend', function() {
expect($httpBackend.get).toBeDefined();
});
});
The 'jsonrpc' service provider is defined as follows:
angular.module('jsonrpc', ['uuid']).provider('jsonrpc', function() {
'use strict';
var defaults = this.defaults = {};
defaults.basePath = '/rpc';
this.$get = ['$http', 'uuid4', function($http, uuid4) {
function jsonrpc(options, config) {
... (etc) ...
When I try to mock the dependency of the 'jsonrpc' module on the 'uuid' module, I get the following error:
$injector:modulerr http://errors.angularjs.org/1.2.16/$injector/modulerr?p0=jsonrpc&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.16%2F%24injector%2Fmodulerr%3Fp0%3Duuid%26p1%3D%255B%2524injector%253Anomod
What am I doing wrong when it comes to mock up that dependency?
What you're doing is not right because you're modifying the provider of the jsrpc module, not the uuid module, and you're only calling $provide.value to provide what should be a whole module (not a value)
If uuid4 is the only part of uuid that you need to mock, you can do
module('jsrpc', function($provide) {
$provide.service('uuid4', uuid4Mock)
});
Where uuid4Mock provides the behaviour only of that service, or whatever it is in there.
I can see that the mustache.js file has been loaded, (code 200 in Firebug Net tab) so why do I get an error saying "ReferenceError: Mustache is not defined"?
I've looked at several related SO posts on this subject, but none seem to shed light on the issue. Any help is appreciated.
Relevant HTML
<div class="contact"></div>
<script data-main="js/modules/app.js" src="js/lib/require.min.js"></script>
app.js
var KBCOM = KBCOM || {};
(function (kbcom) {
kbcom.app = {
data: {
kboucher: "{ \"firstName\": \"Kevin\", \"lastName\": \"Boucher\", \"dob\": \"1970-05-01T05:00:00.000Z\", \"emailAddress\": \"example#mail.com\", \"telephone\": \"512-555-1212\" }"
},
init: function () {
kbcom.templates.loadTemplate(
kbcom.templates.vcard,
JSON.parse(this.data.kboucher),
document.querySelector('.contact'));
}
};
}(KBCOM));
require.config({
baseUrl: '/js/modules',
paths: {
Mustache: '/js/lib/mustache',
domReady: '/js/lib/domReady'
}
});
require(['domReady', 'templates', 'Mustache'], function (domReady) {
domReady(function () {
KBCOM.app.init();
});
});
templates.js
var KBCOM = KBCOM || {};
(function (kbcom) {
kbcom.templates = {
vcard: '<ul>\
<li class="fn">{{fisrtName}} {{lastName}}</li>\
<li class="email">{{emailAddress}}</li>\
<li class="tel">{{telephone}}</li>\
<li class="bday">{{dob}}</li>\
</ul>',
loadTemplate: function (template, data, element) {
element.innerHTML = Mustache.render(template, data);
}
};
}(KBCOM));
templates.js "requires" Mustache, therefore you need to define that dependency in templates.js. It also needs to be defined as a module, so you need to use define to properly create a module.
app.js
require(['domReady', 'templates'], function (domReady, templates) {
//append templates to namespace
KBCOM.templates = templates;
domReady(function () {
KBCOM.app.init();
});
});
templates.js
define([
//dependencies
'Mustache'
], function( Mustache ){
//module code
return {
vcard: '...',
loadTemplate: function ( template, data, element ) {
element.innerHTML = Mustache.render( template, data );
}
};
});
Require will bind the variables of the libraries to the parameters of the function given in the second parameter, so to use templates and Mustache in your code you should do the following:
require( [ 'domReady', 'templates', 'Mustache' ],
function( domReady, templates, Mustache ) {
domReady( function () {
KBCOM.app.init();
} );
}
);