My code is
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script type="text/javascript">
var app=angular.module("App",['ngRoute']);
app.config(['$routeProvider',function($routeProvider) {
$routeProvider.when('/',{controller:MainController,templateUrl:'/html/main.html'}).otherwise({redirectTo:'/'});
}]);
app.controller('MainController', function($scope){
$scope.a={};
})
</script>
Above code throws Uncaught Error: [$injector:modulerr].
Can some help me solve this.Thanks in advance!
$routeProvider.when('/',{controller:'MainController',templateUrl:'/html/main.html'}).otherwise({redirectTo:'/'});
MainController must be string but you have specified it as variable
DEMO
Related
trying to learn angluar route constructs but I fail on implementing ngRoute
The Definition of my app
var app= angular.module('app', ['ngMaterial', 'ngRoute']);
The configuration
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/'});
}]);
My directive to use the router
app.directive("applicationDirective", function($router) {
return {
restrict : "E",
templateUrl: 'app/templates/application.html',
controller: 'applicationController'
};
});
And my implemention in HTML
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-aria.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-messages.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.js"></script>
<script src="app/app.js"></script>
Seems to be OK; but Fails... With:
angular.js:14525 Error: [$injector:unpr] Unknown provider: $routerProvider <- $router <- applicationDirectiveDirective
http://errors.angularjs.org/1.6.4/$injector/unpr?p0=%24routerProvider%20%3C-%20%24router%20%3C-%20applicationDirectiveDirective
at angular.js:66
at angular.js:4789
at Object.getService [as get] (angular.js:4944)
at angular.js:4794
at getService (angular.js:4944)
at injectionArgs (angular.js:4969)
at Object.invoke (angular.js:4995)
at angular.js:8110
at forEach (angular.js:403)
at Object.<anonymous> (angular.js:8108)
Has anybody got a hint how to solve it.
regards
n00n
You need to set routing in your config function. This directive is not needed and it doesn't work like this.
Check this out:
https://www.w3schools.com/angular/angular_routing.asp
ok, I have viewed the docs, and have directly taken this code from another project that works. I have no idea why, but i keep getting an unknown provider error. Ive run through all the possible problems that angular points out on their error reference, so if you are just going to link me there don't waste your time.
the error:
angular.js:13236 Error: [$injector:unpr] http://errors.angularjs.org/1.5.0/$injector/unpr?p0=waypointsProvider%20%3C-%20waypoints%20%3C-%20WaypointController
at Error (native)
at https://code.angularjs.org/1.5.0/angular.min.js:6:416
at https://code.angularjs.org/1.5.0/angular.min.js:43:7
at Object.d [as get] (https://code.angularjs.org/1.5.0/angular.min.js:40:270)
at https://code.angularjs.org/1.5.0/angular.min.js:43:69
at d (https://code.angularjs.org/1.5.0/angular.min.js:40:270)
at e (https://code.angularjs.org/1.5.0/angular.min.js:41:1)
at Object.instantiate (https://code.angularjs.org/1.5.0/angular.min.js:41:364)
at https://code.angularjs.org/1.5.0/angular.min.js:87:42
at A.link (https://code.angularjs.org/1.5.0/angular-route.min.js:7:274) <div ng-view="" class="ng-scope">
my index.html file:
<!DOCTYPE html>
<html>
<head>
<title>Appalachian App</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<script type="text/javascript" src="https://code.angularjs.org/1.5.0/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.5.0/angular-route.min.js"></script>
</head>
<body ng-app="atApp">
<h1 class="header">Yo</h1>
<div ng-view></div>
<!-- Modules -->
<script type="text/javascript" src="js/app.js"></script>
<!-- Controllers -->
<script type="text/javascript" src="js/controllers/WaypointController.js"> </script>
<!-- Services -->
<script type="text/javscript" src="js/services/waypoints.js"></script>
</body>
</html>
my app.js file:
var app = angular.module('atApp', ['ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'views/waypoint.html',
controller: 'WaypointController'
}).
otherwise({
redirectTo: '/'
});
}]);
my controller:
app.controller('WaypointController',[
'$scope','waypoints',
function($scope, waypoints){
$scope.helloWorld='hello world!';
$scope.ways = waypoints;
}]);
my service:
app.factory('waypoints', [function(){
var demo = [
{
name:"Milinockett",
date:"17 August 2015",
state:"Maine",
specificLocation:"motel",
startingPoint:true,
distanceFromStart:0,
distanceFromEnd:2189.0,
img:"https://56.media.tumblr.com/03645603932681733b6ae4b46d6c7abf/tumblr_o43w4sh5Zu1rrw1gjo1_540.jpg",
companions:"Vallone",
},
{
name:"Katahdin Stream Campground",
date:"18 August 2015",
state:"Maine",
specificLocation:"Baxter State Park Camp Site 21",
startingPoint:false,
distanceFromStart:5.2,
distanceFromEnd:2183.8,
img:"http://41.media.tumblr.com/1a0fd39fd0b14f83ce03151299c883f8/tumblr_o43w7109pQ1rrw1gjo1_1280.jpg",
companions:"Vallone",
},
];
return demo;
}]);
any help is appreciated
First things first. When you want to debug your application, do not use the minified, but the standard version of Angular. That will give you a far more descriptive error, which will guide you to the source of your issue.
Here's a working example: http://plnkr.co/edit/JANQwccTsyqPUTSYAZLv?p=preview . Your code (at least the part you included) looks good at first glance, so I hope this will give you an idea where you went wrong.
P.S. Using service vs. a factory will arguably give you a cleaner syntax:
function WaypointsService() {
this.getWaypoints = getWaypoints;
function getWaypoints() {
return [way1, way2, ...];
}
}
app.service('waypointsService', WaypointsService);
Place waypoints.js file before WaypointController.js
Have any error for JSON on the console. Nothing I found buggy in your code.
Try this code for your factory:
app.factory('Waypoints', Waypoints);
function Waypoints(){
var demo = [ { ... }, { ... }, ];
return{
getDemo: getDemo
}
function getDemo(){
return demo;
};
});
So in your controller inject Waypoints and get demo like:
$scope.ways = Waypoints.getDemo();
I am running Ionic and trying to use cordovaHTTP for SSL pinning. I followed the instructions on the the github but I get the error that the module isn't there.
My index.html
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
My app.js:
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'cordovaHTTP'])
In services.js:
angular.module('starter.services', [])
.service('MyService', function(cordovaHTTP) {
cordovaHTTP.enableSSLPinning(true, function() {
console.log('successful ssl pin');
cordovaHTTP.useBasicAuth("user", "pass", function() {
console.log('successful basic auth!');
cordovaHTTP.get(url, function(response) {
console.log(response.status);
}, function(response) {
console.error(response.error);
});
}, function() {
console.log('error basic auth');
});
}, function(){
console.log('error ssl pin');
});
});
This results in the error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module cordovaHTTP due to:
Error: [$injector:nomod] Module 'cordovaHTTP' 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.
I have tried messing with this countless times but no dice. Any help is appreciated.
Actually I think you're initializing your module multiple times. In angular factories / services are singleton. Your code look like something this
angular.module('starter', ['ionic', 'MyService', 'cordovaHTTP']) //setters for a module
Please make sure you're injecting right service or factory name. You should change your service declaration way too, like below
angular.module('starter') //Don't use [] it is only getter of above initialized module
.service('MyService', function(cordovaHTTP){
//Code
});
Also please don't forget to load app.js at last. Hope it may help you.
I found the solution from github issues.
Make sure that you load the angular js files after cordova js files in index.html.
Here's my index.html:
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/jquery/jquery-3.2.1.min.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/routes.js"></script>
<script src="js/directives.js"></script>
<script src="js/services.js"></script>
Is angular defined?
cordova-HTTP will only instantiate the cordovaHTTP module if angular is defined otherwise it will fall back to window.cordovaHTTP.
You could use this this:
document.addEventListener("deviceready", function () {
console.log(window.cordovaHTTP);
console.log(window.CordovaHttpPlugin); // For some version it's instantiated in this name if angular is not defined.
}, false);
Manually bootstrap your AngularJS app instead of using the ng-app attribute.
Code:
<script>
angular.element(document).ready(function() {
document.addEventListener("deviceready", function () {
console.log(window.cordovaHTTP);
console.log(window.CordovaHttpPlugin); // For some version it's instantiated in this name if angular is not defined.
angular.bootstrap(document, ['MyAppName']);
}, false);
});
</script>
When using it in your controller or service, do not need to add the $.
Just use it like this:
angular.module('MyAppName.services', [])
.service('MyService', ['cordovaHTTP', function(cordovaHTTP){
// Your codes are here.
}]);
I did the following in the code:
angular-core.js:
var jdi = angular.module('jdi', ['ngStorage']);
login.html:
<!-- Angular -->
<script src="/assets/vendor/angular/angular.min.js"></script>
<script src="/assets/vendor/angular/angular-route.min.js"></script>
<script src="/assets/vendor/angular/angular-cookies.js"></script>
<script src="/assets/vendor/angular/angular-loader.js"></script>
it gives me the error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.14/$injector/modulerr?p0=jdi&p1=Error%3A%20…2Flocalhost%3A3000%2Fassets%2Fvendor%2Fangular%2Fangular.min.js%3A17%3A381)
I'm new to angular, can anyone tell me what im doing wrong here?
Angular could not inject a module you required. Here, the only module from your code sample is ngStorage, and from login.html it seems that you did not load ngStorage javascript; if it is ngStorage from https://github.com/gsklee/ngStorage, you should have something like
<script src="/assets/vendor/ngstorage/ngStorage.min.js"/>
I am trying to implement Angularytics but I am getting below error:
[$injector:unpr] Unknown provider: $routeProvider
My index.html includes below scripts:
<script src="components/angular/angular.js"></script>
.....
<script src="components/angularytics/src/angularytics.js"></script>
And my app.js(route) has below code:
var app=angular.module('demoApp', ['ui.bootstrap','ngResource','angularytics'])
.config(function (AngularyticsProvider,$routeProvider, $httpProvider) {
AngularyticsProvider.setEventHandlers(['Console', 'Google']);
..............................
.................................
});
app.run(['Angularytics','$rootScope','$location','$routeParams', function(Angularytics,$rootScope,$location,$routeParams) {
Angularytics.init();
.....................
......................
}]);
Please help me in what I am doing wrong.
Make sure you add angular-route.js and add ngRoute to the DI libs.
<script type="text/javascript" src="components/angular/angular-route.js"></script>
var app= angular.module('demoApp', ['ui.bootstrap','ngResource', 'ngRoute', 'angularytics'])