Post method using Asp.Net WebApi controller with AngularJS - angularjs

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..

Related

$location is not defined in angularjs

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) {

Angularjs view not showing, caused by factory

I have a problem adding factory functions to my AngularJs module.
When I add the 'authInterceptor' factory function to my home view module. The view isn't loading. But when I delete the factory function it does load.
What am I doing wrong?
Home controller
'use strict';
angular.module('myApp.home', ['ngRoute'])
.factory('authInterceptor', function ($rootScope, $q, $window) {
return {
request: function (config) {
config.headers = config.headers || {};
if ($window.sessionStorage.token) {
config.headers.Authorization = 'Bearer ' + $window.sessionStorage.token;
}
return config;
},
responseError: function (rejection) {
if (rejection.status === 401) {
// handle the case where the user is not authenticated
}
return $q.reject(rejection);
}
};
})
.config(['$routeProvider', function($routeProvider, $httpProvider) {
$httpProvider.interceptors.push('authInterceptor');
$routeProvider.when('/', {
templateUrl: 'home/home.html',
controller: 'HomeCtrl'
});
}])
.controller('HomeCtrl', function($scope, $http, $window) {
console.log("Home Controller");
});
general module loader
// public/js/app.js
angular.module('myApp', [
'ngRoute',
'myApp.home'
])
.config(['$locationProvider', '$routeProvider',
function($locationProvider, $routeProvider, $httpProvider) {
$locationProvider.hashPrefix('!');
$routeProvider.otherwise({redirectTo: '/home'});
}])
.run(function($rootScope, $http){
$rootScope.my_message = 'test';
});
The problem is that your factory has a semi-colon, which breaks the following code.
.factory('authInterceptor', function () {
return 'a12345654321x';
}); //<==== remove this semicolon
//otherwise this breaks
.config(['$routeProvider', function($routeProvider, $httpProvider) {
//etc
}])
Edit for your second problem: You are missing the $httpProvider in your dependencies.
.config(['$routeProvider', function($routeProvider, $httpProvider
=>
.config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider

Controller not calling in AngularJS

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) {
});

How to use ng-route with resolve without ng-view in template?

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.

Access Angular Factory through Injection

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/

Resources