I have this js code
var app = angular.module('app', []);
app.service('testService', function(){
this.sayHello= function(text){
return "Service says \"Hello " + text + "\"";
};
this.sayGoodbye = function(text){
return "Service says \"Goodbye " + text + "\"";
};
});
app.controller('AboutCtrl', ['testService', function ($scope, $location, $http) {
$scope.fromService = testService.sayHello("World");
$scope.toService = testService.sayGoodbye("World");
}]);
and in my html I have this
....
...
hi {{fromService}}
....
...
There are no errors in console and the page is just blank.
Please take a look at AngularJs Docs "Using Dependency Injection".
The correct way:
app.controller('AboutCtrl', ['$scope', '$location', '$http',
'testService', function ($scope, $location, $http, testService) {
$scope.fromService = testService.sayHello("World");
$scope.toService = testService.sayGoodbye("World");
}]);
You can inject your service to controller by these ways.
Inline Array Annotation
app.controller('MyController', ['$scope', 'testService', function($scope, testService) {
// ...Code here
}]);
$inject Property Annotation
var MyController = function($scope, testService) {
// ...
}
MyController.$inject = ['$scope', 'testService'];
app.controller('MyController', MyController);
Implicit Annotation
app.controller('MyController', function($scope, testService) {
// ...
});
if you want to know which one is preferred then read this Dependency Injection
You're not injecting your service properly.
app.controller('AboutCtrl', ['$scope', '$location', '$http',
'testService', function ($scope, $location, $http, testService) {
$scope.fromService = testService.sayHello("World");
$scope.toService = testService.sayGoodbye("World");
}]);
Also in your HTML you should add ng-app="app" and ng-controller to especify your controller.
<!DOCTYPE html>
<html ng-app="app">
<head></head>
<body ng-controller="AboutCtrl">
<p>Hi {{fromService}}</p>
<!-- Also place here your JS files.-->>
</body>
</html>
Supper easy, Actually you are injecting service wrong place check this:
app.controller('aboutCtrl', function ($scope, $location, $http, testService) {
$scope.fromService = testService.sayHello("World");
$scope.toService = testService.sayGoodbye("World");
});
Related
I have a controller called UserCtrl and it depends on a service called UserService. When the view that uses the controller UserCtrl loads I get an error:
Unknown provider: UserServiceProvider
Here is my service code:
angular.module('UserService', []).service('UserService', ['$rootScope', '$route', '$http', '$filter', function ($rootScope, $route, $http, $filter) {
function loadType() {
var deferred = $q.defer();
$http.get('json/type.json').success(function (response) {
var typeoflaw = response;
}).error(function (status, data) {
console.log("error trapped");
});
deferred.resolve(typeoflaw);
return deferred.promise;
};
}]);
Here is my controller code:
JBenchApp.controller('UserCtrl', ['$scope', '$routeParams', '$http', '$filter', 'UserService',
function ($scope, $routeParams, $http, $filter, UserService) {
// Get the preferences information
UserService.loadType()
.then(function (lawtypes) {
$scope.typeoflaw = lawtypes;
});
$scope.SavePreferences = function () {
};
}]);
What did I do wrong?
EDITED TO SHOW JBenchApp code:
var JBenchApp = angular.module('JBenchApp', [
'ngRoute',
'UserService'
]);
This brings to mind a question that has bugged me. What order do you declare your JS files for angular in the index.html page? Mine are currently:
<script src="../js/angular.min.js"></script>
<script src="../js/angular-route.min.js"></script>
<script src="../js/app.js"></script>
<script src="../js/services.js"></script>
<script src="../js/controllers.js"></script>
<script src="../js/directives.js"></script>
May be try this
angular.module('UserService').controller('UserCtrl', ['$scope', '$routeParams', '$http', '$filter', 'UserService',
function ($scope, $routeParams, $http, $filter, UserService) {
//controller code here
}]);
I already have a code with 2 separate controllers .
Each controller's scope/view has an input text and a span.
All fine.
But Looking at the line with yellow color label(empty at the moment) - which is found within the second controller , I want the value to be the same value from as in first controller .
so I'm expecting the line to be (and changed automatically) :
Value from the FirstController is :First Cntrl
I already know that I need a serivce :
so here is my code :
angular.module('app', [])
.controller("FirstCtrl", ['$rootScope', '$scope', 'myservice', function($rootScope, $scope, myservice)
{
myservice.messageFromCntrl1= this.message;
this.message = "First Cntrl";
}]).controller("SecondCtrl", ['$rootScope', '$scope', 'myservice', function($rootScope, $scope, myservice)
{
this.message = "Second Cntrl";
this.messageFromCntrl1 = myservice.messageFromCntrl1;
}])
.service('myservice', function()
{
this.messageFromCntrl1 = "???";
});
In the first controller I do set
myservice.messageFromCntrl1= this.message;
And in the second controller I do read :
this.messageFromCntrl1 = myservice.messageFromCntrl1;
And in the HTML :
Value from the FirstController is :<span style='color:red;'>{{myservice.messageFromCntrl1}}
But it doesn't work. What am I missing?
JSBIN
I modified your JSBIN, check it here. I believe it behaves now as you want it to.
angular.module('app', [])
.controller("FirstCtrl", ['$rootScope', '$scope', 'myservice', function($rootScope, $scope, myservice)
{
this.message = myservice.messageFromCntrl1;
this.message.data = "First Cntrl";
}]).controller("SecondCtrl", ['$rootScope', '$scope', 'myservice', function($rootScope, $scope, myservice)
{
this.message = "Second Cntrl";
this.messageFromCntrl1 = myservice.messageFromCntrl1;
}])
.service('myservice', function()
{
this.messageFromCntrl1 = {data:""};
});
And in your view
<div ng-controller="FirstCtrl as first">
<input type="text" ng-model="first.message.data">
<h1>{{first.message.data}}</h1>
</div>
<div ng-controller="SecondCtrl as second">
<input type="text" ng-model="second.message">
<h1>{{second.message}} </h1>
Value from the FirstController is:
<span style='color:red;'>{{second.messageFromCntrl1.data}}</span>
</div>
First of all, if you want to keep this value updated between controllers you need to use objects and not simple variables. With objects you operate on references and updates are shared between all references of object.
Second, you tried to access service directly in view. You need to bind service reference to controller's scope.
I've made an edit to your jsbin, tell me if that's what you need
https://jsbin.com/mapuwojocu/1/edit?html,js,output
angular.module('app', [])
.controller("FirstCtrl", ['$rootScope', '$scope', 'myservice',
function ($rootScope, $scope, myservice) {
this.message = "First Cntrl";
this.myservice = myservice;
}
]).controller("SecondCtrl", ['$rootScope', '$scope', 'myservice',
function ($rootScope, $scope, myservice) {
this.message = "Second Cntrl";
this.myservice = myservice;
}
])
.service('myservice', function () {
return {
message: 'Cntrl'
};
});
You can't access service through the view. In addition change all your this to $scope in your controller.
Look at this example:
angular.module('app1', [])
.controller("FirstCtrl", ['$scope', 'myservice', function($scope, myservice)
{
$scope.message = "First Cntrl from code";
myservice.messageFromCntrl1= $scope.message;
}])
.controller("SecondCtrl", ['$scope', 'myservice', function($scope, myservice)
{
$scope.message = "Second Cntrl Code";
$scope.messageFromCntrl1 = myservice.messageFromCntrl1;
}])
.service('myservice', function()
{
this.messageFromCntrl1 = "???";
});
Hi I have created two angulerjs files for same ng-app example.
admin.js
var app = angular.module('arcadminmodule', ['ngTable', 'ui-notification']);
app.controller('ArcAdminController', ['$http', '$scope', '$filter', '$interval', 'ngTableParams', 'Notification', function($http, $scope, $filter, $interval, ngTableParams, Notification) {});
admin1.js
var app = angular.module('arcadminmodule');
app.controller('ArcAdminController', ['$http', '$scope', '$filter', '$interval', 'ngTableParams', 'Notification', function($http, $scope, $filter, $interval, ngTableParams, Notification) {});
But its overriding admin.js from admin1.js
please help me out....
In admin1.js when you write:
var app = angular.module('arcadminmodule');
you are not creating a new module. You are trying to get an existing module named 'arcadminmodule'.. If you want to create a new module, you will have to write something like this:
var app = angular.module('arcadminmodule',[]); // add your depencencies...
Now, In your case, in admin.js you are creating your module and admin1,js you are making use of the same module. In angular you cannot have two controllers with the same name. Controllers are for (from the docs):
Set up the initial state of the $scope object.
Add behavior to the $scope object.
So If you need are trying to apply some roles or some business logic, It need to go into one controller. Make sure your controller contain only the business logic needed for a single view.
I think its no need for use the same controller in two places.But you can use services in places.If you need to do some think different from the ArcAdminController,use this structure.
Services
-service1.js
(function (angular) {
angular.module('marineControllers').service('boatService', function (ajaxService) {
}
)
-service2.js
-module..js
var artistControllers = angular.module('marineControllers',['ngAnimate']);
Controllers
-controller1
(function (angular) {
angular.module('marineControllers').controller("BoatController", ['$scope', '$http', '$routeParams',
'dashboardService', '$filter', 'loginService', '$location', 'boatService', 'autocompleteFactory', 'utilityFactory',
function ($scope, $http, $routeParams, dashboardService, $filter, loginService, $location, boatService, autocompleteFactory, utilityFactory) {
function loadAllFishingBoat() {
$scope.boatsTable.length = 0;
if (!$scope.$$phase)
$scope.$apply();
boatService.getAllBoatAndDevice().then(function (data) {
$scope.boatsTable = data;
if (!$scope.$$phase)
$scope.$apply();
});
};
}]);
})(angular);
-controller2
(function (angular) {
angular.module('marineControllers').controller("DeviceController", ['$scope', '$http', '$routeParams',
'dashboardService', '$filter', 'loginService', '$location', 'deviceService', 'autocompleteFactory', 'utilityFactory','commonDataService',
function ($scope, $http, $routeParams, dashboardService, $filter, loginService, $location, deviceService, autocompleteFactory, utilityFactory,commonDataService) {
function loadAllFishingBoat() {
$scope.boatsTable.length = 0;
if (!$scope.$$phase)
$scope.$apply();
boatService.getAllBoatAndDevice().then(function (data) {
$scope.boatsTable = data;
if (!$scope.$$phase)
$scope.$apply();
});
};
}]);
})(angular);
I have been use many services in both controllers,still they are different logics.
I want to get $scope variable value from "inherited" controller. It works for non-scope var but for scope var prints undefined.
appControllers.controller('parentCtrl', ['$scope', '$rootScope', '$http', '$location', '$log',
function ($scope, $rootScope, $http, $location, $log) {
$scope.someVariable = "Scope hello world.";
$scope.getLocalVariable = function (){
return "hello world";
}
$scope.getScopeVariable = function (){
return $scope.someVariable;
}
}]);
appControllers.controller('childCtrl', ['$scope', '$rootScope', '$http', '$location', '$log',
function ($scope, $rootScope, $http, $location, $log) {
$log.debug($scope.getLocalVariable()); // this WORKS
$log.debug($scope.getScopeVariable()); // this DOES NOT WORKS - prints undefined
}]);
part of .html file
<div ng-controller="parentCtrl">
<div ng-controller="childCtrl">
</div>
</div>
Do you have any idea? I also tried
var app = angular.module('angularjs-starter', []);
app.controller('ParentCtrl ', function($scope) {
// I'm the sibling, but want to act as parent
});
app.controller('ChildCtrl', function($scope, $controller) {
var ctrl = $controller('ParentCtrl', {$scope: $scope});
ctrl.methodCall() // DOES NOT WORK
});
But it did not helped. Thanks
I have 2 controllers defined:
var myApp = angular.module('nestedControllersModule',[]);
myApp.controller('ParentController', ['$scope', function($scope) {
}]);
myApp.controller('ChildController', ['$scope', '$injector', function($scope, $injector) {
$injector.invoke(ParentController, this, {$scope: $scope});
}]);
This gives: ReferenceError: ParentController is not defined.
This code works only if ParentController is defined as:
function ParentController($scope) {}
I am trying to inject the parent in the child as then I can inherit the common functions defined in the parent.
var myApp = angular.module('nestedControllersModule',[]);
myApp.controller('ParentController', ['$scope', function($scope) {
$scope.name = 'ParentName';
$scope.Type = 'ParentType';
$scope.clickme = function() {
alert('This is parent controller "ParentController" calling');
}
}]);
myApp.controller('ChildController', ['$scope', '$injector', '$ParentController', function($scope, $injector, $ParentController) {
$injector.invoke(ParentController, this, {$scope: $scope});
$scope.name = 'Child';
}]);
myApp.controller('ParentController', ['$scope', function($scope) {
}]);
myApp.controller('ChildController', ['$scope', 'ParentController', function($scope, ParentController) {
// ok now you have ParentController
}]);
But I think you need to use Services to share data/functions between Controllers or using PubSub model:
What's the correct way to communicate between controllers in AngularJS?
This reduces coupling between parts of your app.
This is a basic workaround to achieve what you're after:
var myApp = angular.module('nestedControllersModule',[]);
myApp.factory('ParentControllerFactory', function () {
function ParentControllerFactory($scope) {
$scope.name = 'ParentName';
$scope.Type = 'ParentType';
$scope.clickme = function() {
alert('This is parent controller "ParentController" calling');
}
}
return (ParentControllerFactory);
})
.controller('ParentController', ['$scope', '$injector', 'ParentControllerFactory', function ($scope, $injector, ParentControllerFactory) {
$injector.invoke(ParentControllerFactory, this, {
$scope: $scope
});
}])
.controller('ChildController', ['$scope', '$injector', 'ParentControllerFactory', function ($scope, $injector, ParentControllerFactory) {
$injector.invoke(ParentControllerFactory, this, {
$scope: $scope
});
}]);
I say workaround because it's probably worthwhile looking into properly implementing a service to manage any commonality as previously mentioned (or better yet, splitting commonality into directives, clickme for example is a good candidate)
...also note that $injector.invoke(ParentControllerFactory as it is above will most likely chuck a hissy fit if/when you minify your scripts later on, so be careful where and how it used.
Consider using the Mixin pattern possible by using the $controller service.
In your example, you would replace the $injector service with the $controller service:
var myApp = angular.module('nestedControllersModule',[]);
myApp.controller('ParentController', ['$scope', function($scope) {
$scope.name = 'ParentName';
$scope.Type = 'ParentType';
$scope.clickme = function() {
alert('This is parent controller "ParentController" calling');
}
}]);
myApp.controller('ChildController', ['$scope', '$controller', '$ParentController', function($scope, $controller, $ParentController) {
$controller('ParentController',{$scope: $scope})
$scope.name = 'Child';
}]);
This is a good overview of using the $controller service:
http://vadimpopa.com/split-large-angularjs-controllers-using-the-mixin-pattern/