i am trying to add a new Module to my application.
My HTML for index page is
<body ng-app="com.app">
In my app.js
angular.module('mod1', ['ngResource']);
angular.module('mod2', []); //this is module i want to add
var app = angular.module('com.app', ['ngResource','mod1','mod2']);
My Controllers1.js
var Controllers = angular.module('mod1');
Controllers.controller('ctrl1', function($scope,$http) {});
Controllers.controller('ctrl2', function($scope,$http) {}); //function for module 2
when i try to add this ctrl2 to my "controllers1.js" it works , but if i add this in my other js say "controllers2.js", its not working .
My controllers2.js is
'use strict';
var mymodule = angular.module('mod2');
mymodule.controller('ctrl2', function() {
console.debug("Testing...");
});
summary of my question is : when i try to add my ctrl2 function to new module, its not working and on firefox console i am getting error
Error: Argument 'ctrl2' is not a function, got undefined
assertArg#http://localhost:8080/tm-webapp/resources/lib/angular.js:1039
assertArgFn#http://localhost:8080/tm-webapp/resources/lib/angular.js:1050
#http://localhost:8080/tm-webapp/resources/lib/angular.js:4802
update#http://localhost:8080/tm-webapp/resources/lib/angular.js:14198
Scope.prototype.$broadcast#http://localhost:8080/tm-webapp/resources/lib/angular.js:8307
updateRoute/<#http://localhost:8080/tm-webapp/resources/lib/angular.js:7463
qFactory/defer/deferred.promise.then/wrappedCallback#http://localhost:8080/tm-webapp/resources/lib/angular.js:6846
qFactory/defer/deferred.promise.then/wrappedCallback#http://localhost:8080/tm-webapp/resources/lib/angular.js:6846
qFactory/ref/<.then/<#http://localhost:8080/tm-webapp/resources/lib/angular.js:6883
Scope.prototype.$eval#http://localhost:8080/tm-webapp/resources/lib/angular.js:8057
Scope.prototype.$digest#http://localhost:8080/tm-webapp/resources/lib/angular.js:7922
Scope.prototype.$apply#http://localhost:8080/tm-webapp/resources/lib/angular.js:8143
done#http://localhost:8080/tm-webapp/resources/lib/angular.js:9170
completeRequest#http://localhost:8080/tm-webapp/resources/lib/angular.js:9333
createHttpBackend/</xhr.onreadystatechange#http://localhost:8080/tm-webapp/resources/lib/angular.js:9304
I am stuck here for a long, kindly help me i shall be very thankful.
Regards,
Make sure that in your file loader (script tags, requirejs, whatever) Controllers1.js is right next to controllers2.js.
PS: some operating systems / webservers (e.g. the server inside karma on windows) are case sensitive. So try to use same case for your files (either upper or lower).
You can try this plunker http://plnkr.co/edit/tKIPDQ54JDexB7LAJpDR to see if it works in the way you want.
Related
I have a service with a few methods:
function userService($http, API, auth) {
....
}
and then used in my module like:
var app = angular.module('app', ['ngRoute'])
.service('user', userService)
...
All of this is in my app.js file, I want to separate things so its easier to maintain. I'm trying to use the line .service('user', '/services/userService') but its not working any ideas how to i need to reference this?
Thanks.
I think you are creating a new module instead of use yours.
To retrieve an existing module and use it in a separated file, you have to do :
var app = angular.module('app')
.service('user', userService')
// ...
Instead of
var app = angular.module('app', ['ngRoute'])
.service('user', userService')
// ...
Documentation available at https://docs.angularjs.org/guide/module#creation-versus-retrieval
EDIT from #koox00 answer
Don't forgot to load all files related to your module in your markup, in the good order (before load the file containing your module declaration).
I'm trying to generate some random data for my e2e tests. Seems that the only library I found was chance.js. But can't make it works. This is what I've tried so far:
describe('In the login page', function () {
var chance = new Chance(); // ReferenceError: Chance is not defined
}
Then adding
beforeEach(function(){
browser.executeScript(
function() {
return chance;
}).then(function(_chance){
chance = _chance; //It returns an object, but can't use any of the methods.
});
});
But if I try
beforeEach(function(){
browser.executeScript(
function() {
return chance.email(); //Note this line here
}).then(function(_chance){
chance = _chance; //It returns an email
});
});
Thats all I have so far... any clue/idea?
First, install chance.js in your project:
npm install chance --save-dev
This installs chance.js as a node module in your project. Then include it in your spec and instantiate:
var chance = require('../node_modules/chance').Chance();
Then call in your spec. For example:
it('should add a new friend', function() {
var friendName = chance.string()
friendPage.addFriend(friendName);
expect(friendPage.inResults(friendName)).toBeTruthy();
});
Hope that helps...
Okay first you need to download chance.js and add that file to your html directory
Second add script src="chance.js" in a proper script tag your section
Within another script tag you should be able to use any of the functions that are listed on the website
working jsfiddle: http://jsfiddle.net/c96x2cpa/
fiddle js code:
alert(chance.bool());
alert(chance.character());
alert(chance.floating());
It was easy at the end :)
You just need to install chance as a node module.
npm install chance
Then require the node in the spec
// Load Chance
var Chance = require('chance');
And use it where ever you want
chance.email()
Enjoy!
I have a Service and a controller in my AngularJS App, that should be in the same module, but are two different files:
// File 1 (Service)
angular.module('myService', ['ngRoute'])
.service('myService', // ...
// File 2 (Controller)
angular.module('myController', ['ngRoute'])
.controller('myController', // ..
This works fine. Now I want to have Service & Controller in one Module so I can load just one instead of two Modules. So I change the first line (of both files) to:
// Change in both files:
angular.module('myModule', ['ngRoute'])
But now I get an error:
Error: [$injector:unpr] ...
Maybe somebody knows, what could be wrong here. Thank you very much!
You can do the following:
var myApp = angular.module('myApp', []);
myApp.controller("myService"
myApp.service("myApp")
Or
angular.module("myModule").controller
angular.module("myModule").service
If you use angular.module('myService', []) twice, you are initializing the same module twice.
If you just use angular.module("myModule"), without the dependencies, you are just calling it.
You have two options -
use a variable as mentioned by Michael
OR
Use it like -
// Initialize myService Module in any JS file
(make sure this file is included before File 1 and File 2
angular.module('myService', ['ngRoute']);
// File 1 (Service)
angular.module('myService').service('myService', // ...
// File 2 (Controller)
angular.module('myService').controller('myController', // ..
I have a Symfony project, and as the vast majority working on more than one environments: dev and production, using Angular.js.
At the moment, I have got an Angular controller which is accessible in dev environment, but not in production, throwing the message: "Error: [ng:areq] Argument 'xxxx' is not a function, got undefined".
I have seen the latter message in several threads but none of them helped me.
angular.module('MyApp').controller('MyController', function MyController($scope, MyMapper, _, moment, APP_URL, $location) {
$scope.APP_URL = APP_URL;
$scope.momentjs = moment;
$scope.isLoading = 1;
$scope.page = 1;
$scope.totalPagesNum = 1;
$scope.limit = 20;
// fill the table with data
MyMapper.find($location.search()).then(function(data) {
// ...
})();
}).then(function() {
$scope.isLoading = false;
});
});
If you are minimizing your code (as would be typical in production), you will want to annotate your dependencies since they may get renamed by the minimization script. In order to do this, use the following pattern for your code:
angular.module('MyApp').controller('MyController',
['$scope','MyMapper','_','momemt','APP_URL','$location',
function($scope, MyMapper, _, moment, APP_URL, $location) {
/* your code for the controller */
}
]
);
Please see https://docs.angularjs.org/guide/di for more information, particularly the "Dependency Annotation" section and the inline array notation subsection.
I think the issue is pretty much solved.
It turns out that the minified version of vendors.js (vendros.min.js), was not properly loaded in the production environment. Therefore, I had to point to the correct one in my Gruntfile.js.
Secondly, I refactored my controllers according to AngularJS online guide, as per Brad.
Thanks everyone involved.
I have two angular applications in one page, and I need them to communicate. Specifically, I want one application to use a service of another application.
I am able to get the service of the other application using Injector.get(service), but when I change the data using the service in one application, it does not reflect in the view of the other, even though both are supposed to show the same data. You can see a simplified version of the problem in jsFiddle.
To save you the click, this is the relevant script:
//myAppLeft - an angular app with controller and service
var myAppLeft = angular.module('myAppLeft', []);
myAppLeft.factory('Service1',function(){
var serviceInstance = {};
serviceInstance.data = ['a','b','c','d','e'];
serviceInstance.remove = function(){
serviceInstance.data.pop();
console.log(serviceInstance.data);
};
return serviceInstance;
} );
myAppLeft.controller('Ctrl1', ['$scope', 'Service1', function($scope, service1) {
$scope.data = service1.data;
$scope.changeData =function(){
service1.remove();
}
}]);
var leftAppInjector = angular.bootstrap($("#leftPanel"), ['myAppLeft']);
//myAppRight = an angular app with controller which uses a service from myAppLeft
var myAppRight = angular.module('myAppRight', []);
myAppRight.controller('Ctrl2', ['$scope', function($scope) {
$scope.data = leftAppInjector.get('Service1').data;
$scope.changeData =function(){
leftAppInjector.get('Service1').remove();
}
}]);
var rightAppInjector = angular.bootstrap($("#rightPanel"), ['myAppRight']);
I'd be happy to know why my code does not work as expected, and would be even happier to know if and how such thing can work.
I understand that if instead of two angular-apps I would have used one angular-app with two modules this would have worked just as I wanted, but unfortunately I cannot adopt this approach because my application consists of a pure-js core with extensions, each extension can be written in a different library/platform and I want my extensions to be angular ones.
Thanks,
Nurit.
Angular apps are separate entities, even if you use the same service in both. the second app just initializes its own version off it.
What you want can be done using localStorage, and the storage events.
Ping me if you need additional help on this!