I'm following a PluralSight tutorial on AngularJS fundamentals. Though I'm using a much different structure as I seem to have a much newer version of Angular Seed.
I'm trying to inject a service into controller using the same syntax structure as I have done before, which was working fine, but this one brings the following error:
Error: [$injector:unpr] Unknown provider: eventDataProvider <- eventData
viewEventDetails.js (Controller)
'use strict';
angular.module('myApp.viewEventDetails', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/viewEventDetails', {
templateUrl: 'viewEventDetails/viewEventDetails.html',
controller: 'viewEventDetailsCtrl'
});
}])
.controller('viewEventDetailsCtrl', ['$scope', 'eventData', function($scope, eventData) {
$scope.sortorder = '-upVoteCount';
$scope.event = eventData.getEvent(function (event) {
$scope.event = event;
});
$scope.upVoteSession = function (session) {
session.upVoteCount++;
};
$scope.downVoteSession = function (session) {
session.upVoteCount--;
};
}
]);
EventData.js (Service)
angular.module('myApp.services', [])
.factory('eventData', ['$http', '$log', function ($http, $log) {
return {
getEvent: function () {
$http({ method: 'get', url: '/data/event/1' })
.success(function (data, status, headers, config) {
$log.warn(data, status, headers(), config);
})
.error(function (data, status, headers, config) {
$log.warn(data, status, headers(), config);
});
}
}
}]
);
app.js
'use strict';
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ngRoute',
'ngSanitize',
'myApp.filters',
'myApp.services',
'myApp.viewNewEvent',
'myApp.viewEventDetails',
'myApp.viewEditProfile',
'myApp.version'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
you need to inject the myApp.services into your module that the controller is in, since the modules are different.
i.e.
angular.module('myApp.viewEventDetails', ['ngRoute', 'myApp.services'])
Related
I'm trying to get the data from a json file.
i have a file, factory1.js
myApp.factory('mainInfo', [
'$http',
function($http) {
return {
get: function(){
$http.get('data.json');
}
}}])
and then i have another file, view1.js
'use strict';
angular.module('myApp.view1', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'View1Ctrl'
});
}])
.controller('View1Ctrl', [
'$scope',
'$http',
'mainInfo',
function($scope, $http, mainInfo) {
mainInfo.get("data.json")
.then(function(response) {
$scope.myWelcome = response.data;
console.log($scope.myWelcome)
});
}]);
i have one folder with each of the json, factory and controller files in it.
when i run this the error it is returning says...
angular.js:13708 Error: [$injector:unpr] Unknown provider: mainInfoProvider <- mainInfo <- View1Ctrl
where am i going wrong?
Working fine. This solves your problem i hope so.
'use strict';
var app=angular.module('myApp.view1', ['ngRoute'])
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'View1Ctrl'
});
}])
app.factory('mainInfo',
function($http) {
var obj={};
obj.method =function(){
return $http.get('tag.json')
}
return obj;
})
app.controller('View1Ctrl', [
'$scope',
'$http',
'mainInfo',
function($scope, $http, mainInfo) {
mainInfo.method().success(function(response) {
$scope.myWelcome = response;
});
}]);
var app=angular.module('myApp.view1', ['ngRoute']);
app.factory('mainInfo', [
'$http',
function($http) {
return {
get: function(){
$http.get('data.json');
}
}}])
define one variable and assign your module to that variable and bind the variable to the factory.if you have module with name myApp inject that module in to myapp.view1 module
like
angular.module('myApp.view1', ['ngRoute','myApp'])
Register mainInfo inside Angular module, if it's a different module.
view1.js
angular.module('myApp.view1', ['ngRoute', 'myApp']);
You have not assigned your module to a variable.
var myApp = angular.module('myApp.view1', ['ngRoute']) ...
Then use myApp.factory
myApp.factory('mainInfo', [...
see this plunkr for quick understanding.
The app runs on http://domain1 an must request data from http://domain2 with the following code:
'use strict';
// Declare app level module which depends on views, and components
var myApp = angular.module('myApp', [
'ngRoute',
'restangular'
]);
myApp.config(['$routeProvider', 'RestangularProvider', function($routeProvider, RestangularProvider) {
$routeProvider.when('/view1', {
templateUrl: '/view1.html',
controller: 'View1Ctrl'
});
$routeProvider.otherwise({redirectTo: '/view1'});
RestangularProvider.setBaseUrl("http://domain2/");
}]);
var rest = null;
myApp.controller('View1Ctrl', ['$scope', 'Restangular', function($scope, Restangular) {
rest = Restangular;
var cursos = Restangular.one("resource",100).get()
}]);
Nonetheless, the request goes to http://domain1. What is going on? I also inspected the Restangular configuration, by putting Restangular in the global scope, as the rest variable, and the base url seems is property set.
Hey you can create a factory and use different domain to get data something like below
(function () {
'use strict';
angular.module('app')
.factory('Domain2Restangular', ['Restangular', Domain2RestangularFunction]);
function Domain2RestangularFunction( Restangular) {
return Restangular.withConfig(function(RestangularConfigurer) {
var baseURL = 'http://domain2';
RestangularConfigurer.setBaseUrl(baseURL);
RestangularConfigurer.setDefaultHeaders({'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' });
});
}
}());
You can invoke
return Domain2Restangular.all('')
.post(data)
.then(function(response) {
return response;
}, function(error) {
return error
});
i am new to angular and facing this exception when trying to retrieve a list of blog-posts from rails backend.
can anyone help me please, i am unable to find the exact solution of this problem.
Error: [$injector:unpr] Unknown provider: PostProvider <- Post
http://errors.angularjs.org/1.2.22/$injector/unpr?p0=PostProvider%20%3C-%20Post
var myApp = angular.module('Emangu', ['ngRoute', 'ngResource']);
//Routes
myApp.config([
'$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.when('/blog', {
templateUrl: '/templates/posts/index.html',
controller: 'PostListCtr'
});
}
]);
//Controllers
myApp.controller("PostListCtr", ['$scope', '$http', '$resource', 'Posts', 'Post', '$location', function ($scope, $http, $resource, Posts, Post, $location) {
alert("hello");
$scope.posts = Posts.query();
$scope.deletePost = function (Post) {
if (confirm("Are you sure you want to delete this Post?")) {
Post.delete({ id: Post }, function () {
$scope.posts = Posts.list();
$location.path('/');
});
}
};
}]);
//resources
myApp.factory('Posts', ['$resource', function ($resource) {
return $resource('/posts.json', {}, {
query: { method: 'GET', isArray: true },
create: { method: 'POST' }
})
}]);
Add Post factory (service) or remove it from PostListCtr dependencies
I'm developing a mobile app with Cordova and Angular JS. My app is on an easyphp localhost.
I use Angular Routes with a ng view directive in my index.html. And I've got this :
TypeError: Cannot read property 'get' of undefined
angular.module('app.controllers', [])
.controller('MainCtrl', ['$scope', function ($scope) {
$scope.status = "Accueil";
}])
.controller('ViewCtrl', ['$scope', function ($scope, $http) {
$http.get('mobile.php/getAnnonces/limit=10')
.success(function(data, status, headers, config) {
$scope.posts = data;
})
.error(function(data, status, headers, config) {
// log error
});
}])
...
If I test the URL my script returns JSON (with json_encode). Where am I wrong ?
Thanks for your help,
Regards
try to change
angular.module('app.controllers', [])
.controller('MainCtrl', ['$scope', function ($scope) {
$scope.status = "Accueil";
}])
.controller('ViewCtrl', ['$scope','$http', function ($scope, $http) {
$http.get('mobile.php/getAnnonces/limit=10')
.success(function(data, status, headers, config) {
$scope.posts = data;
})
.error(function(data, status, headers, config) {
// log error
});
}]);
Changes:
Passing $http service to controller as string so that will resolve at runtime.
I can't seem to wire this up properly. I'll list the appropriate pieces. My issue is accessing the injected resources. All of the dependent pieces are undefined when I try to reference them.
var app = angular.module('app', ['ngResource','ui.bootstrap', 'ngGrid','app.services', 'app.directives', 'app.controllers'
])
.config(['$routeProvider', function ($routeProvider) {
return $routeProvider.
when('/', { templateUrl: 'partials/transaction.view.html', controller: 'TransactionCtrl' }).
when('/about', { templateUrl: 'partials/about.view.html', controller: 'AboutCtrl' }).
when('/transaction', { templateUrl: 'partials/transaction.view.html', controller: 'TransactionCtrl' }).
otherwise({ redirectTo: '/' });
}])
.config(['$httpProvider', function ($httpProvider) {
return $httpProvider.responseInterceptors.push(['logger', '$rootScope', '$q',
function (logger, $rootScope, $q) {
var error, success;
success = function (response) {
$rootScope.$broadcast("success:" + response.status, response);
logger.log("success:" + response.status);
return response;
};
error = function (response) {
var deferred;
deferred = $q.defer();
$rootScope.$broadcast("error:" + response.status, response);
logger.log("error:" + response.status);
return $q.reject(response);
};
return function (promise) {
return promise.then(success, error);
};
}
]);
}])
.run(['$rootScope', 'logger', function ($rootScope, logger) {
return $rootScope.$on('$routeChangeSuccess', function (event, currentRoute, priorRoute) {
return $rootScope.$broadcast("" + currentRoute.controller + "$routeChangeSuccess", currentRoute, priorRoute);
});
}]);
...the controllers are here:
angular.module('pennyWatch.controllers', ['$scope', '$location','logger', 'ngGrid', 'transactionService']).
controller('TransactionCtrl', [function ($scope, logger, ngGrid, transactionService) {
//code here
}]).
controller('AboutCtrl',[function ($scope, logger) {
$scope.logEntries = logger.logEntries;
}]);
So none of the resources I specified are available (all undefined): '$scope', '$location','logger', 'ngGrid', 'transactionService'
Any light shed on this would be greatly appreciated!
Thanks
I'm pretty sure the syntax for a controller is:
.controller('TransactionCtrl', ['$scope', 'logger', 'ngGrid', 'transactionService', function ($scope, logger, ngGrid, transactionService) {
//code here
}]);
You first list what to inject, then as the last element of the array to define a function with parameters that will represent what's injected.
For instance you could even have:
.controller('TransactionCtrl', ['$scope', 'logger', 'ngGrid', 'transactionService', function ($s, logr, ngGrid, transServ) {
//code here
}]);
This is to allow for easy minification.
The alternative controller syntax uses the parameter names when choosing what to inject. And since minification usually involves shortening variable names, it's suggested you use the syntax above.
Alternative syntax:
.controller('TransactionCtrl', function ($scope, logger, ngGrid, transactionService) {
//code here
});
I think you are swapping module-loading with service-injection
when declaring the pennywatch.controllers module, you should invoke the angular.module function passing the module dependencies in brackets, not the services. many of the services you cannot access are in the ng module, for instance
service injection is applied at the controller level