Angular未加載API-First App

Question

我開始使用AngularJS。

我創建了一個小應用程序，該應用程序應使用一些偽值從API中提取數據。 該API可以正常工作，並提供以下JSON（鍵入/ api / employees /）：

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

為了消耗這個，我創建了以下內容：

(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');
};})();

我目前尚未將代碼分成單獨的文件，但確實打算這樣做。 請也給任何建議重命名約定等任何幫助

我有以下部分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>

index.html文件包含：

<!DOCTYPE html>
   <html ng-app="empApp">
       <head>
<meta charset="utf-8" />
<title></title>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-resource/angular-resource.js"></script>
<script src="lib/angular-route/angular-route.js"></script>
<script src="app.js"></script>
       </head>
           <body>
               <h1>Hello Angular JS</h1>

What is 2+2 ?
<br /><br />
Answer = {{2+2}}
<br /><br />
<ng-view></ng-view>
             </body>
     </html>

Angular在表達式確認為4時起作用。但是我沒有從API獲得任何數據。 請幫忙！！

Answer 1

我注意到您在路由定義中有錯字（ cntroller:'EmployeeListController' ）。 （而且我沒有足夠的聲譽發表評論）

Answer 2

精確。 可能您的EmployeeListController從未被錯誤的聲明“ cntroller”實例化，而您的employee變量具有未定義的值。

Answer 3

在經過大量閱讀和瀏覽網頁后，我意識到我尚未將控制器定義為可用於模塊，因此我的代碼應為：

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

感謝您的光臨！

Angular未加載API-First App

問題描述

3 個解決方案

解決方案1
0 2015-06-12 19:22:00

解決方案2
0 2015-06-12 19:33:32

解決方案3
0 2015-06-13 11:36:27

Angular未加載API-First App

問題描述

3 個解決方案

解決方案1 0 2015-06-12 19:22:00

解決方案2 0 2015-06-12 19:33:32

解決方案3 0 2015-06-13 11:36:27

解決方案1
0 2015-06-12 19:22:00

解決方案2
0 2015-06-12 19:33:32

解決方案3
0 2015-06-13 11:36:27