I am a bit issue with angularjs, this issue have taken many answer and but I can't resolve this issues in my case.
Here this is my import in html
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-resource.min.js"></script>
App.js
angular.module('ngApp',['ngRoute'])
.config(['$routeProvider'],
function($routeProvider){ // Error here !
}).controller('ngAppHome',function ($scope){
$scope.title = "";
});
Error (in chrome)
Failed to instantiate module ngApp due to:
Error: [ng:areq] http://errors.angularjs.org/1.3.16/ng/areq?p0=fn&p1=not%2...
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:6:417
at Sb (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:19:510)
at La (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:20:78)
at Function.bb.$$annotate (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:175:178)
at Object.e [as invoke] (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:36:147)
at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:34:498)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:35:117
at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:7:322)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:34:399
Thanks for your help
config() expects a single argument, not 2. Either it's the callback function itself, or it's an array containing provider names, followed by the callback function:
angular.module('ngApp',['ngRoute']).config(function($routeProvider){
...
})
or
angular.module('ngApp',['ngRoute']).config(['$routeProvider', function($routeProvider) {
...
}])
Given that your code won't resist to minification anyway, since you don't use the array syntax for your controller, I would use the first, simple one. Use ngAnnotate in your build to make your code minifiable.
Related
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
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'm testing an ionic app created using creator.
I put the following code in services.js.
angular.module('app.services', [])
.factory('BlankFactory', [function(){
}])
.factory('EventService', ['$resource', function ($resource) {
return $resource('https://.....net/api/events/:id');
}])
.service('BlankService', [function(){
}]);
And the following code in controllers.js.
angular.module('app.controllers', [])
......
.controller('nightlifeCtrl', function ($scope, EventService) {
$scope.events = EventsService.query({category: "Nightlife"});
})
Hoever I got the following error in js console?
ionic.bundle.js:25642 Error: [$injector:unpr] Unknown provider: $resourceProvider <- $resource <- EventService
http://errors.angularjs.org/1.4.3/$injector/unpr?p0=%24resourceProvider%20%3C-%20%24resource%20%3C-%20EventService
at ionic.bundle.js:13380
at ionic.bundle.js:17574
at Object.getService [as get] (ionic.bundle.js:17721)
at ionic.bundle.js:17579
at getService (ionic.bundle.js:17721)
at Object.invoke (ionic.bundle.js:17753)
at Object.enforcedReturnValue [as $get] (ionic.bundle.js:17615)
at Object.invoke (ionic.bundle.js:17762)
at ionic.bundle.js:17580
at getService (ionic.bundle.js:17721)
I tried to add the dependency by angular.module('...', ['ngResource']) but it got the following error.
ionic.bundle.js:17697 Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module app.controllers due to:
Error: [$injector:modulerr] Failed to instantiate module ngResource due to:
And I didn't find the file angular-resource.js in the js files. Should I avoid ngResource and use plain ajax call?
In index.html
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/routes.js"></script>
<script src="js/services.js"></script>
<script src="js/directives.js"></script>
Its not working because you have not loaded the angular-resource dependency. If you want to use an external module in angular, you need to load it as a dependency in your module definition by passing name of the module in the second array parameter to angular.module. In your case name of the module is ngResource. Load the script file for angular-resource.js and then add it as dependency as below:
angular.module('app.services', ['ngResource'])
Also I see that you have not loaded app.services as dependency in app.controller. You need to either load that dependency or load both these dependencies in your app definition module as:
angular.module('app', [
'app.services',
'app.controllers'
]);
Updated JSBIN with fix for console error
Your code also had one typo. You were referring to EventsService in your controller while the name was EventService. I have fixed that as well in the jsbin
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.
I'm new to AngularJS and I'm trying to use sweet alert plugin from https://github.com/oitozero/ngSweetAlert , I already added the corresponding scripts to my index.html like this :
index.html
<link rel="stylesheet" href="bower_components/sweetalert/dist/sweetalert.css">
<script src="bower_components/angular-sweetalert/SweetAlert.min.js"></script>
<script src="bower_components/sweetalert/dist/sweetalert.min.js"></script>
As the documentacion says. Now in my ctrl.js I have this :
var ctrl = function ($scope, SweetAlert) {
SweetAlert.swal("Here's a message"); // this does not work
}
ctrl.$inject = ['$scope', 'oitozero.ngSweetAlert];
angular.module('myApp.missolicitudes.controllers',
[
'oitozero.ngSweetAlert'
])
.controller('MiSolicitudCtrl', ctrl);
But is not working, on my browser I got this error from developer tools:
Error: [$injector:unpr]
http://errors.angularjs.org/1.4.3/$injector/unpr?p0=oitozero.ngSweetAlertProvider%20%3C-""itozero.ngSweetAlert%20%3C-%20MiSolicitudCtrl
at Error (native)
at http://localhost:8081/assets/libs/angular/angular.min.js:6:416
at http://localhost:8081/assets/libs/angular/angular.min.js:40:375
at Object.d [as get] (http://localhost:8081/assets/libs/angular/angular.min.js:38:364)
at http://localhost:8081/assets/libs/angular/angular.min.js:40:449
at d (http://localhost:8081/assets/libs/angular/angular.min.js:38:364)
at e (http://localhost:8081/assets/libs/angular/angular.min.js:39:124)
at Object.instantiate (http://localhost:8081/assets/libs/angular/angular.min.js:39:273)
at $get (http://localhost:8081/assets/libs/angular/angular.min.js:80:228)
at link (http://localhost:8081/assets/libs/angular/angular-route.min.js:7:268)
How can I implement this plugin correctly?
Update 1
I have already try this suggestion by #Pankaj Parkar and #Mike G
ctrl.$inject = ['$scope', 'oitozero.ngSweetAlert'];
and like this
ctrl.$inject = ['$scope', 'SweetAlert'];
My developer tools throws this message:
Error: [$injector:unpr] http://errors.angularjs.org/1.4.3/$injector/unpr?p0=oitozero.ngSweetAlertProvider%20%3C-"<div class="container ng-scope" ng-view="">"itozero.ngSweetAlert%20%3C-%20MiSolicitudCtrl
at Error (native)
at http://localhost:8081/assets/libs/angular/angular.min.js:6:416
at http://localhost:8081/assets/libs/angular/angular.min.js:40:375
at Object.d [as get] (http://localhost:8081/assets/libs/angular/angular.min.js:38:364)
at http://localhost:8081/assets/libs/angular/angular.min.js:40:449
at d (http://localhost:8081/assets/libs/angular/angular.min.js:38:364)
at e (http://localhost:8081/assets/libs/angular/angular.min.js:39:124)
at Object.instantiate (http://localhost:8081/assets/libs/angular/angular.min.js:39:273)
at $get (http://localhost:8081/assets/libs/angular/angular.min.js:80:228)
at link (http://localhost:8081/assets/libs/angular/angular-route.min.js:7:268)
Here is a simple module that I wrote to make SweetAlert work.
// sweetalert.js
angular
.module('sweetalert', [])
.factory('swal', SweetAlert);
function SweetAlert() {
return window.swal;
};
Hence, no need to use any other library to use sweetalert, simply write your own.
Simply inject the module in the controller where you want to use it.
Example
angular
.module('demo', ['sweetalert'])
.controller('DemoController', DemoController);
function DemoController($scope) {
$scope.btnClickHandler = function() {
swal('Hello, World!');
};
};
Here is an example gist in coffeescript: https://gist.github.com/pranav7/d075f7cd8263159cf36a
I got it work, by NOT injecting it in the module.
my ctrl.js just got like this
ctrl.$inject = ['$scope'];
and inside my controller y just call it like this
var ctrl = function ($scope) {
swal("Here's a message");
}
And it works!, i dont know if the correct way... but at least works.
Inject sweetalert.min.js and sweetalert.css.
Used like this code in your controller
swal({
type: "error",
title: "Error!",
text: "fail",
confirmButtonText: "OK"
});
`
Never inject a module into to controller as dependency. You should inject SweetAlert factory there which has various function to show alerts. Also add the missing ' qoute on the factory injection.
You should use
ctrl.$inject = ['$scope', 'SweetAlert'];//<==`oitozero.ngSweetAlert` module
//could be injectable inside your app module.
Demo Plunkr