I'm not sure what I'm doing wrong. I'm getting this error
Error: [$injector:unpr] http://errors.angularjs.org/1.2.21/$injector/unpr?p0=propertyUserDataProvider%20%3C-%20propertyUserData
at Error (native)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:6:450
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:36:145
at Object.c [as get] (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:34:236)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:36:213
at c (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:34:236)
at d (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:34:453)
at Object.instantiate (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:35:103)
at $get (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:67:253)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:53:362 <div ui-view="performance-ui-view" class="ng-scope">
Here is my code:
// the controller
app.controller('GlobalDashboardController', ['propertyUserData', function(propertyUserData) {
}])
// ui-router snippet
.state("main", {
url: "/",
views: {
'' : { templateUrl: 'views/main.html' },
'performance-ui-view#main': {
templateUrl: 'views/gdreport.html',
controller : 'GlobalDashboardController',
resolve: {
propertyUserData : function() {
return 'test';
}
}
}
}
})
Right now, I'm returning the string 'test' so I can debug. I do have a User service which I will use once the error is fixed. However, I'm really confused as to why it's failing. Once I remove resolve and the dependency injection in the controller, my application starts working fine again.
You should remove ng-controller directive from your partial view gdreport.html since you have specified the controller in the route itself, it will instantiate and bind the controller to the partial view. And you cannot instantiate this controller yourself because of the dynamic dependency provided via resolve property can only be injected by the router. And your error reflects exactly what it means, i.e propertyUserData provider does not exist.
Related
For an angularjs web project using firebase backend, registered users shouldn't be able to display application pages if they are not verified yet. I use that code below at each page controller:
function config($stateProvider)
{
.state('app.pages_profile', {
url : '/pages/profile',
views : {
'content#app': {
templateUrl: 'app/main/pages/profile/profile.html',
controller : 'ProfileController as vm'
}
},
resolve : {
"currentAuth": ["Auth", function(Auth) {
return Auth.$requireSignIn();
}]
}
})
}
At IndexController I aimed to listen auth state changes and if user is not verified yet redirect to verification warning page.
(function ()
{
'use strict';
angular
.module('xyz')
.controller('IndexController', IndexController);
function IndexController(Auth, $state)
{
var vm = this;
Auth.$onAuthStateChanged(function(firebaseUser) {
if(firebaseUser)
{
if (firebaseUser.emailVerified==false) {
$state.go ("app.pages_auth_verification");
}
}
});
}
})();
In fact it works the way I want it ( it redirects as I want) but on console log it shows also an error:
angular.js:14525 Error: transition superseded
at $StateProvider.$get (angular-ui-router.js:2909)
at Object.invoke (angular.js:5003)
at angular.js:4795
at Object.getService [as get] (angular.js:4944)
at angular-ui-router.js:3696
at Object.invoke (angular.js:5003)
at angular.js:4805
at forEach (angular.js:403)
at createInjector (angular.js:4805)
at doBootstrap (angular.js:1914) "Possibly unhandled rejection: {}
The way I use is right? And/or is there a better way to control and prevent user if not verified.
I have been using oclazyload to reduce response time. While loading the homeController I can see that it has been loaded in network tab through oclazyload. But the controller is not triggered whie calling the html page. I am getting error like :
Error: [ng:areq] http://errors.angularjs.org/1.3.12/ng/areq?p0=homeController&p1=not%20aNaNunction%2C%20got%20undefined
my Routes config :
$routeProvider.when('/',
{
templateUrl: 'app/components/home/home.html',
controller: 'homeController',
resolve:
{ // Any property in resolve should return a promise and is executed before the view is loaded
loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
// you can lazy load files for an existing module
return $ocLazyLoad.load('app/components/home/homeController.js');}]}});
How can I resolve this?
I have a AngularJS application and have a requirement to initialize data from a REST API before the controller initializes. I use the "resolve" in the routeProvider and also injected the relevant value in the controller in order to make this data available. The code snippets are as follows:
RouteProvider code snippet:
myApp.config(function($routeProvider) {
$routeProvider
....
.when('/account', {
templateUrl : path + 'admin/js/pages/inputs/account.html',
controller : 'mainController',
resolve: {
data: function() {
return $http.get(api_path + 'dashboard/get_accounts');
}
}
})
myApp.controller('mainController', function($scope,$http, data, $routeParams, DataService) {
...
console.log(data);
}
The console is supposed display the data by I get the following error " Error: [$injector:unpr] Unknown provider: dataProvider <- data "
Your help much appreciated.
It's because the data provider has not instantiated yet and it is instantiating the controller before the provider is ready, coming through as an undefined and unknown provider.
Try something like this that returns a promise:
myApp.config(function($routeProvider, $q) {
$routeProvider, $q
....
.when('/account', {
templateUrl : path + 'admin/js/pages/inputs/account.html',
controller : 'mainController',
resolve: {
data: function() {
return $q.all($http.get(api_path + 'dashboard/get_accounts'));
}
}
})
Now, the controller won't instantiate until the promise has resolved completely. As per the documentation for $routeProvider and how it handles promises in the resolve.
$routeProvider on Angular's website
resolve - {Object.=} - An optional map of dependencies which should be injected into the controller. If any of these dependencies are promises, the router will wait for them all to be resolved or one to be rejected before the controller is instantiated. If all the promises are resolved successfully, the values of the resolved promises are injected and $routeChangeSuccess event is fired. If any of the promises are rejected the $routeChangeError event is fired.
Setup
I have a directive that takes a path to a json file as attribute value, loads the json, then instantiates Swiffy:
angular.module('myApp')
.directive('swiffy', function ($http) {
return {
restrict: 'A',
scope: {},
link: function postLink($scope, $element, attrs) {
var stage;
// Listen to angular destroy
$scope.$on('$destroy', function() {
if(stage) {
stage.destroy();
stage = null;
}
});
// Load swiffy json
$http({
method: 'GET',
url: attrs.swiffy
}).success(function(data, status, headers, config) {
stage = new swiffy.Stage( $element[0], data );
stage.start();
}).error(function(data, status, headers, config) {
});
}
};
});
The markup:
<div swiffy="my-animation.json"></div>
I also have a basic routing setup:
angular
.module('myApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/info', {
templateUrl: 'views/info.html',
controller: 'InfoCtrl'
})
.otherwise({
redirectTo: '/'
});
});
The controllers here are empty.
Problem
The json file loads as it should and the Swiffy svg is created just fine. But when i navigate away from a view that has a swiffy directive, angular throws an error and the whole app breaks:
TypeError: Cannot read property '1' of null
at annotate (angular.js:3179:24)
at Object.invoke (angular.js:3846:21)
at angular.js:5580:43
at Array.forEach (native)
at forEach (angular.js:323:11)
at Object.<anonymous> (angular.js:5578:13)
at Object.invoke (angular.js:3869:17)
at angular.js:3711:37
at Object.getService [as get] (angular.js:3832:39)
at addDirective (angular.js:6631:51)
The error is thrown after the '$destroy' event has triggered in the directive, so i know that stage.destroy() has run on the Swiffy object.
The angularjs function that throws the error can be found here https://github.com/angular/bower-angular/blob/7ae38b4a0cfced157e3486a0d6e2d299601723bb/angular.js#L3179
As far as i can tell, annotate() is trying to read the parameters on an anonymous function and fails. I have no errors if i remove the Swiffy instantiation so the errors have to be a result of creating the Swiffy object.
I'm using:
AngularJS 1.2.16
Swiffy runtime version 6.0.2
So far I've tried:
updating to AngularJS version 1.2.17-build.111+sha.19d7a12. (It contains an update to the annotate function but that doesn't fix the problem)
removed 'strict mode' from directive.
removed stage.destroy()
I'd rather not make any changes to the angular.js source (I tried to make angular skip anonymous functions but that broke even more things) and the swiffy runtime is not available un-minified so i'm not sure what is going on in there. Any ideas would be great, thanks.
I'm trying to apply routing to my Typescript-based Angular application. The app should get $routeProvider injected with a code like this:
var app = angular.module("MyApp", ["ui.bootstrap"]);
// app.service's and controller's here...
app.config(["$routeProvider",
function ($routeProvider: ng.IRouteProvider) {
$routeProvider
.when("/", {
controller: MyApp.Controllers.ItemsController,
templateUrl: "/Items.html"
})
// ... other routes ...
.otherwise({
redirectTo: "/"
});
}]);
Anyway, when I start the application I get an exception from angular telling me that it cannot find the provider named $routeProviderProvider:
Error: Unknown provider: $routeProviderProvider <- $routeProvider at Error (<anonymous>)
at http://.../Scripts/angular.js:2734:15
at Object.getService [as get] (http://.../Scripts/angular.js:2862:39)
at http://.../Scripts/angular.js:2739:45
at getService (http://.../Scripts/angular.js:2862:39)
at invoke (http://.../Scripts/angular.js:2880:13)
at Object.instantiate (http://.../Scripts/angular.js:2914:23)
at $get (http://.../Scripts/angular.js:4805:24)
at $get.i (http://.../Scripts/angular.js:4384:17)
at forEach (http://.../Scripts/angular.js:137:20) undefined angular.js:5754
By peeking at the angular source (1.0.7), I can tell this comes from the fact that at line 2737 where the instanceInjector is created, its name comes from appending a variable named providerSuffix, whose value is "Provider", to the requested provider name (here "$routeProvider"). Thus, this results in an exception. Yet, the correct name should right be "$routeProvider"; if I change it into just "$route" in my code, this error disappears as expected, as now the built name is "$routeProvider"; but I get another exception telling me that the service "$route" is not defined. So, what should I do to resolve this?
Updated answer:
Like I mentioned in the comments below
e.g. it would be invalid in a controller. FYI The section that you are talking about "ProviderProvider" is just for logging, not how it is internally searching for the dependency
And found in your code:
export class MainController {
static $inject = ["$scope", "$routeProvider"];
constructor(private $scope: IMainScope,
private $routeProvider: ng.IRouteProvider) {
}
}
you cannot have routeProvider in your controllers. Your app.config is not what is giving you the error. Change your controller to and the error goes away:
export class MainController {
static $inject = ["$scope"];
constructor(private $scope: IMainScope) {
}
}
Additionally I recommend not implementing your own scope when using controllers. Here's why: http://www.youtube.com/watch?v=WdtVn_8K17E&feature=youtu.be&t=5m36s
Hope you enjoy angular + typescript as much as I do :)