Angular controller is not invoked even with ng-app and ng-controller declaration

user_8749287 0
Viewed 46

I am creating a web api with angular. I get a problem in my HTML code. If I just invoke the web api, I get the needed data, but when I try to print it out in my HTML, I do not get the result. Please check my codes below.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Angular CRUD</title>

    <link href="Content/bootstrap.css" rel="stylesheet"/>

    <script src="Scripts/angular.js"></script>
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script src="Scripts/bootstrap.js"></script>

    <script>

        var app = angular.module('myApp', [])

        app.controller("EmployeeCtrl", function ($scope, $http) {
            getEmployees();
            var getEmployees = function () {

                alert("SDFS");
                $http.get('/api/Employee')
                .then(function (response) {
                    $scope.Employee = response.data
                },
                function () {
                    alert("Error in retrieving data");
                })
            }
        })
    </script>
</head>
<body ng-app="myApp" ng-contoller="EmployeeCtrl">
    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>Employee ID</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Employee Code</th>
                <th>Position</th>
                <th>Office</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in Employee">
                <td>{{item.EmployeeId}}</td>
                <td>{{item.FirstName}}</td>
                <td>{{item.LastName}}</td>
                <td>{{item.EmployeeCode}}</td>
                <td>{{item.Position}}</td>
                <td>{{item.Office}}</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

You will notice that I even created an alert to check if the function is invoked but apparently it is not invoked. Can you please help. Thank you.

angularjs
2 Answers

You have two issues with your code:

  1. You have misspelled ng-controller.
  2. You can not use the function before definition when creating function as a variable i.e. var funcName = function () { ... }. Change that to function getEmployees () { ... }

Solve these and it would work!

user_43153800

js code execute line by line you invoke your function before declare it try this code instead of your controller:

<script>
        var app = angular.module('myApp', [])

        app.controller("EmployeeCtrl", function ($scope, $http) {
            getEmployees();
            var getEmployees=function() {

                alert("SDFS");
                $http.get('/api/Employee')
                .then(function(response) {
                    $scope.Employee = response.data
                },
                function() {
                    alert("Error in retrieving data");
                })
            }
        })
    </script>
user_41442550
Related