Angular Structure Incorrect Somewhere

Question

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;

        }

    }
}

have you been able to step through the code if so what line is causing the issue that you are seeing..? — MethodMan, Jun 16 '15 at 19:49
This is another reason i cant figure this one out, how do you step through an ng-Click? — Zingo, Jun 16 '15 at 19:58
@Zingo look at mine answer..that would help you..to make ng-click working.. — Pankaj Parkar, Jun 17 '15 at 07:00

Pankaj Parkar · Accepted Answer · 2015-06-16T20:24:09.870

Below things are missing

ng-app directive must be there in on the body/html tag like ng-app="app".
Scripts should be loaded in header of your page.
You must be loading angular.js before loading any other file which is using angular object

References should be

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="~/Scripts/profileController.js"></script>

Update

As you are using controllerAs syntax your controller should use this keyword, Or atleast you should define getUserList() method in this keyword as you were used ng-click="vm.getUserList()".

Controller

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

Angular Structure Incorrect Somewhere

1 Answers1