I am searching for a tutorial on specifically this, but don't seem to find it, so maybe its something I missed:
If I declare a module, saved as myproject.js
var myProject = angular.module('myProject',[]);
Later I add a directive, saved as domchanger.directive.js
myProject.directive('domchanger', function (){});
But now, I have a new project, saved as newproject.js
var newProject = angular.module('newProject', []);
But if I try to add domchanger, its hooked into myProject.
surely I shouldn't have to save a whole version with the myProject changed to newProject?
I'm sure I've seen somehow where I would somehow do something to the directive to make it generic, so it can be used on any module. Most online documentation seems to skip this step, or not even get to it.
What do I need to do, to allow domchanger.directive.js to be plug and play for newProject?
EDIT: as per request for simplified non working code
var myProject = angular.module('myProject', []);
myProject.controller('projectControl', ['$scope', function ($scope) {
$scope.Test = "hello";
}]);
myProject.directive('projectDirective', function () {
});
var newProject = angular.module('newProject', ['projectControl',
'projectDirective']);
This gives me a
Failed to instantiate module newProject due to:
Error: $injector:nomod
Module Unavailable
If that helps..
If this is what your "domchanger.directive.js" look like...
var app = angular.module("myDirective", []);
app.directive("testDirective", function() {
//...
});
app.controller('testController',function($scope){
//...
});
this plug n'play (injectable module) can be called in your projects like...
var app = angular.module("myProject", ["myDirective"]);
or
var app = angular.module("newProject", ["myDirective"]);
Hope this is what you are looking for...
Related
Here's my simple code
var app = angular.module('myApp', [])
.value('SimpleValue', {
aaa: '£££'
});
and unit tests
describe('ttt', function() {
beforeEach(module('myApp'));
it('ttt', inject(function(SimpleValue) {
expect(SimpleValue.aaa).toEqual('£££');
SimpleValue.aaa = 4;
}));
it('ttt', inject(function(SimpleValue) { // This doesn't start fresh and fails
expect(SimpleValue.aaa).toEqual('£££');
}));
});
describe('ttt', function() { // Neither does this
var SimpleValue;
beforeEach(module('myApp'));
beforeEach(inject(function(_SimpleValue_) {
SimpleValue = _SimpleValue_;
}));
it('ttt', function() {
expect(SimpleValue.aaa).toEqual('£££');
});
});
That is not the behaviour I was expecting from beforeEach(module('myApp'));. What is the point of using module('myApp') before each spec when according to documentation: https://docs.angularjs.org/api/ngMock/function/angular.mock.module it merely
collects the configuration information which will be used when the injector is created by inject.
? I thought that it would reset myApp to start clean for each it block but it turns out it doesn't.
Can anyone shed some light on this? Please see a plunk:
http://plnkr.co/edit/xMmstHxL2prQukXpXYXm?p=preview
Services registered with .value don't get reset. I can't tell you why, but it does seem unexpected.
Register using .factory for example, and tests pass as expected.
var app = angular.module('myApp', [])
// .value('SimpleValue', {aaa: '£££'});
.factory('SimpleValue', function () {
return {aaa: '£££'};
});
The thing here is that in your first test you are modifying properties of an object. But it is important to realize that there is only one copy of this object in the whole system. Re-writing myApp slightly differently should make it more clear:
var simpleValue = {aaa: '£££'};
var app = angular.module('myApp', []).value('SimpleValue', simpleValue);
See, you were kind of assuming that this part of the script is executed as part of each spec, which is not the case (this fragment of the code is loaded into browser only once).
Hopefully this plunker makes the whole story clear: http://plnkr.co/edit/iLuIPaLyVFgzoTLygFz1?p=preview
Very new to Angular testing... using 1.3.0.rc0. To get started I'm trying to do something simple: get the value of a constant I set. Within a config.js, I have the following:
(function () {
'use strict';
var app = angular.module('app');
// create app configuration
var appConfig = {
version = '0.0.1.0',
debugMode = true
};
app.constant('config', appConfig);
app.config([function ($logProvider, config) {
// set the debugging setting of the app > same setting for the app
if ($logProvider.debugEnabled) {
$logProvider.debugEnabled(config.debugMode);
}
}]);
})();
I'm tried numerous things to write my tests (using jasmine & karma), but I keep getting an error that:
Error: [$injector:modulerr] Failed to instantiate module app due to:
TypeError: 'undefined' is not an object (evaluating '$logProvider.debugEnabled').
I get that this was a bug a while ago in the angular-mocks.js file but has since been resolved. Regardless, no matter the test I write, it doesn't work. Here's what i'm working with now, knowing that there are issues with it.
'use strict';
describe('config.js', function () {
var logProvider;
beforeEach(module(inject(function ($log) {
logProvider = $log;
})));
beforeEach(module('app', logProvider));
it('should set the config constant to the app global configuration settings', function () {
var $injector = angular.injector(['ng', 'app']);
var settings = $injector.get('config');
//var settings = inject(config);
expect(settings.debugMode).toBe(true);
});
});
Am I doing this right? If so, is there no way to get around the test issue with $logProvider?
There is much to learn about how modules work in Angular, especially under testing with ngMocks. I'll try to be brief.
One always begins by calling module (from ngMocks) one (or more times) to build up the module "cookbook" for a test run.
In any of these module calls you have an opportunity to access and stash away a previously defined provider.
The first time you call inject (from ngMocks) in a given test path, the module "cookbook" is "baked" for that path and the injector is populated based on recipes in that "cookbook".
Subsequent calls to module are irrelevant. Your expression beforeEach(module('app', logProvider)); executes too late (even if it did what you wanted, which it would not).
In fact, I'm surprised that you didn't get the error: "Error: Injector already created, can not register a module!".
inject always returns the thing created by the provider, never the provider itself. Your first beforeEach ...
beforeEach(module(inject(function ($log) {
logProvider = $log;
})));
... actually sets logProvider to the $log service, not the $logProvider.
Does this help?
Here is a sample from my forthcoming course on Ng testing that shows how to access a provider (in this case, the $logProvider). It was inspired by your question.
First, the config2 constant (I already had a value called config:
// my sample application module definition is called 'basics'
var basics = angular.module('basics', []);
/* define 'config2' constant - which is available in Ng's config phase */
basics.constant('config2', {
debugMode: true
});
// use constant in config phase
basics.config(function ($logProvider, config2) {
$logProvider.debugEnabled(config2.debugMode);
})
Now the spec (using Mocha and Chai):
describe('Basics - constant:', function() {
'use strict';
beforeEach(module('basics'));
// other stuff
describe("the $logProvider", function(){
var configConstant;
var $log;
var $logProvider;
beforeEach(module(
// Could combine with module('basics') definition in outer describe
// but only need it here in this describe
// This module definition function has access to any previously defined provider
// which in this case is any provider defined in ng, ngMocks, or basics
function( _$logProvider_) {
$logProvider = _$logProvider_;
}
));
// inject triggers injector creation; module definition now "baked"
beforeEach(inject(function(config2, _$log_){
configConstant = config2;
$log = _$log_;
}));
it("is accessible via the module function", function(){
expect($logProvider).to.exist;
});
it("is not the same as the log service", function(){
expect($logProvider).not.to.equal($log);
});
it("has same debugEnabled value as config2.debugMode", function(){
expect($logProvider.debugEnabled()).to.equal(configConstant.debugMode);
});
});
});
I have one question about using of services. I'm creating services in this way
and everything working properly. Here is my code.
var appName = angular.module('appName', ['configuration', 'angularSpinner']);
// this is whay that I creating services.
(function (module) {
var moduleName = function () {
return function(inputVar) {
// some work with
// inputVal variable
return result;
}
};
module.factory("moduleName", [moduleName]);
}(angular.module("appName")));
// in this way I'm using service into controller.
appName.controller('controllerName', function($scope, moduleName) {
});
My question is do I need to set 'moduleName' in 'appName'. Ie like this:
var appName = angular.module('appName', ['configuration', 'angularSpinner', 'moduleName']);
In both cases everything works properly. I would appreciate any comments and recommendations.
Best regards.
My question is do I need to set 'moduleName' in 'appName'. Ie like this:
No you do not, unless you actually create another module. In this case your moduleName is actually your factory name. If you wanted to create another module you would do this.
var myModule = angular.module('myModule', []);
myModule.factory('myFactory', [function(){ /* factory definition */ }]);
var app = angular.module('app', ['myModule']);
// this will now make myFactory available to my app
Your using the factory method which returns a function. If you need a service (a singleton object) then use the service method.
I create my services like this
var app = angular.module('app', []);
app.service('myService', [function(){
var serviceMember = { name: 'something' };
var serviceMethod = function() { };
// revealing module pattern
return {
serviceMember: serviceMember,
serviceMethod: serviceMethod
};
}]);
Yes, You needed
var appName = angular.module('appName', ['configuration', 'angularSpinner', 'moduleName'])
The 'appName' is Main Module name, and the 'moduleName' is sub module name. If you put the 'moduleName' with 'appName', then you can call 'modulname' functions wherever you use the 'appName'.
Main Module :
angular.module('appName',
Sub Module :
, ['configuration', 'angularSpinner', 'moduleName']
The concepts works by Dependency Injection Concept
Generally, I'd do the following and there would be an ng-app in my HTML:
var myApp = angular.module("myApp", []);
myApp.controller("AttributeCtrl", function ($scope) {
$scope.master = {
name: "some name"
};
});
However, I need to manually bootstrap angular because I'm only using it in a part of my app that is loaded via jQuery's $.load(). If I do the following:
main.js - this is where the page I want to use angular on is being pulled in
$("#form").load(contextPath + url, params, function() {
angular.bootstrap($("#angularApp"));
});
And then the page being pulled in has it's own javascript:
function AttributeCtrl($scope) {
$scope.master = { name: "some name"};
}
This works, however, ideally, I'd like my controllers to be scoped at the module level. So I modified the above code like so
main.js
$("#form").load(contextPath + url, params, function() {
angular.bootstrap($("#angularApp", ["myApp"]));
});
and then...
var app = angular.module("myApp"); // retrieve a module
app.controller("AttributeCtrl", function($scope) {
$scope.master = { name: "some name"};
});
Retrieving the module this way doesn't seem to work, though. Am I doing something wrong?
You cannot create a controller after you've bootstrapped the app. See the documentation for angular.bootstrap.
You should call angular.bootstrap() after you've loaded or defined your modules. You cannot add controllers, services, directives, etc after an application bootstraps.
I don't know if this is just in the example code you have here but:
angular.bootstrap($("#angularApp", ["myApp"]));
should be
angular.bootstrap($("#angularApp"), ["myApp"]);
Your code for retrieving the module should work.
Updated
They updated the documentation and now it reads like this
Each item in the array should be the name of a predefined module or a
(DI annotated) function that will be invoked by the injector as a run
block. See: {#link angular.module modules}
It seems a bug.
The way you implemented to retrieve the module is correct. Just quote it from the doc to make it clear since it may not be well-known.
When passed two or more arguments, a new module is created. If passed
only one argument, an existing module (the name passed as the first
argument to module) is retrieved.
For the problem you mentioned, long story short...
The bootstrap function calls createInjector with the module list ['ng', ['ngLocale', function(){...}] , 'myApp'] (the last one is the module you passed in)
function bootstrap(element, modules) {
...
var injector = createInjector(modules);
Inside createInjector(), it calls loadModules for each module passed in
function createInjector(modulesToLoad) {
forEach(loadModules(modulesToLoad), function(fn) { instanceInjector.invoke(fn || noop); });
And loadModules calls angularModule, which is initialized as angularModule = setupModuleLoader(window);, which creates the object window.angular.module
function loadModules(modulesToLoad){
....
var moduleFn = angularModule(module); // triggers the error
The the error occurs, since angularModule takes 2nd parameter as requires. Without it, it will throws an exception on this line (line 1148) throw Error('No module: ' + name);
Reported: https://github.com/angular/angular.js/issues/3692
Not sure if this counts as a bug or an implementation decision (albeit a seemingly poor one). Adding an empty array solves the undefined require problem that you were having and should solve your problem overall.
var app = angular.module("myApp", []); // create a module
app.controller("AttributeCtrl", function($scope) {
$scope.master = { name: "some name"};
});`
Also, in your fiddle you call {{name}} which won't render. You should be calling {{master.name}}
Edit
Thank you all for the downvotes .. Here's a working example. Good luck!
http://plnkr.co/edit/UowJpWYc1UDryLLlC3Be?p=preview
This seems like it should be easy, but I can't find documentation on it. I'm wondering how to make an Angular component (let's say a filter) reusable in different apps. I've made a simple filter that formats a phone number, and I'd like to be able to use it in any app. Currently it is declared like this:
var myModule = angular.module('myModule', ['ngSanitize']);
myModule.filter('formatFilter', function() {
return function(input) {
return input.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3");
}
});
The question is how to make this filter reusable. Right now it's just attached to 'myModule', but how can I take it out of this file so I can reuse it elsewhere too?
You started OK by encapsulating your filter in a separate module. For other apps to use it, those apps will just need to include source code of your filter and declare dependency on a module:
angular.module('myApp',['myModule'])
You would probably like to rename your filter-holding module to something more meaningful, something like phoneFormatter or sth.
Just as an example :
This is a reusable filter declared as a module, so only needs to be injected on the app:
Filter:
angular.module("lov-filter", []).filter('StartOnPage', function () {
return function (input, start) {
start = +start;
return input.slice(start);
}
});
App:
var demoApp = angular.module('demoApp', ['lov-filter'])
.config(function () {
});
Used on this angular directive: https://github.com/rolandocc/lov-angular-directive