I am using Angular 1.5 to write mocked services for my project by following this little example: https://embed.plnkr.co/qsmx8RUmQlXKkeXny7Rx/
This is a simple code that I have written so far:
function() {
'use strict';
angular.module('agMock', ['ag', 'ngMockE2E'])
.run(function($httpBackend) {
$httpBackend.whenGET('https://localhost:8080/api/users')
.respond({user: 'fooBarBaz', roles: ['admin', 'user']});
});
})();
'ag' is the parent module of my project for which I am going to write mocks. When I try and run this, I get the error saying 'unknown provider: $httpBackend' although I have included angular.mocks library. Can anybody take a guess what can go wrong?
So I figured out why was I getting this error. The project in which I was getting this error uses gulp to inject dependencies and generate index.html files for dev and mocked environment. In the template index.html file, I had the main parent module, "äg" referenced in the ng-app.
I skipped the part where I had to substitute "agMock" instead of "ag" in the ng-app while generating mocked index. So this was the problem. Phew.
Related
My problem lies here where I am trying to test a controller within angular. This is the error the console throws to me when running the command mocha --compilers coffee:coffee-script/register **/*.spec.coffee to run all testing files within the project.
angular.module('weaver.ui.app');
^
ReferenceError: angular is not defined
I recently added angular-mocks library which makes sure angular is not an unresolved variable, but this doesn't resolve the problem.
My beginning of my testing file looks like this (the code is written is CoffeeScript)
# angular = require 'angular'
angular.module 'weaver.ui.app'
chai = require 'chai'
sinon = require 'sinon'
If I uncomment the require angular the error changes into the following, so I assume this is not the right way.
\npm\node_modules\angular\angular.js:29016
})(window, document);
^
ReferenceError: window is not defined
And if I remove the line angular.module 'weaver.ui.app' completely I get a similar error but this one is about the controller.
angular.module('weaver.ui.app').controller('AppDesignSidebarNewcontentCtrl', function($rootScope, $scope) {});
^
ReferenceError: angular is not defined
I hope someeone here can help me with this problem which is bugging me for quite a while now.
Please do not judge me on the name of the controller ;)
I have done a web application based in ASP MVC and angularJS, and everything works fine. Now, I want deploy it. In my bundleConfig I have put BundleTable.EnableOptimizations = true; to minified my scripts.
When I launch the app get a error:
Module 'dataService' is not available! You either misspelled...
In docs I have seen an interesting thing (it fits to error):
Careful: If you plan to minify your code, your service names will get renamed and break your app.
As docs suggests I use Inline Array Annotation. My code is:
app = angular.module("MyApp", ['ui.router', 'ui.bootstrap', 'kendo.directives', 'dataService', 'LoginFactory', 'globalService']);
in module dataService is:
app.service('dataService', ['$http', function($http) {
// service logic
}]);
I thought that would fix the error, but not.
PS: I have seen 3 differents methods of injection dependencies and I have used all. In example I use that because in docs is marked like preferred
replace app.Service with app.service.
I use SailsJS for backend and Angular for front End. So far, they work well. SailsJS backend logic has tests in Mocha. I am trying to add some tests for front end Angular.
Angular's documentation on testing is cryptic to me. After reading its documentation for quite some time, I still have no idea about where to start.
1) Where should I put the unit test code for Angular in a SailsJS project? Now Angular code lives under assets/js. Should I put the test under the same directory, like the following?
assets/js/MyAngularCode.js
assets/js/MyAngularCode_test.js
MyAngularCode.js
(function(){
var myApp = angular.module('myApp', []);
myApp.controller('FirstController', [$scope, function($scope){
//blah blah
}]);
})();
What should I write in MyAngularCode_test.js to test any logic in FirstController?
2) How to run Jasmine tests for any given file directory structure in a SailsJS + Angular project?
How to make "Jasmine init" and "Jasmine" work in such a project. I assume need a Jasmine.json file. But where should it be?
3) For example, I have a file,
FirstTest.js
'use strict';
describe("A suite", function() {
beforeEach(angular.mock.module('myApp'));
it("contains spec with an expectation", function() {
expect(true).toBe(true);
});
});
Where should I put it and what should I do so it will not show the following error
ReferenceError: angular is not defined
Since you want just any opinion...
You can use yeoman for scaffolding; this will help you create pages and directory structure.
Use generator-angular since you are working with angular
yo angular:controller foobar will create files for your controller as well as the test files.
It will create a package.json with a test command (grunt test) which works out of the box.
There is a tutorial here: http://yeoman.io/codelab.html
Just clone this github repo, it's a blank app and uses Angular for the front-end https://github.com/sgress454/angular-on-sails
I'm working on a project using Meanjs and ydn-db for indexeddb support.
So I'm trying to make a service in angular, but I just can't figure a way to include the js file properly. I've tried installing the lib in the following methods:
bower install ydn-db
bower install ydndb
The first case, I could not find a suitable.js file like ydn.db-isw-core-qry-dev.js. Now the second would install the two minified versions which I could work, but I always get the ydn not found error
Now by looking into the Developer's page http://dev.yathit.com/ydn-db/getting-started.html I can see that he has a way of making the require in the AMD loader section, which I simply did not know how to use inside the service factory.
Here is what I'm trying to do inside the factory which by the way I don't think is best practices...
And these are the error that I'm getting just by trying to load this...
How can I use this lib while still following best practices for angular or at least just to get it working without errors?
ldb undefined
Object {db: Object, debug: Object}
Uncaught ydn.error.ArgumentException: Unknown attribute "keypath"
angular.module(ApplicationConfiguration.applicationModuleName).factory('Localdb',['$resource','$q',
function($resource,$q) {
var deferred=$q.defer();
require.config({
baseUrl: '/content',
paths: {
ydn: 'scripts/ydn.db-isw-core-qry-dev'
}
});
require(['scripts/ydn.db-isw-core-qry-dev'], function(ldb){
console.log ('ldb',ldb);//this is undefined
var schema ={
stores:[
{
name:'process',
keypath:'_id',
indexes:[{
name:'processId',
keypath:'processId',
unique:false
},{
name:'processMeta',
keypath:'processMeta',
unique:false
}
]
}
]
};
console.log(ydn);//this gets back ok but then the keypath error???
deferred.resolve(new ydn.db.Storage('pdc',schema));
});
return deferred.promise;
}
]);
Sorry, to get your trouble. ydn-db repo do not have compiled js file, as require (I think) by bower. So it doesn't work. Just download one of the js file and add to your html.
Also check out ydn-db with angular example app.
it seems that from angular's point of view the order of registering of a service provider and the module configuration code is important: in order for the configuration code to find the provider, the provider should be registered before.
This was a total surprise for me, as I thought that angular first processes all provider registrations, to make them available for DI, and then calls config callbacks, like this:
module.config(function(myServiceProvider) {...});
Please see here a very short test that demonstrates the problem. It fails on "unknown provider", you can see it in the JS console: http://plnkr.co/edit/jGJmE2Fq7wOrwubdlTTX
Am I missing anything here? Is it an expected angular behavior?
Thanks.
Looks like this behavior has changed in more recent versions of Angular (not sure when exactly). I modified your Plunker to point from 1.0.7 to 1.3.0 and it worked without error as you had originally expected.
Similar example of code that works:
var myModule = angular.module('myModule', []);
myModule.config((myServiceProvider) => {
});
myModule.service('myService', () => {
});
Running a config for a provider before the provider is registered with the module should work just fine as you were expecting.
Reference
For reference, this reported issue appears to be the one to have fixed it: https://github.com/angular/angular.js/issues/6723
The Angular documentation for module state that:
Recommended Setup
While the example above is simple, it will not scale to large applications. Instead we recommend that you break your
application to multiple modules like this:
A service module, for service declaration
A directive module, for directive declaration
A filter module, for filter declaration
And an application level module which depends on the above modules, and which has initialization code.
As you are using a single module that you call app, you are creating a dependency between that module's config and declaration of a provider. What you should have done is to place all your providers into a separate module, such as:
var appr = angular.module('appr', [])
.provider('myService', function() {
this.$get = function() {};
})
Then you declare the dependency of your app using:
var app = angular.module('plunker', ['appr']);
Check out the updated Plunker: http://plnkr.co/edit/Ym3Nlsm1nX4wPaiuVQ3Y?p=preview
Also, instead of using the generic provider, consider using more specific implementation of provider such as controller, factory or service. Take a look at Module API documentation for more detail.