Related
Angular controller code:
(function ()
{
myApp.controller("LoginController", function ($scope, $http, $location, $window) {
$scope.Emp = {};
console.log("cont");
$scope.Submit = function (Emp) {
console.log("inside", $scope.Emp);
$http({
method: "POST",
url: '#/Test/Login',
data: $scope.Emp,
})
.then(function successCallback(response) {
console.log("response", response.data);
//$window.location.href = '/Home/Display';
if (response.data == "CORRECT UserName and Password") {
console.log("if condition")
$window.location.href = '/Test/Display';
}
else if (response.data == "INCORRECT UserName") {
alert("INCORRECT UserName or Password");
}
})
}
$scope.Register = function () {
$window.location.href = '/Test/Register';
}
});
})(angular.module('myApp'));
Angular Module Code:
var myApp = angular.module('myapp', ['ngRoute']);
app.config('$StateProvider', '$UrlRouteProvider','$scope', '$LogProvider', '$http', '$location', '$window',
function ($StateProvider, $UrlRouteProvider, $scope, $http, $location, $window)
{
$UrlRouteProvider.otherwise("/Login");
$StateProvider
.state('Login'),{
url:'/Login',
views:{
'#':{
templateUrl: "/Views/Home/Login.cshtml",
controller: 'LoginController'
}
}
}})
You only declared but didn't inject $LogProvider in config after $scope. Declaration and injection have to be same and in exact order as well.
It should be like :
app.config('$StateProvider', '$UrlRouteProvider', '$scope', '$LogProvider', '$http', '$location', '$window',
function ($StateProvider, $UrlRouteProvider, $scope, $LogProvider, $http, $location, $window)
{
$UrlRouteProvider.otherwise("/Login");
$StateProvider
.state('Login'),{
url:'/Login',
views:{
'#':{
templateUrl: "/Views/Home/Login.cshtml",
controller: 'LoginController'
}
}
}})
also there is # in your url: '#/Test/Login', check if you need it.
further, as per your code in question, it seems you don't require these much dependencies in config. In your code, I don't see any use of $scope, $LogProvider, $http, $location, $window..
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 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
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 am using angular-ui-router's resolve to get data from server before moving to a state. Sometimes the request to the server fails and I need to inform the user about the failure. If I call the server from the controller, I can put then and call my notification service in it in case the call fails. I put the call to the server in resolve because I want descendant states to wait for the result from the server before they start.
Where can I catch the error in case the call to the server fails? (I have read the documentation but still unsure how. Also, I'm looking for a reason to try out this new snippet tool :).
"use strict";
angular.module('MyApp', ["ui.router"]).config([
"$stateProvider",
"$urlRouterProvider",
function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/item");
$stateProvider
.state("list", {
url: "/item",
template: '<div>{{listvm}}</div>' +
'<a ui-sref="list.detail({id:8})">go to child state and trigger resolve</a>' +
'<ui-view />',
controller: ["$scope", "$state", function($scope, $state){
$scope.listvm = { state: $state.current.name };
}]
})
.state("list.detail", {
url: "/{id}",
template: '<div>{{detailvm}}</div>',
resolve: {
data: ["$q", "$timeout", function ($q, $timeout) {
var deferred = $q.defer();
$timeout(function () {
//deferred.resolve("successful");
deferred.reject("fail"); // resolve fails here
}, 2000);
return deferred.promise;
}]
},
controller: ["$scope", "data", "$state", function ($scope, data, $state) {
$scope.detailvm = {
state: $state.current.name,
data: data
};
}]
});
}
]);
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
<div ng-app="MyApp">
<ui-view />
</div>
Old question but I had the same problem and stumbled on this in ui-router's FAQ section
If you are having issues where a trivial error wasn't being caught
because it was happening within the resolve function of a state, this
is actually the intended behavior of promises per the spec.
errors within resolve.
So you can catch all resolve errors in the run phase of your app like this
$rootScope.$on('$stateChangeError',
function(event, toState, toParams, fromState, fromParams, error){
// this is required if you want to prevent the $UrlRouter reverting the URL to the previous valid location
event.preventDefault();
...
})
The issue is that if any of the dependencies in the route resolve is rejected, the controller will not be instantiated. So you could convert the failure to data that you can detect in the instantiated controller.
Example Pseudocode:-
data: ["$q", "$timeout","$http", function ($q, $timeout, $http) {
return $timeout(function () { //timeout already returns a promise
//return "Yes";
//return success of failure
return success ? {status:true, data:data} : {status:false}; //return a status from here
}, 2000);
}]
and in your controller:-
controller: ["$scope", "data", "$state", function ($scope, data, $state) {
//If it has failed
if(!data.status){
$scope.error = "Some error";
return;
}
$scope.detailvm = {
state: $state.current.name,
data: data
};
If you are making an $http call or similar you can make use of http promise to resolve the data always even in case of failure and return a status to the controller.
Example:-
resolve: {
data: ["$q", "$timeout","$http", function ($q, $timeout, $http) {
return $http.get("someurl")
.then(function(){ return {status:true , data: "Yes"} },
function(){ return {status:false} }); //In case of failure catch it and return a valid data inorder for the controller to get instantated
}]
},
"use strict";
angular.module('MyApp', ["ui.router"]).config([
"$stateProvider",
"$urlRouterProvider",
function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/item");
$stateProvider
.state("list", {
url: "/item",
template: '<div>{{error}}</div><div>{{listvm}}</div>' +
'<a ui-sref="list.detail({id:8})">go to child state and trigger resolve</a>' +
'<ui-view />',
controller: ["$scope", "$state", function($scope, $state){
$scope.listvm = { state: $state.current.name };
}]
})
.state("list.detail", {
url: "/{id}",
template: '<div>{{detailvm}}</div>',
resolve: {
data: ["$q", "$timeout","$http", function ($q, $timeout, $http) {
return $http.get("/").then(function(){ return {status:true , data: "Yes"} }, function(){ return {status:false} })
}]
},
controller: ["$scope", "data", "$state", function ($scope, data, $state) {
$scope.detailvm = {
state: $state.current.name,
data: data.status ? data :"OOPS Error"
};
}]
});
}
]);
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script data-require="angular-ui-router#*" data-semver="0.2.10" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<div ng-app="MyApp">
<ui-view></ui-view>
</div>