I have a service:
angular.module('TestApp')
.service('Test', ['$http', '$localStorage', function($http, $localStorage) {
var baseUrl = "http://test.com";
return {
tests: function(success, error) {
$http.get(baseUrl + '/tests').success(success).error(error)
}
}
}]);
I have a controller:
angular.module('TestApp')
.controller('TestController', ['$rootScope', '$scope', Test, function($rootScope, $scope, Test) {
Merchant.terminal(function(res) {
$scope.tests= res;
}, function() {
$rootScope.error = 'Failed to fetch details';
});
}]);
Then in the app.js I use resolve to get the files:
$stateProvider.state('test', {
url: "/test",
templateUrl: "views/test.html",
data: {pageTitle: 'Test Search'},
controller: "TestController",
resolve: {
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load({
name: 'TestApp',
insertBefore: '#ng_load_plugins_before',
files: [
'scripts/controllers/TestController.js',
'scripts/services/testService.js',
]
});
}]
}
});
But I get this error:
Uncaught ReferenceError: Test is not defined
Try changing your controller definition from:
angular.module('TestApp')
.controller('TestController', ['$rootScope', '$scope', Test,
function($rootScope, $scope, Test) { ... }
to:
angular.module('TestApp')
.controller('TestController', ['$rootScope', '$scope', 'Test',
function($rootScope, $scope, Test) { ... }
Note the 'Test' in the list of dep injections...
You are missing an '' while name Service in your controller , since it is a string.
From
angular.module('TestApp')
.controller('TestController', ['$rootScope', '$scope', Test, function($rootScope, $scope, Test)
To
angular.module('TestApp')
.controller('TestController', ['$rootScope', '$scope', 'Test', function($rootScope, $scope, Test)
Also Put the service up the order before you load the controller
'scripts/services/testService.js'
'scripts/controllers/TestController.js'
Put service file before controller
'scripts/services/testService.js',
'scripts/controllers/TestController.js'
Injector should be a string
['$rootScope', '$scope', 'Test', function
Related
I am facing problem in call to controller in child ui state router.
URL is changing but controller not call.
no console error*
Please check code:
HTML
<a style="cursor: pointer;" class="btn btn-default btn-xs" ui-sref="interactions.details({id:n.id})">Detail</a>
Router
.state('interactions', {
url: '/interactions',
data: {
pageTitle: 'Interaction',
IsLoginPage: false
},
templateUrl: '../../modules/interaction/views/interaction.html',
controller: 'interactionCtl'
})
.state('interactions.details', {
url:'/details/:id',
data: {
pageTitle: 'Interaction Details',
IsLoginPage: false
},
templateUrl: '../../modules/interaction/views/interactionDetail.html',
controller:'interactionCtlDetails'
}).run(function ($rootScope, settings, $cookies, $http, $location, AuthenticationService, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
});
Controller
warApp.controller('interactionCtlDetails', ["$scope", '$rootScope','$stateParams', 'settings', 'categoryService', 'blockUI',
function ($scope, interactionService, $rootScope, $stateParams ,settings, categoryService, blockUI) {
var id = $stateParams.id;
console.log(id);
});
Annotation array should be in sync with the parameters in the function declaration.Here annotation array is not in sync with the parameters in the function declaration.
Second parameter in your annotation array is 'interactionService' but in function, thats 'rootScope'.
Try with below controller code
warApp.controller('interactionCtlDetails', ['$scope', '$rootScope', '$stateParams', 'settings', 'categoryService', 'blockUI',
function ($scope, $rootScope, $stateParams ,settings, categoryService, blockUI) {
var id = $stateParams.id;
console.log(id);
});
warApp.controller('interactionCtlDetails', ["$scope", '$rootScope','$stateParams', 'settings', 'categoryService', 'blockUI',
function ($scope, interactionService, $rootScope, $stateParams ,settings, categoryService, blockUI) {
var id = $stateParams.id;
console.log(id);
});
In above code you have function ($scope, interactionService, $rootScope, $stateParams ,settings, categoryService, blockUI) where you have interactionService which you have missed in your injection section
Simpler example of routing, maybe you can narrow down the problem by adding one controller at a time and build the rest. Fiddle or error will help.
angular.module('myApp').config(function ($stateProvider){
$stateProvider
.state('form', {
url:"/form",
views: {
"listColumn": {
templateUrl: "/form1.html",
controller:'myController1'
},
"formColumn": {
templateUrl: "/form2.html"
}
}
})
});
Definitely your controller should throw an error in console, the order of dependency parameters injected in the controller is wrong, you are missing interactionService
change it as,
warApp.controller('interactionCtlDetails', ["$scope", 'interactionService','$rootScope','$stateParams', 'settings', 'categoryService', 'blockUI',
function ($scope, interactionService, $rootScope, $stateParams ,settings, categoryService, blockUI) {
});
I'm getting unknown state provider: editProvider <- edit <- FooController in my code:
var app = angular.module('myApp', ['ui.router']);
app.handler.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('edit', {
url: '/foo/edit',
resolve: {
values: ['FooService',
function (FooService) {
return FooService.getSomeData();
}]
},
templateUrl: '',
controller: 'FooController'
});
}]);
app.controller('FooController', ['$scope', '$http', '$state', 'FooService', 'edit', function ($scope, $http, $state, FooService, edit) {
console.log(edit.data);
}]);
The error appears inside the controller code - what's wrong?
I have AngularJS JavaScript code with a routing:
.when("/home/:id", {
templateUrl: " ",
controller: "TestController",
resolve: {
message: function(app, helpers, $route){
console.log($route);
return app.get({
user: 533,
id: 2
}).then(function (response) {
console.log($route);
return helpers.toArray(response.app);
});
}
}
});
My HTML link as:
Click
Also my TestController is:
.controller('TestController', ['$scope', '$http', '$routeParams', 'message', function ($scope, $http, $routeParams, message) {
$scope.appointments = message;
}])
When I try to get $route in resolve like as:
console.log($route);
I get nothing.
Problem : I am not able to load the angular-loading-bar using lazy load and ui.route.
Am I missing something ?
This is how my config.lazlyload.js file looks like :
// lazyload config
angular.module('app')
// oclazyload config
.config(['$ocLazyLoadProvider',
function($ocLazyLoadProvider) {
// We configure ocLazyLoad to use the lib script.js as the async loader
$ocLazyLoadProvider.config({
debug: false,
events: true,
modules: [{
name: 'ngGrid',
files: [
'vendor/modules/ng-grid/ng-grid.min.js',
'vendor/modules/ng-grid/ng-grid.min.css',
'vendor/modules/ng-grid/theme.css'
]
}, {
name: 'angular-loading-bar',
files: [
'vendor/modules/angular-loading-bar/loading-bar.min.js',
'vendor/modules/angular-loading-bar/loading-bar.min.css'
]
}]
});
}
]);
This is my config.router.js :
'use strict';
/**
* Config for the router
*/
angular.module('app')
.run(
['$rootScope', '$state', '$stateParams',
function($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}
]
)
.config(
['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider
.otherwise('/access/signin');
$stateProvider
.state('access.test', {
url: '/test/me',
templateUrl: 'tpl/test.html',
controller: 'testController',
resolve: {
deps: ['$ocLazyLoad',
function($ocLazyLoad) {
return $ocLazyLoad.load('ui.select', 'angular-loading-bar').then(
function() {
return $ocLazyLoad.load('js/controllers/test.js');
}
);
}
]
}
})
}
]
);
My controller is :
'use strict';
/* Controllers */
app.controller('testController', ['$scope', '$http', '$state', '$stateParams',
function($scope, $http, $state, $stateParams) {
//assuming this should start the loader
$scope.start();
var path = 'js/app/largeJson.json';
var mails = $http.get(path).then(function(resp) {
return resp;
//this shall end the loader
$scope.complete()
});
}
]);
You complete function will never get called because you returned a data then you wrote $scope.complete(), you should write that $scope.complete() function before returning data.
CODE
app.controller('testController', ['$scope', '$http', '$state', '$stateParams',
function($scope, $http, $state, $stateParams) {
//assuming this should start the loader
$scope.start();
var path = 'js/app/largeJson.json';
var mails = $http.get(path).then(function(resp) {
//this shall end the loader
$scope.complete();
return resp;
});
}
]);
Update
if you wish to use the loading bar without the interceptor, you can do that as well. Simply include the loading bar service as a dependency instead of the main angular-loading-bar module:
angular.module('myApp', ['cfp.loadingBar'])
Then your controller will have the start & complete methods which will internally call cfpLoadingBar methods
Controller
app.controller('testController', ['$scope', '$http', '$state', '$stateParams', cfpLoadingBar,
function($scope, $http, $state, $stateParams, cfpLoadingBar) {
$scope.start = function() {
cfpLoadingBar.start();
};
$scope.complete = function () {
cfpLoadingBar.complete();
};
//assuming this should start the loader
$scope.start();
var path = 'js/app/largeJson.json';
var mails = $http.get(path).then(function(resp) {
//this shall end the loader
$scope.complete();
return resp;
});
}
]);
For more info take a look at Github page
Hope this could help you, Thanks.
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/