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?
Related
I have this code:
app.js
var promptoWeb = angular.module('promptoWeb', ['ngMaterial', 'ngAnimate', 'ngMessages',
'ngAria', 'ui.router', 'ui.sortable', 'ngFileUpload']);
(function (app) {
app.factory('env', function () {
var domain = {domain: "http://localhost:8860/Elton"};
return domain;
});
app.config(['$stateProvider', '$urlRouterProvider', '$compileProvider',
function ($stateProvider, $urlRouterProvider, $compileProvider) {
self = this;
$compileProvider.preAssignBindingsEnabled(true);
$urlRouterProvider.otherwise('/');
$stateProvider.state('home', {
url: '/',
template: '<home-component></home-component>',
component: 'homeComponent',
params: {
selectedFilter: undefined
},
resolve: {
ldapGroup: function (authorizationService) {
return authorizationService.getLdapGroup() === 'WazeAdOps';
}
}
})
}]);
})(promptoWeb);
and home-component.js
(function (app) {
app.component('homeComponent', {
templateUrl: 'partials/home-partial.html',
controller: ['$scope', '$state', function ($scope, $state, ldapGroup) {
var self = this;
self.isFullList = false;
self.ldapGroup = ldapGroup;
self.addVoice = function () {
$state.go("add");
};
$scope.$broadcast('searchNoFilter');
}]
});
})
(promptoWeb);
why do i get an error in home-component that `ldapGroup is undefined?
and if I change to:
(function (app) {
app.component('homeComponent', {
templateUrl: 'partials/home-partial.html',
controller: ['$scope', '$state', 'ldapGroup',function ($scope, $state, ldapGroup) {
I get an error:
Error: [$injector:unpr] Unknown provider: ldapGroupProvider <- ldapGroup
I have also tried:
(function (app) {
app.component('homeComponent', {
templateUrl: 'partials/home-partial.html',
bindings: {
ldapGroup: '<'
},
controller: ['$scope', '$state', function ($scope, $state) {
var self = this;
self.isFullList = false;
$scope.isAdOps = !self.ldapGroup? true : self.ldapGroup;
I get self.ldapGroup === undefined
why do i get an error in home-component that ldapGroup is undefined?
Because you've told Angular to inject $scope and $state, so the third argument of the function is undefined.
controller: ['$scope', '$state', function ($scope, $state, ldapGroup)
I get an error:
Error: [$injector:unpr] Unknown provider: ldapGroupProvider <- ldapGroup
Because there is no service named ldapGroup. ldapGroup is a resolve of your state, which can be injected into the controller of that state. But your state has no controller. It has a component.
How to use components, and how resolves are bound to inputs of the component, is described in the documentation
When I was load state using ui-serf my css, js angular js file not load they give me error Uncaught SyntaxError: Unexpected token < in angular js 1 but in normally means without ui-sref means using states they load my hole html page with css and all file using state.go
my code is
module-
var Fishmart = angular.module('Fishmart', ['oc.lazyLoad', 'ui.router',
'ui.bootstrap', 'LocalStorageModule', 'slickCarousel']);
controller -
Fishmart.controller('productZoomController', ['$scope', 'ApiCall',
'$rootScope', '$state', '$stateParams', '$timeout', 'myStorageService', '
$ocLazyLoad',
function ($scope, ApiCall, $rootScope, $state, $stateParams, $timeout,
myStorageService, $ocLazyLoad) {
var Code = $stateParams.ID;
}]);
my config file is
Fishmart.config(['$ocLazyLoadProvider',
'localStorageServiceProvider','$stateProvider', '$urlRouterProvider',
'$locationProvider',
function ($ocLazyLoadProvider, localStorageServiceProvider, $stateProvider,
$urlRouterProvider, $locationProvider)
{
$urlRouterProvider.otherwise('/index');
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
$stateProvider
.state('indexbody', {
url: '/index',
controller: 'indexBodyController',
templateUrl: 'angular_views/Index/indexbody.html',
resolve: {
loadMyFile: function ($ocLazyLoad) {
return $ocLazyLoad.load({
name: 'Fishmart',
files: ['angular_scripts/controllers/indexBodyController.js']
})
}
}
}).state('menudetails', {
url: '/menudetails/:ID',
controller: 'productZoomController',
templateUrl: 'angular_views/ProductDetails/productzoom.html',
resolve: {
loadMyFile: function ($ocLazyLoad) {
return $ocLazyLoad.load({
name: 'Fishmart',
files: ['angular_scripts/controllers/productZoomController.js'
, 'assets/css/xzoom.css'
, 'assets/js/xzoom.js']
})
}
}
});
HTML CODE
<a ui-sref="menudetails({ID:data.ProductCode})" href="#" class="btn btn-
outline-primary btn-lg"><span>Order now !</span></a>
please tell me whats wrong
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
While implementing a modal for dialog boxes I am getting Error: [ng:areq] Argument 'ModalInstanceCtrl' is not a function, got undefined. I have two controllers in the same .js file. The error shows up the name of the second controller.
ng-app is contained in main html file.
<div ng-app = "LoginApp">
<div ng-view>
<!-- partial will go here -->
</div>
</div>
Angular routes
var LoginApp = angular.module('LoginApp', ['ngResource', 'ngRoute', 'ui.bootstrap'])
LoginApp.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {controller: LoginCtrl, templateUrl: '/js/templates/login.html'})
.otherwise({redirectTo: '/'})
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
})
LoginCtrl.js file
'use strict'
var LoginCtrl = ['$scope', '$modal', '$log', function($scope, $modal, $log) {
$scope.authenticate = function(){
var loginModal = $modal.open({
templateUrl: 'login-modal.html',
controller: 'ModalInstanceCtrl',
resolve: {
modalData: function () {
return {
user: {
name: '',
password: ''
}
};
}
}
});
loginModal.result.then(function (user) {
$log.info("My name is:" + user.name);
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
}
}];
var ModalInstanceCtrl = ['$scope', '$modalInstance', 'modalData', function($scope, $modalInstance, modalData){
}];
In the LoginCtrl.js file, LoginCtrl doesn't shows up this error but the declaration of ModalInstanceCtrl is undefined. Could anyone let me know why is this happening.
In the param of $modal.open(), change from this:
...
controller: 'ModalInstanceCtrl',
...
To this:
...
controller: ModalInstanceCtrl,
...
Notice, no quotes for the name of the controller, because you want AngularJS to use the ModalInstanceCtrl variable, not a controller registered with angular.
Alternatively, if you want to keep the quotes, you can register ModalInstanceCtrl with AngularJS, like this:
LoginApp.controller('ModalInstanceCtrl', ['$scope', '$modalInstance', 'modalData', function($scope, $modalInstance, modalData){
...
}]);
Either way will work.
I have the following in my app.js:
var app = angular.module('app', ['admin', 'ui.compat', 'ngResource', 'LocalStorageModule']);
app.config(['$stateProvider', '$locationProvider',
function ($stateProvider, $locationProvider) {
$locationProvider.html5Mode(true);
var home = {
name: 'home',
url: '/home',
views: {
'nav-sub': {
templateUrl: '/Content/app/home/partials/nav-sub.html',
}
}
};
$stateProvider.state(home)
}])
.run(['$rootScope', '$state', '$stateParams', function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$state.transitionTo('home');
}]);
in admin.js:
angular
.module('admin', ['ui.state'])
.config(['$stateProvider', '$locationProvider',
function ($stateProvider, $locationProvider) {
$locationProvider.html5Mode(true);
var admin = {
name: 'admin',
url: '/admin',
views: {
'nav-sub': {
templateUrl: '/Content/app/admin/partials/nav-sub.html',
}
}
};
var adminContent = {
name: 'admin.content',
parent: admin,
url: '/content', views: {
'grid#': {
templateUrl: '/Content/app/admin/partials/content.html',
controller: 'AdminContentController'
}
}
}
$stateProvider.state(admin).state(adminContent)
}])
I am confused about how to wire up my AdminContentController. Currently I have the following:
app.controller('AdminContentController',
['$scope', 'entityService', 'gridService', 'gridSelectService', 'localStorageService',
function ($scope, entityService, gridService, gridSelectService, localStorageService) {
$scope.entityType = 'Content';
Can someone verify if this is the correct way for me to set up my module and add it to app. Should I be adding the controller to the app:
app.controller('AdminContentController',
or should this belong to the module 'admin'. If it should then how should I wire it up?
Based on what you have shared, the the controller should be created on admin module such as
var adminModule=angular.module('admin'); // This syntax get the module
adminModule.controller('AdminContentController',
['$scope', 'entityService', 'gridService', 'gridSelectService', 'localStorageService',
function ($scope, entityService, gridService, gridSelectService, localStorageService) {
$scope.entityType = 'Content';
You could also define the controller in continuation of your admin module declaration.
Yes that would work angular.module('admin') works as a getter. So you'll get the same module in each file.