I have this piece of code from a mobile website that used to work perfectly.
document.addEventListener('deviceready', function() {
// launch
}, false);
var app = angular.module('app', []);
app.config(function($routeProvider){
$routeProvider
when('/home', {templateUrl: 'views/home.html'})
.when('/about', {templateUrl: 'views/about.html'})
.otherwhise({redirectTo: '/home'})
});
I updated to a newer version of angular, and I got a error.
I found out on other threads that ngRoute is now separate from angular.js so I've added it.
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/angular-route.js"></script>
Now my error is :
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:unpr] Unknown provider: $routeProvider
I don't understand why $routeProvider is still unknow now that I've added the angular route script.
I tried couple fix that I've found here but can't make it work. Any ideas of what I missed ?
Thank you.
ngRoute is now separate from angular.js so to use it you have to inject it as a dependency, like this:
var app = angular.module('app', ['ngRoute']);
as for the following error
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to: Error: [$injector:unpr] Unknown provider: $routeProvider
Usually, this error appears when angular-route.js is not loaded for some reason.
The said project has mismatched versions for angular and its module, for example:
<script src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
so Make these versions match. They should likely be .../1.6.4/angular.js and .../1.6.4/angular-route.js
Related
I want to use Angular Datetimepicker without bower and npm.
I include datetimepicker.js into my index.html
<link href="https://cdn.rawgit.com/zhaber/datetimepicker/master/datetimepicker.css" type="text/css" rel="stylesheet" >
<script src="https://cdn.rawgit.com/zhaber/datetimepicker/master/datetimepicker.js"></script>
My app.js
var app = angular.module('myApp', [
'ui.router',
.....
'datetimepicker', // I try ui.bootstrap.datetimepicker and other names
]);
Also I have view and controller but now they are empty.
I get error:
Uncaught Error: [$injector:modulerr]
How to inject this library?
Addition 1:
And get error:
Uncaught Error: [$injector:modulerr]
Given this plunkr linked in the GitHub repo I think you need to add both
angular.module('myApp', [...'ui.bootstrap', 'ui.bootstrap.datetimepicker']);
The angularjs style guide recommends using IIFEs to wrap angular components. However when I try to wrap mine as per the example, I run into the problem of them being "hidden" from angularjs and it is unable to load them
page.html
<script type="text/javascript" src="my-module.js" %}"></script>
<script type="text/javascript" src="my-module-controller.js" %}"></script>
<div ng-app="my.app" ng-controller="MyAppController">
{{ somevar }}
</div>
my-app.js
(function() {
'use strict';
angular
.module('my.app', []);
});
my-app-controller.js
(function() {
'use strict';
angular
.module('my.app')
.controller('MyAppController', MyAppController);
function MyAppController() {
....
}
});
This results in the error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module my.app due to:
Error: [$injector:nomod] Module 'my.app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
If I remove the IIFE on the module declaration so I'm left with the following:
'use strict';
angular
.module('my.app', []);
It works, to the extent that the next error is:
Error: [ng:areq] Argument 'MyAppController' is not a function, got undefined
If I remove the IIEF from the controller definition, everything works as expected.
This is obviously a stripped down example, in the real project I am serving this page from a Django server, though I can't tell if that's relevant or not.
Those are not IIFE's. You are not invoking the function. End with }()); or })();
(function() {
'use strict';
angular
.module('my.app')
.controller('MyAppController', MyAppController);
function MyAppController() {
....
}
})();
I am getting error Uncaught Error: [$injector:modulerr]
I have included below js files
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
<script src="lib/jquery-1.12.1.min.js"></script>
and my js code is
angular.module('website',['ngRoute','ngResource']).
config(function($routerProvider){
$routerProvider.
when('/about',{template:'templates/about.html'}),
when('/careers',{template:'templates/careers.html'}),
when('/signup',{template:'templates/signup.html'}),
otherwise({redirectTo : '/home', template:'/home.html'})
})
function mainController($scope){
}
Somebody please help me, where i am missing.
EDITED:
Error log is
Failed to instantiate module website due to:
Error: [$injector:unpr] http://errors.angularjs.org/1.4.5/$injector/unpr?p0=%24ro...
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:6:416
at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:40:307
at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:38:308)
at Object.e [as invoke] (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:39:64)
at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:37:279)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:37:403
at n (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:7:322)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:37:180)
at eb (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:40:435
Working Plnkr
Change $routerProvider to $routeProvider. Replace , with . in config. For example:
when('/about',{template:'templates/about.html'}),
when('/careers',{template:'templates/careers.html'})
to
when('/about',{template:'templates/about.html'})
.when('/careers',{template:'templates/careers.html'})
Your JavaScript code should look like this:
var website = angular.module('website',['ngRoute','ngResource']);
website.config(function($routeProvider){
$routeProvider.
when('/about',{template:'templates/about.html'})
.when('/careers',{template:'templates/careers.html'})
.when('/signup',{template:'templates/signup.html'})
.otherwise({redirectTo : '/home', template:'/home.html'})
})
website.controller('mainController', function($scope){
});
For more information, please have a look at this example.
Hope that solve your problem.
In html I am loading the oclazyload before my app.js -
<!-- inject:js -->
<script src="/packages/libs/jquery/dist/jquery.js"></script>
<script src="/packages/libs/angular/angular.js"></script>
<script src="/packages/libs/oclazyload/dist/ocLazyLoad.js"></script>
<script src="/packages/libs/angular-ui-router/release/angular-ui-router.js"></script>
<!-- endinject -->
<script src="app/app.js" ></script>
<script src="app/common/app.config.js" charset="utf-8"></script>
My app.js -
(function () {
angular.module('app', ['ui.router', 'oc.lazyload']);
angular.element(document).ready(function () {
angular.bootstrap(document, ["app"]);
});
})();
But for some reason it doesn't load the oc.lazyload module at all . what might be the problem ? Am I missing something ?
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module oc.lazyload due to:
Error: [$injector:nomod] Module 'oc.lazyload' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
There is a typo. The module name is camel case. Change
'oc.lazyload'
to
'oc.lazyLoad' //'L' capitalized
The dependency for oc lazyload should be added as oc.lazyLoad instead of oc.lazyload
app.js
(function () {
angular.module('app', ['ui.router', 'oc.lazyLoad']);
angular.element(document).ready(function () {
angular.bootstrap(document, ["app"]);
});
})();
Reference
I also had this error, even though I did not have any typos and I followed the configuration directions at https://oclazyload.readme.io/docs. I was using Angular within Ruby on Rails, and my error was fixed by adding the line below to my app/assets/javascripts/application.js file:
//= require oclazyload
I am new to angular js. I was just writing some sample application and I ran into problem with routes.
I am using cdn for angular
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
I created a html partial/file and wanted to link it to the index.html.I added the
<ng-view></ng-view> in the index.html and also the following code in the html for routing
angular.module("sample", []).config(function($routeProvider){
$routeProvider.when("/",
{
templateUrl: "/partials/list.html"
});
});
But I am getting an Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.13/$injector/modulerr?p0=enterprise&p1=Erro…s.org%2F1.2.13%2F%24injector%2Funpr%3Fp0%3D%2524routeProvider%0A%20%20%20%......2)
Also, I tried downloading angular-route.js and adding ngRoute as dependency, but it still does not work.
angular.module("enterprise", ['ngRoute']).config(function($routeProvider){
$routeProvider.when("/",
{
templateUrl: "/partials/list.html"
});
});
I have downloaded various versions of angularjs but I am stuck with the same error. Any idea has to why I am getting this error and how to resolve it?
Try this
angular.module("enterprise", ['ngRoute']).config(["$routeProvider", function($routeProvider){
$routeProvider.when("/",
{
templateUrl: "/partials/list.html"
});
}]);
Let me know if it doesn't work
Can you try removing the slash from templateUrl like this?
templateUrl: "partials/list.html"
Also, could you verify that you have set ng-app somewhere in the html and the template exists at the proper location (partials/list.html)?