Question

我是在AngularJS的世界里开始的。

我创建了一个小应用程序，它应该从带有一些虚拟值的API中提取数据。 API工作并提供以下JSON（输入/ api / employees /）：

public void renameAndResizeFiles()
{
    string[] fileEntries = Directory.GetFiles(directory);
    int filesNumber = fileEntries.Length;
    myProgressBar.Maximum = filesNumber;
    int i = 1;
    foreach (string oldFileNamePath in fileEntries) {
        // handle file work
        progressBar.Value = i;
        i++;
    }
    progressBar.Value = 0;
}

为了消费这个，我创造了以下内容：

[{"Id":1,"FirstName":"George","LastName":"Lucas"},{"Id":2,"FirstName":"Peter","LastName":"Jackson"},{"Id":3,"FirstName":"Christopher","LastName":"Nolan"}]

我目前还没有将代码分成单独的文件，但确实打算这样做。请提供任何建议重新命名约定等任何帮助表示赞赏

我有以下部分html文件：

(function () {
'use strict';

config.$inject = ['$routeProvider', '$locationProvider'];

angular.module('empApp', [
'ngRoute', 'employeesServices'
]).config(config);

function config($routeProvider, $locationProvider) {
    $routeProvider
    .when('/test', {
        templateUrl: '/Views/test.html',
        controller: 'TestCtrl'
    })
    .when('/', {
        templateUrl: '/Views/list.html',
        cntroller:'EmployeeListController'
    })
    .otherwise({
        redirectTo: '/'
    });

    //$locationProvider.html5Mode(true);
}

angular.module('empApp')
    .controller('TestCtrl', TestCtrl);


// Test Contoller - ngView
TestCtrl.$inject = ['$scope'];

function TestCtrl($scope) {
    $scope.model = {
        message: "This is my app!!!"
    };
};

// Employee List Controller
EmployeeListController.$inject = ['$scope', 'Employee'];

function EmployeeListController($scope, Employee) {
    $scope.employees = Employee.query();
};

// Employees Service
angular
    .module('employeesServices', ['ngResource'])
    .factory('Employee', Employee);

Employee.$inject = ['$resource'];

function Employee($resource) {
    return $resource('/api/employees/:id');
};})();

index.html文件包含：

<div>
<h1>List Employees</h1>
<table class="table table-bordered table-striped">
    <thead>
        <tr>
            <th></th>
            <th>First Name</th>
            <th>Last Name</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="emp in employees">
            <td>
                <a href="/employees/edit/{{emp.Id}}" class="btn btn-default btn-xs">edit</a>
                <a href="/employees/delete/{{emp.Id}}" class="btn btn-danger btn-xs">delete</a>
            </td>
            <td>{{emp.FirstName}}</td>
            <td>{{emp.LastName}}</td>
        </tr>
    </tbody>
</table>

<p>
    <a href="/employees/add" class="btn btn-primary">Add New Employee</a>
</p></div>

Angular的工作方式表达式确认了4.但是我没有得到API的数据。请帮忙!!

Answer 1

我注意到路线定义中有拼写错误（cntroller:'EmployeeListController'）。（我没有足够的评论声誉）

Answer 2

精确。可能你的EmployeeListController从未被错误的声明“cntroller”实例化，你的employees变量有未定义的值。

Answer 3

经过大量的阅读和网页后，我意识到我没有将控制器定义为模块可用，所以我的代码应该是：

angular.module('empApp')
    .controller('TestCtrl', TestCtrl)
    .controller('EmployeeListController', EmployeeListController);

感谢您的期待！

Angular not loading API - First App

3 个答案: