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.
Related
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 getting javascript run time error
myApp is undefined
for my angular service. Don't know what wrong im doing here..
This is how i defined my app.js
app.js
var myApp = angular.module('myApp', [
'ngRoute', 'motorControllers', 'motorDetailsController', 'motorServices', 'ngSanitize', 'ui.select', 'ngResource',]);
myApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/motors', {
templateUrl: 'View/motorList.html',
controller: 'motorController'
}).
when('/motors/:Id', {
templateUrl: 'View/motorDetails.html',
controller: 'motorDetailsController'
}).
otherwise({
redirectTo: '/motors'
});
}]);
This is how i am creating/calling myApp in controller.
Controller
angular.module('myApp', []).controller('motorController', function ($scope, motorService) {
//////
}
This is how i am trying use myApp in my service. but it gives error myApp is undefined.
Service:
myApp.service('motorService', ['$http', function ($http) {
//////
}
and this is how i declared it in my html
<html ng-app="myApp">
Looking forward for some help.
Thanks
I think that the error is in the controller's declaration, because you're defining the app 'myApp' twice.
angular.module('myApp', []).controller('motorController', function ($scope, motorService) {
//////
}
should be
angular.module('myApp').controller('motorController', function ($scope, motorService) {
//////
}
Edit
#simbada
It's up to you. You can separate them in different modules.
(function(angular){
angular
.module('myApp', ['myApp.Controllers']);
angular
.module('myApp.Services', [])
.service('mySrv', function($http){
function _get(){
return $http.get('url');
}
return {
get: _get
}
});
angular
.module('myApp.Controllers', ['myApp.Services'])
.controller('myCtrl', function($scope, mySrv){
$scope.var = 'Hello';
});
})(angular);
You have passed comma in dependancy after ngResource just remove that it'll work fine.
var myApp = angular.module('myApp', [
'ngRoute', 'motorControllers', 'motorDetailsController', 'motorServices', 'ngSanitize', 'ui.select', 'ngResource']);
I think this should be
angular.module('myApp').controller('motorController', function ($sc...
whitout [ ] brackets.
also see how you declare your service:
var myApp = angular.module('myApp', [
'ngRoute', 'motorControllers', 'motorDetailsController', 'motorServices', 'ngSanitize', 'ui.select', 'ngResource']);
when your service is 'motorService'
Your service should be:
myApp = angular.module('motorServices');
myApp.service('motorService', ['$http', function ($http) {
//////
}
I am using a module where I add in my first controller which is taking a service as a dependency. All the service is doing is bringing in some data.
Then I have a show function which I am adding on an anchor element in my view in order to be able to click on the the first name and then get the user's details.
My second controller takes the data from the first controller and then using $routeParams I am trying to show the data on the user view.
Is there something I am doing wrong here?
(function() {
var app = angular.module('test');
app.controller('testCtrl', ['$scope', 'testFactory', '$location', function($scope, testFactory, $location) {
testFactory.getContact().then(function(data) {
$scope.contacts = data.data;
});
$scope.show = function(firstname) {
$location.path('main/' + firstname);
};
}]);
app.controller('userCtrl', ['$scope', '$routeParams', function($scope, $routeParams) {
$scope.user = $scope.contacts[$routeParams.firstname];
}]);
}());
These are the routes
(function() {
var app = angular.module('test', ["ngRoute"]);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when("/main", {
templateUrl: "main.html",
controller: "testCtrl"
})
.when("/main/:firstname", {
templateUrl: "contact.html",
controller: "userCtrl"
})
.otherwise({redirectTo:"/main"});
$locationProvider.html5Mode(true);
});
}());
This is the error I am getting in my console:
TypeError: Cannot read property 'any1' of undefined
where any1 is the is the first name.
I have sample on Angular JS as:
angular.module('wm-admin', []).
config(function($routeProvider) {
$routeProvider.
when('/users', {controller:UsersController, templateUrl:'/public/html/crm/users/list.html'}).
otherwise({redirectTo:'/users'});
});
// Controllers //
function UsersController($scope) {
}
It gives me error:
Uncaught Error: [$injector:modulerr]
So, what I do wrong?
HTML:
<body ng-app="wm-admin">
</body>
I tried also any code:
Angular JS:
(function (angular) {
'use strict';
angular.module('wm-admin', [])
.config(function($routeProvider) {
$routeProvider.
when('/users', {controller:UsersController, templateUrl:'/public/html/crm/users/list.html'}).
otherwise({redirectTo:'/users'});
})
// Controllers //
.controller('UsersController', ['$scope', '$http', function ($scope, $http) {
}])
})(window.angular);
Look please code upper
You haven't injected the controller properly to your app. Add this line:
angular.module('wm-admin').controller('UsersController', UsersController);
EDIT
In your updated question you have this code:
(function (angular) {
'use strict';
angular.module('wm-admin', [])
.config(function($routeProvider) {
$routeProvider.
when('/users', {controller:UsersController, templateUrl:'/public/html/crm/users/list.html'}).
otherwise({redirectTo:'/users'});
})
// Controllers //
.controller('UsersController', ['$scope', '$http', function ($scope, $http) {
}])
})(window.angular);
But now UsersController is no longer a function within the scope of the {controller: UsersController} line. Change it to controller: 'UsersController' (string, not reference to a function):
(function (angular) {
'use strict';
angular.module('wm-admin', [])
.config(function($routeProvider) {
$routeProvider.
when('/users', {controller: 'UsersController', templateUrl:'/public/html/crm/users/list.html'}).
otherwise({redirectTo:'/users'});
})
// Controllers //
.controller('UsersController', ['$scope', '$http', function ($scope, $http) {
}])
})(window.angular);
You never actually made a controller.
angular
.module('wm-admin')
.controller('UsersController', UsersController);
UsersController.$inject = ['$scope'];
function UsersController($scope) {
}
I am having a hard time to access a service inside a directive. I define my service via $http and $q, and inject it into my directive. But I can;t get the directive to access the service.
service.js
'use strict';
var app = angular.module('App.services', []);
app.factory('Classification', function($http,$q) {
return {
query: function getAll() {
var deferred = $q.defer();
$http.get('index.php/classifications').then(function(classi) {
deferred.resolve(classi.data);
}, function getWebsitesError(reason) {
deferred.reject(reason);
});
return deferred.promise;
}
};
});
app.js
'use strict';
/* App Module */
var app = angular.module('App', ['App.controllers', 'App.services', 'App.directives', 'ui']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/', {templateUrl: 'partials/welcome.html'}).
when('/websites/:websiteId', {templateUrl: 'partials/website/details.html', controller: 'WebsiteDetailsCtrl'}).
otherwise({redirectTo: '/'});
}]);
and my directive.js :
'use strict';
var app = angular.module('App.directives', ['App.services']);
app.directive("regionselect",['Classification', '$compile', function($compile, Classification){
Classification.query();<-- Throw an exception : has no method query()
return{
restrict : "E",
templateUrl : "/js/directives/locationSelect3.html",
transclude: true,
compile: function (tElement, tAttr, transclude){
var loaded = false;
}
};
}]);
Any idea what I am doing wrong?
Could it be the ordering?
app.directive("regionselect",['Classification', '$compile', function($compile, Classification){
You declare
['Classification', '$compile',
but the the function says
function($compile, Classification){
Which is backwards.