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
Related
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'm trying to create a custom service and $inject it into my controller. It seems to be a fairly basic problem, but I havn't been able to find a working solution.
HTML:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body ng-controller="MyController as vm">
<script src="Scripts/angular.min.js"></script>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="app/AnimalService.js"></script>
<script src="app/app.js"></script>
</body>
</html>
I use the following code to create the service, i'm trying to call from the controller.
AnimalService.ts:
module services {
"use strict";
export interface IAnimal {
sound: string;
hearMySound(): void;
}
class Animal implements IAnimal {
sound: string;
constructor() {
this.sound = "RAWR";
}
hearMySound(): void {
console.log(this.sound);
}
}
angular.module("myApp")
.service("Animal", Animal);
}
In the controller, am I trying to call the function hearMySound(), which has the string initilized by the service constructor.
app.ts
module controllers{
class MyController {
"use strict";
static $inject = ["Animal"];
constructor(animalService: services.IAnimal) {
animalService.hearMySound();
}
}
angular.module('myApp', [])
.controller('MyController', ["Animal", MyController]);
}
Google chrome console error:
Uncaught Error: [$injector:nomod] http://errors.angularjs.org/1.4.8/$injector/nomod?p0=myApp(anonymous function)
# angular.js:38(anonymous function)
# angular.js:2005b # angular.js:1929(anonymous function)
# angular.js:2003services # AnimalService.ts:20(anonymous function)
# AnimalService.ts:22
angular.js:12520 Error: [$injector:unpr] http://errors.angularjs.org/1.4.8/$injector/unpr?p0=AnimalProvider%20%3C-%20Animal%20%3C-%20MyController
at Error (native)
at http://localhost:51139/Scripts/angular.min.js:6:416
at http://localhost:51139/Scripts/angular.min.js:41:121
at Object.d [as get] (http://localhost:51139/Scripts/angular.min.js:39:92)
at http://localhost:51139/Scripts/angular.min.js:41:195
at d (http://localhost:51139/Scripts/angular.min.js:39:92)
at Object.e [as invoke] (http://localhost:51139/Scripts/angular.min.js:39:362)
at M.instance (http://localhost:51139/Scripts/angular.min.js:80:336)
at D (http://localhost:51139/Scripts/angular.min.js:61:362)
at g (http://localhost:51139/Scripts/angular.min.js:55:105)(anonymous function) # angular.js:12520(anonymous function)
# angular.js:9292r.$apply # angular.js:16157(anonymous function)
# angular.js:1679e
# angular.js:4523c
# angular.js:1677yc
# angular.js:1697Zd
# angular.js:1591(anonymous function)
# angular.js:29013b
# angular.js:3057If
# angular.js:3346Hf.d
# angular.js:3334
I suspect I might not be registering the service correctly, or registering the modules. Any input is appreciated.
Updated
Added full console error msg
Result
Thank to #hansmaad, i ended up with up with the following in order to make it work:
<script src="app/moduleReg.js"></script> // Registrere the module
<script src="app/app.js"></script> // Controller logic
<script src="app/AnimalService.js"></script> // Service logic
Your module registration should be the first thing that happens. The first file you include should contain
angular.module('myApp', []);
In your case, you've included AnimalService.js before app.js.
When you register services and controllers later, use
angular.module('myApp').controller(/*...*/);
By the way, if you define the injections as static $inject = ["Animal"]; you don't have to pass them again in the registration. Just do
angular.module('myApp', [])
.controller('MyController', MyController);
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.
}]);
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
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'])