I'm running a tutorial however they are using a version of AngularJS before 1.3.8.
What am I missing with my code so this data service can be injected?
They are using the following code to inject a service into a controller:
var myApp = angular.module('myApp', []);
myApp.factory('Data', function () {
return { message: "I'm data from a service" };
});
function FirstCtrl($scope, Data) {
$scope.data = Data;
}
function SecondCtrl($scope, Data) {
$scope.data = Data;
}
Here is my code I am trying to alter so it works:
var myApp = angular.module('app', []);
myApp.factory('Data', function(){
return {message:"Data from service"}
});
angular.module('app', Data)
.controller('FirstController', ['$scope', function($scope) {
$scope.data = Data;
}])
.controller('SecondController', ['$scope', function($scope) {
$scope.data = {message: "panel"};
}]);
You must inject Data in the controller # .controller('FirstController', ['$scope', 'Data', function($scope, Data) { not list as module dependency # angular.module('app', Data). See the official DI documentation for more details and other options.
angular.module('app')
.controller('FirstController', ['$scope', 'Data', function($scope, Data) {
$scope.data = Data;
}])
.controller('SecondController', ['$scope','Data', function($scope, Data) {
$scope.data = {message: "panel"};
}]);
When you fetch a already created module you get by using angular.module('app'). You shouldn't be trying to inject the Data factory into the module but instead into the controller.
angular.module('app')
.controller('FirstController', ['$scope', 'Data', function($scope, Data) {
$scope.data = Data;
}])
.controller('SecondController', ['$scope', 'Data', function($scope, Data) {
$scope.data = {message: "panel"};
}]);
Use this:
angular.module('app')
.controller('FirstController', ['$scope', function($scope, Data) {
$scope.data = Data;
}])
.controller('SecondController', ['$scope', function($scope, Data) {
$scope.data = {message: "panel"};
}]);
Related
angular.module('app').controller('ConvertController', ['$rootScope', '$scope', '$http', '$state', 'toaster', 'StorageManager', function($rootScope, $scope, $http, $state, toaster, StorageManager) {
$scope.authError = null;
$scope.init = function() {
var _authManager = window.client.getAuthManager();
};
$scope.init();
$scope.refreshDataForList = function() {
$scope.list = userlist.get();
};
$scope.searchConversation = function() {
var data = {
searchText: $scope.searchText
};
};
$scope.onchange = function(presence) {
console.log("IN CONTROLLER");
};
}])
I am using karma-jasmine to test my angular app. But while doing testing I am facing problem to access getAuthManager(). It gives error "cannot read getAuthManager() of undefined". However I have included all the files in proper order.
I am having difficulty getting $http service to work with my AngularJS application. I am developing it in Visual Studio 2012, using IISExpress. I have the following code:
var myApp = angular.module('myApp', []);
myApp.controller('MyController', ['$scope', '$http', function($scope,$http) {
$http.get('js/data.json').success(function(data) {
$scope.artists = data;
});
}]);
"success" is never fired. How do I get $http to work?
You should also use .error() to figure out why it's not working.
angular
.module('myApp', []);
angular
.module('myApp')
.controller('MyController', ['$scope', '$http',
function($scope, $http) {
$http.get('js/data.json')
.success(function(data) {
$scope.artists = data;
})
.error(function(err) {
// Figure out what's not working here.
console.log(err);
});
}
]);
The issue is that I can't seem to send information from Controller 1 to Controller 2... I have my service that sets/gets data but it isn't working. The actual error that I'm getting is that Controller 1's dataService.getData is not a function... when it works elsewhere.
Service 1 (in its own file)
app.service('dataService', function() {
var data, queried;
return {
setData: function(queryData) {
this.data = queryData;
this.queried = false;
},
getData: function() {
this.queried = true;
return this.data;
}
};
});
Controller 1 (sending information)
app.controller('MyCtrl', ['$scope', '$location', '$state', function($scope, $location, $state, dataService) {
anotherService.functionName(function(err, data) {
// do some things here
actualService.doesntWork(function(err, data) {
if (!err) {
var query = {};
query.someField = data.someField;
dataService.setData(query);
$state.go("go.somewhere.else");
}
});
});
}]);
Controller 2 (getting information)
app.controller('MyCtrl2', ['$scope', '$location', '$state', function($scope, $location, $state, dataService) {
$scope.buttonPressed = function() {
console.log(dataService.getData());
}
}]);
You didn't injected service dataService inside your MyCtrl & MyCtrl2, ensure dependency should be injected before using it.
Controller
app.controller('MyCtrl', ['$scope', '$location', '$state','dataService', //<-added dependency here
function($scope, $location, $state, dataService) {
anotherService.functionName(function(err, data) {
// do some things here
actualService.doesntWork(function(err, data) {
if (!err) {
var query = {};
query.someField = data.someField;
dataService.setData(query);
$state.go("go.somewhere.else");
}
});
});
}]);
Controller2
app.controller('MyCtrl2', ['$scope', '$location', '$state','dataService',//<-added dependency here
function($scope, $location, $state, dataService) {
$scope.buttonPressed = function() {
console.log(dataService.getData());
}
}]);
var myApp = angular.module('myApp',[]);
myApp.controller('Controller', function($scope, $interval){
$interval(function($scope, $http){
$http.get('test.json').success(function(data){
$scope.notifications = data;
});
},5000);
});
Anyone See what exactly I'm doing wrong? The interval is working correctly, as the error repeats ever 5 seconds in Chrome's Console. Am I passing the $http correctly to the controller?
All Angular module should be injected in the constructor of the controller.
var myApp = angular.module('myApp',[]);
myApp.controller('Controller', function($http, $scope, $interval){
$interval(function(){
$http.get('test.json').success(function(data){
$scope.notifications = data;
});
},5000);
});
You need to inject $http into your controller. (The same way you inject $scope and $interval.) You may be interested to read https://docs.angularjs.org/guide/di.
var myApp = angular.module('myApp',[]);
myApp.controller('Controller', function($scope, $interval, $http){
$interval(function($scope, $http){
$http.get('test.json').success(function(data){
$scope.notifications = data;
});
},5000);
});
Like you injected the $interval service, you need to inject the $http service:
var myApp = angular.module('myApp',[]);
myApp.controller('Controller', function($scope, $interval, $http){
$interval(function($scope, $http){
$http.get('test.json').success(function(data){
$scope.notifications = data;
});
},5000);
});
you need to pass in $http in your controller, as:
var myApp = angular.module('myApp', []).
myApp.controller('ImagesCtrl', ['$scope', '$http', '$interval', function ($scope, $http, $interval) {
$interval(function(){
$http.get('test.json').success(function(data){
$scope.notifications = data;
});
},5000);
}]);
I have variable called "name" in the $scope namespace($scope.name).
I modify this variable from different controllers and from different modules. The code is provided below:
var myApp = angular.module('myApp',['myModule', 'anotherModule']);
var myModule = angular.module('myModule', []);
myModule.controller( 'MyCtrl', [ '$scope', function($scope) {
$scope.name = 'Superhero';
console.log("My module");
} ]);
myModule.controller( 'MyCtrl2', [ '$scope', function($scope){
$scope.name = 'Another hero';
}]);
var anotherModule = angular.module('anotherModule', []);
anotherModule.controller( 'AnotherCtrl', [ '$scope', function($scope){
$scope.name = 'Hero';
console.log("Another Module");
}]);
I expect all of the variables to be synced to the same variable. However, each "name" variable has different values at different controllers.
Why? and how can I make all those same variables to be synced?
Here is the JSFiddle: http://jsfiddle.net/yaprak/3Bc7f/1/
It's because they reside in different scopes. To sync $scope.name to the same value, you need to create a service that holds the value.
By default, controllers can't share data, but controllers and services can.
Update
I updated your fiddle
http://jsfiddle.net/3Bc7f/6/
var myApp = angular.module('myApp',['myModule', 'anotherModule']);
var myModule = angular.module('myModule', ['myFactory']);
myModule.controller( 'MyCtrl', [ '$scope', 'data', function($scope, data) {
$scope.name = data.name;
console.log(data.name);
} ]);
myModule.controller( 'MyCtrl2', [ '$scope', 'data', function($scope, data) {
$scope.name = data.name;
console.log(data.name);
}]);
var anotherModule = angular.module('anotherModule', []);
anotherModule.controller( 'AnotherCtrl', [ '$scope', 'data', function($scope, data) {
$scope.name = data.name;
console.log(data.name);
}]);
angular.module('myFactory', [])
.factory('data',[ function() {
return {
'name': 'John Doe'
};
}])
;
You should use service with two way binding data
var storage = { name : 'Tolya'}
myApp.service('srv', function() {
return storage;
})
http://jsfiddle.net/molo4nik11/3Bc7f/2/
You can use $rootScope instead of $scope. Now all scope of name have hero.
var myApp = angular.module('myApp',['myModule', 'anotherModule']);
var myModule = angular.module('myModule', []);
myModule.controller( 'MyCtrl', [ '$rootScope', function($rootScope) {
$rootScope.name = 'Superhero';
console.log("My module");
} ]);
myModule.controller( 'MyCtrl2', [ '$rootScope', function($rootScope){
$rootScope.name = 'Another hero';
}]);
var anotherModule = angular.module('anotherModule', []);
anotherModule.controller( 'AnotherCtrl', [ '$rootScope', function($rootScope){
$rootScope.name = 'Hero';
console.log("Another Module");
}]);