i'm trying to use the $state service to load a particular state i defined. The problem is that i'm getting all kind of errors when trying to do it. I've read about the circular dependencies and also tried the methods provided in other threads of stackoverflow like using:
$injector.get($state)
But it also fails, i'm getting unknown provider $state error. Hope someone can help me...
this is my code:
'use strict';
angular.module("home", ['ui.router', 'home.controllers', 'urlLanguageStorage', 'pascalprecht.translate'])
.config(['$stateProvider', '$translateProvider', '$state',
function($stateProvider, $translateProvider, $state){
$translateProvider.useUrlLoader("home/mensajes");
$translateProvider.useStorage("UrlLanguageStorage");
$translateProvider.preferredLanguage("euk");
$translateProvider.fallbackLanguage("en");
$stateProvider
.state("introduccion", {
url : "/prueba",
templateUrl : "resources/js/home/views/introduccion.html",
controller : "HomeController"
});
$state.go('introduccion');
}]);
'use strict';
angular.module("home.controllers", ['home.services'])
.controller('HomeController', ['$scope', 'HomeService', function($scope, HomeService) {
probar();
function probar(){
$scope.texto = HomeService.prueba().get();
}
}]);
'use strict';
angular.module('home.services',['ngResource'])
.factory('HomeService',function($resource){
return {
prueba: function() {
return $resource('http://192.168.11.6:8080/web/home/prueba');
}
};
});
'use strict';
angular.module('urlLanguageStorage',['ngResource'])
.factory('UrlLanguageStorage', ['$location',function($location){
return {
put : function (name, value) {},
get : function (name) {
return $location.search()['lang']
}
};
}]);
The error i'm getting is the following one:
Failed to instantiate module home due to: Error: [$injector:unpr]
http://errors.angularjs.org/1.5.5/$injector/unpr?p0=%24state
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:6:412
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:43:84
at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:40:344)
at e (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:41:78)
at Object.invoke (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:41:163)
at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:39:321)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:39:445
at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:7:355)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:39:222
You confused with $stateProvider and $state.
$stateProvider is a Provider, and $state is a Service. They are not the same. Short answer: you use $stateProvider at config phase, and use $stateProvider in your controller.
Your error happens because you injected $state service in your .config, which is wrong:
.config(['$stateProvider', '$translateProvider', '$state'
Remove the $state and you are okay:
angular.module("home", ['ui.router', 'home.controllers', 'urlLanguageStorage', 'pascalprecht.translate'])
//take out $state from config phase
.config(['$stateProvider', '$translateProvider', '$state',
function($stateProvider, $translateProvider, $state) {
$translateProvider.useUrlLoader("home/mensajes");
$translateProvider.useStorage("UrlLanguageStorage");
$translateProvider.preferredLanguage("euk");
$translateProvider.fallbackLanguage("en");
$stateProvider
.state("introduccion", {
url: "/prueba",
templateUrl: "resources/js/home/views/introduccion.html",
controller: "HomeController"
});
//remove this line, set this in controller
//$state.go('introduccion');
}
]);
Related
I downloaded Angular-Express-Bootstrap seed from https://github.com/jimakker/angular-express-bootstrap-seed. I would like to perform routing through angular js which is performed perfectly. But now I am facing some problem on calling 'controller' in controllers.js.
I can call my MyCtrl1 by this way and working perfectly:
function MyCtrl1() {
alert('calling Myctrl1..')
}
MyCtrl1.$inject = [];
But whether I call like this:
var app = angular.module('myApp.controllers', []);
app.controller('MyCtrl1', ['$scope', function($scope) {
$scope.greeting = 'MyCtrl1';
alert('calling'+ $scope.greeting+"..")
}]);
The above controller call back function not working and shows this error: Uncaught Error: [$injector:modulerr] MyCtrl1 is not defined
Routing Config in app.js:
var app = angular.module('myApp', ['myApp.filters','myApp.controllers','myApp.services', 'myApp.directives','ngRoute'])
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider)
{
$routeProvider
.when('/view1', {
templateUrl: 'partial/1',
controller: MyCtrl1
})
$locationProvider.html5Mode(true);
}]);
I don't know why it is not working. Any help would be greatly appreciated.
Finally I got the solution, I missed the quotes to the controller name in $routeProvider
Soln : controller: 'MyCtrl1'
if I have the following angularjs code route provider how can I pass through a dependency into the blaCtrl controller please?
Many thanks,
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/bla', { templateUrl: 'bla.html', controller: 'blaCtrl' });
trying to get something like
'use strict';
app.controller('blaCtrl', function ($scope) {
$scope.mydata = ['111', '222', '333']; // how can I change this to be a method call to a dependency, i.e.
$scope.mydata = mydependency.getData(); // example what I need
});
update
My app file looks like this - I'm still not getting the data displayed?
'use strict';
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/application', { templateUrl: 'partials/application.html', controller: 'myCtrl' });
$routeProvider.otherwise({ redirectTo: '/application' });
}]);
controller
'use strict';
app.controller('myCtrl', 'myService', function ($scope, myService) {
debugger; // doesn't get hit?
$scope.stuff = myService.getStuff();
});
console error
- I get this error in the console Error: [ng:areq] http://errors.angularjs.org/1.4.5/ng/areq?p0=applicationCtrl&p1=not%20a%20function%2C%20got%20string
There are 3 ways of dependency annotation according to angular docs.
Inline Array Annotation
In this case your controller defenition should look like:
'use strict';
app.controller('blaCtrl', ['$scope', 'mydependency', function ($scope, mydependency) {
$scope.mydata = mydependency.getData();
}]);
$inject Property Annotation
'use strict';
var blaCtrl = function ($scope, mydependency) {
$scope.mydata = mydependency.getData();
};
blaCtrl.$inject = ['$scope', 'mydependency'];
app.controller('blaCtrl', blaCtrl);
Implicit Annotation
This one you used in your example code to inject $scope variable. Not recommended, minificattion will broke such code.
'use strict';
app.controller('blaCtrl', function ($scope, mydependency) {
$scope.mydata = mydependency.getData();
});
The fact that you reference your controller not in HTML but in routeProvider doesn't make any difference.
You can pass a dependency to the controller from within the controller. You're injecting the $scope dependency already, and you can inject others like $location and $rootScope if you'd like.
I have sample on Angular JS as:
angular.module('wm-admin', []).
config(function($routeProvider) {
$routeProvider.
when('/users', {controller:UsersController, templateUrl:'/public/html/crm/users/list.html'}).
otherwise({redirectTo:'/users'});
});
// Controllers //
function UsersController($scope) {
}
It gives me error:
Uncaught Error: [$injector:modulerr]
So, what I do wrong?
HTML:
<body ng-app="wm-admin">
</body>
I tried also any code:
Angular JS:
(function (angular) {
'use strict';
angular.module('wm-admin', [])
.config(function($routeProvider) {
$routeProvider.
when('/users', {controller:UsersController, templateUrl:'/public/html/crm/users/list.html'}).
otherwise({redirectTo:'/users'});
})
// Controllers //
.controller('UsersController', ['$scope', '$http', function ($scope, $http) {
}])
})(window.angular);
Look please code upper
You haven't injected the controller properly to your app. Add this line:
angular.module('wm-admin').controller('UsersController', UsersController);
EDIT
In your updated question you have this code:
(function (angular) {
'use strict';
angular.module('wm-admin', [])
.config(function($routeProvider) {
$routeProvider.
when('/users', {controller:UsersController, templateUrl:'/public/html/crm/users/list.html'}).
otherwise({redirectTo:'/users'});
})
// Controllers //
.controller('UsersController', ['$scope', '$http', function ($scope, $http) {
}])
})(window.angular);
But now UsersController is no longer a function within the scope of the {controller: UsersController} line. Change it to controller: 'UsersController' (string, not reference to a function):
(function (angular) {
'use strict';
angular.module('wm-admin', [])
.config(function($routeProvider) {
$routeProvider.
when('/users', {controller: 'UsersController', templateUrl:'/public/html/crm/users/list.html'}).
otherwise({redirectTo:'/users'});
})
// Controllers //
.controller('UsersController', ['$scope', '$http', function ($scope, $http) {
}])
})(window.angular);
You never actually made a controller.
angular
.module('wm-admin')
.controller('UsersController', UsersController);
UsersController.$inject = ['$scope'];
function UsersController($scope) {
}
I can't figure out what I'm doing wrong here.
//app.js
'use strict';
var app = angular.module('maq', [
'ui.router',
'maq.home.controller'
]).run([
'$rootScope',
'$state',
'$stateParams', function($rootScope, $state, $stateParams){
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}])
.config([
'$stateProvider',
'$urlRouterProvider', function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'views/home.html',
controller: 'maq.home.controller'
})
}]);
//controller
'use strict';
app
.controller('maq.home.controller', [function(){
}]);
//error
Uncaught Error: [$injector:modulerr] Failed to instantiate module maq due to:
Error: [$injector:modulerr] Failed to instantiate module maq.home.controller due to:
Error: [$injector:nomod] Module 'maq.home.controller' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
You actually do not have a module called maq.home.controller Instead your registration is in such a way that it is the controller name.
If you want to separate your controller to another module (as what you are trying to do)
try:-
angular.module('maq.controller', []); //<-- Module creation
//...
angular.module('maq.controller')
.controller('HomeController', [function() { //<-- Controller registration
}]);
and in your app:-
var app = angular.module('maq', [
'ui.router',
'maq.controller' //<-- Controller mmodule
]);
Or just remove the dependency on the module that does not exist:-
angular.module('maq', [
'ui.router',
//'maq.home.controller' <-- Remove this
])
You are trying to depend on another module named maq.home.controller when it is not a module, it is a controller. You do not need to list controllers as dependencies in your module declaration. So just take that dependency out like so:
var app = angular.module('maq', [
'ui.router'
])
I would like to use proper dependency injection in MyCtrl1to inject the fields of the MyCtrl1.resolve object. I've tried many different combinations of attempting to inject #MyCtrl1.resolve etc. with no luck.
#MyCtrl1 = ($scope, $http, batman, title) ->
$scope.batman = batman.data
$scope.title = title.data
#MyCtrl1.resolve = {
batman: ($http) ->
$http.get('batman.json')
title: ($http) ->
$http.get('title.json')
}
##MyCtrl1.$inject = ['$scope', '$http'] -- commented out because not sure how to inject resolve fields
angular
.module( 'app', [])
.config( ['$routeProvider', '$locationProvider', ($routeProvider, $locationProvider)->
$locationProvider.html5Mode(true)
$routeProvider.when('/', {templateUrl: 'index.html', controller: MyCtrl1, resolve: MyCtrl1.resolve})
$routeProvider.otherwise({redirectTo: '/'})
])
angular.bootstrap(document,['app'])
Resolve is a property of a route and not a controller. Controllers would be injected with dependencies defined on a route level, there is no need to specify resolve properties on a controller.
Taking one of your examples (transformed to JavaScript), you would define your controller as always, that is:
MyCtrl1 = function($scope, $http, batman, title) {
$scope.batman = batman.data;
$scope.title = title.data;
}
and then the resolve property on a route:
angular.module('app', []).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true)
$routeProvider.when('/',{templateUrl: 'index.html', controller: MyCtrl1, resolve: {
batman: ['$http', function($http) {
return $http.get(..).then(function(response){
return response.data;
});
}],
title: ['$http', function($http) {
return //as above
}]
}});
$routeProvider.otherwise({redirectTo: '/'});
}]);
If you want to minify the code using resolve section of routing you need to use array-style annotations - I've included this in the example above.