My service:
angular.module('app').factory('keretHttpSrv', function ($http, $state, $scope, $rootScope, $q, $localStorage) {
/*some code*/
return keretHttpService;
})
My controller,
angular.module('app.dashboard')
.controller('DashboardCtrl',
['$scope', 'keretHttpSrv', function ($scope, keretHttpSrv)
{
/*some code*/
}])
I have this error:
Error: $injector:unknown provider
How can I solve this problem?
there is no $scope for a factory
FIX
angular.module('app').factory('keretHttpSrv', function ($http, $state, $rootScope, $q, $localStorage) {
/*some code*/
return keretHttpService;
})
You are adding the 'keretHttpSrv' factory to the 'app' module and adding the 'DashboardCtrl' controller to the 'app.dashboard' module. To access the factory you will have to either inject the 'app' module into 'app.dashboard' when you define it
angular.module('app.dashboard', ['app']);
or put both the factory and the controller in the same module
//first define the module
angular.module('app', []);
angular.module('app').factory('keretHttpSrv', function ($http, $state, $scope, $rootScope, $q, $localStorage) {
/*some code*/
return keretHttpService;
})
angular.module('app')
.controller('DashboardCtrl',
['$scope', 'keretHttpSrv', function ($scope, keretHttpSrv)
{
/*some code*/
}])
do you need to use routing here
you have two option :
angular.module("app",['ngRoute']);
it is lib in angular but the second option is better
2.angular.module("app",['ui.router']);
after you need to config the provider of $state in
angular.module("app",['ui.router']).config(function($stateProvider,...){};
all about ui router u can read here UI ROUTER
and see example here Examples
Related
I want to use the code form this Plunk.
It has a directive:
myApp.directive('fileModel', ['$parse', function ($parse) {
and a service
myApp.service('fileUpload', ['$http', function ($http) {
and the example injects into the controller thusly:
myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){
I have this:
angular
.module('Dashboard')
.controller('DashboardController', DashboardController);
and
function DashboardController($rootScope, $scope, $http,
$interval, $state, $location)
{
But I can't figure out how to inject the file upload into my controller :-(
Try like this. i think your problem is for module name.i define fileUpload service in same module for DashboardController
var myApp = angular.module("yourAppName",[]);
myApp.directive('fileModel', ['$parse', function ($parse) {
...
myApp.service('fileUpload', ['$http', function ($http) {
...
myApp.controller('DashboardController', DashboardController);
function DashboardController($rootScope, $scope, $http,
$interval, $state, $location,fileUpload)
{
What is the correct way to inject a service into a controller in Angular?
I have written a service and i’d like to use it in my controllers. But i keep getting an error. Maybe it would be easy for someone to spot my mistake…
authController.js
(function() {
'use strict';
angular
.module('authApp')
.service('authService', function($auth, $state, $http, $rootScope, envService, $scope) {
// some code
})
.controller('SignupController', SignupController, ['$scope', 'authService’]);
function SignupController($http, $scope, $rootScope, $location, envService, authService) {
// want to use my authService here
}
...
At this point I get the following error :
angular.js:12477 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- authService
What is wrong with the way I have injected authService into my signupController??
Thanks.
You have an error declaring your controller. Declaring a controller with the array syntax receives the name of the controller as a String as first parameter, and an array as a second parameter. The last element of the array must be the a function with all the controller logic. That function must have as many parameters as previous elements in the array itself. In your case it should be something like:
(function() {
'use strict';
angular
.module('authApp')
.service('authService', function($auth, $state, $http, $rootScope, envService, $scope) {
// some code
})
.controller('SignupController', ['$http', '$scope', '$rootScope', '$location', 'envService', 'authService', function ($http, $scope, $rootScope, $location, envService, authService) {
// Use your authService here
}]);
...
You can check the styleguide to write your controllers, services and inject your dependencies in a better way.
i want to test functions in angular js using jasmine. i have created one controller in which one scope function which is given below.
app.controller('NavigationCtrl', ['$scope', '$route', '$rootScope', function ($scope, $route, $rootScope) {
$scope.title="Hello World";
$scope.testMe = function () {
$scope.title = "Welcome";
}
}]);
Also, i want to call above controller function i.e $scope.testMe from another controller using jasmine test case. so, i create another controller and try to call functions from this controller.
app.controller('RunTestCaseCtrl', ['$scope', '$http', '$location', '$route', '$routeParams', '$rootScope', '$timeout', 'MDT_Constant', function ($scope, $http, $location, $route, $routeParams, $rootScope, $timeout, MDT_Constant) {
describe('mycontroller', function () {
beforeEach(module('app'));
it('scopeTestSpec',
inject(function ($controller, $rootScope) {
var $scope = $rootScope.$new();
$controller('NavigationCtrl', {
$scope: $scope
});
$controller.testMe();
expect($scope.title).toEqual('Welcome');
console.log('ok');
}));
});
}]);
this will give the error "module is not defined".
so, how can i call controller method from another controller using jasmine test
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'm trying to create a factory and use it cross routes in each controller but apparently I'm doing something wrong...
The app:
var app = angular.module('sam', ['ngRoute', 'ngGrid', 'ui.bootstrap']);
The factory
app.factory("User",function(){
return {};
});
The routes
// configure our routes
app.config(function($routeProvider) {
$routeProvider
// route for the main page which will direct to the buildings page
.when('/', {
templateUrl : 'web/pages/buildings.html',
controller : 'mainController',
controllerAs : 'buildings'
})
});
The controller
app.controller('mainController', ['$filter', '$http','$log', function($filter, $http, $log, User){
$log.log('hello!!!!!', User);
}]);
This prints : hello!!!!! undefined
you are missing 'User' in your controller.
app.controller('mainController', ['$filter', '$http','$log', **'User',** function($filter, $http, $log, User){
$log.log('hello!!!!!', User);
}]);
You forgot to include User as part of injection array
controller('mainController', ['$filter', '$http','$log', function($filter, $http, $log, User){
Should be:
controller('mainController', ['$filter', '$http','$log','User', function($filter, $http, $log, User){
app.factory("User",function(){
return {
show:function(){
alert('Factory called')
}
};
});
app.controller('mainController', ['$filter', '$http','$log','User', function($filter, $http, $log, User){
//that is the way you can call your factory
// you can call this factory function in any controller by injecting it.
User.show(); //will popup alert window.
}]);