What is the problem with the following code?
(function() {
angular
.module('myapp')
.config(ConfigureProvider);
ConfigureProvider.$inject = ['$routeProvider'];
function ConfigureProvider($routeProvider){
$routeProvider.
when('/',{
templateUrl:'main.html',
controller:'GalleryController'
}).
when('/1',{
templateUrl:'favourites.html',
controller:'FavouritesController'
})
}
})();
I am getting the following error: Uncaught Error: [$injector:nomod] http://errors.angularjs.org/1.5.3/$injector/nomod?p0=myapp
You have not defined your module
angular.module('myapp',[])
and then
angular
.module('myapp')
.config(ConfigureProvider);
ConfigureProvider.$inject = ['$routeProvider'];
function ConfigureProvider($routeProvider){
$routeProvider.
when('/',{
templateUrl:'main.html',
controller:'GalleryController'
}).
when('/1',{
templateUrl:'favourites.html',
controller:'FavouritesController'
})
}
Related
I'm learning Angular#1.6.4, I try to do a routing with $routeParams.
(() => {
'use strict'
config.$inject = ['$routeProvider','$locationProvider', '$routeParams']
function config ($routeProvider, $locationProvider, $routeParams) {
$routeProvider
.when('/:category', {
template : `<star-wars-component category="'${$routeParams.category}'"></star-wars-component>`
})
.otherwise({
redirectTo : '/'
})
$locationProvider.html5Mode(true)
}
angular
.module('starWarsApp')
.config(config)
})()
It goes perfectly until I inject $routeParams, then angular throw me this :
Error: $injector:unpr Unknown Provider
Unknown provider: $routeParams
I tried to fix it but I don't really understand why angular throw that error if I inject $routeParams and I'm using ngRoute.
When passing this function that includes $routeProvider into a module definition, how do you mock/inject it properly in spec?
module.js
angular.module('myModule', [
// Without the function($routeProvider) below the test passes. With it, it fails.
function($routeProvider) {
$routeProvider.when('/some/url/:id', {templateUrl: 'template.html', reloadOnSearch: false});
}
])
myModuleCtrl.js
angular.module('myModule')
.controller('myModuleCtrl', [
'$scope',
function ($scope) {
$scope.testMethod = function () {
alert('Test Me!');
}
}
]);
myModuleCtrl.spec.js
describe('myModuleCtrl', function () {
var controller;
var $scope;
beforeEach(angular.mock.module('myModule'));
beforeEach(function () {
$scope = {};
});
beforeEach(angular.mock.inject(function ($rootScope, $controller) {
controller = $controller('myModuleCtrl', {'$scope': $scope});
}));
describe('when doing stuff', function() {
it('does other stuff', function() {
$scope.testMethod();
});
});
});
As commented in module.js, without the $routeProvider line the spec passes. With it, it fails with the following message:
Error: [$injector:modulerr] Failed to instantiate module myModule due to:
Error: [$injector:modulerr] Failed to instantiate module function ($routeProvider) due to:
Error: [$injector:unpr] Unknown provider: $routeProvider
What needs to be done in the spec file to get this module to load (including the $routeProvider)?
Your module should have injected dependency ngRoute
angular.module('myModule', ['ngRoute'])
Samething should be there for the test,
beforeEach(angular.mock.module('myModule',['ngRoute']));
I have just created a simple app. Route for main controller is working but not for another one.
This is the part of the code of route file
$routeProvider
.when('/', {
templateUrl: 'app/main/main.html',
controller: 'MainController',
controllerAs: 'main'
})
.when('/signatures', {
templateUrl: 'app/components/signature/signature.html',
controller: 'SignatureController',
controllerAs: 'signature',
resolve: {
signatureLists: function(SignatureService){
return SignatureService.getSignatures();
}
}
})
.otherwise({
redirectTo: '/'
});
and below is the controller
(function() {
'use strict';
angular
.module('demoapp')
.controller('SignatureController', SignatureController);
/** #ngInject */
function SignatureController(signatureLists) {
var vm = this;
vm.signatures = signatureLists;
}
})
I have defined the module in another file:
(function() {
'use strict';
angular
.module('demoapp', ['ngRoute', 'toastr']);
})();
when I try to visit /signatures page, I get this error:
Error: [ng:areq] Argument 'SignatureController' is not a function, got undefined
Maybe its just a silly error due to a typo or something else but still I can't figure it out
You forgot to self invoke the controller closure..do a () at the end
(function() {
'use strict';
angular
.module('demoapp')
.controller('SignatureController', SignatureController);
/** #ngInject */
function SignatureController(signatureLists) {
var vm = this;
vm.signatures = signatureLists;
}
})()
why when the view is rendered the following error was thrown
Uncaught Error: [$injector:modulerr] Failed to instantiate module
registrationModule due to: Error: [$injector:unpr] Unknown provider:
$routeProvider
http://errors.angularjs.org/1.5.0/$injector/unpr?p0=%24routeProvider
at http://localhost:2044/Scripts/angular.js:68:12
at http://localhost:2044/Scripts/angular.js:4397:19
at getService (http://localhost:2044/Scripts/angular.js:4550:39)
at injectionArgs (http://localhost:2044/Scripts/angular.js:4574:58)
at Object.invoke (http://localhost:2044/Scripts/angular.js:4596:18)
at runInvokeQueue (http://localhost:2044/Scripts/angular.js:4497:35)
at http://localhost:2044/Scripts/angular.js:4506:11
at forEach (http://localhost:2044/Scripts/angular.js:321:20)
at loadModules (http://localhost:2044/Scripts/angular.js:4487:5)
at createInjector (http://localhost:2044/Scripts/angular.js:4409:19)
http://errors.angularjs.org/1.5.0/$injector/modulerr?p0=registrationModule&…jector%20(http%3A%2F%2Flocalhost%3A2044%2FScripts%2Fangular.js%3A4409%3A19)
here is my route configuration
var registrationModule = angular.module("registrationModule", [])
.config(function($routeProvider, $locationProvider) {
$routeProvider.when('/Registration/Courses', { templateUrl: '/templates/courses.html', controller: 'CoursesController' });
$routeProvider.when('/Registration/Instructors', { templateUrl: '/templates/instructors.html', controller: 'InstructorsController' });
$locationProvider.html5Mode(true);
});
i'm using Angular JS in MVC5
You need include 'ngRoute'.
var registrationModule = angular.module("registrationModule", ['ngRoute'])
.config(function($routeProvider, $locationProvider) {
$routeProvider.when('/Registration/Courses', { templateUrl: '/templates/courses.html', controller: 'CoursesController' });
$routeProvider.when('/Registration/Instructors', { templateUrl: '/templates/instructors.html', controller: 'InstructorsController' });
$locationProvider.html5Mode(true);
});
This page: https://docs.angularjs.org/guide/providers has a table at the bottom which states that both constants and providers are available in config phase.
When I try to use some constant in my config I get this error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module testApp due to:
TypeError: undefined is not a function
The constant is set up as follows:
'use strict';
angular.module('services.config', [])
.constant('configuration', {
key: 'value';
});
then the configuration is:
angular
.module('testApp', ['services.config', 'ngRoute'])
.config(function ($routeProvider, configuration) {
$routeProvider.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
});
// do something with configuration.key - causes error
});
Does anyone know what I'm doing wrong?
Thanks in advance.
var app = angular.module('TestApp', []);
app.constant('configuration', {
key: 'value'
});
app.config(function (configuration) {
console.log(configuration.key); //value
});
app.constant('configuration', {
key: 'value'
});
here is the jsFiddle: http://jsfiddle.net/gopinathshiva/0701k7ke/8/