I cannot get access to methods in my Angular Factory? I get "TypeError: Object # has no method 'method1'" error. My angular app looks like this...
myApp.js
var myApp = angular.module('myAngApp', [])
myApp.config(function ($routeProvider, $httpProvider) {
$routeProvider
.when('/list',
{
controller: 'ListController',
templateUrl: 'partials/list.html'
})
.when('/reports/:reportId',
{
controller: 'DetailController',
templateUrl: 'partials/report.html'
})
})
factory.js
myApp.factory('factory1', function(){
var factory = {};
factory.method1 = function() {
console.log('method1');
}
factory.method2 = function() {
console.log('method2');
}
return factory;
});
ListController.js
function ListController($scope, $location, $http, $route, $rootScope, factory1) {
factory1.method1();
}
ListController.$inject = ['$scope', '$location', '$http', '$route', '$rootScope', 'factory1'];
try this...
myApp.controller('ListController', [
'$scope',
'$location',
'$http',
'$route',
'$rootScope',
'factory1',
function ($scope, $location, $http, $route, $rootScope, factory1) {
factory1.method1();
}]);
instead of your current function ListController and the $inject statement
jsfiddle http://jsfiddle.net/NuCZz/
Related
I have easy service in my app.
var app = angular.module("appTest", []);
app.service('AuthService', function ($scope) {
$scope.write = function(){
console.log("service")
};
});
And I want to use it in my controller
var app = angular.module('appTest');
app.controller("LoginController", ['$scope', '$http', '$cookies',
'$cookieStore', '$rootScope', '$location',
function ($scope, $http, $cookies, $cookieStore, $rootScope, $location,
AuthService) {
AuthService.write();
}]);
But I have mistake http://prntscr.com/mckff7
I did my service by any case. Result the same.
I add my service by this way http://prntscr.com/mckgrt
You're not 'injecting' the AuthService into your controller. You're receiving it as an object, but you need to declare it in the array of strings too for it to actually be injected.
Your controller code should look like this:
var app = angular.module('appTest', []);
app.service('AuthService', function ($scope) {
$scope.write = function(){
console.log('hello world');
};
});
app.controller("LoginController", ['$scope', '$http', '$cookies',
'$cookieStore', '$rootScope', '$location', 'AuthService',
function ($scope, $http, $cookies, $cookieStore, $rootScope, $location,
AuthService) {
AuthService.write();
}]);
In the below , roles.js file whenever the onSelect function is called if the role is UserRole i'm navigating user to different page
angular.module('myApp.roles', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/roles', {
templateUrl: 'roles/roles.html',
controller: 'PostsCtrl',
selector: 'roles'
});
$routeProvider.when('/footer', {
templateUrl: 'footer/footer.html',
controller: 'footerCtrl'
});
}])
.controller('PostsCtrl', ['$scope', '$rootScope', '$location', function ($scope,
$rootScope, $log, $location) {
$scope.onSelect = function (A, B, C) {
localStorage.setItem("A", JSON.stringify(A));
localStorage.setItem("B", JSON.stringify(B));
localStorage.setItem("C", JSON.stringify(C));
if (role.roleName === "User Role") {
$rootScope.roles = [];
$location.url("/footer");
} else {
$rootScope.mangoes = JSON.parse(localStorage.getItem("B"));
}
};
}]);
I have defined $location in the controller and added it as parameter in function . When i debugged it then i found that $location is undefined. Error is :Cannot read property 'url' of undefined.
You are missing the order while injecting parameters, remove $log from the parameters,
.controller('PostsCtrl', ['$scope', '$rootScope', '$location' ,function ($scope,
$rootScope, $location) {
I have the following HTML code with directive Angular JS:
<div ng-controller="SongsController">{{genres}}</div>
Controller:
.controller('SongsController', ['$scope', '$http', 'songsService', 'customFunctions', '$timeout', '$activityIndicator', '$confirm', 'genresService', '$filter', 'UploadFilesHash', 'loader', function ($scope, $http, songsService, customFunctions, $timeout, $activityIndicator, $confirm, genresService, $filter, UploadFilesHash, loader) {
genresService.get(function (data) {
$scope.genres = data;
});
}]);
edit: I'm using bootstrap, I think bootstrap tab is causing the
problem
View does not get updated after $scope variable update.
$scope.codeData
if i console the $scope.codeData, i can see the data, but does not render in view.
I have to click twice to get the view render correctly.
is there anything wrong with my code??
Thank you.
config
angular.module('SPAroutes', ['ngRoute', 'SPAcontrollers', 'SPAdirectives'])
.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/admin', {
templateUrl: 'templates/views/admin.html',
controller: 'adminCtrl',
controllerAs: 'admin'
})
$locationProvider.html5Mode(true).hashPrefix('!');
}]);
Controller.js
angular.module('SPAcontrollers', ['ngRoute', 'SPAfactories', 'SPAdirectives']).controller('adminCtrl', ['$scope', '$http', '$location', '$window', '$SPAaccount', function ($scope, $http, $location, $window, $SPAaccount) {
this.dataRetrive = function(category){
$http.get('/ctrls/get/blockCode/header').then(function (res){
$scope.codeData = res.data;
console.log($scope.codeData);
$('#headerTab').tab('show');
}, function (err){
console.log(err);
})
};
}]);
admin.html
{{codeData}}
You are mixing up controllerAs with scope as phil mentioned in his comment on question. Instead of using scope here store values insidethis reference something like this.
angular.module('SPAcontrollers', ['ngRoute', 'SPAfactories', 'SPAdirectives']).controller('adminCtrl', ['$scope', '$http', '$location', '$window', '$SPAaccount', function ($scope, $http, $location, $window, $SPAaccount) {
var admin = this;
this.dataRetrive = function(category){
$http.get('/ctrls/get/blockCode/header').then(function (res){
admin.codeData = res.data;
console.log(admin.codeData);
$('#headerTab').tab('show');
}, function (err){
console.log(err);
})
};
}]);
and inside the view: admin.html
{{admin.codeData}}
here is working plunk for your refernce
I have a problem with the $elementProvider not being found if I try to define a controller on the $state, for example:
.state('tournament', {
url: '/tournament',
controller: 'TournamentController',
templateUrl: '/views/tournaments/index.html'
})
But it works fine if I do it in the template:
<div class="ui form segment" ng-controller="TournamentController">
Any ideas how to make it work with $state?
here is a working declaration of state routes:
var ConfEditorApp = angular.module('ConfEditorApp', ['ngAnimate', 'ui.router']);
ConfEditorApp.run(['$rootScope', '$state', '$stateParams',
function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}]);
ConfEditorApp.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
function ($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise("Index")
$stateProvider
.state('Databases', {
url: '/Databases',
templateUrl: 'Partials/Databases.html',
controller: 'DatabasesSectionCtrl as databasesSection'
});
}]);
and here is the controller declaration:
ConfEditorApp.controller('DatabasesSectionCtrl', ['$state', '$stateParams', '$location', '$scope', '$http', '$window',
function ($state, $stateParams, $location, $scope, $http, $window) {
......
try to check if something is wrong in your code or provide more info so we can checkout