I am having an issue with testing a routeProvider. There seems to be a lot of information out there, but everything I do, I just cannot get the unit test to digest the location. I was hoping to find some closure here. I am feeling my way through angularJS and unit testing, and could use any advice.
Here is the routeProvider function:
use strict';
var myApp = angular.module('myApp', [
'ngRoute',
'myServices',
'myControllers'
]);
myApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('fooBar', {
templateUrl: 'barFoo',
controller: 'SummaryCtrl'
}).
otherwise({
redirectTo: 'defaultFooBar'
});
}]);
I am trying to test this routeProvider with the following, but I cannot, for the life of my, inject the change I make to location.
'use strict';
describe('myApp',function() {
var $scope;
var location;
beforeEach(inject(function($rootScope, $location) {
$scope = $rootScope;
location = $location;
}));
it('redirect to default', function() {
location.path('efipoejs');
$scope.$apply();
expect(location.path()).toBe('defaultFooBar');
})
});
Ive tried $scope.$digest, and .$apply.... what ever I do, I always get this outcome:
Expected '/efipoejs' to be 'defaultFooBar'.
I really want angularJS to work... If you have any advice that might lead me down the right path...I would seriously appreciate it.
ANSWER: BECAUSE I CANT POST AN ANSWER WITHIN 8 HOURS!!!!
yo yea,...
Here's how I got this to work
describe('Testing routes', function() {
beforeEach(module('myApp'));
var location, route, rootScope;
beforeEach(inject(
function( $location, $route, $rootScope ) {
location = $location;
route = $route;
rootScope = $rootScope;
}));
describe('Default Routing', function() {
beforeEach(inject(
function($httpBackend) {
$httpBackend.expectGET('DefaultUrl').respond(200);
}));
it('should load the default page on fake path', function() {
location.path('/ermagerd');
rootScope.$digest();
expect(location.path()).toBe('defaultFooBar');
});
});
});
});
Once again, here is my logic
'use strict';
var myApp = angular.module('myApp', [
'ngRoute',
'myServices',
'myControllers'
]);
myApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('fooBarDefault', {
templateUrl: 'defaultUrl',
controller: 'DefaultCtrl'
}).
otherwise({
redirectTo: 'fooBarDefault'
});
}]);
Related
I'm trying to get the data from a json file.
i have a file, factory1.js
myApp.factory('mainInfo', [
'$http',
function($http) {
return {
get: function(){
$http.get('data.json');
}
}}])
and then i have another file, view1.js
'use strict';
angular.module('myApp.view1', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'View1Ctrl'
});
}])
.controller('View1Ctrl', [
'$scope',
'$http',
'mainInfo',
function($scope, $http, mainInfo) {
mainInfo.get("data.json")
.then(function(response) {
$scope.myWelcome = response.data;
console.log($scope.myWelcome)
});
}]);
i have one folder with each of the json, factory and controller files in it.
when i run this the error it is returning says...
angular.js:13708 Error: [$injector:unpr] Unknown provider: mainInfoProvider <- mainInfo <- View1Ctrl
where am i going wrong?
Working fine. This solves your problem i hope so.
'use strict';
var app=angular.module('myApp.view1', ['ngRoute'])
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'View1Ctrl'
});
}])
app.factory('mainInfo',
function($http) {
var obj={};
obj.method =function(){
return $http.get('tag.json')
}
return obj;
})
app.controller('View1Ctrl', [
'$scope',
'$http',
'mainInfo',
function($scope, $http, mainInfo) {
mainInfo.method().success(function(response) {
$scope.myWelcome = response;
});
}]);
var app=angular.module('myApp.view1', ['ngRoute']);
app.factory('mainInfo', [
'$http',
function($http) {
return {
get: function(){
$http.get('data.json');
}
}}])
define one variable and assign your module to that variable and bind the variable to the factory.if you have module with name myApp inject that module in to myapp.view1 module
like
angular.module('myApp.view1', ['ngRoute','myApp'])
Register mainInfo inside Angular module, if it's a different module.
view1.js
angular.module('myApp.view1', ['ngRoute', 'myApp']);
You have not assigned your module to a variable.
var myApp = angular.module('myApp.view1', ['ngRoute']) ...
Then use myApp.factory
myApp.factory('mainInfo', [...
see this plunkr for quick understanding.
I am working on an app about routing, my code:
//HTML, I passed a 'test' into routing
Test
<div data-ng-view=""></div>
//Template
<h1>{{res}}</h1>
//Angularjs
var app = angular.module("dictApp", ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/details/:test', {
templateUrl: 'template.html',
controller: 'testCtrl'
});
}]);
app.controller('testCtrl', function ($scope, $routeProvider) {
$scope.res = $routeProvider.test;
});
//The template is displayed as
{{res}}
The template page should display 'test', but I don't know why it didn't work.
Thansk in advance.
'test' parameter should be available in $routeParams.
app.controller('testCtrl', function ($scope, $routeParams) {
$scope.res = $routeParams.test;
});
The service that exposes the route parameters is $routeParams. $routeProvider is the provider used to configure the routes in the app like the one you have done in your code using .when method as well
You need to inject $routeParams and use it instead of $routeProvider
app.controller('testCtrl', function ($scope, $routeParams) {
$scope.res = $routeParams.test;
});
The app runs on http://domain1 an must request data from http://domain2 with the following code:
'use strict';
// Declare app level module which depends on views, and components
var myApp = angular.module('myApp', [
'ngRoute',
'restangular'
]);
myApp.config(['$routeProvider', 'RestangularProvider', function($routeProvider, RestangularProvider) {
$routeProvider.when('/view1', {
templateUrl: '/view1.html',
controller: 'View1Ctrl'
});
$routeProvider.otherwise({redirectTo: '/view1'});
RestangularProvider.setBaseUrl("http://domain2/");
}]);
var rest = null;
myApp.controller('View1Ctrl', ['$scope', 'Restangular', function($scope, Restangular) {
rest = Restangular;
var cursos = Restangular.one("resource",100).get()
}]);
Nonetheless, the request goes to http://domain1. What is going on? I also inspected the Restangular configuration, by putting Restangular in the global scope, as the rest variable, and the base url seems is property set.
Hey you can create a factory and use different domain to get data something like below
(function () {
'use strict';
angular.module('app')
.factory('Domain2Restangular', ['Restangular', Domain2RestangularFunction]);
function Domain2RestangularFunction( Restangular) {
return Restangular.withConfig(function(RestangularConfigurer) {
var baseURL = 'http://domain2';
RestangularConfigurer.setBaseUrl(baseURL);
RestangularConfigurer.setDefaultHeaders({'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' });
});
}
}());
You can invoke
return Domain2Restangular.all('')
.post(data)
.then(function(response) {
return response;
}, function(error) {
return error
});
I am using a module where I add in my first controller which is taking a service as a dependency. All the service is doing is bringing in some data.
Then I have a show function which I am adding on an anchor element in my view in order to be able to click on the the first name and then get the user's details.
My second controller takes the data from the first controller and then using $routeParams I am trying to show the data on the user view.
Is there something I am doing wrong here?
(function() {
var app = angular.module('test');
app.controller('testCtrl', ['$scope', 'testFactory', '$location', function($scope, testFactory, $location) {
testFactory.getContact().then(function(data) {
$scope.contacts = data.data;
});
$scope.show = function(firstname) {
$location.path('main/' + firstname);
};
}]);
app.controller('userCtrl', ['$scope', '$routeParams', function($scope, $routeParams) {
$scope.user = $scope.contacts[$routeParams.firstname];
}]);
}());
These are the routes
(function() {
var app = angular.module('test', ["ngRoute"]);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when("/main", {
templateUrl: "main.html",
controller: "testCtrl"
})
.when("/main/:firstname", {
templateUrl: "contact.html",
controller: "userCtrl"
})
.otherwise({redirectTo:"/main"});
$locationProvider.html5Mode(true);
});
}());
This is the error I am getting in my console:
TypeError: Cannot read property 'any1' of undefined
where any1 is the is the first name.
I'm trying unit testing with Jasmine and Karma, but for some reason my Angular modules cannot be found. I've modified code from examples:
karma.config.js:
files: [
'lib/angular.js',
'lib/angular-mocks.js',
'js/app.js',
'js/controllers.js',
'js/factories.js',
'tests/**/*.js'
]
app.js:
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/test', {
templateUrl: 'views/test.html',
controller: 'TestCtrl'
})
.otherwise({redirectTo: '/'});
});
controllers.js:
app.controller('TestCtrl', function ($scope, $location) {
console.log('Test Controller');
$scope.isActive = function(route) {
return route === $location.path();
};
});
test-spec.js:
describe('TestCtrl testing', function () {
var scope, $location, createController;
beforeEach(inject(function ($rootScope, $controller, _$location_) {
$location = _$location_;
scope = $rootScope.$new();
createController = function () {
return $controller('TestCtrl', {
'$scope': scope
});
};
}));
it('should...', function () {
var controller = createController();
$location.path('/test');
expect($location.path()).toBe('/test');
expect(scope.isActive('/test')).toBe(true);
expect(scope.isActive('/contact')).toBe(false);
});
});
error message:
Error: [ng:areq] Argument 'TestCtrl' is not a function, got undefined
I also tried with: beforeEach(module('TestCtrl')), but it did not help.
What have I missed?
There are two problems I can see. In describe section there must be main module injection:
beforeEach(module('app'));
The second problem is that you forgot to add ngAnimate module to Karma files config array:
files: [
'lib/angular.js',
'lib/angular-route.js', // <-- this guy
'lib/angular-mocks.js',
...
]