All i am trying to do is call my back-end through an ng-Click and $http.get. I am then trying to set the value of the item i get to show up in my html. Here is my structure. Not really getting any errors so any information on how to see where my code is incorrect would be great. Thanks.
HTML
<head>
<title>Hello</title>
<script src="~/Scripts/profileController.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"> </script>
<section ng-controller="profileController as vm">
<div class="container">
<div style="padding-left:20px; padding-right: 1000px; height:700px;">
<h2>Create Profile</h2>
<img src="app/img/user.png" />
<label for="eventName">UserName: {{vm.newUser.UserName}}</label>
<input id="eventName" ng-model="UserName" type="text" placeholder="Edit User Name" />
<label for="eventName">Name: {{vm.nameName}}</label>
<input id="eventName" ng-model="nameName" type="text" placeholder="Edit Name" />
<label for="eventName">Age: {{vm.age}}</label>
<input id="eventName" ng-model="age" type="text" placeholder="Edit age" />
<label for="eventName">College: {{vm.college}}</label>
<input id="eventName" ng-model="college" type="text" placeholder="Edit college" />
<label for="eventName">City: {{data.city}}</label>
<input id="eventName" ng-model="name" type="text" placeholder="Edit city" />
<a class="btn btn-default btn-lg" ng-click="vm.getUserList()">Register</a>
</div>
</div>
</section>
CONTROLLER/FACTORY
angular.module("app", [])
.controller('profileController', ['$scope', 'profileFactory', function ($scope, profileFactory) {
var vm = this;
this.getUserList = function () {
profileFactory.getUserList($scope).success(function (data) {
$scope.UserList = data;
});
}
}])
.factory('profileFactory', ['$http', '$q', function ($http, $q) {
var urlBase = "/api/saveUser";
var dealerProcessReportSetupFactory = {
getUserList: function () {
return $http.get(urlBase + "/UserList");
}
};
return dealerProcessReportSetupFactory;
}]);
API CONTROLLER
public class profileController : ApiController
{
// GET api/DealerProcessReportSetup
[HttpGet]
[ActionName("saveUser")]
public tblOwl getUserList()
{
using (VSCDevEntities db = new VSCDevEntities())
{
var Owl = (from z in db.tblOwls select z).FirstOrDefault();
return Owl;
}
}
}
Below things are missing
ng-appdirective must be there in on thebody/htmltag likeng-app="app".References should be
Update
As you are using
controllerAssyntax your controller should usethiskeyword, Or atleast you should definegetUserList()method in this keyword as you were usedng-click="vm.getUserList()".Controller